《页面布局设计》PPT课件.ppt

项目三页面布局设计 项目简介本项目是设计并制作一个第八届北京体育电影周网站 该网站利用表格进行整体布局 通过表格属性的设置控制页面内容的显示 同时还利用行 列以及单元格的操作及属性设置 使得页面更加整洁美观 该网站采用 上中下 结构的布局形式 其中还涉及表格的嵌套使用等 项目目标本项目以设计一个北京体育电影周网站为例 要求结合网站布局设计的特点 学会并掌握创建表格的方法 能够熟练编辑表格并设置表格属性 掌握利用框架和框架集来布局网页 掌握并学会利用AP元素布局网页 学会利用spry构件布局网页 工作任务结合北京体育电影周相关信息 设计一个北京体育电影周网站 该网站由首页 北京体育电影资讯 北京体育电影论坛组成 其中利用表格 框架 AP元素以及Spry构件分别对网页进行布局 模块一使用表格布局网页 一 学习目标学会并掌握创建表格的方法 能够熟练编辑表格 设置表格属性 对网页进行布局 二 任务分析 绘制表格编辑网页布局 制作标题与版权说明 制作导航栏的 编辑网页表格内容 任务一 建立站点并新建网页 1 在C Inetpub 下建立站点目录tyweb 并使用高级标签定义站点 站点名为 tyweb 如图3 1 2所示 2 在起始页中的 创建新项目 中单击 html 创建新网页 3 执行 文件 保存 菜单命令 将网页保存在站点根目录下 保存文件名为index html 如图3 1 3所示 图3 1 2建立站点第一步 图3 1 3建立站点第三步 任务二绘制表格编辑网页布局 1 单击插入栏的下拉按钮 展开插入栏 单击 常用 选项 打开常用工具栏 2 单击 表格 按钮 创建表格 在弹出的 表格 对话框中 设置参数如图3 1 4所示 单击 确定 按钮 关闭对话框 图3 1 3表格布局网页第二步 3 选中表格第一行 单击 属性 面板上 合并单元格 按钮对第一行的单元格进行合并 如图3 1 5所示 同理合并第三行单元格 4 设置表格行高 将光标放置在第一行 修改 属性 面板上 高 为 265 如图3 1 6所示 同理设置第二行 高 为 500 第三行 高 为 70 设置第二行左侧单元格的 宽 为 200 右侧单元格的 宽 设为 700 5 选择表格 设置为对齐方式 选中标签 在 属性 面板上设置 对齐方式 为 居中 如图3 1 7所示 6 在单元格内输入文字 7 保存网页 预览效果如图3 1 8所示 图3 1 5合并单元格图3 1 6设置表格行高 图3 1 7设置表格对齐方式 图3 1 8表格布局效果 任务三制作标题与版权说明 复制所有素材图片至站点目录的images下 将鼠标定位在表格的第一行 执行 插入 图像 命令 在弹出的对话框中选择images文件夹下的图片文件 top gif 选取插入的图片 在 属性 面板中设置居中对齐 将鼠标定位在表格的第三行 插入水平线 并在 属性 面板中将水平线设置为宽600像素 居中对齐 取消阴影 并设置颜色 输入制作日期及版权说明 保存网页 预览效果如图3 1 9所示 图3 1 9标题与版权效果 任务四制作导航栏 1 打开上述活动中制作的index html网页 将光标定位在第二行左侧单元格内 在属性面板中将垂直对齐方式设为 顶端 对齐 如图3 1 10所示 并插入2行1列宽100 的表格 在该嵌套表格的第一行单元格中插入一行一列表格 如图3 1 11所示 2 让表格居中对齐 在其中输入如图3 1 12所示文字 并对文字进行编辑 3 在嵌套表格的第二行单元格内再插入6行1列的表格 如图3 1 13所示 修改表格属性 设置参数如图3 1 14所示 4 在插入的表格中输入相应文字 效果如图3 1 15所示 将 栏目导航 字号设为18像素 并设为斜体 在该单元格设置背景颜色为 F5F5F5 设置 体育电影资讯 体育电影论坛 和 联系方式 的链接分别到files tdzx html files tdlt html和files lxfs html 单击 修改 菜单栏下面的 页面属性 子菜单 在弹出的对话框中进行 链接 分类的设置 如图3 1 16所示 图3 1 13创建嵌套表格 图3 1 14设置表格属性 图3 1 15表格效果 5 单击表格边框 选取表格 6 在属性面板中将 水平 设置为居中对齐 垂直设置为 居中 7 保存当前网页 图3 1 16表格效果 任务五编辑网页表格内容 1 打开上述活动中制作的index htm网页 将光标定位在第二行右侧单元格内 在属性面板中将垂直对齐方式设为 顶端 对齐 插入12行2列 宽80 的表格 如图3 1 17所示 在属性面板中将该表格的对齐方式设置为 居中对齐 2 将光标定位在第一个单元格中 拖动鼠标选中所有单元格 并在属性面板中设置高度为35 如图3 1 18所示 3 将光标放置在第一个单元格 插入图片 images fh gif 输入文字标题文字 并设置其属性 如图3 1 19所示 4 在依次的下面三行单元格中输入该部分的新闻标题内容 并进行文字的位置调整 直到合适为止 如图3 1 20所示 5 重复步骤 1 3 完成网页内容 如图3 1 21所示 图3 1 18设置表格属性 图3 1 19设置表格单元格属性 图3 1 20设置表格属性 图3 1 21最终效果 模块二建立框架网页 一 学习目标掌握利用框架和框架集来布局网页 二 任务分析1 创建框架网页 2 保存框架和框架集文档 3 制作框架网页内容 4 设置框架属性 图3 2 1框架布局网页效果图 任务一 创建框架网页本任务中通过创建框架来对网页布局 1 在DreamweaverCS3起始页中选择 文件 新建 命令 打开 新建文档 对话框 2 在 示例中的页 选项卡中的 示例文件夹 列表框中选择 框架集 选项 在右侧的 示例页 列表框中选择 上方固定 左侧嵌套 框架结构 如图3 2 2所示 3 单击 创建 按钮 打开 框架标签辅助功能属性 对话框 在 框架 下拉列表中选择 mainframe 框架 在 标题 文本框中输入该框架的标题 通常保持默认设置 如图3 2 3所示 4 单击 确定 按钮关闭对话框 完成框架网页的创建 图3 2 2创建框架网页 图3 2 3设置框架标签属性 任务二 保存框架和框架集文档1 选择 文件 保存全部 命令 打开 另存为 对话框 2 在 另存为 下拉列表中选择保存的路径 在 文件名 文本框中输入 tdzx html 如图3 2 4所示 3 单击 保存 按钮完成框架集网页文档的保存 同时打开 另存为 对话框进行框架网页文档 main html 的保存 如图3 2 5所示 4 单击 保存 按钮完成框架网页文档的保存 同时打开 另存为 对话框进行框架网页文档 left html 的保存5 同理 保存框架网页文档 top html 即完成所有框架网页文档的保存 图3 2 4保存框架 一 图3 2 5保存框架 二 任务三 制作框架网页内容 1 在 top 框架中 插入图片 top jpg 居中对齐 并调整该框架的高度为265px 设置top html的页面属性 如图3 2 6所示 2 在 left 框架中 设置 页面属性 修改 页面字体 为 黑体 文本颜色 为 000080 背景颜色 为 AAB3FB 如图3 2 7所示 3 插入一个4行1列的表格 单元格高度设为35 并输入文字内容 设置文字水平 居中对齐 文字加粗 大小16px 如图3 2 8所示 分别对四行文字设置链接 返回首页 链接到 index html 目标为 top 资讯主页 链接到main html 目标为mainframe 体育资讯 链接到tyzx html 目标为mainframe 电影资讯 链接到dyzx html 目标为mainframe 在该框架中进行页面属性的链接分类设置 如图3 2 9所示 4 main html 框架网页内容的制作 在other文件夹中找到对应的文字素材 并进行文字的编排 保存框架网页 选中框架集后预览 其效果如图3 2 10所示 5 利用相同的方法完成其他两个 体育资讯 和 电影资讯 的页面 如图3 2 11所示 图3 2 6设置页面属性 图3 2 8创建表格 图3 2 9left html页面属性的链接设置 图3 2 10框架网页效果图 任务四 设置框架属性1 选择 窗口 框架 命令 打开 框架 面板 选中框架集 如图3 2 12所示 2 在 属性 面板的 行 栏的 值 文本框中输入 265 即顶部框架高度为 265 如图3 2 13所示 3 在 框架 面板中选择嵌套框架集 如图所示 4 在 属性 面板的 列 栏的 值 文本框中输入 180 如图3 2 15所示 5 设置框架集的网页标题 1 选择要设置框架集网页标题的框架集 tdzx 2 在文档工具栏的 标题 文本框中输入网页标题 第八届北京国际电影体育周 如图3 2 16所示 图3 2 12框架面板 图3 2 13设置框架属性 图3 2 14设置框架属性 图3 2 16设置框架集网页标题 模块三使用AP元素布局网页 一 学习目标掌握并学会利用AP元素布局网页 学会spry构件的使用 二 任务分析1 为网页设置页面属性 2 创建AP元素布局网页 3 编辑网页内容 4 利用spry构件编辑网页内容 图3 3 1AP元素布局网页效果图 任务一 为网页设置页面属性1 在DreamweaverCS3起始页中选择 文件 新建 命令 打开 新建文档 对话框 2 在 空白页 选项卡中的 页面类型 列表框中选择 HTML 选项 在右侧的 布局 列表框中选择 无 如图3 3 2所示 3 单击 创建 按钮 完成网页的创建 并保存该网页在files文件夹中 命名为tdlt html 4 在 属性 面板中设置单击 页面属性 按钮 如图3 3 3所示 5 在弹出的 页面属性 对话框中设置参数如图3 3 4所示 图3 3 2创建网页 图3 3 3设置页面属性 图3 3 4设置页面属性 任务二 创建AP元素布局网页1 选择 布局 工具面板中的 绘制APDIV 如图3 3 5所示 2 鼠标呈 字形 在网页编辑窗口中的任意位置按下鼠标左键不放进行拖动即创建APDIV 在绘制过程中 编辑窗口右下角将动态显示正在绘制的APDIV的大小 如图3 3 6所示 可以边绘制边查看其大小 至合适大小后再释放鼠标 3 创建嵌套APDIV 将鼠标光标定位到所需的APDIV layer1 内 选择 插入记录 布局对象 APDIV 命令即可创建一个嵌套APDIV 4 利用上述方法 创建如图3 3 7所示的嵌套APDIV 并修改其属性 小贴士 AP元素 绝对定位元素 是分配有绝对位置的HTML页面元素 具体而言 就是div标签或其它任何标签 AP元素可以包含文本 图像或其它任何可放置到HTML文档正文中的内容 图3 3 5绘制AP元素 图3 3 6APDIV大小显示 图3 3 7网页布局 任务三 编辑网页内容 1 在 layer2 中 插入图片 top jpg 2 在 layer3 中 添加 APDIV 元素 并对网页进行布局 效果如图3 3 8所示 3 在 layer4 中 添加 APDIV 元素 并对网页进行布局 效果如图3 3 9所示 4 利用相同的方法 在 layer5 layer6 中 添加 APDIV 元素 并对网页进行布局 效果如图3 3 10所示 5 在已经布局好的网页中 插入图片或文字 效果如图3 3 11所示 图3 3 8APDIV元素的嵌套 一 图3 3 9APDIV元素的嵌套 二 图3 3 10APDIV元素的嵌套 三 图3 3 11APDIV布局效果图 任务四 利用spry构件编辑 联系方式 页面内容Spry框架是一个JavaScript库 Web设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web页 有了Spry 就可以使用HTML CSS和极少量的JavaScript将XML数据合并到HTML文档中 创建构件 如折叠构件和菜单栏 向各种页面元素中添加不同种类的效果 在设计上 Spry框架的标记非常简单且便于那些具有HTML CSS和JavaScript基础知识的用户使用 1 打开index html文件 将该文件另存在files文件夹下面并命名为 lxfs html 在弹出的是否更新链接的对话框中 选择 是 删除该页面右侧的表格 将光标置于右侧单元格中 插入一个 APDIV 元素 layer1 单击常用插入面板下的下拉按钮 选择 Srpy 命令 在 spry 插入面板中单击 spry选项卡式面板 按钮 如图3 3 12所示 2 在单元格中插入了选项卡式面板 效果如图3 3 13所示 3 选择选项卡式面板外侧的蓝色标题 执行菜单栏中的 窗口 属性 命令 打开属性面板 如图3 3 14所示 4 在网页中直接修改选项卡名称为 联系方式1 联系方式2 要添加新的选项卡 则单击属性面板上的 添加面板 按钮 并将其名称修改为 联系方式3 联系