版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第八章设置DIV+CSS布局
随着Web
2.0网站的盛行,符合Web标准的设计成为目前网站设计所要遵循的首要原则。而基于Web标准的网站设计其核心在于实现内容与表现相分离,DIV+CSS恰恰是目前比较主流的一种网页布局方法,它有别于传统的表格布局模式,可以真正实现这一核心标准。本章即是基于“DIV+CSS”技术,使用Dreamweaver来实现“个人网站”的设计与制作。知识目标(1)掌握Web的标准。(2)了解XHTML的基础。(3)掌握DIV的概念。(4)掌握CSS语法规则。(5)了解模板和库的概念和应用。学习完本章后,学生应当能够依据前期的网站策划及效果图完成个人网站的DIV+CSS布局,包括:(1)学会利用“DIV+CSS”完成页面的布局,灵活运用该技术的布局思路及方法。(2)学会使用“模板和库”进行网页的布局。第一节个人网站首页的制作本节的目标是依据“个人网站”的首页效果图,使用DIV+CSS技术,完成网站首页的制作一、绘制首页结构布局草图根据首页效果图,利用Photoshop软件绘制首页的结构布局草图,效果如图8-2所示。对照布局草图,首页中各个版块的内容如下:(1)top,主要放置LOGO或者配套文字。(2)lan,设置欢迎语样式。(3)leftblank,设置区块样式。(4)pic,主要放置个人相册图片展示。(5)rightdiv,放置常用的链接文字及首页导航条。(6)midmainleft,放置美文欣赏及一些标签文字链接。(7)xian,放置版块分割线。(8)rightcontent,放置音乐推荐及圈子好友推荐。(9)bottom,放置网页的版权信息。二、新建站点新建个人网站的站点“gerenwangzhan”,创建好的站点效果如图8-3所示。三、制作页面(1)执行“文件|新建”命令,在弹出的对话框中设置页面类型为“CSS”,点击“创建”按钮,如图8-4所示。(2)打开文件“Default.html”,切换到“代码”视图,在<head>和</head>之间输入代码:<link
href=″css/Default.css″
rel=″stylesheet″
type=″text/css″/>用于实现将CSS样式文件链接到当前的网页。(3)在新建的CSS文件中输入代码:(4)切换到“Default.html”的代码视图,在<body>和</body>之间添加div,代码如下:(5)切换到CSS文件,继续添加CSS样式,代码如下:(6)继续在网页的代码视图下添加代码,具体如下:<div
class=″leftblank″></div><div
class=″pic″><a
href=″#″><img
src=″images/001.jpg″
border=″0″></a></div><div
class=″rightdiv″><ul><li
onmouseover=″this.style.background='url(imageslanli.jpg)
no-repeat'″onmouseout=″this.style.background
='url(images/linews
jpg)
no-repeat'″><a
href=″#″>圈子好友</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews
jpg)no-repeat'″><a
href=″#″>美文欣赏</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews.jpg)
no-repeat'″><a
href=″#″>个人相册</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews
jpg)
no-repeat'″><a
href=″#″>音乐推荐</a></li></ul></div>(7)切换到CSS文件,新建自定义样式“.leftblank”“.pic”“.rightdiv”“.rightdiv
li”,代码如下:.leftblank{
width:36px;/*设置区块的宽度*/
height:169px;/*设置区块的高度*/
float:left;/*设置区块浮动方向为左*/
background:#000;
/*设置区块背景色*/}.pic{
padding-left:70px;/*设置区块左边距为70像素*/
float:left;
width:542px;
height:169px;}.rightdiv{padding-top:7px;
padding-left:l0px;
width:245px;
height:162px;
float:left;
background:#cac75e;
}
.rightdiv
li{
font-family:″黑体″;/*设置字体*/
padding-top:3px;/*设置上边距为3像素*/
font-size:15px;/*设置字号*/
font-weight:bold;/*设置字体加粗*/
line-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中的部分代码,修改后的代码如图8-13所示。(3)将光标定位在“<td></td>”中间,在菜单栏选择“插入”→“模板对象”→“可编辑区域”,在弹出的对话框中点击“确定”按钮,即可插入可编辑区域,名称为EditRegion3,二、通过模板生成“店铺公告”页面(1)执行“文件|新建”命令,在弹出的对话框中选择“模板中的页”选项,然后在站点列表中选择站点“gerenwangzhan”,接着选择模板文件“Default”,点击“创建”按钮即可基于模板创建网页,并将页面保存为mwxs.html,(2)将光标定位至网页文件“mwxs.html”的可编辑区域中,输入如下代码:<div
class=″middl″>
<div
class=″woman″>治愈系图片欣赏</div>
<div
class=″contentl″></div></div><div
class=″xianl″></div><div
class=″rightct″><div
class=″rightcontenttitle″>查看更多美文</div><div
class=″rightlist″></div>打开样式表文件“Default.css”,添加样式文件,具体代码如下:.xianl{
background:
url(images/rightbian.jpg);
width:22px;
float:left;
height:
300px;
}.rightct{
padding-left:15px;
width:310px;
float:left;
height:300px;
}.middl{
width:521px;
height:300px;
float:left;
padding-left:106px;}</div>.contentl{
line-height:18px;
float:left;
height:146px;
width:518px;
padding-left:0px;
}.litlepicl{
width:124px;
height:124px;
float:left;
border:0px;
margin-left:
2px;
border:1px
#000
solid;
}(3)切换到网页文件的代码窗口,在“<div
class=″contentl″></div>”之间嵌套代码,具体如下:<div
class=″litlepicl″><a
href=″#″><img
src=″images/010.jpg″border=″0″></a></div><div
class=″litlepicl″><a
href=″#″><img
src=″images/007.jpg″
border=″0″></a></div><div
class=″litlepicl″><a
href=″#″><img
src=″im
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 绿色规范后勤讲座
- 中枢神经细胞瘤的健康宣教
- 2025年中国化工行业自动化配料生产线市场调查研究报告001
- 2025-2030中国精致内衣行业发展趋势及发展前景研究报告
- 2025-2030中国精子分析设备行业市场发展趋势与前景展望战略研究报告
- 2025-2030中国穿孔卡片机行业市场发展趋势与前景展望战略研究报告
- 2025-2030中国稀土复合肥行业发展趋势及发展前景研究报告
- 2025-2030中国移动式起重船提升机行业市场发展趋势与前景展望战略研究报告
- 2025-2030中国磁性轴承行业市场现状供需分析及投资评估规划分析研究报告
- 2025-2030中国碳和能源管理软件行业市场现状供需分析及投资评估规划分析研究报告
- 临床护理实践指南2024版
- 政府采购评审专家考试试题库(完整版)
- 第六单元 共同面对的全球性问题 知识清单
- 教育资源共享平台
- 2024年山东省日照市中考地理试题卷（含答案解析）
- 地铁消防设施检测技术规程 -DB13-T 5317-2020 河北
- DLT 5707-2014 电力工程电缆防火封堵施工工艺导则
- 墓碑石材购销合同
- 企业合同交易主体履约信用评价管理制度
- 场地租赁合同（标准版）
- 综合实践活动《社会公益活动我参与》-四年级下册课件
评论
0/150
提交评论