《网页设计与制作》综合实训(15级计应)

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

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

3、运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。4培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。5训练和培养团队协作精神和共同开发网站的综合能力。 三 实训要求1动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。2制作网页前，收集好所需的文字资料、图像资料、flash 动画、CSS 样式和网页特效。3所创建的网站至少包括 8 个页面，分为三层，第一层为首页，第二层为4 个二级子页，第三层为 3 个内容页。（1）首页可采用表格或 DIV+CSS 进行页面布局，首页必须包

4、含清晰的导航栏以及版权、作者信息等内容。首页可参考以下布局结构；“国”字型：拐角型：LogoBannerBanner左主体内容版权声明、联系方式等信息版权声明、联系方式等信息（2）4 个二级子页必须采用 DIV+CSS 样式进行网页布局；除上述两个布局结构以外还可以参考以下布局结构：Logo 、标题、导航当前网页的正文 （3）3 个内容页布局结构可参考以上布局结构，也可以是独立的网页，其中要求一个含有表单网页、一个含有 CSS 样式修饰的列表网页、另一个用“盒模型”实现布局的网页。（4）各个页面根据需要插入合适的图像和 Flash 动画以及 CSS 样式修饰美化网页，首页要求插入背景音乐(用“

5、bgsound”实现、音乐面板隐藏）、要有滚动的文字或图像，达到“动感”效果。（5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方，在修饰字体、文本、背景、尺寸、边框、定位、表格、列表、滚动条等均采用 CSS 样式实现修饰美化效果。（6）各个页面之间导航清晰、链接准确无误。4网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解，所有文件名全部采用英文名称命名。5实训过程中既要虚心接受老师的指导，又要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。6在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保

6、质、保量完成实训任务。要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。7同学之间，要密切合作，培养良好的互助、协作精神。8实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，实训成绩按不及格处理。9实训环境为 Windows XP 及以上版本的操作系统，网页制作软件为 Dreamweaver CS4以上，根据需要可以运用 Fireworks 8 处理图像，运用 Flash 8 制作动画。四 实训步骤4.1 规划网站1策划网站主题在着手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。综合实训所创建的网站是一个学习类网

7、站，主要介绍网页制作的基础知识、网站建立的基础知识、网页制作的技巧、网页特效的制作方法、网络编程语言、动画制作方法、图像处理方法等内容，同时为读者提供大量的网页制作素材、学习网页设计和编程的视频教程，解决学习网页设计与制作过程中遇到的问题。所以该网站的主题是“提供制作素材、解决学习问题、 指导网页制作”。2确定网站风格确定好站点主题后，就要根据该主题选择站点的风格。由于本章所建立的网站是一个学习类网站，要求结构清晰，结合现代教学理念，将学习与网络合理整合，实现教学对象广泛、使用方便、时间自由。本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，减少表格的使用，尽

8、可能用 DIV+CSS 实现效果。（2）背景颜色以灰色和白色为主、黄色为辅，文字颜色以黑色为主、蓝色和红色为辅。（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12 像素。3构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复思考和讨论，最后确定完整的栏目和内容的层次结构。栏目结构如表 2-1 所示，请将每一级栏目的名称注明。一级栏目二级栏目4规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。例如各文件夹的所存放文件类型如表 2-1-3 所示。（注意：文件夹和

9、文件的名称建议不要使用中文名，因为中文名在 HTML 文档中容易生成乱码，导致链接产生错误。） 表 2-1-3网站的目录结构及其存放的文件类型存放的文件类型CSS 样式文件。动画文件、视频文件。图像文件、照片。音乐、音频文件。文字素材。其他类型的文件。备用页面、备用素材主页（首页）index.html网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。4.2 准备素材根据网站的栏目、内容设计，链接结构设计，首页的布局结构，几个主要导航页面的布局结构，准备所需素材1准

10、备文本准备大量网页中所需的文字资料，可以从各类网站、各种书籍中搜集文字资料，然后制作成 word 文档或文本文件，注意各种文字资料的文件名命名要科学合理，避免日后找不到所需的文本内容。2准备 Logo利用 Fireworks 或 Photoshop 量身定做本网站的 Logo 标志，Logo 标志要与本网站的主题相符，要有新意。3准备图片及按钮根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、按钮需要自己利用图像处理软件制作。注意图片文件要尽可能小。4准备动画网站中的动画最好能突出主题，起到画龙点睛之功效。动画一般利用flash 软件制作，本网站主页和导航页的标题动画就是利用 flash 软件量身定做。 五评分标准根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体浏览效果等方面进行综合评分。评分参考标准如表2-1-5 所示。表 2-1-5网站开发实训的参考评分标准考核项目评分比例序号（1）内容方面：主题明确，内容健康、具体，各个页面的文字、图像、动画能够清晰地表达主题。（