1、第八章设置DIV+CSS布局 随着Web 2.0网站的盛行,符合Web标准的设计成为目前网站设计所要遵循的首要原则。而基于Web标准的网站设计其核心在于实现内容与表现相分离,DIV+CSS恰恰是目前比较主流的一种网页布局方法,它有别于传统的表格布局模式,可以真正实现这一核心标准。本章即是基于“DIV+CSS”技术,使用Dreamweaver来实现“个人网站”的设计与制作。知识目标(1)掌握Web的标准。(2)了解XHTML的基础。(3)掌握DIV的概念。(4)掌握CSS语法规则。(5)了解模板和库的概念和应用。学习完本章后,学生应当能够依据前期的网站策划及效果图完成个人网站的DIV+CSS布局
2、,包括:(1)学会利用“DIV+CSS”完成页面的布局,灵活运用该技术的布局思路及方法。(2)学会使用“模板和库”进行网页的布局。第一节个人网站首页的制作本节的目标是依据“个人网站”的首页效果图,使用DIV+CSS技术,完成网站首页的制作一、绘制首页结构布局草图一、绘制首页结构布局草图根据首页效果图,利用Photoshop软件绘制首页的结构布局草图,效果如图8-2所示。对照布局草图,首页中各个版块的内容如下:(1)top,主要放置LOGO或者配套文字。(2)lan,设置欢迎语样式。(3)leftblank,设置区块样式。(4)pic,主要放置个人相册图片展示。(5)rightdiv,放置常用的
3、链接文字及首页导航条。(6)midmainleft,放置美文欣赏及一些标签文字链接。(7)xian,放置版块分割线。(8)rightcontent,放置音乐推荐及圈子好友推荐。(9)bottom,放置网页的版权信息。二、新建站点新建个人网站的站点“gerenwangzhan”,创建好的站点效果如图8-3所示。三、制作页面(1)执行“文件|新建”命令,在弹出的对话框中设置页面类型为“CSS”,点击“创建”按钮,如图8-4所示。(2)打开文件“Default.html”,切换到“代码”视图,在和之间输入代码:用于实现将CSS样式文件链接到当前的网页。(3)在新建的CSS文件中输入代码:(4)切换到
4、切换到“Default.html”的代码视图的代码视图,在在和和之间添加之间添加div,代代码如下码如下:(5)切换到切换到CSS文件文件,继续添加继续添加CSS样式样式,代码如下代码如下:(6)继续在网页的代码视图下添加代码,具体如下:圈子好友美文欣赏个人相册音乐推荐(7)切换到CSS文件,新建自定义样式“.leftblank”“.pic”“.rightdiv”“.rightdiv li”,代码如下:.leftblank width:36px;/*设置区块的宽度*/height:169px;/*设置区块的高度*/float:left;/*设置区块浮动方向为左*/background:#000
5、;/*设置区块背景色*/.picpadding-left:70px;/*设置区块左边距为70像素*/float:left;width:542px;height:169px;.rightdivpadding-top:7px;padding-left:l0px;width:245px;height:162px;float:left;background:#cac75e;.rightdiv lifont-family:黑体;/*设置字体*/padding-top:3px;/*设置上边距为3像素*/font-size:15px;/*设置字号*/font-weight:bold;/*设置字体加粗*/li
6、ne-height:31px;padding-left:50px;padding-bottom:5px;background:url(images/linews.jpg)no-repeat;/*设置背景色为图片,其相对路径为images/linews jpg*/width:188px;height:31px;第二节第二节个人网站子页面的制作个人网站子页面的制作一、创建网站与页面模板(1)打开网站的首页文件“Default.html”,执行“文件|另存为模板”命令,将网站保存为模板文件Default.dwt,如图8-12所示。(2)删除并调整模板文件中的Flash动画所在的div中的部分代码,修
7、改后的代码如图8-13所示。(3)将光标定位在“”中间,在菜单栏选择“插入”“模板对象”“可编辑区域”,在弹出的对话框中点击“确定”按钮,即可插入可编辑区域,名称为EditRegion3,二、通过模板生成“店铺公告”页面(1)执行“文件|新建”命令,在弹出的对话框中选择“模板中的页”选项,然后在站点列表中选择站点“gerenwangzhan”,接着选择模板文件“Default”,点击“创建”按钮即可基于模板创建网页,并将页面保存为mwxs.html,(2)将光标定位至网页文件“mwxs.html”的可编辑区域中,输入如下代码:治愈系图片欣赏查看更多美文打开样式表文件“Default.css”,
8、添加样式文件,具体代码如下:.xianlbackground:url(images/rightbian.jpg);width:22px;float:left;height:300px;.rightctpadding-left:15px;width:310px;float:left;height:300px;.middlwidth:521px;height:300px;float:left;padding-left:106px;.contentlline-height:18px;float:left;height:146px;width:518px;padding-left:0px;.litlepiclwidth:124px;height:124px;float:left;border:0px;margin-left:2px;border:1px#000 solid;(3)切换到网页文件的代码窗口,在“”之间嵌套代码,具体如下:1.DIV+CSS布局的优势有哪些?2.简述Web标准及其发展趋势。3.简述对CSS盒子模式的理解。4.简述SPAN元素和DIV元素的区别与用法,并分别写出一个例子。
