中文版-Dreamweaver-CS6网页设计教程-第11章.pptVIP

第11章 网站设计实例 本章主要内容 网站的设计流程。 网站的总体框架设计。 模板和库的创建及应用。 本章重点 网站的设计流程。 网站的总体框架设计。 11.1 设 计 站 点 “青春驿站”是一个洋溢着青春气息的网站，网页的内容围绕着年轻人喜欢的主题展开。 11.1.1 网站的总体结构 整个网站的总体结构如图11-1所示。 11.1.2 建立站点 在具体制作网页之前，首先要建立站点，用以保存网页及页面元素。本例是在 D 盘的DWBook 文件夹下建立一个名为 youngsite 的站点，制作步骤如下。 (1) 先在 D盘的 DWBook 文件夹下建立一个名为 youngsite 的文件夹，用来存放创建的网页；在 youngsite 文件夹下建立一个名为image的文件夹，用以存放站点中的图片，可以把要用的图像文件先放入该文件夹中。 (2) 打开 Dreamweaver CS6，选择“站点”|“管理站点”命令，打开“管理站点”对话框，单击“新建站点”按钮，在弹出的对话框中设置站点名称为youngsite和本地站点文件夹，如图11-2所示。 11.1.2 建立站点 (3) 单击“高级设置”标签，在对话框中进行设置，如图11-3所示。 (4) 设置好后，单击“保存”按钮，此时“文件”面板如图11-4 所示。 11.1.3 生成网页 1. 生成进站页面 (1) 选择“文件”|“新建”命令，创建一个 HTML 页面文档。 (2) 在文档工具栏的标题栏中输入网页标题“进站页面”。 (3) 选择“文件”|“保存”命令，弹出“另存为”对话框，将该页面以 index.html的名字保存在D:\DWBook\youngsite 中。 2. 生成主页及其他页面 以上述方法生成主页及其他页面，各个页面的名称及存储位置如图11-5 所示。 11.2 制作进站页面 本实例的进站页面如图11-6 所示，单击“ENTER”区域即可进入该网站的主页。 11.2 制作进站页面 1. 用表格进行整体布局 2. 添加网页元素 3. 页面属性的设置 11.3 制 作 主 页 完成了进站页面的制作后，下面制作本站的主页 index1.html。主页页面如图11-8所示。 11.3.1 整体效果设计 主页采用“T”字形布局，页面上部为横幅及网站标志，下方左半部分为导航区，右半部分为网页主体显示内容的布局。 主页的色彩以蓝绿色为主，给人以青春、活力的感觉。 主页中的文字采用的是浏览器的默认字体，即中文宋体和英文Times New Roman字体，显得整齐有序。 11.3.2 用表格进行整体布局并设置 整个主页采用表格进行布局，具体步骤如下。 (1) 插入一个 3行 1列，“表格宽度”为800像素，“边框粗细”、“单元格边距”及“单元格间距”均为0的表格。 (2) 将鼠标光标置于表格第 1 行，选择“修改”|“表格”|“拆分单元格”命令，将单元格拆分成 2列。拖动两列中间的框线，使左侧宽度大约为 150 像素。 (3) 将鼠标光标置于表格第 1 行中第 1 个单元格，选择“修改”|“表格”|“拆分单元格”命令，将单元格拆分成 2 行。 (4) 将鼠标光标置于表格第 2 行，选择“修改”|“表格”|“拆分单元格”命令，将单元格拆分成 2列。 此时，表格整体布局如图11-9 所示。 11.3.3 网页横幅及标志部分的设计 使用表格进行整体布局之后，便进入主页横幅及标志部分的设计，具体步骤如下。 (1) 将光标置于第 1行第 2 列单元格中，选择“插入”|“图像”命令，插入图像\ch11\image\top.jpg，调整大小到适当宽度。 (2) 将光标置于第 1 行第 1 列上面的单元格中，选择“插入”|“图像”命令，插入图像\ch11\image\text.gif。在“属性”面板上，设置图像居中，其余默认。 (3) 将光标置于表格的第 3 行，输入文字：Copyright 2005，All Rights Reserved青春驿站。在“属性”面板上，设置文字居中，其余默认。此时页面如图11-10 所示。 11.3.4 导航区的设计 主页的导航区设在页面的左下方，如图11-8 所示。设计导航区的具体操作步骤如下。 (1) 将光标置于左下方单元格中，选择“插入”|“图像”命令，在该单元格上方插入图像 ai01.gif，调整图像大小以适应单元格。 (2) 将光标置于所插入图像的下方，选择“插入”|“表格”命令，插入一个 5 行 1列，“表格宽度”为140像素，“边框粗细”、“单元格边距”为0，“单元格间距”为20的表格。 (3) 在表格的各行中分别输入文字：“驿站首页”、“时尚话题”、“心情文章”、“热点讨论”