网页制作教程—项目4.pptVIP

项目4 门户类网站建设 项目4 门户类网站建设 项目4 门户类网站建设 【项目目标】 掌握库的创建和应用 掌握模板的创建和应用 掌握表单的创建和应用 了解JavaScript的基本概念 掌握JavaScript脚本的简单应用 任务1 利用库制作banner和页脚 【任务说明】 在网站建设中，有时要把一些网页元素应用在多个页面内。当要修改这些重复使用的页面元素时，如果要逐页修改就会相当费时，使用Dreamweaver CS4提供的库功能可以避免这个麻烦。将网页制作中经常使用到的广告条、页眉、页脚、导航菜单等制作库是最合适的。在网页中应用库，不仅可以提高效率，也会给网站的维护带来便利。 【任务分析】 本次任务中，将通过创建库来制作52门户网站主页的banner和页脚，页面效果如图所示。 该网站页面布局采用经典的商业布局，主体内容在中间显示，左右两端放置各频道精选的内容。主页的banner和页面的页脚部分是所有页面都要用到的，因此先把网站首页的banner和页脚做成两个库文件。 对本次任务分解如下： 1、创建库文件 2、制作主页的banner 3、制作页脚 4、库项目的应用 创建库文件 1、定义一个本地站点 2、打开“资源”面板 3、新建库“banner” 4、新建库“foot” 制作主页的banner 1、打开库文件“banner” 2、插入表格 3、设置表格属性参数 制作页脚 1、打开库文件 “foot” 2、插入表格 3、设置表格属性参数 库项目的应用 1、库项目的插入 2、库项目的编辑 3、将库项目从源文件中分离 任务2 创建模板----制作52门户女性频道子页 【任务说明】 模板是制作具有相同版式和风格的网页文档的基础文档。在进行大量的网页制作时，很多网页会用到同样的版式和风格，为了避免重复劳动，可能将具有相同版面结构的网页制作成模板，然后通过模板制作其他网页。 【任务分析】 本次任务中，将介绍制作模板以及通过模板制作52门户网站女性频道子页的方法。首先要明确每个栏目的主要浏览人群，女性频道的主要针对对象是女性，主题应该是时尚、靓丽，所以页面以优雅的紫色与“充满女人味”的粉红色相搭配，很好地突出了主题。效果如图所示。 对本次任务分解如下： 1、创建模板文件 2、使用模板和库创建“女性频道”子页 创建模板文件 1、新建子页模板 2、将已有网页保存为模板 3、定义可编辑区域 使用模板和库创建“女性频道”子页 1、新建站点 2、创建的模板“moban1” 3、编辑可编辑区域 EditRegion3 4、编辑可编辑区域 EditRegion4 5、编辑可编辑区域 EditRegion5 6、编辑可编辑区域 EditRegion6 任务3 插入网页广告（JAVASCRIPT） 【任务说明】 网页广告在网页中为网站创建者的最爱，因为不仅可以给网站带来收益，而且还能增加网页的动画效果。 【任务分析】 本次任务中，将通过实例来介绍浮动广告的制作方法。对本次任务分解如下： 1、了解JavaScript 2、添加网页特效 了解JavaScript JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，它是一种脚本编程语言，它的基本语法与C语言类似，但运行过时不需要单独编译，而是逐行解释执行，运行快。 1、JavaScript代码的加入 2、举例 添加网页特效 1、打开素材 “life.html” 2、 绘制 AP Div”按钮 3、设置AP元素 “属性” 4、输入AP元素的图像代码 5、输入JavaScript脚本代码 任务4 利用表单制作用户反馈页面 【任务说明】 表单是网页管理者与访问者之间进行行为动态数据交换的一种交互方式，通常，一个表单中会包含多个表单对象，也称为控件，如用于可输入的文本域、用于提交信息的按钮、用于选择的单选按钮和复选框等。一个完整的表单包括表单对象和应用程序两个基本组件，其中，表单对象在网页中起到描述作用，应用程序则是服务器或客户端的脚本，通过它们可以实现对用户信息的处理。 【任务分析】 本次任务中，将结合Dreamweaver CS4基础知识，通过实例的方式介绍表单的使用。 利用表单制作用户反馈页面 1、打开素材 “liuyan.html” 2、插入表单 3、设置表单 4、提交表单 知识拓展 1、插入JavaScript脚本程序制作日期 2、创建文件域和图像域 3、门户网站的功能与分类 4、门户网站的设计风格 相关知识点 使用库制作banner 使用库制作页脚 创建和编辑模板 使用JavaScript添加网页特效 创建和编辑表单 想一想 ①在Dreamweaver中的模板是一种特殊类