页面布局设计PPT.pptVIP

项目三 页面布局设计;项目简介 本项目是设计并制作一个第八届北京体育电影周网站。 该网站利用表格进行整体布局，通过表格属性的设置控制页面内容的显示，同时还利用行、列以及单元格的操作及属性设置，使得页面更加整洁美观；该网站采用“上中下”结构的布局形式，其中还涉及表格的嵌套使用等。 ;项目目标 　　　本项目以设计一个北京体育电影周网站为例，要求结合网站布局设计的特点，学会并掌握创建表格的方法,能够熟练编辑表格并设置表格属性；掌握利用框架和框架集来布局网页；掌握并学会利用AP元素布局网页；学会利用spry构件布局网页。;工作任务 　　　　结合北京体育电影周相关信息，设计一个北京体育电影周网站。该网站由首页、北京体育电影资讯、北京体育电影论坛组成，其中利用表格、框架、AP元素以及Spry构件分别对网页进行布局。 ;模块一 使用表格布局网页 (一)　学习目标 　　　学会并掌握创建表格的方法，能够熟练编辑表格，设置表格属性；对网页进行布局。 (二) 任务分析 １、绘制表格编辑网页布局； ２、制作标题与版权说明； ３、制作导航栏的； ４、编辑网页表格内容； ;图3.1.2 建立站点第一步 ;图3.1.3建立站点第三步 ;图3.1.3 表格布局网页第二步 ;（3）选中表格第一行，单击“属性”面板上“合并单元格”按钮对第一行的单元格进行合并，如图3.1.5所示，同理合并第三行单元格。 （4）设置表格行高，将光标放置在第一行，修改“属性”面板上“高”为“265”，如图3.1.6所示，同理设置第二行“高”为“500”，第三行“高”为“70”；设置第二行左侧单元格的“宽”为“200”，右侧单元格的“宽”设为“700”。 （5）选择表格，设置为对齐方式：选中table标签，在“属性”面板上设置“对齐方式”为“居中”，如图3.1.7所示。 （6）在单元格内输入文字。 （7）保存网页，预览效果如图3.1.8所示。 ;图3.1.7设置表格对齐方式 ;任务三 制作标题与版权说明 １、复制所有素材图片至站点目录的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 创建嵌套表格 ;（5）单击表格边框，选取表格。 （6）在属性面板中将“水平”设置为居中对齐，垂直设置为“居中”。 （7）保存当前网页。;任务五 编辑网页表格内容 （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.21 最终效果;模块二 建立框