第5章_网页布局.ppt

4．POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。 5．T型布局 T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。 5．T型布局 6．标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。 7．左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。 其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 。 7．左右框架型布局 8．FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。 5.4.1 表格＋CSS布局 /* 表格样式定义 */ .left_tdbgall { height: 250px;/*定义单元格高度*/ width: 190px;/*定义单元格宽度*/ background-color: #666666;/*定义背景颜色为灰色*/ border: 1px solid #99CC00;/*定义表格边框为1像素绿色细线*/ } 5.4.1 表格＋CSS布局 图5-52 设置边框属性 5.4.1 表格＋CSS布局 （2）定义一个.left_top类选择符，这个CSS样式用来控制第一个单元格。代码如下：? /* 顶部单元格背景、文字、段落格式等定义 */ .left_top { color: #FFFFFF; /*定义文字颜色*/ height: 30px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ text-align: left; /*定义段落对齐方式为左对齐*/ background-image: url(img/head.png); /*定义单元格背景图像*/ 5.4.1 表格＋CSS布局 background-position: center; /*定义背景图像居中*/ background-repeat: no-repeat; /*定义背景图像不重复*/ padding-left:35px; /*设置方框中填充对象的左边距为35像素*/ font-size: 12px; /*定义文字大小*/ vertical-align: middle; /*定义文字在单元格垂直方向居中对齐*/ } 5.4.1 表格＋CSS布局 （3）定义一个.left_mid类选择符，这个CSS样式用来控制第二个单元格。代码如下：? /* 中部单元格背景、文字、段落格式等定义 */ .left_mid { padding: 5px; /*定义填充内容的边距*/ height: 200px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ font-size: 12px; /*定义文字大小*/ background-color: #CCCCCC; /*定义背景颜色为浅灰色*/ color: #000000; /*定义文字颜色*/ list-style-position: inside; /*定义列表位置为内部*/ list-style-image: url(img/s_left.gif); /*定义列表项前面的图标*/ } 5.4.1 表格＋CSS布局 （4）定义一个.left_end类选择符，这个CSS样式用来控制第三个单元格（底部单元格）。代码如下所示。? .left_end { height:20px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ font-size: 12px; /*定义文字大小*/ color: #FFFFFF; /*定义文字颜色*/ text-align: right; /*定义段落对齐方式为右对齐*/ background-color: #99CC00; /*定义背景颜色为绿色*/ } 5.4.1 表格＋CSS布局 2．创建网页文档 （1）新建一个网页文档5.4.1.html。在“CSS样式”面板中单击“附加样式表”按钮，弹出“链接外部样式表”对话框，设置情况如图5-53所示。 设置完成后， “CSS样式”面板中就出现了定义好的样式，如图5-54所示。 图5-53 链接外部样式表 图5-54 “CSS样式”面板 5.4.1 表格＋CSS布局 （2）在“设计”视图下，插入一个3行1列的表格。切换到“代码”视图，重新编辑body标签内的代码，最终b