网页设计项目化教程项目6 个人网站设计

1、网页设计工程化教程-个人网站设计 内 容 项目功能分析 1 工程任务实施 2 项目完成情况评估 3工程功能分析 【能力目标】能理解需求方的意向完成个人网站的规划能够设计完成个人网站的需求分析报告【知识目标】掌握网站建设的根本流程掌握模板的创立和应用【素质目标】培养工作标准化意识培养分析问题、解决问题的能力培养沟通能力和团队协作能力培养自我学习、创新的能力 工程任务实施-任务一 设计制作模板页 【任务分析】在页面布局上，采用上中下的结构：上侧为个人网站宣传Bana条和导航、中间为栏目主要内容展示、下面为版权等页脚信息，所以模板页面的布局如下图。 Banner图片可编辑区域 版权等说明 首页 个人

2、简历 个人作品工程任务实施-任务一 设计制作模板页 【任务实施】 -参考教材【知识梳理】 在一个网站的制作中，通常有几十甚至几百个风格根本类似的页面，如果每次制作都重新设定网页结构和相同的导航条、各类图标等就非常麻烦，这时我们可以借助Dreamweaver的模板、库功能来简化操作。 1 模板模板本身就是一个文档，它可以作为创立其他文档的根底。当编辑一个文档时，设置好哪些元素不可编辑、哪些元素可以编辑，就可以做为模板保存起来，模板的扩展名为.dwt。2 库库是能够在整个站点假设干网页中重复私用的页面元素、如文本、图像、表格、表单等元素，这些元素通常被称为库工程。如，网站中的所有页面的页脚都类似，

3、这时可以使用库工程来存储这些信息，库文件的扩展名为.lbi。 工程任务实施-任务二 设计制作其他页面 【任务分析】模板页创立完成之后，就可以使用模板创立个人网站的其他页面了，包括“首页面、“个人简历、“作品展示三个页面。 工程任务实施-任务二 设计制作其他页面 【任务实施】 -参考教材。【知识梳理】1 模板的修改可以直接翻开一个模板文件进行编辑，或者可以翻开一个基于模板的文档，然后翻开附着的模板进行编辑。当保存更改的模板时，Dreamweaver 将提示更新基于该模板的文档。步骤1 在【资源】面板中，选择面板左侧的“模板类别，将显示出站点可用的所有模板并显示选定模板的预览。步骤2 双击您要编辑

4、的模板名称，或者选择要编辑的模板，然后单击“资源面板底部的“编辑按钮。 步骤3 模板在“文档窗口中翻开，根据需要修改模板的内容。 步骤4 保存该模板。 Dreamweaver 提示您更新基于该模板的页面，单击“更新更新基于修改后的模板的所有文档；如果不想更新基于修改后的模板的文档，可以单击“不更新。 工程任务实施-任务二 设计制作其他页面 【知识梳理】2 从模板别离文档假设要更改基于模板的文档的锁定区域，必须将该文档从模板别离。将文档别离之后，整个文档都将变为可编辑的。步骤1 翻开想要别离的基于模板的文档。 步骤2 选择【修改】|【模板】|【从模板中别离】命令， 文档被从模板别离出来，所有模板

5、代码都被删除。 工程任务实施-任务三 为页面添加特效 【任务分析】 有很多优秀的网页，不仅包含文本、图像和动画，还有许多其他交互式的效果，例如鼠标效果、页面音乐等。本任务主要实现添加预设的行为实现页面背景音乐的播放和利用Javascript脚本语言编写跟随鼠标显示的时钟特效。 工程任务实施-任务三 为页面添加特效 【任务实施】 -参考教材。【知识梳理】 在网页设计过程中，除了网站要有很强的功能，也要有丰富多彩的网页效果。我们可以使用JavaScript脚本语言来编写制作动态特效，并通过客户端的WEB浏览器来执行。JavaScript是一种通用的脚本编程语言，也是一种基于对象(object)和事

6、件驱动(event Driven)并具有平安性能的脚本语言，JavaScript代码嵌套在HTML页面中，只要浏览器支持JavaScript，就可以实现用户和界面的交互，而不需要效劳器端进行数据的回传。下面介绍网页设计制作过程中最长用的图片特效和菜单特效。1图片切换循环显示效果实现图片特殊效果的很多，如：图片幻灯片特效、图片滚动效果 、图片新闻特效等，在页面中选择恰当的图片特效可以实现丰富的页面动态效果；下面介绍图片切换循环显示效果的实现方法和代码。将如下代码，放置在之间。效果如下。 工程任务实施-任务三 为页面添加特效 【知识梳理】 2 js实现仿flash效果的弹性导航菜单在之间添加如下代码.效果如下。 工程完成情况评估 个人网站制作使用模板技术，大大节省了开发的时间，方便后期维护；同时为页面添加了常用的行为，为页面添加了活力。个人网站开发需要设计者按照实际需求进行筹划、实施。设计完成后，从专业技能和职业素养方面进行考核 .情境评价方式评价标准分值个人网站学生互评10% 能够小组成员互相协作、敬业、认真完成分工任务教师评价过程考核30%遵守学校的各项规章制度拥有分析问题、解决问题的能力拥有独立思考意识、勇于克服困