《网页设计与制作》课程实验实训指导书

《网页设计与制作》课程实验实训指导书课程编码：060303课程名称：网页设计与制作课程学分：4计划课时：68，理论：26实践：42课程类别：理论课理论实践一体√实践适用专业：计算机网络技术、计算机应用技术、信息管理、动漫设计与制作先修课程：网页动画设计与制作、图形图像处理后继课程：程序设计制订人：审核人：批准人：负责人：17《网页设计与制作》课程实验实训指导书一、课程基本信息课程编码：060303课程名称：网页设计与制作课程学分：4计划课时：68，理论：26实践：42课程类别：理论课理论实践一体√实践适用专业：计算机网络技术、计算机应用技术、信息管理、动漫设计与制作先修课程：网页动画设计与制作、图形图像处理后继课程：程序设计制订人：审核人：批准人：负责人：二、课程任务和目的该课程是计算机网络技术、计算机应用技术专业的核心课程，也是动漫设计、信息管理专业的必修课程，它的目标是从职业技术教育的特点出发，培养学生实际动手制作网页与管理网站的能力，使学生具备网页设计与制作、网站规划与维护的实践技能，以便形成良好的计算机网页制作与网站管理职业素养。学生毕业后可胜任网站管理员、网页设计师、网页美工师等工作岗位，并可不断提升岗位工作能力。它要以计算机基础、网页动画设计与制作、图形图像处理课程的学习为基础，也是进一步学习程序设计课程的基础。三、实验实训项目内容与学时分配（表格可根据内容调整宽度和增加行数）序号项目名称实验（实训）名称实验（实训）内容学时实验类型实验要求1项目一个人网站的设计与制作实训一认识与策划个人网站1.确定网站主题2．确定网站风格3．规划网站内容2设计型必修实训二创建站点并制作网页1．建立文件夹2．建设站点3.制作子页4.制作首页5.制作网页图片素材4综合型必修实训三创建网站相册、创建超链接1.创建网站相册2.创建首页中的文字链接3.创建电子邮件链接2综合型必修2项目二电子商实训一认识与策划电子商务类策划电子商务类网站1设计型必修2务网站设计与制作网站实训二首页的布局设计1.创建站点2.绘制布局单元格3.使用表格进行布局的细化1综合型必修实训三制作网站Logo与页面图片1.制作网站Logo2.制作顶部导航图片3.制作菜单导航图片4.制作顶部广告图片5.制作左边小图标6.制作书籍图片4综合型必修实训四制作首页制作首页2综合型必修实训五添加CSS样式表添加CSS样式表2综合型必修3项目三学校类网站设计与制作实训一认识与策划学校类网站1.确定网站风格特色2.划分网站所要包含的项目3.绘制网站的结构图4.绘制首页布局草图2设计型必修实训二建立站点与布局首页1.创建站点2.首页整体布局3.设置网页的页眉和导航栏4.设置网页的连接区5.设置网页的主内容区6.设置网页的页脚7.设置网页的CSS样式4综合型必修实训三使用库元素创建网页1.库元素的创建2.库元素的使用3.库元素的编辑2综合型必修实训四制作导航栏所连接的网页1.创建“本系介绍”网页2.创建其他导航栏所要链接的网页3.编辑库元素在导航栏部分的超链接2综合型必修实训五使用模板创建网页1.模板的创建2.设置可编辑区域3.应用模板4.更新模板内容2综合型必修4项目四企业类网站设计与制作实训一认识与策划企业网站策划企业网站1实训二切割页面效果图1.创建站点2.页面布局3.添加首页的部分元素1实训三制作网页Banner1.利用Flash制作网页Banner2.在页面中插入Banner2实训四制作留1.调整留言板页面23言板2.利用表单制作留言板3.利用表单制作首页部分内容实训五使用内嵌框架1.制作新闻文本页面2.制作新闻页面2实训六使用网页特效1.将新闻制作成滚动字幕2.以跟随滚动条滚动的对联广告形式显示联系方式3.状态栏显示滚动欢迎词2实训七网站的测试与发布1.申请域名2.上传网站3.维护网站4.添加网页搜索关键字和说明信息5.推广网站2合计学时42注：1.实验设置要注意内容更新，体系设计科学合理，实验项目名称要准确规范。2.实验要求为：必修、选修。3.实验类型为：验证、综合、设计型。4.学时分配合计数要与实验总学时相同或大于实验总学时数（其中超出的学时数可为选开实验）；若适应两个以上专业的可在表格下分别注明：例如序号1、2、3适应××专业；序号1、3、5适应××专业等。项目1个人网站的设计与制作实训一认识与策划个人网站一、实训目的1.掌握个人网站的特点2.掌握制作个人网站的注意事项二、实训内容1.确定网站主题2．确定网站风格3．规划网站内容三、实训仪器、设备装有DreamweaverCS3软件的电脑，网络畅通。四、实训步骤41.确定网站主题在本项目中，建设一个名为“竹轩”的个人网站，以竹和绿色做网站的风格，主题为“建设网站的基本技巧”，同时用“美文”为副主题。用竹子的图片以做点缀，体现网站的风格，来构成网站。2．确定网站风格“竹轩”个人网站的风格是主要利用了一些漂亮的以竹子为主题的图片，进行适当的修改，依赖绿色和以竹子为素材的图片来体现绿色有生机的风格。3．规划网站内容在本项目的个人网站中，要包含的内容有：网页制作知识、美文、图片三类，为了主题清楚分了三个栏目，这样内容就不会杂乱，利于浏览者的访问。可以绘制一个网站结构图来表现网站的组织结构，一般用一棵倒置的树来实现网站的结构图，如图所示。图网站结构图五、实训报告要求写出本项目报告的摘要和前言部分。六、实训注意事项熟悉了DreamweaverCS3软件及基本操作后，多根据教师提供的网址上网欣赏优秀网站，研究其特点、布局等。七、思考题个人网站都有哪些特点？实训二创建站点并制作网页一、实训目的1.掌握个人网站建设的基本流程和基本方法2.掌握表格布局的知识3.掌握图片素材的制作方法和处理方法站点首页index.htm图片美文知识5二、实训内容1．建立文件夹2．建设站点3.制作子页4.制作首页5.制作网页图片素材三、实训仪器、设备装有DreamweaverCS3软件的电脑。四、实训步骤1．建立文件夹2．建设站点63.制作子页（1）新建网页在文件面板中，右击zhishi文件夹，选择“新建文件”（如图），新建了一个名为“untitled.html”的空白网页。右击此文件名，选择“编辑”→“重命名”，将网页命名为：“wangzhan.html”。注意：网页和网页中使用的图片的命名必须为拼音、英文或者数字，不可使用中文。（2）设置页面属性7打开新建的网页“wangzhan.html”，利用属性面板上的“页面属性”按钮，打开“页面属性”对话框指定布局和格式设置属性。设置字体的大小为12像素、上边距为0像素。（3）简单布局鼠标插入点放到网页“wangzhan.html”的空白区域，点击“常用”工具栏的插入表格的按钮，插入一个四行一列的宽度为760像素的表格。并将表格利用属性面板中的“居中对齐”按钮设置其居中对齐。通过设置表格、单元格背景颜色以美化网页。①选中整张表格，在属性面板中可以利用“背景颜色”按钮设置整张表格的背景颜色；②将插入点放在某一个单元格中，就可以利用“背景颜色”按钮设置单元格的背景颜色，如图所示。图单元格属性面板在本例中，将第1、4行的单元格背景颜色设置为“#006600”，第2、3行的单元格背景颜色设置为“#CEFFDD”。（4）添加文字、设置文字格式①标题文本将鼠标位于第一行单元格中，输入“网站规划规范”，选中此文字，在属性面板中设置字体为“华文新魏”，文字大小为24像素，字体颜色为“#FFFFFF”，并利用按钮，设置文字居中对齐，单元格的高度为43像素，如图所示。8图文字属性对话框②正文文本将鼠标位于第三行单元格中，输入正文，设置正文格式：字体为宋体，大小为14像素，利用属性面板的“文本缩进”按钮将文本进行缩进，如图所示。图控制文字缩进或凸出注意：要使文本每段开头空两个字符，需要将输入法设置为“全角”模式，再利用空格键输入。或者利用Ctrl+Shift+空格键输入空格。③版权信息在本例中，在第四行单元格中输入版权信息，字体大小为12像素，颜色为“#FFFFFF”，假设为“版权所有©2008竹轩鲁ICP备001号”，其中“©”是特殊符号，可以通过插入栏的“文本”类别来进行操作。在本例中，所要插入的“©”符号就要展开“文本”类别中的“字符”按钮（），来选择“版权”按钮，将“©”输入，如图所示。9图“字符”按钮（5）添加图片通常网站的子页都要有返回首页的链接，在这个网页中将利用素材中的图片“fanhui.gif”放置在网页中，作为返回首页的超链接，位置在表格的第二行，并且使之向右对齐。（6）添加背景音乐将代码bgsoundsrc=../image/Bamboo_Dance.wmaloop=-1插入到网页的head/head之间，当浏览者打开网站时即可听到背景音乐，当网页最小化之后，音乐会消失。代码“bgsoundsrc=../image/Bamboo_Dance.wmaloop=-1”中“src=../image/Bamboo_Dance.wma”表示音频文件，loop=-1表示当网页最小化之后，音乐会消失，如果loop=3指音乐播放三次。4.制作首页（1）首页布局在本例中首页的布局采用了“匡”字形的布局，首先插入了一个三行一列的宽度为760像素的表格，作为整个网页的大框架，第一行设置高度为160像素，用来放置页眉；第二行作为主内容区；第三行作为页脚。（2）页眉的美化——单元格背景的使用、flash动画的插入10（3）页脚的设置将第三行单元格的高度设置为30像素，背景颜色和页眉颜色相匹配设置为“#2B4216”，输入版权信息，假设为“版权所有©2008竹轩鲁ICP备001号”。将文字设置为白色，居中对齐。（4）编辑主内容区的内容①编辑主内容区的布局②编辑导航栏、个人档③编辑主内容区115.制作网页图片素材（1）页眉处用到的图片“banner.jpg”（2）导航处使用的图片“1.jpg”（3）分栏边框的制作①左侧分栏边框的制作②右侧主内容区边框12五、实训报告要求参照模板，按照要求，写出本项目报告正文中的“创建站点并制作网页”部分。六、实训注意事项使用Fireworks软件制作网页图片前，一定要确定好大小，不要到Dreamweaver中缩放。七、思考题本网站还可以怎样布局？实训三创建网站相册、创建超链接一、实训目的1.掌握网站相册的创建方法2.掌握超链接的类型和各类型的创建方法二、实训内容1.创建网站相册2.创建首页中的文字链接3.创建电子邮件链接三、实训仪器、设备装有DreamweaverCS3软件的电脑。四、实训步骤131.创建网站相册（1）在DreamweaverCS3中，选择“命令”菜单中的“创建网站相册”命令。跳出如图所示的“创建网站相册”对话框。图创建网站相册对话框（2）在“相册标题”文本域中，输入标题。该标题将显示在包含缩略图的页面顶部的灰色矩形中。（3）点击“源图象文件夹”文本域旁边的“浏览”按钮，选择包含有源图象的文件夹。然后点击“目的文件夹”文本域旁边的“浏览”按钮，选择（或创建）一个放置导出图象和HTML文件的目的文件夹。（4）为缩略图图象指定显示选项：（5）从“缩略图格式”弹出式菜单中选择一种缩略图图象格式：（6）从“相片格式”弹出式菜单中选择大尺寸图象的格式。会为每一幅原始图象创建一幅指定格式的大尺寸图象。可以为大尺寸图象指定不同于缩略图的格式。注意：“创建网站相册”命令不允许你使用原始的图象文件作为大尺寸文件，这是因为非GIF和JPEG格式的原始文件可能不能在所有浏览器中正确显示。注意，如果原始文件是JPEG文件，则产生的大尺寸图象与原始图象相比，可能有较大的文件尺寸或较低的质量。（7）为大尺寸图象选择“缩放”百分数。（8）选择“为每张相片建立导览页面”，为每个源文件创建一个单独的网14页页面，其中包含“返回”、“首页”和“下一页”的导航链接。（9）点击“确定”按钮，为网页相册创建HTML和图象文件。（10）当出现“相册已经键立”的对话框时，点击“确定”按钮。可能需要等几秒钟，才