使用 CSS+Div 布局网页实训目的常见网页布局方式有表格布局框架布局和使用 CSS+DIV 布局等方式使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术熟练掌握 CSS+DIV 布

Size: px

Start display at page:

Download "使用 CSS+Div 布局网页实训目的常见网页布局方式有表格布局框架布局和使用 CSS+DIV 布局等方式使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术熟练掌握 CSS+DIV 布"

颉蓟
5 years ago
Views:

使用 CSS+Div 布局网页实训目的常见网页布局方式有表格布局框架布局和使用 CSS+DIV 布局等方式使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术熟练掌握 CSS+DIV 布局方式, 是网页设计者必备的技能

1 使用 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.

2 实训流程 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 所示

3 图 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;

4 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;

5 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;

6 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;

7 #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 键在浏览器中预览其效果

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05