使用 CSS+Div 布局网页 实训目的 常见网页布局方式有表格布局 框架布局和使用 CSS+DIV 布局等方式 使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术 熟练掌握 CSS+DIV 布局方式, 是网页设计者必备的技能 实训目的 : 掌握网页界面设计流程 ; 掌握与网页元素定位相关的 CSS 样式属性 ; 掌握两列固定宽度居中布局的实现步骤 ; 掌握使用 IETester 进行网页浏览器兼容性测试的方法 实训要求 本实训以某学校网站为载体, 练习使用 CSS+DIV 布局网页的步骤及创建静态页面的方法 网页最终效果如图 1 所示 图 1 最终效果
实训流程 1) 启动 Dreamweaver CS6, 创建一个本地站点, 新建一个 HTML 文档 将图片素材复制到文件夹中新建的 images 文件夹下, 也可以在 Photoshop 中使用切片工具切图, 制作所需的图像素材 打开 Dreamweaver CS6, 创建 建设成果 站点, 新建 index.html, 创建 type.css 样式表文件, 并链接到 index.html 中 2) 设置固定宽度且居中的布局版式 单击 插入 面板 布局 分类中的 插入 Div 标签 按钮, 插入 ID 为 container 的 Div 标签 在 CSS 样式 面板中, 新建并设置 body container 的 CSS 样式, 代码如下所示 : body { background-image: url(11.jpg); background-repeat: repeat-y; margin: 0px; #container { width: 1002px; margin:0 auto; background:url(05.jpg) repeat-y; 3) 在 container 中依次插入 ID 为 top banner nav main bottom 的 Div 标签, 其中 top 用来存放网页 Logo 标题等信息,banner 用来设置展示图片和二级标题,nav 用来设置导航条,main 用于放置文章列表等信息,bottom 用于设置版权信息 为上述 Div 标签设置 CSS 样式后的效果如图 2 所示
图 2 固定宽度且居中的网页布局框架 4) 上述 Div 标签的 CSS 样式代码如下所示 : #top { background: url(s02.jpg) no-repeat; width:100%; height:84px; #banner { background:url(s04.jpg) no-repeat; height:182px; width:100%; #nav { background:#beb79e; margin:1px 22px 1px 14px; height:39px; #main{ margin:10px 10px 10px 14px; #bottom { background: url(08.jpg) no-repeat; width:100%; padding:50px 0px 10px 0px; 5) 设置鼠标经过时改变文字颜色的导航菜单 导航菜单使用无序列表设置 通过设置超链接标签的 display 属性为 block, 设置导航文字的区块响应 由此形成 ul li a 标签三级嵌套的导航菜单效果 CSS 样式代码如下所示 : #navul{ list-style:none; margin:0px 30px;
padding:0px; #navli{ padding:0px; margin:0px; text-align:center; #nava{ height:38px; width:82px; line-height:38px; display:block; text-decoration:none; color:#fff; font-size:14px; font-weight:bold; #nav a:hover{ text-decoration:none; color:#831616; 6) 将光标定位在 main 中, 依次插入 left right 两个 Div 标签, 设置其 float 属性为左浮动 CSS 样式代码如下所示 : #left{ width:192px; #right{ margin:0px 6px; width:768px;
6) 左侧区域布局及样式设置 左侧区域内容包括成果信息和成果负责人 标题使用 h1 标记, 内容使用 Div 标记 成果信息使用表格列出, 成果负责人使用图文混排 两个模块间可以使用 Div 标记实现清除浮动功能 具体实现代码见 type.css 其中清除浮动的 HTML 代码为 : <div style="clear:both; height:6px;"></div> 7) 右侧区域布局及样式设置 右侧区域内容包括成果简介和成果展示, 由此分别插入 Div 并设置 ID 为 shotcut show 标题设置为 h1 标记, 成果展示设置为图文混排样式 CSS 样式代码如下 : #shotcut{ border:1px solid #e1e1e1; #show{ border:1px solid #e1e1e1; #right h1{ height:36px; line-height:36px; width:748px; padding-left:20px; text-align:left; font-size:14px; font-weight:bold; color:#401500; border-bottom:1px solid #e1e1e1; background:#f5f4f4; #shotcutdiv{ margin:6px;
font-size:12px; line-height:22px; #show div{ margin:16px; font-size:12px; 8) 设置成果展示的图文混排效果 在 show 里面插入在 ID 为 showinfo 的 Div, 并使用 ul 标签设置图文混排列表 部分 HTML 代码如下所示 : <div id="showinfo"> <ul> </ul> </div> 9) 设置图文混排效果的 CSS 样式代码如下所示 : #showinfoul{ margin:0px; padding:0px; list-style:none; #showinfoli{ width:182px; #showinfo li img{ border:1px solid #d2beb4; padding:1px; width:165px; height:115px;
#showinfop{ line-height:22px; text-align:center; 10) 在 bottom 内部添加版权信息, 并设置 CSS 样式代码如下 : #bottom p{ font-size:12px; line-height:22px; text-align:center; color:#666; 11) 至此, 网页布局设计完毕, 按 F12 键在浏览器中预览其效果