第6讲 网页制作(三)(2010PPT)_第1页
第6讲 网页制作(三)(2010PPT)_第2页
第6讲 网页制作(三)(2010PPT)_第3页
第6讲 网页制作(三)(2010PPT)_第4页
第6讲 网页制作(三)(2010PPT)_第5页
已阅读5页，还剩58页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

.NET主讲教师:e-mail:手机：第6讲网页制作（三）6.1使用CSS布局页面顶部内容6.2使用CSS制作网站导航6.3使用CSS制作列表6.4使用CSS制作内容的版式6.5解析“CSS禅意花园”经典案例6.1使用CSS布局页面顶部内容6.1.1制作包含文本logo的页面顶部6.1.2制作包含图像logo的页面顶部6.1.3制作包含文本banner的页面顶部6.1.1制作包含文本logo的页面顶部logo是标志的意思，就一个网站来说，logo即是网站的名片。制作包含文本logo的页面顶部，关键方法就是文本定位。下面制作一个包含文字logo和背景图的页面顶部的实例。该例中，通过内边距padding属性定位文字logo。示例：logo_1.html注：虽然外边距margin属性也可以定位，但注意若该网页总父容器的第一个子容器是含文本的块状元素时，父容器和该子容器的margin-top会因出现合并而出错，这时该子容器的定位用padding属性来完成。logo_1.html<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><title>logo_1</title><styletype="text/css">*{margin:0px;padding:0px;}#top{background-image:url(images/8_1.jpg);width:926px;height:124px;margin:0auto;}#toph1{color:#9999CC;padding-left:57px;padding-top:47px;}</style></head><body><divid="top"><h1>ENJOYCSS</h1></div></body></html>包含文本logo页面顶部的页面效果6.1.2制作包含图像logo的页面顶部图像logo比文本logo在视觉上更富有美感。img标签不是文本，没有内边距属性padding，它的定位是通过其外边距属性margin来实现的。示例：logo_2.htmllogo_2.html<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><title>logo_2</title><styletype="text/css">*{margin:0px;padding:0px;}#top{background-image:url(images/shadow.png);

width:926px;height:200px;margin:0pxauto;}#topimg{margin-left:40px;margin-top:30px;

background-color:#e4e4e4;}</style></head><body><divid="top"><imgsrc="images/8_2_logo.png"/></div></body></html>包含文本logo页面顶部的页面效果6.1.3制作包含文本banner的页面顶部Banner意为“网幅图像广告”，通常形式是图片或者段落文本。下面介绍如何使用CSS样式实现包含段落文本banner的页面顶部效果。大致思路是：设#Banner为父div，包含两个子div：#base（快捷方式条）和#info（段落文本）。设置#Banner元素的背景图片为广告图片。在父元素#Banner元素中，利用padding属性实现#base元素的定位，利用margin属性实现#info元素的定位。代码见logo_4.html包含文本banner的页面顶部#banner段落文本块（#info）快捷方式条（#base）制作包含文本banner的页面顶部1）定义#banner元素2）定义#base元素3）定义#info元素1）定义#banner元素banner元素的XHTML结构代码如下：<divid="banner"><divid="base">……</div><divid="info">……</div></div>1）定义#banner元素根据图片的尺寸设置宽度和高度，并将#banner设置为水平居中。#banner元素的CSS代码如下：#banner{background-image:url(images/8_3.jpg);height:186px;width:956px;margin:0pxauto;}注：8_3.jpg的尺寸为956px×186px。2）定义#base元素#base的XHTML结构代码：<divid="base"><ahref="#">website</a>  |<ahref="#">contactus</a>  |<ahref="#">homepage</a></div>2）定义#base元素#base的CSS代码如下：#base{margin-left:400px;padding-top:10px;font-size:14px;}#basea,#basea:visited{text-decoration:none;color:#5D3406;}#basea:hover{text-decoration:none;color:#ffffff;}注：为了和画面搭调，#base元素中超链接的颜色是在图片8_3.jpg中用吸管工具抓取的颜色。3）定义#info元素XHTML代码如下：<divclass="info">ByBinyaminAppelbaumandDavidChoThespecterofbanknationalizationisdrivingahistoricfiresaleofstocksincludingCitigroupandBankofAmerica,makingitharderforthosefirmstosurviveandimperilingtheeffortsoftheObama...</div>3）定义#info元素对文本进行排版，主要设置字的大小、字的颜色以及行高属性和#info的宽度。同时，利用margin-top和margin-left属性将#info元素定位在相对于#banner元素的某个位置上。#Info元素的CSS代码如下：#info{

margin-left:400px;margin-top:35px;

color:#ffffff;width:362px;height:83px;

font-size:12px;line-height:20px;}logo_4.html（1）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><head><title>logo_4</title><style>

*{ margin:0px; padding:0px;

}

#banner{ background-image:url(images/8_3.jpg); width:956px;height:186px;margin:0pxauto; }

#base{margin-left:400px;padding-top:10px;font-size:14px;}#basea,#basea:visited{text-decoration:none;color:#5D3406}

#basea:hover{text-decoration:none;color:#ffffff }

#info

{ margin-left:400px;margin-top:35px; color:#ffffff;width:362px;height:83px;font-size:12px;line-height:20px;}</style></head>logo_4.html（2）<body><divid="banner"><divid="base"><ahref="#">website</a>  |<ahref="#">contactus</a>  |<ahref="#">homepage</a></div><divid="info">ByBinyaminAppelbaumandDavidChoThespecterofbanknationalizationisdrivingahistoricfiresaleofstocksincludingCitigroupandBankofAmerica,makingitharderforthosefirmstosurviveandimperilingtheeffortsoftheObama...</div></div></body></html>包含文本banner的页面顶部页面效果6.2使用CSS制作列表6.2.1制作新闻列表6.2.2制作自定义图片项目符号的列表6.2.1制作新闻列表新闻列表是一个网站的重要组成元素。下面制作一个新闻列表页面。在这个实例中，制作一个基本的新闻列表，将标题与日期分开控制CSS样式。示例：list_1_1.html新闻列表页面1）制作新闻列表页面的HTML代码<divid="news"><h3>新闻列表</h3><ulid="pagelist"><li><ahref="#"><spanclass="lbt">奥运圣火瑞金传递结束</span><spanclass="ibt">2008-05-12</span></a></li><li><ahref="#"><spanclass="lbt">汤姆斯杯中国男羽杀进四强</span><spanclass="ibt">2008-05-09</span></a></li>

……</ul></div>2）制作#news元素的CSS样式#news{background-image:url(images/8_01_01.jpg);background-repeat:no-repeat;width:312px;height:200px;}3）制作#new3h3元素的CSS样式#newsh3{color:#C63d00;font-size:14px;

line-height:30px;margin-left:15px;

paddin-top:10px;}4）制作新闻列表项的CSS样式#pagelist{list-style-type:disc;margin-left:20px;}#pagelistli{font-size:14px;color:#C63D00;line-height:24px}#pagelistlia{color:#C63D00;text-decoration:none;}5)制作新闻标题.lbt元素的CSS样式#pagelistlia.lbt{text-decoration:none;}#pagelistlia:hover.lbt{color:#000066;text-decoration:underline;}6)制作时间.ibt元素的CSS样式#pagelistlia.ibt{color:#666;font-size:12px;text-decoration:none;}list_1_1.html（1）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><title>list_1_1</title><styletype="text/css">*{margin:0px;padding:0px;}#news{background-image:url(images/8_01_01.jpg);background-repeat:no-repeat;width:312px;height:200px;}#newsh3{color:#C63d00;font-size:14px;line-height:30px;margin-left:15px;padding-top:10px;}#pagelist{list-style-type:disc;margin-left:20px;}#pagelistli{font-size:14px;color:#C63D00;line-height:24px}#pagelistlia{color:#C63D00;text-decoration:none;}#pagelistlia.lbt{text-decoration:none;}#pagelistlia:hover.lbt{color:#000066;text-decoration:underline;}#pagelistlia.ibt{color:#666;font-size:12px;text-decoration:none;}</style></head>list_1_1.html（2）<body><divid="news"><h3>新闻列表</h3><ulid="pagelist"><li><ahref="#"><spanclass="lbt">奥运圣火瑞金传递结束</span><spanclass="ibt">2008-05-12</span></a></li><li><ahref="#"><spanclass="lbt">汤姆斯杯中国男羽杀进四强</span><spanclass="ibt">2008-05-09</span></a></li><li><ahref="#"><spanclass="lbt">中石油与委内瑞拉合建2000万吨炼厂</span><spanclass="ibt">2008-05-06</span></a></li><li><ahref="#"><spanclass="lbt">山东中华文化城引发争议</span><spanclass="ibt">2008-05-06</span></a></li><li><ahref="#"><spanclass="lbt">王某农村豪宅遭曝光</span><spanclass="ibt">2008-05-05</span></a></li><li><ahref="#"><spanclass="lbt">反扒者被咬还遭旁观者指责</span><spanclass="ibt">2008-05-05</span></a></li></ul></div></body></html>新闻列表页面效果6.2.2制作自定义图片项目符号的列表CSS默认的列表效果并不能够满足设计师对于列表中项目符号的要求。对此CSS在这方面提供了图片替换技术，可以选用符合页面风格的图片符号来替代默认效果。CSS提供的list-style-image属性完成图片替代项目符号。使用列表符号样式属性制作列表列表图片属性list-style-image是使用一幅图像来替换列表项的标记，语法结构如下：list-style-image:url(图片地址)|none;示例:list_1_2.htmllist_1_2.html（1）……<styletype="text/css">*{margin:0px;padding:0px;}#newsh3{color:#C63D00;font-size:14px;line-height:30px;

margin-left:15px;padding-top:10px;}#pagelist{margin-left:20px;

list-style-image:url(images/folder.jpg);}#pagelistli{width:330px;font-size:14px;color:#C63D00;line-height:24px}#pagelistlia{color:#C63D00;text-decoration:none;}#pagelistlia.lbt{text-decoration:none;}#pagelistlia:hover.lbt{text-decoration:underline;}#pagelistlia.ibt{color:#666;font-size:12px;text-decoration:none;}</style>……list_1_2.html（2）<body><divid="news"><h3>新闻列表</h3><ulid="pagelist"><li><ahref="#"><spanclass="lbt">奥运圣火瑞金传递结束</span><spanclass="ibt">2008-05-12</span></a></li><li><ahref="#"><spanclass="lbt">汤姆斯杯中国男羽杀进四强</span><spanclass="ibt">2008-05-09</span></a></li>

……</ul></div></body></html>自定义图片项目符号新闻列表页面效果6.3使用CSS制作内容的版式6.3.1制作分栏的文字排版6.3.2制作图文混和排版6.3.1制作分栏的文字排版文字排版一般有两种形式，通栏排版和分栏排版。通栏排版只有一栏。分栏排版有多栏。分栏排版示例：content_1.html分栏排版的步骤要达到以上分两栏的效果，步骤如下：定义两个div对象，在div对象中加入段落文字。为两个div对象指定宽度。通过设置float属性让两个div在水平方向并排显示，从而形成二列式布局，达到分栏排版的效果。1)制作分栏排版页面的XHTML代码<divid="layout"><divclass="col"><p>WEB标准不是某一个标准，……</p></div><divclass="col"><p>1．结构标准语言<br/>和……</p><p>2.表现标准语言<br/>CSS是……</p></div></div>在以上代码中，使用了两个class为col的div对象。现在需要为它们指定宽度，然后让两个div在水平方向并排显示，从而形成二列式布局，达到分栏排版的效果。2）制作排版的CSS样式*{margin:0px;padding:0px;}#layout{ width:500px; height:300px; margin:0pxauto; background:url(images/10_1.jpg)no-repeat;}.col{width:200px;padding:8px25px;float:left;}p{ line-height:180%; font-size:12px; color:#FFFFFF;}6.3.2制作图文混合排版段落元素p是块状元素，可以通过参与混排段落的宽度和浮动属性，以及设定img元素的浮动属性，来实现图片和段落的混排。示例：img2.htmimg2.htm<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head><title>图文混和排版</title><styletype="text/css">*{margin:0px;padding:0px;}#all{width:600px;height:600px;margin:0pxauto;padding:10px;background:#eee;}h2{text-align:center;}#author{text-align:right;}p{font-size:12px;text-indent:2em;line-height:20px;}#a{width:176px;float:left;}#img1{float:left;margin:12px;}</style><body><divid="all"><h2>白杨礼赞</h2><pid="author">作者：茅盾</p><p>白杨树实……</p><p>当汽车……</p><pid="a">几百万年前……</p><imgsrc="images/img.jpg"id="img1"/><p>黄与绿……</p><p>然而刹那间……平凡的一种树！</p></div></body></html>注：text-indent:2em意为段落首行缩进空两个字符。6.4解析“CSS禅意花园”经典案例下面解析“CSS禅意花园”的两个经典案例。应用技巧主要特色：用图片替换原有文字，使用“display:none”隐掉<span></span>内原来的文字。CSS禅意花园首页大致结构图#intro#supportingText（正文）#linkList#pageHeader#preamble（前言）#quickSummary（简介）#container<divid="container"><divid="intro"> <divid="pageHeader">……</div> <divid="quickSummary">……</div> <divid="preamble">……</div> </div><divid="supportingText"> <divid="explanation">……</div> <divid="participation">……</div> <divid="benefits">……</div> <divid="requirements">……</div> <divid="footer">……</div> </div><divid="linkList"> <divid="linkList2"> <divid="lselect">……</div> <divid="larchives">……</div> <divid="lresources">……</div> </div> </div></div><divid="extraDiv1"><span></span></div><divid="extraDiv2"><span></span></div><divid="extraDiv3"><span></span></div><divid="extraDiv4"><span></span></div><divid="extraDiv5"><span></span></div><divid="extraDiv6"><span></span></div>注：archive义为“档案”。CSS禅意花园首页主要结构代码未添加任何CSS样式的效果图"第1种风格的网页效果001.css(1)/*basicelements*/html{margin:0; padding:0;}body{font:75%georgia,sans-serif;line-height:1.88889;color:#555753; background:#fffurl(blossoms.jpg)no-repeatbottomright; margin:0; padding:0; }p{ margin-top:0; text-align:justify;}h3{font:italicnormal1.4emgeorgia,sans-serif; letter-spacing:1px;margin-bottom:0;color:#7D775C;}a:link{font-weight:bold;text-decoration:none;color:#B7A5DF;}a:visited{font-weight:bold;text-decoration:none;color:#D4CDDC;}a:hover,a:active{ text-decoration:underline;color:#9685BA; }acronym{ border-bottom:none; }001.css(2)/*specificdivs*/#container{ background:url(zen-bg.jpg)no-repeattopleft; padding:0175px0110px;margin:0;position:relative;width:720px;height:87px; }#intro{min-width:470px; }/*usinganimagetoreplacetextinanh1.*/#pageHeaderh1{ background:transparenturl(h1.gif)no-repeattopleft; margin-top:10px; width:219px; height:87px;float:left;}#pageHeaderh1span{display:none }#pageHeaderh2{ background:transparenturl(h2.gif)no-repeattopleft; margin-top:58px; margin-bottom:40px; width:200px;height:18px; float:right;}#pageHeaderh2span{display:none }#pageHeader{ padding-top:20px;}001.css(3)#quickSummary{ clear:both; margin:20px20px20px10px; width:160px; float:left; }#quickSummaryp{ font:italic10pt/22ptgeorgia; text-align:center; }#preamble{ clear:right; padding:0px10px010px; }#supportingText{ padding-left:10px; margin-bottom:40px; }#footer{ text-align:center; }#footera:link,#footera:visited{ margin-right:20px; }001.css(4)#linkList{ margin-left:600px; position:absolute; top:0; right:0; }#linkList2{ font:10pxverdana,sans-serif; background:transparenturl(paper-bg.jpg)topleftrepeat-y; padding:10px; margin-top:150px; width:130px; }#linkListh3.select{ background:transparenturl(h3.gif)no-repeattopleft; background:transparenturl(h4.gif)no-repeattopleft; margin:10px05px0; width:97px; height:16px; }#linkListh3.selectspan{ display:none }#linkListh3.favorites{margin:25px05px0;width:60px;height:18px; }#linkListh3.favoritesspan{ display:none }#linkListh3.archives{background:transparenturl(h5.gif)no-repeattopleft; margin:25px05px0; width:57px; height:14px; }#linkListh3.archivesspan{ display:none }#linkListh3.resources{background:transparenturl(h6.gif)no-repeattopleft; margin:25px05px0; width:63px; height:10px; }#linkListh3.resourcesspan{ display:none }001.css(5)#linkListul{ margin:0; padding:0; }#linkListli{ line-height:2.5ex; background:transparenturl(cr1.gif)no-repeattopcenter; display:block; padding-top:5px; margin-bottom:5px; list-style-type:none; }#linkListlia:link{ color:#988F5E; }#linkListlia:visited{ color:#B3AE94; }#extraDiv1{ background:transparenturl(cr2.gif)topleftno-repeat; position:absolute; top:40px; right:0; width:148px; height:110px; }.accesskey{ text-decoration:underline; }第210种风格的网页效果210.css(1)body{background:url(gradient_bg.jpg)#122981repeat-x;margin:0px;font-family:arial,helvetica,sans-serif}p{ font-size:0.7em;color:#fff;line-height:1.25em;text-align:justify}a:link{ color:#a5bcff;text-decoration:underline}a:visited{ color:#a5bcff;text-decoration:underline}a:hover{ color:#ff9600;text-decoration:none}a:active{ color:#ff9600;text-decoration:none}li{ display:block;color:#fff;list-style-type:none;text-decoration:none}210.css(2)#container{padding-right:20px;padding-left:20px;z-index:6;margin:200pxauto0px;width:536px;position:relative}#intro{ float:left;width:356px}#pageHeader{ float:left;margin-bottom:20px}#pageHeaderh1{ background:url(h1.gif)no-repeatlefttop;float:left;margin:0px;width:355px;height:29px}#pageHeaderh2{ background:url(h2.gif)no-repeatlefttop;float:right;margin:2px0px0px;width:167px;height:12px}#quickSummary{ background:url(divider01.jpg)no-repeat;float:left;padding-top:50px}#quickSummaryp.p1{ background:url(summary.gif)no-repeat;margin:0px0px6px;width:356px;height:49px}#quickSummaryp.p1span{display:none}#pageHeaderh2span{ display:none}#pageHeaderh1span{ display:none}#quickSummaryp.p2{ display:block;width:355px}#supportingText{ float:left;width:356px}#supportingTexth3{margin:0px0px20px;width:355px;color:#7d775c;letter-spacing:1px;height:18px}210.css(3)#introh3{ margin:0px0px20px;width:355px;color:#7d775c;letter-spacing:1px;height:18px}#preamble{ margin-top:6px;float:left;padding-top:60px}#explanation{margin-top:6px;float:left;padding-top:60px}#participation{margin-top:6px;float:left;padding-top:60px}#benefits{margin-top:6px;float:left;padding-top:60px}#requirements{margin-top:6px;float:left;padding-top:60px}#preamble{ background:url(divider02.jpg)no-repeat}#explanation{background:url(divider03.jpg)no-repeat}#participation{background:url(divider04.jpg)no-repeat}#benefits{background:url(divider05.jpg)no-repeat}#requirements{background:url(divider06.jpg)no-repeat}210.css(4)#linkList{ padding-right:0px;padding-left:0px;left:410px;padding-bottom:0px;margin:0px;width:141px;padding-top:0px;position:absolute;top:101px}#linkList2{ padding-right:10px;padding-left:10px;font-size:0.7em;background:url(paper-bg.jpg)repeat-ylefttop;padding-bottom:10px;width:141px;padding-top:10px}#linkListul{ padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px}#linkLista.c{ display:inline;font-weight:normal;text-transform:capitalize;color:#ff9600;text-decoration:none}#linkListlia{ color:#fff;text-decoration:none}#linkListlia:hover{ text-decoration:underline}#lselectli{ padding-right:0px;padding-left:0px;padding-bottom:5px;line-height:16px;padding-top:5px;border-bottom:#003d901pxsolid}#lselectlia{ display:block;font-weight:bold;text-transform:uppercase;color:#fff;text-decoration:none}#larchivesli{ padding-right:0px;padding-left:0px;padding-bottom:1px;color:#fff;line-height:16px;padding-top:1px}#lresourcesli{padding-right:0px;padding-left:0px;padding-bottom:1px;color:#fff;line-height:16px;padding-top:1px}210.css(5)#linkListh3{ display:block;margin:0px;width:141px;height:20px}#preambleh3{background:url(h3_road.gif)no-repeat}#explanationh3{background:url(h3_about.gif)no-repeat}#participationh3{background:url(h3_participation.gif)no-repeat}#benefitsh3{background:url(h3_benefits.gif)no-repeat}#requirementsh3{background:url(h3_requiremen

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论