《网页设计与制作》综合实训指导书

1、网页设计与制作综合实训指导书1.1实训意义网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求， 在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。1.2实训目的1通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。1) 掌握规划网站的内容结构、目录结构、链接结构的方法。2) 熟练掌握网页制作软件 Dream

2、weaver CS4 的基本操作和使用技能。3) 掌握页面的整体控制和头部内容设置的方法。4) 熟练掌握网页页面布局的各种方法。5) 熟练掌握在网页中输入、设置标题和正文文字的方法。6)熟练掌握用 Photoshop 制作和处理网页的图片素材，用Flash 制作动画的方法。7)熟练掌握在网页中插入图像、flash 动画、背景音乐的方法。8) 掌握建立各种形式超级链接的方法。9) 掌握表单网页制作方法。10) 掌握网页特效的制作方法。11) 掌握网站测试的方法。2训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、

3、网页特效等。3培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。4培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。5训练和培养团队协作精神和共同开发网站的综合能力。1.3实训要求1动手制作网页之前：1) 必须认真做好网站的需求分析， 包括市场调查， 定位网站目的， 策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。2) 规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。做出“网站层次结构图”参照附表 1-1 以及“网页版面设计图”参照附表 1-2。3) 根据指定的网站主题书编写 *

4、网站策划书参照附表 1-3。2创建完善的目录结构。站点文件夹为班级学号组号(如： 11 应用（ 01）班 01 组 )站点文件夹中所包含文件夹：Images （存放图片文件）Swf （存放动画文件）Templates（存放模版文件）Library（存放库文件）other （存放其它文件）源文件（存放自己设计的图形、动画文件）其余视文件夹需要而添加，全部用英文命名站点文件夹中所包含文件：index.html （首页）*.css （样式表文件）其余文件名视需要而添加，全部用英文命名( 各组将站点文件夹压缩上交，压缩文件不要超过20M ，大的影音文件不要放在压缩在文件里)3制作网页前，收集好所需的文

5、字资料、图像资料、网页特效。用Photoshop 制作和处理网页所需的图片、用Flash 制作网页所需的动画。主要图片和动画为原创（保存有源文件），主页标题图片（动画）必须为原创。4所创建的网站至少包括8 个以上页面，分为三层，第一层为首页，第二层为4 个二级子页，第三层为2-3个内容页。网页中必须要用到CSS 以及DIV技术实现网页元素的修饰及布局。网站页面大小应该满足至少800*600分辨率。1) 首页采用表格或 CSS+DIV 进行布局，必须包含导航栏，显示时间特效；2) 4 个二级子页分别为框架网页、表单网页，并有进行表单验证及提交的程序、利用模板制作的网页、利用布局表格制作的网页。3

6、) 内容页分别为表格或 CSS+DIV 布局的网页。4)网站页面中特效要求利用Javascrip 脚本语言 +CSS+DIV实现包含至少使用任何1种以上特殊效果：滚动字幕和图片、flash 按钮、浮动广告、特效菜单等。应用JavaScript 制作特效的网页、应用行为制作特效的网页。5) 各个页面根据需要插入合适的图像和Falsh 动画，首页要求插入背景音乐。6) 所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。7) 各个页面之间导航清晰、链接准确无误。5网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。6实训过程中既要虚

7、心接受老师的指导，又要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。7在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。要求独立完成规定的实训内容，不得弄虚作假， 不准抄袭或拷贝他人的网页或其他内容。8小组成员之间，既要分工明确，又要密切合作，培养良好的互助、协作精神。9实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，实训成绩按不及格处理。10实训环境为Windows XP 及以上版本的操作系统，网页制作软件为Dreamweaver CS4 ，要可以运用Photoshop 制作和处理图像，运用Flash 制

8、作动画。1.4实训步骤序号实训项目名称项目类型必做 /选做实训准备、制定实训计划，分组：4-5 人为一组，每一组选定一名组长，组长主要负责考勤以及与指导教师联系。选题：根据指定的周一网站主题书写 * 网站策划书，各小组进行分工。根据实训时间的准备型必做长短制定一个切实可行的网站开发计划。准备素材，搜集与主题相关的文字、图像、动画、音乐等资料。设计网站的内容结构、目录结构和链接结构，设计网站层次结周二构图，设计首页及其页面的版式结构图。创建本地网站，建立网站的设计型必做目录结构。周三运用 Photoshop 制作和处理网页所需图像，运用Flash 制作网设计型必做页所需动画。制作首页。周四制作二

9、级子页。制作内容页。创建超级链接。设计型必做周五测试与浏览网页。书写实训报告书。测试型必做1.5评分标准根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体浏览效果等方面进行综合评分。评分参考标准如下表所示。网站开发实训的参考评分标准序号考核项目评分比例1网站策划书网站策划书写认真、完整、字迹清楚、页面整洁，内容充实。10%（ 1）内容方面：主题明确，内容健康、具体，各个页面的文字、图像、动画能够清晰地表达主题，各级内容层次清晰，同级页面格式统一。（ 2）版面结构：版面结构合

10、理，页面色调和谐，每个页面都有返2网站效果回上一级或链接到其他页面的文字或按钮。60%（ 3）视觉感受：色彩搭配协调、美观，页面设计规范，没有出现乱码、空链接和错误链接。（ 4）CSS 以及 DIV 技术实现的网页元素的修饰及布局准确。（ 5）网站风格： 网站具有特色， 主题、文字、 图像、动画有创新。3纪律考核实训期间组织纪律性强，无迟到、早退、缺课现象10%4创新情况制作的网页具有独创性，构思巧妙、有新意5%5成员协作小组成员协作精神强，所有的成员在规定时间内完成实训任务，5%无雷同现象或抄袭现象。6实训报告实训报告书写认真、完整、字迹清楚、页面整洁，实训收获较大。10%合计100%组号1

11、23456789101.6实训分组及实训题目组成员实训题目学号： 201131661 2011316615制作班级网站学号： 201131666 2011316670制作学校系部网站学号： 201131671 2011316675制作学校图书馆网站学号： 201131676 2011316680制作摄影网站学号： 201131681 201131685制作电脑学习网站学号： 201131686 2011316690制作旅游公司网站学号： 201131691 2011316695制作电脑公司网站学号： 201131696 2011316700制作体育知识网站学号： 201131701 2011316705制作军事知识网站学号： 201131706 2011316710制作图书网站附表 1-1主页栏目1栏目2栏目3栏目4内容1内容2内容3附表 1-2标题导航内容左列内容正文内容左列内容脚注附表 1-3* 网站策划书 （ 2 号、加粗、宋体、居中）一、网站分析与定位： （ 4 号、加粗、宋体）1 、建设网站目的主题、及功能定位。 （5 号、宋体、 1.5 倍行距）2 、建设网站前的市场分析。3 、网站的风格和亮点。4 、网站技术解决方案。二、网站内容规划 （ 4 号、加粗、宋体）1 、网站主要内容及板块 （5 号、宋体、 1.5 倍行距）2 、各板块的具体内容及功能3 、网页色彩基