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

网页设计项目化教程--个人网站设计  内 容 项目功能分析 1 项目任务实施 2 项目完成情况评估 3 项目功能分析 【能力目标】 能理解需求方的意向完成个人网站的规划 能够设计完成个人网站的需求分析报告 【知识目标】 掌握网站建设的基本流程 掌握模板的创建和应用 【素质目标】 培养工作规范化意识 培养分析问题、解决问题的能力 培养沟通能力和团队协作能力 培养自我学习、创新的能力 项目任务实施--任务一 设计制作模板页 【任务分析】 在页面布局上，采用上中下的结构：上侧为个人网站宣传Bana条和导航、中间为栏目主要内容展示、下面为版权等页脚信息，所以模板页面的布局如图所示。 Banner图片 可编辑区域 版权等说明 首页 个人简历 个人作品 项目任务实施--任务一 设计制作模板页 【任务实施】 --参考教材 【知识梳理】 在一个网站的制作中，通常有几十甚至几百个风格基本类似的页面，如果每次制作都重新设定网页结构和相同的导航条、各类图标等就非常麻烦，这时我们可以借助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．图片切换循环显示效果 实现图片特殊效果的很多，如：图片幻灯片特效、图片滚动效果 、图片新闻特效等，在页面中选择恰当的图片特效可以实现丰富的页面动态效果；下面介绍图片切换循环显示效果的实现方法和代码。 将如下代码，放置在body/body之间。效果如下。 项目任务实施--任务三 为页面添加特效 【知识梳理】 2． js实现仿flash效果的弹性导航菜单 在head/head之间添加如下代码.效果如下。 项目完成情况评估 个人网站制作使用