页面布局设计ppt课件.ppt

《页面布局设计ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目三页面布局设计项目简介本项目是设计并制作一个第八届北京体育电影周网站。该网站利用表格进行整体布局，通过表格属性的设置控制页面内容的显示，同时还利用行、列以及单元格的操作及属性设置，使得页面更加整洁美观；该网站采用“上中下”结构的布局形式，其中还涉及表格的嵌套使用等。项目目标本项目以设计一个北京体育电影周网站为例，要求结合网站布局设计的特点，学会并掌握创建表格的方法,能够熟练编辑表格并设置表格属性；掌握利用框架和框架集来布局网页；掌握并学会利用AP元素布局网页；学会利用spry构件布局网页。工作任务结合北京体育电影周相关信息，设计一个北京体育

2、电影周网站。该网站由首页、北京体育电影资讯、北京体育电影论坛组成，其中利用表格、框架、AP元素以及Spry构件分别对网页进行布局。模块一使用表格布局网页(一)学习目标学会并掌握创建表格的方法，能够熟练编辑表格，设置表格属性；对网页进行布局。(二)任务分析１、绘制表格编辑网页布局；２、制作标题与版权说明；３、制作导航栏的；４、编辑网页表格内容；任务一：建立站点并新建网页；（1）在C:Inetpub下建立站点目录tyweb，并使用高级标签定义站点，站点名为“tyweb”，如图3.1.2所示。（2）在起始页中的“创建新项目”中单击“html”创建

3、新网页。（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、。（4）设置表格行高，将光标放置在第一行，修改“属性”面板上“高”为“265”，如图3.1.6所示，同理设置第二行“高”为“500”，第三行“高”为“70”；设置第二行左侧单元格的“宽”为“200”，右侧单元格的“宽”设为“700”。（5）选择表格，设置为对齐方式：选中

5、权说明１、复制所有素材图片至站点目录的images下２、将鼠标定位在表格的第一行，执行“插入>图像”命令，在弹出的对话框中选择images文件夹下的图片文件“top.gif”３、选取插入的图片，在“属性”面板中设置居中对齐４、将鼠标定位在表格的第三行，插入水平线，并在“属性”面板中将水平线设置为宽600像素，居中对齐，取消阴影，并设置颜色５、输入制作日期及版权说明６、保存网页，预览效果如图3.1.9所示图3.1.9标题与版权效果任务四制作导航栏（1）打开上述活动中制作的index.html网页，将光标定位在第二行左侧单元格内，在属性面板中将垂直

6、对齐方式设为“顶端”对齐（如图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”；设置“体育电影资讯”、“体育电影论坛”和“联系方式”的链

7、接分别到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网页，将光标定位在第二行右侧单元格内，在属性面板中将垂直对齐方式

8、设为“顶端”对齐，插入12行2列，宽80%的表格，如图3.1.17所示。在属性面板中将该表格的对齐方式设置为“居中对齐”。（2）将光标定位在第一个单元