网页设计教学课件-项目5 制作52门户网站.pptVIP

实训 1．创建与应用网页模板，参考步骤如下。 （1）打开本项目的素材文件夹，新建网页文件life1.html。 （2）打开“资源”面板，选择“模板”→“新建”命令，创建一个名为moban.dwt的模板文件。 （3）编辑moban.dwt模板文件的内容，对模板进行设计。 （4）在模板中将应用到网页后需要修改的部分定义为可编辑区域。 （5）保存模板。 （6）新建网页new.html，应用模板moban.dwt，然后修改可编辑区域，使之成为一个新的网页。 2．打开素材文件yule.html，为网页设计一个浮动广告。 3．打开素材文件lixi.html，按网页上的表单格式设计用户反馈页面，并将其保存为lixi-1.html。 谢谢大家 项目五 制作 52门户网站 制作 52 门户网站 一、项目描述及分析 二、制作 Banner 和页脚 三、制作子页 四、插入网页广告 六、知识链接 目 录 五、制作用户反馈页面 七、拓展学习 项目描述： 制作一个简易的门户网站——52门户网站，重点是使用模板制作网站的首页和“女性频道”子页。 1.项目描述及分析 网站首页 “女性频道”子页 项目效果图 项目分析： 门户网站的特点是信息量大、内容全面、功能齐全、浏览者众多，因此，一般采用能提供较大信息量的“国”字型布局或“匡”字型布局。这里采用经典的“国”字型商业网站格局，即中间显示主体内容，左、右两边放置各频道的精选内容。 门户类网站要求有清晰、便捷的导航功能设计。应在页面上方最显著的位置设置导航条，以使浏览者能迅速找到自己感兴趣的内容并快速进入。中间部分的主体区域根据频道分别罗列一些最新、最热的资讯，左、右两侧则放置各频道精选内容的文字或图片链接。 门户网站的子页面通常比较常多，可以通过模板和库来制作各个子页。例如，Banner和页脚是所有页面都具有的，因此可以将包含Banner和页脚的页面做成模板，这样可以便捷、快速地制作出其他子页面。 确定完网站栏目后，接下来应根据各栏目主要浏览群体的特点对各个子页进行风格、主题方面的规划。例如，“女性频道”栏目的主要浏览群体是女性，因此其风格应突出温馨、时尚和靓丽感，可以采用优雅的紫色与温馨的粉红色作为页面的主色调；“数字潮流”栏目则可以采用蓝色、灰色等冷色调，以更好地突出理性、时尚的主题。 网页广告能有效提升网页的浏览效果，因此，可以在52门户网站的主页上制作飘浮广告。最后使用表单来制作用户反馈页面。 项目实施过程： 任务1 制作首页的Banner和页脚，并将其保存为成库文件；根据素材制做网站首页。 任务2 根据首页创建模板，并根据模板和库制作“女性频道”子页面。 任务3 使用JavaScript脚本语言为“生活频道”子页面添加一个浮动广告。 任务4 使用表单,制作用户留言反馈页面。 任务1 制作主页Banner和页脚 网站建设中，经常会把一些页面元素（如页眉、页脚、导航菜单等）应用在多个页面内，当需要修改这些重复使用的页面元素时，就需要逐页修改。这不但相当的费时，而且容易出现漏改、错改的情况。此时，使用 Dreamweaver CS6 提供的库功能就可以避免这个麻烦。在网页中应用库，不仅可以提高效率，也会给网站的后期维护带来便利。 本任务将通过创建库来制作52门户网站主页的Banner和页脚。 一、创建库文件 定义站点。在 Dreamweaver 中定义一个本地站点，并将素材文件夹下的内容复制到网站的根文件夹下。然后，选择“窗口”→“资源”命令或者按F11键，打开“资源”面板。 任务1 制作主页Banner和页脚 任务1 制作主页Banner和页脚 创建库文件。单击“资源”面板右下角的按钮，新建一个库，然后在列表框中输入库的名称banner并加以确认（如下图）。使用同样的方法创建名称为foot的库文件。 二、制作主页的 Banner 在“资源”面板中双击打找库文件banner.lbi。 插入一个3行3列,宽为760像素的表格。 设置表格属性(具体步骤参照书讲解)。 输入文本。 最终效果如下图下示: 任务1 制作主页Banner和页脚 三、制作页脚 在资源面板中打开库文件foot.lbi； 插入一个2行1列,宽为760像素的表格； 设置表格属性，参数如下图； 输入文本，并保存文件。效果见下图。 任务1 制作主页Banner和页脚 任务1 制作主页Banner和页脚 四、库项目的应用 1.插入库文件 依据前面做的 banner.lib 和foot.lib 文件充实首页面index.html。效果如右图所示。 2.编辑库项目 在资源面板中单击“编辑”按钮，可打开库项目进行编辑。 注意：编辑库项目时，一定