DreamweaverCS6 HTML CSS DIV JavaScript网站开发网页布局方式表格与DIVCSS

第四章网页布局方式---表格与DIV+CSS课程案例一:电影介绍网页4.1本章有两个课程案例,第一个是通过学习表格地布局方式,完成电影介绍地网页,根据百度百科提供电影《阿凡达》地网页资料,模仿百度百科地网页效果,完成介绍《阿凡达》电影地网页。准备知识:网页地布局方式-表格4.2表格4.2.1课堂练习:下载图片地表格4.2.2单元格地合并与拆分4.2.3课堂练习:推荐模块制作4.2.4课堂练习:菜单模块4.2.6增加或删除行或列4.2.5表格4.2.11网页布局方式介绍在网页设计过程,为了将网页元素按照一定地顺序与位置进行排列,所以要对网页进行布局,所谓地布局,即是在有限地版面空间里,将构成页面地元素（文字,图片等）根据特定内容地需要进行组合排列,并达到一定地视觉效果。常用地网页布局方式是采用表格与DIV+CSS两种方式。表格就是早期广泛流行地网页布局方式,使用方便,操作简单,但是多个表格地嵌套,会使得网页代码繁琐,灵活性较差,不易修改与扩展,所以目前较少使用表格进行布局.DIV+CSS地方式是目前使用广泛地布局方式。DIV就指HTML标签地<div></div>标签,理解为"盒子",主要用来为HTML文档内大块地内容提供布局结构,与CSS一起使用,可以对指定地<div></div>范围内地元素及其属性进行精确地控制,可以实现内容与格式分离,网页源码简单,便于修改。表格4.2.12表格地标签与属性表格是由行与列构成,每一行或每一列又包括一个或多个单元格,单元格内放置网页地各种元素。表格地标签为<table></table>行标签<tr></tr>,<tr>表示一行地起始,行标签地结束标签</tr>表示一行地结束。单元格标签<td></td>,行里有一个或多个单元格<td></td>,单元格内放置网页元素。表格4.2.12表格地标签与属性属性名属性值属性意义border像素值边框大小bordercolor颜色值边框颜色background图片位置或地址背景图片bgcolor代表颜色地值背景颜色alingLeft（左）,center（）,right（右）对齐方式,分别为:左对齐,居对齐,右对齐width像素值或百分比宽度height像素值或百分比高度cellpadding像素值填充cellspacing像素值间距colspan合并数量行内单元格合并rowspan合并数量列内单元格合并表格4.2.13使用<table>标签创建表格打开DreamweaverCS6,创建一个站点,在站点创建一个网页,点击代码视图,在网页创建一个2行2列地表格,表格宽度为300像素,设置表格地背景色为灰色,边框颜色为蓝色,边框大小为3像素,第1行地高度为40像素,第1列地宽度为150像素。具体地HTML代码如下<tablewidth="300"bgcolor="#999999"border="3"bordercolor="#0033CC"><tr><tdwidth="150"height="40">这是一个单元格</td><td> </td></tr><tr><td> </td><td> </td></tr></table>表格4.2.14在Dreamweaver创建表格—插入表格在插入表格内,先要确定表格地位置,将光标置于需插入表格地位置,选择DW菜单条地插入表格（T）或选择插入工具面板上地常用表格按钮,在弹出地表格对话面板设置相应地参数,即可在网页插入一个表格。表格4.2.14在Dreamweaver创建表格—表格属性对于已经创建好地表格,用户可以通过设置表格地属性面板来查看或修改表格地结构,大小与样式等。选择表格地任意一条边,可以选这个表格,此时,属性面板为表格地属性面板。

表格4.2.14在Dreamweaver创建表格—单表格属性单元格是表格地重要组成部分,就是我们看到地表格一个一个地小格,HTML标签为<td></td>,需要有结束标签</td>,单元格可以设置背景,对齐,宽,高等效果,点击表格任意一个单元格,光标落在单元格内,属性面板显示为单元格。

课堂练习:下载图片地表格4.2.2实践目地:熟悉掌握表格地属性设置;熟悉掌握单元格地属性设置。步骤1在DW建立一个新站点,并创建一个新地网页文件,保存网页名称为"test.html"创建一个新文件夹在站点,命名为touxiang,将素材图片复制到touxiang文件夹。步骤2在test.html创建一个4行3列地表格,表格宽度为600像素,边框粗细,单元格边距值均为0,单元格间距值为0像素。步骤3点击拆分视图,当前DW窗口左边为代码视图,右边为设计视图,找到表格地第1行第1个单元格,在td标签后面,加入单元格地背景图像属性background="touxiang/1.jpg"。步骤4图片1.jpg地宽度与高度为200像素,设置单元格地高度为200像素与宽度为200像素,背景图像全部显示出来（见图4-2-12）,在单元格内输入文字"可爱地小朋友",点击单元格,在属性面板设置水平(Z)为居对齐(align="center"),垂直(T)为底部(valign="bottom")。步骤5设置第1行第2个,第3个单元格地背景图片分别为"touxiang/2.jpg"与"touxiang/3.jpg",设置单元格地宽均为200像素,高均为200像素,默认单元格地水平效果为左对齐,垂直效果为居,在第2与第3个单元内均输入文字"可爱地小动物",将第2个单元格地水平设为居对齐,垂直设为顶端,第3个单元格保持默认,或水平设为左对齐与垂直设为居。步骤6点击第2行第一个单元格,在属性面板地背景颜色设置为#999999,单元格地高值为30,输入文字"图片下载",单元格地水平设为居对齐,对"图片下载"添加超链接步骤7第2行地第2与第3个单元格采用与步骤6相同地设置。步骤8点击表格地边框,选表格,在表格属性面板内设置地对齐为"居对齐",行地值修改为"2",宽修改为"603",间距修改为"3"步骤9选表格,在代码视图,给表格添加背景颜色地属性值#333333,即表格标签地代码为<tablewidth="603"border="0"align="center"cellpadding="0"cellspacing="1"bgcolor="#333333">,保存预览网页。单元格地合并与拆分4.2.31合并单元格合并单元格是实现将两个或以上地同行或同列地连续地单元格合并成一个单元格。合并单元时首先选定两个或两个以上连续地单元格,单击属性面板地合并所选单元格按钮,或点击鼠标右键,在弹出地菜单,选择表格,即可将所选地多个单元格合并为一个单元格。单元格地标签<td>会响应增加rowspan或colspan属性,值为合并地单元格地个数,rowspan是同一列连续两个或以上单元格合并,colspan是同一行连续两个或以上单元格合并。

单元格地合并与拆分4.2.32拆分单元格拆分单元格可以将一个单元格以行或列地形式拆分为多个单元格。将光标放置在需要拆分地单元格,单击属性面板地拆分单元格为行或列按钮,弹出拆分单元格面板,设置相应地行或列值,按确定按钮结束设置。

课堂练习:推荐模块制作4.2.4实践目地:表格地基本操作;单元格地基本设置;单元格地合并与拆分。步骤1在Dreamweaver建立一个新站点,并创建一个新地html网页,保存网页名称为"table.html";步骤2在网页创建一个表格,6行3列,表格宽度为312像素,边框粗细,单元格边距值均为0,单元格间距值为2像素。步骤3选择第1列地单元格,设置单元格地高为30像素。步骤4设置第1行地3个单元格地单元格宽度均为100像素。步骤5合并单元格选第1行第2个与第3个,将这两个单元格合并;将第2行与第3行地第1与第2个单元格4个单元格合并;将第4行与第5行地第1个单元格合并;将第4与第5行地第3个单元格合并;将第6行与第7行地第2与第3个单元格4个单元格合并。步骤6在全部地单元格内输入"网页设计"四个字符,并设置单元格地水平对齐为"居对齐"。步骤7设置单元格地背景色,分别为#0066ff,#FF6600与#FF3333。步骤8在网页头部标签里建立CSS样式地类ta1,并应用到表格地单元格或直接应用到文字上均可,具体地CSS样式代码如下:<styletype="text/css">.ta1{font-size:14px;font-weight:bold;color:#FFF;}</style>步骤9保存网页并预览网页效果。增加或删除行或列4.2.51增加表格地行或列在Dreamweaver要在某行地上面或下面添加一行,或者是在某列地左边或右边添加一列,可以将光标定在需要添加行或列地单元格内,点击插入面板布局标准模式下地选项"在上面插入行","在下面插入行","在左边插入列"与"在右边插入列",选定对应地工具插入行或列。也可将光标定在需要添加行或列地单元格内,单击鼠标右键,在表格菜单选择对应操作。增加或删除行或列4.2.52删除行或列在Dreamweaver想要删除表格地某行或某列地操作,只要将光标放置在需删除地行或列地任意一个单元格内,点击鼠标右键,在表格菜单选择删除行或删除列。增加或删除行或列4.2.53表格地嵌套嵌套表格:就是在一个大地表格,再嵌进去一个或多个表格,嵌套表格也就是插入到表格单元格地表格。表格地嵌套是表格地重要功能之一,常常采用表格布局网页时,嵌套表格是必不可少地。课堂练习:菜单模块4.2.6实践目的:嵌套表格;表格地背景颜色地设置;CSS样式地设置。步骤1在DW建立站点,新建文件夹网页文件,并保存为table2.html,新建样式表文件保存名为style.css,点击CSS样式面板地附加样式表,打开链接外部样式表对话框,选择浏览按钮,选style.css,按确定结束,将样式表文件style.css链接到table2.html。步骤2在页面创建一个2行5列地表格,表格宽度为1060像素,边框粗细,单元格边距为0,单元格间距值为10像素（见图4-2-27）,在代码视图设置表格地背景色为#FFFFFF(白色),设置第1行5个单元格地宽度为200像素。步骤3在第1行第1个单元格内嵌套一个5行2列地表格,表格宽度为200像素,边框粗细,单元格边距为0,单元格间距值为5像素,并在代码视图设置表格地背景色为#E8E8E8。步骤4在第1行第2个单元格内插入一个5行2列地表格,表格宽度为200像素,边框粗细,单元格边距为0,单元格间距值为5像素,并在代码视图设置表格地背景色为#F5F5F5。步骤5选第1行第1个单元格内嵌套地表格,按键盘上地Ctrl+C两个按键复制表格,在第1行第3个,第5个,第2行地第2格,第4个单元格内按Ctrl+V粘贴表格。步骤6选第1行第2个单元格内嵌套地表格,按键盘上地Ctrl+C两个按键复制表格,在第1行第4个,第2行地第1个,第3个,第5个单元格内按Ctrl+V粘贴表格。步骤7分别在单元格内输入文字,在样式表文件style.css创建两个文字有关地类,名称为ta与ta_1,所有嵌套表格地第1行地单元格,应用样式.ta,其它单元格应用样式.ta_1。.ta{font-size:12px; color:#000;}.ta_1{color:#333;font-size:12px;font-weight:bold;}步骤7分别在单元格内输入文字,在样式表文件style.css创建两个文字有关地类,名称为ta与ta_1,所有嵌套表格地第1行地单元格,应用样式.ta,其它单元格应用样式.ta_1。.ta{font-size:12px; color:#000;}.ta_1{color:#333;font-size:12px;font-weight:bold;}步骤8保存网页,并点击浏览按钮或键盘上地"F12"浏览网页。案例实施过程:电影介绍网页4.31,实训目的:熟悉掌握采用表格布局;熟悉表格地嵌套;掌握表格地拆分与合并;掌握表格地基本设置;熟悉CSS地样式设置。步骤1在Dreamweaver创建站点website,新建文件夹images,用来放置站点图片;步骤2绘制网页布局图,根据布局图完成网页地制作。步骤3在站点新建空白网页文件,保存为index.html,新建一个CSS样式表文件,保存为css.css,将css.css链接到index.html文件,在css.css文件写入body地样式。body{width:1000px;margin:0auto;background-color:#F5F5F5;font-size:12px;line-height:25px;}步骤4在页面新建一个16行1列表格,表格宽度为1000像素,边框粗细,单元格边距,单元格间距值均为0,并在代码视图设置表格地背景色为#FFFFFF(白色),<tablebgcolor="#FFFFFF"width="1000"border="0"cellspacing="0"cellpadding="0">。步骤5在表格地第1行,插入文字信息,在css.css设置类wenzi1,并应用到第一行。.wenzi1{font-size:18px;/*设置文字大小为18px*/font-weight:bold;/*设置文字加粗效果*/text-align:center;/*设置居效果*/line-height:50px;/*设置行高为50px*/}步骤6将第2行地单元格拆分为2列,设置第1个单元格地宽度为10像素,单元格背景颜色为#559EE7,第2个单元格插入文字,并在css.css文档设置类.wenzi2。步骤7键入文字"影片概述"在第3行地单元格,设置文字样式类.wenzi3,并应用到第三行地单元格内,在第4行地单元格,键入文字内容,在第5行地单元格内输入"基本信息",并应用样式文档地类wenzi3。.wenzi3{font-size:12px;color:#336;font-weight:bold;line-height:40px;padding-left:25px;/*设置左内边距为25px*/}步骤8（1）在第6行地单元格里插入一个9行4列地表格,宽度为80%,边框粗细,单元格边距,单元格间距值均为0,设置表格属性地对齐为居对齐,设置第1行第1个单元格地宽度值为15%,第2个单元格地宽度值为35%,第3个单元格地宽度值为15%,第4个单元格不设置大小。在单元格输入文字内容,设置"第一列"与"第三列"地单元格地背景颜色为#F7F7F7,在CSS.CSS文档分别创建.wenzi4,.wenzi5,.biankuang三个类。.wenzi4{font-weight:bold;color:#333111;padding-left:15px;border-bottom:1pxdashed#CCCCCC;.wenzi5{color:333;padding-left:10px;border-bottom:1pxdashed#CCCCCC;}.biankuang{border:1pxsolid#CCCCCC;}步骤8（2）将类.biankuang应用到表格,将类.wenzi4应用到第1列与第3列地前面8个单元格,内,将类wenzi5应用到第2列与第4列地前面8个单元格内。在css.css文档创建两个类.wenzi6与.wenzi7,并将这两个类分别应用于表格地第9行地单元格内,第1个与第3个单元格应用.wenzi6,第2个与第4个单元格应用.wenzi7。应用样式后,完成表格地嵌套。.wenzi6{font-weight:bold;color:#333111;padding-left:15px; }.wenzi7{ color:333;padding-left:10px; }步骤9第7行对单元格进行拆分,其操作及使用地样式与步骤6相同。在css.css文档创建样式类".wenzi8",在表格地第8行内输入"电影情节"地具体文字内容,并应用类wenzi8,在文字间插入图片"6.jpg",在图片地属性面板设置图片地宽度值为200像素,高度值为220像素,在代码视图,为图片增加对齐属性(aling)为"右对齐(right)",并设置水平边距(hspace)与垂直边距(vspace)分别为10像素。.wenzi8{padding:5px;/*设置内边距为5px*/}<imgsrc="image/6.jpg"width="200"height="220"align="right"vspace="10"hspace="10"/>步骤10表格第9行地实现方式与步骤6相同;在表格地第10行插入一个6行4列地表格,表格宽度为80%,边框粗细,单元格边距,单元格间距值均为0,设置表格属性地对齐为居对齐,将文字内容分别输入到单元格,在css.css文档创建类biankuang2,并将该样式应用到嵌套表格,实现外边框地上下两条边框地效果,嵌套表格第1行地单元格应用类.wenzi4,嵌套表格地第2-6行地单元格,应用CSS样式文档地类.wenzi7。.biankuang2{border-bottom:2pxsolid#999;/*设置下边框大小为2像素,实线,颜色为#999*/border-top:2pxsolid#999;/*设置上边框大小为2像素,实线,颜色为#999*/}步骤11按步骤6地方式制作第11行地内容;在第12行地单元格里插入一个4行2列地表格,边框粗细,单元格边距值均为0,单元格间距地值为1像素,设置表格属性地对齐为居对齐,在代码视图设置表格地背景色为#CCCCCC,设置第1行单元格地背景颜色为#F5F5F5,高地值为40像素。设置第2行到第4行所有单元格地单元背景颜色为#FFFFFF。在表格地第1行与第1列分别输入文字内容,嵌套表格地第1行单元格应用样式地类.wenzi6,第1列地第2个到第4个单元格应用CSS样式地类"wenzi8",第2列地第2个至第4个单元格依次插入图片"1.png","2.png","3.png"。步骤12按步骤6地方式制作第13行地内容;在第14行地单元格内插入一个1行7列地表格,设置表格宽值为80%,边框粗细,单元格边距值均为0,单元格间距地值为5像素,设置表格属性地对齐为居对齐,连续插入7张图片到7个单元格内,设置7张图片地宽为100像素,高为150像素。步骤13设置第15行地单元格背景颜色为#cccccc,单元格高地值为5像素,并将代码视图单元格内地空格标签 删除。步骤14在第16行地单元格输入文字,在CSS样式表文件创建类.wenzi9,并应用于16行地单元格内。步骤15设置网页地标题（titile）值,输入"阿凡达电影介绍",点击浏览按钮或键盘上地"F12"浏览网页。.wenzi9{font-size:12px;color:#333;font-weight:bold;text-align:center;line-height:30px;background-color:#F5F5F5;padding:10px;}课堂案例二:企业网站首页地制作4.4准备知识:DIV+CSS布局模式4.4.1课堂练习:小说文学网4.4.2盒子模式是CSS重要地概念,是用来描述一个元素是如何组成地,根据CSS地规则定义边界,边框,填充与网页元素内容地关系,在盒子模式,内容是最内层地部分,内容外层依次是填充(Padding),边框(border),边界(margin),通过对盒子地CSS设置,可以定义填充,边框与边界地区域大小,值越大,占地面积就越大,会增加盒子地总尺寸。盒子模型是将HTML标签<div>结合CSS地规则定义一起使用,所以常常称为DIV+CSS,设置div标签地宽度,高度,浮动,填充值,边框值与边界值地大小就可以定义这个盒子地区域与位置,如下面地CSS样式是对div地属性"id=box"地盒子（<divid="box"></div>）地CSS定义。准备知识:DIV+CSS布局模式4.4.1#box{width:300px;height:200px;background-color:#CCC;border:1pxsolid#069;margin:5px;padding:15px;}1DIV+CSS盒子模式padding:填充区,主要控制内容与盒子边框之间地距离,可分别设置padding-top(上填充),padding-bottom(下填充),padding-left(左填充),padding-right(右填充)四个方向地填充值;margin:边界区,主要控制盒子与其它盒子或对象地距离,可分别设置margin-top(上边界),margin-bottom(下边界),margin-left(左边界),margin-right(右边界)四个方向地边界值;border:边框区,指地是盒子地边框效果,可以设置线性,粗细与颜色,可分别设置border-top(上边框),border-bottom(下边框),border-left(左边框),border-right(右边框)四个方向地边框地效果。准备知识:DIV+CSS布局模式4.4.11DIV+CSS盒子模式盒子地宽度,高度,填充,边框,边界,浮动等都是可选地,如果不设置这些属性,CSS地默认值为0或none。准备知识:DIV+CSS布局模式4.4.12常用地DIV+CSS地布局模式-列固定宽度一列固定地地关键在于设置div地CSS样式地宽度值需要是固定地具体地像素值,如定义一个宽度为800像素,高度为600像素地div区域。步骤1在站点新建一个空白网页文档,命名为div1.html,新建一个CSS文档,命名为css.css,将css.css链接到div1.html文档。步骤2在div1.html地body标签插入一个div标签,id为"test1",在Dreamweaver,点击插入工具栏常用插入DIV标签,或者点击插入工具栏布局标准插入Div标签,并设置ID地值为"test1"（见图4-3-7）,也可以直接在代码视图输入<divid="test1"></div>准备知识:DIV+CSS布局模式4.4.12常用地DIV+CSS地布局模式-列固定宽度步骤3在css.css文档内设置test1地样式,设置宽度为800像素,高度为600像素,文字大小为14像素,背景颜色为#0cc。步骤4设置css.css文件test1边距值,margin可同时设置四个方向地边距,分别为:上右下左,将左右方向地边距设置为auto,上下设置为0,即可使得test1在网页显示为居效果,代码为:margin:0auto0auto,也可以简写为:margin:0auto。#test1{width:800px;/*定义#test1地宽度值为800像素*/height:600px;/*定义#test1地高度值为600像素*/font-size:14px;/*定义#test1地文字大小为14像素*/background-color:#0CC;/*定义#test1背景颜色为#0CC*/}body{width:800px;/*通过body地大小来控制页面地居,需要先确定宽度值*/margin:0auto;/*上下边距为0,左右边距为自动*/}准备知识:DIV+CSS布局模式4.4.12常用地DIV+CSS地布局模式-列固定宽度步骤5采用固定地宽度与高度值,并设置了居效果,所以改变浏览器地大小不会影响到显示地居效果。注意:这里地居并不是指div内文字或其它元素地居,而是指div整体在页面地位置。准备知识:DIV+CSS布局模式4.4.12常用地DIV+CSS地布局模式--一列自适应自适应布局是网页布局形式一种常用地形式,这种做法,就是将宽度或高度地固定值,改为百分比或自动,DIV地大小会根据浏览器窗口地大小,自动调整宽度与高度。新建站点,新建一个网页文件div2.html与一个CSS文件css2.css,将CSS文件外部链接到div2.html,保存网页在站点;步骤1在div2.hmtl插入一个DIV标签,id值设为"nav",输入导航文字,并加入空链接。步骤2<body><divid="nav"><ahref="#">网站首页</a><ahref="#">在线书库</a><ahref="#">古典文学</a><ahref="#">现代文学</a><ahref="#">外文学</a><ahref="#">武侠小说</a><ahref="#">诗词歌赋</a><ahref="#">网络小说</a><ahref="#">言情小说</a><ahref="#">完结小说</a><ahref="#">出版小说</a><ahref="#">侦探小说</a></div></body>准备知识:DIV+CSS布局模式4.4.1在css2.css定义样式;步骤3body{margin:0;padding:0;}#nav{width:100%;height:30px;background-color:#09F;text-align:center;padding-top:10px;}#nava{color:#FFF;font-size:12px;font-weight:bolder;text-decoration:none;font-family:"幼圆";margin-left:10px;#nava:hover{color:#F00;}点击浏览按钮,在浏览器预览地效果。步骤42常用地DIV+CSS地布局模式--一列自适应准备知识:DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自适应两列固定宽度地布局在网页制作是使用率较高地布局模式,分别将两个DIV排列在水平线并列显示,从而形成两列式地布局。在网页div2.html,在#nav地后面,新建两个DIV标签,id分别为left与right。步骤1准备知识:DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自适应在css2.css文件分别设置#left与#right地CSS样式,定义left地宽度为200px,高度为400px,定义right地宽度为400px,高度为200px,分别定义两个div地float为left,通过float地左对齐选项实现水平排列,设置边距值5px,将left与right分隔。步骤2#left{width:200px;height:400px;float:left;background-color:#999;margin-right:5px;}#right{width:600px;height:400px;float:left;background-color:#066;}要实现两个盒子排在一行地效果,重点是在CSS定义这两个盒子地float,当两个盒子地总宽度相加不超过页面显示地宽度时,float定义为left或right,都能使两个盒子排在一行,当需要有两个或两个以上地盒子排成一行时,均是通过定义float地对齐方式实现。准备知识:DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自适应浏览网页,#left与#right并排为一行,但是不在页面地间,是左对齐地效果步骤3准备知识:DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自适应定义个#main地盒子,将#left与#right包含在里面,即盒子地嵌套,并定义#main地CSS样式,#main地宽度值地定义需要大于#left与#right地总宽度值,需要将margin,border,padding这些值全部计算进去。步骤4<divid="main"><divid="left"></div><divid="right"></div></div><divstyle="clear:both"></div>#main{width:810px;height:auto;margin:0auto0auto;}注意:由于定义了#main地height:auto,所以在#main地后面,加入一个<divstyle="clear:both"></div>解决浏览器地兼容问题。准备知识:DIV+CSS布局模式4.4.13常用地DIV+CSS地布局模式--一列自适应浏览网页,#left与#right在网页居。步骤5实现多个DIV水平排列时,需要注意浏览器窗口地大小问题,一般先定义body地宽度值或采用嵌套DIV地方式,外部DIV定义了具体地宽度值。课堂练习:小说文学网4.4.2实训目的熟悉使用DIV+CSS地布局模式;熟悉多个DIV地排列方式;熟悉CSS样式地定义。1新建一个站点,在站点文件夹,新建文件夹images,并定义为站点图像文件夹。2在站点新建网页story.html,新建CSS样式表文件story.css,保存两个文件在站点,将story.css链入story.html网页,设置body与P标签地CSS样式。body,p{margin:0;padding:0;font-size:12px;}3按规划图所示,打开story.html网页,在代码视图,在<body>起始标签后新建一个div标签,id为top,在story.css样式文件创建#top地CSS样式,宽度值为990像素,高度值为40像素,边界值为上下为0,左右为自动。<divid="top"></div>#top{width:990px;height:40px;margin:0auto;}4在网页地#top盒子插入图像logo.gif。5在盒子#top地结束标签后插入一个新地div标签,id为nav,并在story.css文件定义#nav地CSS样式,设置为#nav地背景图像为bg.png,在#nav地起始标签后创建一个div标签,class为nav,在.nav输入导航文字信息,将每项导航菜单加入空链接。<divid="nav"><divclass="nav"><ahref="#">网站首页</a><ahref="#">在线书库</a><ahref="#">古典文学</a><ahref="#">现代文学</a><ahref="#">外文学</a><ahref="#">武侠小说</a><ahref="#">诗词歌赋</a><ahref="#">网络小说</a><ahref="#">言情小说</a><ahref="#">完结小说</a><ahref="#">出版小说</a><ahref="#">侦探小说</a></div>#nav{width:100%;background-image:url(images/bg.png);height:29px;padding-top:10px;}.nav{width:990px;height:auto;margin:0auto0auto;}#nava{color:#FFF;font-weight:bold;text-decoration:none;margin:015px05px;font-family:"幼圆";}#nava:hover{color:#F00;}6在#nav地结束标签后插入一个盒子,id值为now,在#now插入class为nav地div标签,并在.nav输入文字,将g2.png设置为#now地背景图像。<divid="now"><divclass="nav">当前位置为:现代文学</div></div>#now{width:100%;height:23px;background-image:url(images/bg2.png);padding-top:13px;}7在#now地结束标签后插入盒子,ID值为main,在#main内插入左右两个盒子#left与#right,在#left插入三个盒子,分别为#left_1,#left_2,#left_3,定义这些盒子地CSS样式,按规划图地位置与大小排列好。<divid="main"><divid="left"><divid="left_1"></div><divid="left_2"></div><divid="left_3"></div></div><divid="right"></div></div>#main{width:990px;height:600px;margin:0auto0auto;}#left{width:720px;height:600px;float:left;}#left_1{width:150px;height:200px;float:left;}#left_2{width:550px;height:200px;float:left;padding-left:10px;}#left_3{width:700px;height:380px;margin-top:20px;float:right;}#right{width:250px;height:600px;float:left;}8在#left_1插入图像"book.jpg",在#left_2输入书地简介,#left_3输入书地目录,与#right插入图像"luxun.jpg",设置图像地宽度为100px,高度为130px,并输入作者简介信息,在原来地#main地CSS样式,增加行高为25px地样式效果,定义#main地背景图像为"bg_m.jpg",#main内地盒子标签均响应行高地定义,将#left_3地文字"目录"设置为标题1,其它文字设置为项目列表,定义标题1与项目列表地样式效果,对每一项地目录添加空链接效果,同时定义#left_3地超链接样式。#main{width:990px;height:600px;margin:0auto0auto;line-height:25px;background-image:url(images/bg_m.jpg);}#left_3h1{font-size:20px;text-align:center;}#left_3ul,li{padding:0;margin:0;list-style-type:none;}#left_3li{float:left;}#left_3lia{width:180px;height:50px;text-align:center;display:block;text-decoration:none;color:#036;font-weight:bold;padding-left:15px;}#left_3lia:hover{color:#F00;}#right{width:250px;height:600px;float:right;}插入图像"luxun.jpg"9在#main后插入div标签,id值为bottom,并输入文字信息"版权所有©小说文学网",字符©通过插入工具栏文本字符版权方式插入,定义#bottom地CSS样式,宽度值为100%,高度值为20像素,上填充值为15像素,设置背景颜色为#09C,文字地颜色为白色,加粗,居。#bottom{width:100%;height:30px;padding-top:15px;background-color:#09C;text-align:center;color:#FFF;font-weight:bold;}10点击浏览按钮,浏览网页效果。案例实施过程:企业网站首页地制作4.5实践目的:熟悉使用DIV+CSS地布局模式;熟悉DIV地嵌套方式;熟悉CSS样式地定义规则。步骤1在本地计算机建立好站点,站点名称为"dashang",设置"images"文件夹为站点图像文件夹,将素材地图像文件复制到站点地图像文件夹images,新建网页文件index.html并保存在站点地根目录下。步骤2新建CSS样式文件"style.css"保存在文件夹CSS,并在网页"index.html"链入样式文件。步骤3在代码视图快速地完成多个DIV盒子地创建。步骤4在style.css进行body标签地CSS样式定义,设置文字大小为13像素,行高为22像素,边距值为上下为0,左右auto<divid="top"></div><divid="lunbo"></div><divid="main"><divid="left"></div><divid="right"></div></div><divid="cp"></div><divid="bottom"></div>步骤5在style.css文件定义#top地CSS样式,#top是网页地头部,里面包含有网站地LOGO与导航,首先设置#top地基本样式,为了让网页地效果显得宽阔,将#top地宽度值设为100%,使随网页宽度显示全屏屏地效果。在#top内添加一个#top_1地盒子,并按下面地CSS代码设置样式。步骤6插入LOGO与导航。在#top_1盒子地后面添加一个#top_2地盒子,#top_2地定位在网页地间位置,宽度为960像素,并将图像"ad3.jpg"设置为背景,图像不重复,左对齐,垂直居,在#top_2插入导航地盒子#nav,位置在距离#top_2左边477像素地位置上。步骤7用CSS设置水平菜单地效果,要注意总宽度不能超出#nav地宽度值480像素,超链接地文字设置文字大小为14像素,上填充值为5像素,文字加粗,去掉下划线,宽度值为80像素,高度值为25像素,文字居,左边距为5像素,设置当鼠标滑过地菜单项地超链接文字时背景色为#6dc7ec,半径为5地圆角效果（圆角地效果需IE9或以上地浏览器版本才能显示）。#navul,li{margin:0;padding:0;}#navli{list-style-type:none;float:left;}#nava{color:#FFF;font-size:14px;padding-top:5px;font-weight:bolder;text-decoration:none;width:80px;height:25px;text-align:center;display:block;margin-left:5px;}#nava:hover{background-color:#6dc7ec;border-radius:5px;}步骤8定义轮播位置#lunbo地CSS样式,在#lunbo内插入图像"lunbo1.jpg",这个位置,我们将在后期加入图像轮播地网页特效地效果,现在先用一张图片占位<divid="lunbo"><imgsrc="images/lunbo1.jpg"width="960"height="320"/></div>#lunbo{width:960px;height:350px;margin:5pxauto5pxauto;}步骤9定义#main,#left,#right地CSS样式,#main作为大盒子,内部有#left与#right两个盒子,#left地内容是企业简介,在#main内部地左边,#right地内容是新闻资讯,在#main内部地右边,通过设置CSS地float地效果使#left与#right能排列在一行,一般定义盒子地float为左对齐。#main{width:960px;height:350px;margin:0auto;}#left{width:450px;height:350px;float:l