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

《网页设计与制作》课程实训指导书一、实训目的本次实训给学生提供了深入学习的资料和信息，紧紧围绕网站设计流程：规划、设计、开发、发布、维护来进行网站的开发，模仿并设计制作出相关的网站。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、制表绘图、发现与分析问题、寻求解决问题的方案等），训练学生掌握计算机操作技术，运用计算机技术进行数据处理分析。二、实训任务通过对网站的设计，使学生熟练应用网站设计软件，使学生网站建设有一个综合系统的掌握。在制作过程中，主要完成对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，完成项目作品。1．网站策划1）画出网站结构草图。2）确定栏目。3）进行版面设计。分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容4）搜集素材。如相关文字录入，图片素材，班级相片等等。2．制作网页。1）建立站点。例如：命名为webfile,网站的结构如下：2）进行主页的设计。要求主页中包含一个自己完成的Flash。3）进行其他页面的设计。4）建立几个页面间的链接关系。3．测试网站4．作品提交与评分三、实训计划序号任务内容课时1实训任务讲解项目任务分析12网站策划画出网站结构草图1确定栏目1进行版面设计1搜集素材33制作网页建立站点1进行主页的设计与制作8进行其他页面的设计2建立几个页面间的链接关系24测试网站检查网页的运行情况15作品提交与评分依照评分表进行考核16实训报告的编写参见附录2合计24四、实训环境计算机上要求安装有Dreamweaver、Flash、photoshop等软件。计算机与互联网相连，以便学生能够浏览优秀网站，搜集相关素材等。五、实训过程（含步骤）1.确定目标通过网络就某个专题搜索资料，题材不限，要求有个人特色、新颖和有吸引力，并对网站作简单的介绍如主题是什么？分那几个栏目，每个栏目的特色和主要内容是什么？参考专题：对计算机基础教育的看法，互动式教学的方式，网上论坛，QQ聊天论述等。也可以是其它的有兴趣的专题如：文学、历史、科技、体育、旅游、生活、时尚等。参考选题：班级主页，动漫，个人主页，求职简历，电子商务网站，花卉网站，学习网站……2.选择目标用户确定了站点实现的目标之后，需要确定站点的浏览客户。创建世界上每个人都能使用的Web站点是不可能的。人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接，这些因素都会影响站点的使用。因此需要确定目标用户，根据用户的特点来设计站点风格。3.组织站点结构如果没有考虑文档在文件夹层次结构中的位置就开始创建文档，最终可能会导致一个充满了文件的臃肿混乱的文件夹，或导致相关的文件散布在许多名称类似的文件夹中。设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些文件拷贝到Web服务器上。组织站点结构时，应注意以下三个问题：1)将站点分类，把相关的页面放在同一文件夹中。2)将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找定位。例如，将所有图像放在Images文件夹中，当在页面中插入图像时，就可以方便的找到它。3)本地站点和远程Web站点应该具有完全相同的结构。如果使用Dreamweaver创建本地站点，然后将全部内容上传到远程站点，则Dreamweaver确保在远程站点中精确拷贝本地结构。4.设计外观页面布局和设计保持一致非常重要。如果不考虑板块设计，浏览者会觉得你的网站内容杂乱、无条理，先要考虑好自己设计的板块与链接结构；根据所需的站点布局外观，在实训报告本上画一个站点草图，以便以后建立站点时可以按照它来操作。如图1所示，是一个站点首页的设计布局图。5.设计导航方案设计站点时，应考虑如何使访问者能够方便的从一个区域移动到另一个区域。具体考虑以下几点：明确“当前位置”；导航方便；提供与网站管理员的联系方法。6.规划和收集资料完成了设计和布局后，就可以创建和收集需要的资源了。资源可以是图像、文本或媒体等项目。在开始开发站点前，请确保收集了所有这些项目并做好了准备。否则，可能为找不到一幅图像而中断设计、开发过程。LogoBanner简单功能导航栏功能列表或局部导航主要内容版权声明六、实训要求1．动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。2．制作网页前，收集好所需的文字资料、图像资料、flash动画和网页特效。3．所创建的网站至少包括8个页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为3个内容页。（1）首页采用表格进行布局，必须包含导航栏；（2）4个二级子页分别为框架网页、表单网页、利用模板制作的网页、利用布局表格制作的网页；（3）3个内容页分别为层布局的网页、应用JavaScript制作特效的网页、应用行为制作特效的网页。（4）各个页面根据需要插入合适的图像和Falsh动画，首页要求插入背景音乐。（5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。（6）各个页面之间导航清晰、链接准确无误。4．网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。5．实训过程中既要虚心接受老师的指导，又要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。6．在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。7．实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，实训成绩按不及格处理。七、实训考核与评分根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体浏览效果等方面进行综合评分。评分参考标准如下表所示。网站开发实训的参考评分标准序号考核项目评分比例1网站效果（1）内容方面：主题明确，内容健康、具体，各个页面的文字、图像、动画能够清晰地表达主题。70%（2）版面结构：版面结构合理，每个页面都有返回上一级或链接到其他页面的文字或按钮。（3）视觉感受：色彩搭配协调、美观，页面设计规范，没有出现乱码、空链接和错误链接。（4）网站风格：网站具有特色，主题、文字、图像、动画有创新。2纪律考核实训期间组织纪律性强，无迟到、早退、缺课现象10%3创新情况制作的网页具有独创性，构思巧妙、有新意5%4成员协作所有的成员在规定时间内完成实训任务，无雷同现象或抄袭现象。5%5实训报告实训报告书写认真、完整、字迹清楚、页面整洁，实训收获较大10%合计100%作品完成情况当场验收考核，实训报告在整周实训结束后上交。附录一：实训报告内容•封面•目录•网站全名及logo标志•建立网站的目的、意义•网页设计制作最突出的创意（如Amgo“俺们走”,logo设计有特色）•网站的栏目设计•色彩搭配及其含义（如绿色+金黄+淡白，体现优雅,舒适的感觉）•网站的结构图和页面组成•网站设计中具体实现的几个关键功能和相关技术说明（例如布局的方法：应用层、应用表格、应用模板、应用Flash或其他脚本技术）•如何安排进度和计划完成时间•网站建设的心得体会和扩展性分析•参考资料附录二：参考网站主题（1）制作教学资源网站。（2）制作个人网站。（3）制作班级网站。（4）制作学习网站。（5）制作学校网站。（6）制作旅游网站。（7）制作公司网站。（8）制作体育网站。附录三：网站开发案例3．1规划网站1．策划网站主题在首手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。本章所创建的网站是一个学习类网站，主要介绍网页制作的基础知识、网站建立的基础知识、网页制作的技巧、网页特效的制作方法、网络编程语言、动画制作方法、图像处理方法等内容，同时为读者提供大量的网页制作素材、学习网页设计和编程的视频教程，解决学习网页设计与制作过程中遇到的问题。所以该网站的主题是“提供制作素材、解决学习问题、指导网页制作”。2．确定网站风格确定好站点主题后，就要根据该主题选择站点的风格。由于本章所建立的网站是一个学习类网站，要求结构清晰，结合现代教学理念，将学习与网络合理整合，实现教学对象广泛、使用方便、时间自由。本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格实现效果。（2）背景颜色以灰色和白色为主、黄色为辅，文字颜色以黑色为主、蓝色和红色为辅。（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。（4）首页的版式结构采用典型的“国”字型结构，二级栏目网页采用“顶部和嵌套的左侧框架”结构以及简单的“左右型”结构。本章所介绍的网站名称为“网页设计与制作教学网”，简称为“网页教学网”，英文名称为“zzwebjx”。3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。本章的“网页教学网”的栏目结构如表17-1所示。图17-1“网页设计与制作教学网”的首页浏览效果表17-1“网页教学网”的栏目结构一级栏目二级栏目三级栏目及内容页面首页index.html网页制作基础：wyjch.htmlwyjch_xx_xx.html网页制作技巧：wyjq.htmlwyjq_xx_xx.html网页特效制作：wytx.htmlwytx_xx_xx.html网页素材下载：wysc.htmlwysc_xx_xx.html网络编程技术：wybch.htmlwybch_xx_xx.html网页书籍浏览：wybook.htmlwybook_xx_xx.html网络课程浏览：wykch.htmlwykch_xx_xx.html教学交流答疑：wyjl.htmlwyjl_xx_xx.html网站建设指南：wzjsh.htmlwzjsh_xx_xx.html图像动画制作：txdh.htmltxdh_xx_xx.html练习考试题库：examtk.htmlexamtk_xx_xx.html教学论坛（）为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括11个菜单项：制作基础、制作技巧、网页特效、网页素材、网络编程、网页书籍、网络课程、教学交流、建站指南、图像动画、考试题库，各个主菜单所包括的弹出子菜单如表17-2所示。三级栏目及内容页面用数字标识其所属子类，例如利用JavaScript脚本制作网页的第一个内容页面，其文件名为：wytx_02_01.html，“02”代表所属的子类，这一层次的网页与首页中的子菜单对应，“01”代表第一个内容页面的序号。表17-2首页中的菜单首页中主菜单名称弹出式子菜单名称制作基础Dreamweaver、Frontpage、HTML、XML、CSS、JavaScript、VBScript。制作技巧网页文本、网页图像、网页链接、网页导航、表格布局、层的布局、框架网页、模板与库、媒体应用、网页美化、表单网页、色彩搭配。网页特效标记特效、脚本特效、行为特效、插件特效。网页素材网页模板、Logo图片、首页背景、精美按钮、网页广告、网页欣赏、动画图片、扩展插件、导航菜单。网络编程ASP、PHP、JSP、.NET、Java、数据库。网页书籍网页制作、网页特效、网络编程、图形图像、动画制作、网站建设、艺术设计。网络课程学习入门、操作指导、教学向导。教学交流有问必答、经验交流、方法探讨、制作心得。建站指南方案设计、创意设计、网站结构、申请域名、申请空间、网站测试、网站发布。图像动画Fireworks、Photoshop、Flash。考试题库理论题库、操作题库、实训题库、成套题库、模拟实训。视频教程Dreamweav