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

网页设计项目化教程-个人网站设计,内 容,项目任务实施,2,项目功能分析,【能力目标】能理解需求方的意向完成个人网站的规划能够设计完成个人网站的需求分析报告【知识目标】掌握网站建设的基本流程掌握模板的创建和应用【素质目标】培养工作规范化意识培养分析问题、解决问题的能力培养沟通能力和团队协作能力培养自我学习、创新的能力,项目任务实施-任务一 设计制作模板页,【任务分析】在页面布局上，采用上中下的结构：上侧为个人网站宣传Bana条和导航、中间为栏目主要内容展示、下面为版权等页脚信息，所以模板页面的布局如图所示。,项目任务实施-任务一 设计制作模板页,【任务实施】 -参考教材【知识梳理】 在一个网站的制作中，通常有几十甚至几百个风格基本类似的页面，如果每次制作都重新设定网页结构和相同的导航条、各类图标等就非常麻烦，这时我们可以借助Dreamweaver的模板、库功能来简化操作。 1 模板模板本身就是一个文档，它可以作为创建其他文档的基础。当编辑一个文档时，设置好哪些元素不可编辑、哪些元素可以编辑，就可以做为模板保存起来，模板的扩展名为.dwt。2 库库是能够在整个站点若干网页中重复私用的页面元素、如文本、图像、表格、表单等元素，这些元素通常被称为库项目。如，网站中的所有页面的页脚都类似，这时可以使用库项目来存储这些信息，库文件的扩展名为.lbi。,项目任务实施-任务二 设计制作其他页面,【任务分析】模板页创建完成之后，就可以使用模板创建个人网站的其他页面了，包括“首页面”、“个人简历”、“作品展示”三个页面。,项目任务实施-任务二 设计制作其他页面,【任务实施】 -参考教材。【知识梳理】1 模板的修改可以直接打开一个模板文件进行编辑，或者可以打开一个基于模板的文档，然后打开附着的模板进行编辑。当保存更改的模板时，Dreamweaver 将提示更新基于该模板的文档。步骤1 在【资源】面板中，选择面板左侧的“模板”类别，将显示出站点可用的所有模板并显示选定模板的预览。步骤2 双击您要编辑的模板名称，或者选择要编辑的模板，然后单击“资源”面板底部的“编辑”按钮。 步骤3 模板在“文档”窗口中打开，根据需要修改模板的内容。 步骤4 保存该模板。 Dreamweaver 提示您更新基于该模板的页面，单击“更新”更新基于修改后的模板的所有文档；如果不想更新基于修改后的模板的文档，可以单击“不更新”。,项目任务实施-任务二 设计制作其他页面,【知识梳理】2 从模板分离文档若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。步骤1 打开想要分离的基于模板的文档。 步骤2 选择【修改】|【模板】|【从模板中分离】命令， 文档被从模板分离出来，所有模板代码都被删除。,项目任务实施-任务三 为页面添加特效,【任务分析】 有很多优秀的网页，不仅包含文本、图像和动画，还有许多其他交互式的效果，例如鼠标效果、页面音乐等。本任务主要实现添加预设的行为实现页面背景音乐的播放和利用Javascript脚本语言编写跟随鼠标显示的时钟特效。,项目任务实施-任务三 为页面添加特效,【任务实施】 -参考教材。【知识梳理】 在网页设计过程中，除了网站要有很强的功能，也要有丰富多彩的网页效果。我们可以使用JavaScript脚本语言来编写制作动态特效，并通过客户端的WEB浏览器来执行。JavaScript是一种通用的脚本编程语言，也是一种基于对象(object)和事件驱动(event Driven)并具有安全性能的脚本语言，JavaScript代码嵌套在HTML页面中，只要浏览器支持JavaScript，就可以实现用户和界面的交互，而不需要服务器端进行数据的回传。下面介绍网页设计制作过程中最长用的图片特效和菜单特效。1图片切换循环显示效果实现图片特殊效果的很多，如：图片幻灯片特效、图片滚动效果 、图片新闻特效等，在页面中选择恰当的图片特效可以实现丰富的页面动态效果；下面介绍图片切换循环显示效果的实现方法和代码。将如下代码，放置在之间。效果如下。,项目任务实施-任务三 为页面添加特效,【知识梳理】 2 js实现仿flash效果的弹性导航菜单在之间添加如下代码.效果如下。,项目完成情况评估,个人网站制作使用模板技