《网页设计第二章III.ppt》由会员分享，可在线阅读，更多相关《网页设计第二章III.ppt（95页珍藏版）》请在三一办公上搜索。
1、,JSP 网 页 设 计,董祥和,第一章 JSP概述(第1章)第二章 网页布局基础第三章 JavaScript基础第四章 DOM基础第五章 JSP页面与JSP标记(第2章)第六章 JSP内置对象(第4章)第七章 JSP中的文件操作(第5章)第八章 JSP中使用数据库(第6章)第九章 JSP与JavaBean(第7章)第十章 Java Servlet基础(第8章),课程内容,前端,动态,第二章 网页布局基础,本章主要内容1 CSS如何控制页面2 CSS选择器3 CSS选择器命名及常用命名4 盒子模型5 块状元素和内联元素6 CSS常用属性,第二章 网页布局基础,本章主要内容 7 浮动 8 清除浮
2、动 9 导航条 10 页面布局 11 定位 12 CSS Hack,十 页面布局,网页效果图(参见布局素材)：,背景图片bg.gif、clouds.gif；网站logo标识logo.png；导航条背景图片navHoverBg.png；网站banner或广告图片：banner.jpg；网页正文显示图片articleBanner.jpg；栏目标题背景图片title.jpg，栏目列表项图片dot.gif。,(一)浮动布局之结构设计,【第一步】：,首先分析页面由几大块组成。,从效果图上看，由四大块组成：头部版块、广告版块、内容版块、页底版块，,分别命名：头部版块：header、广告版块：banner、
3、内容版块：content、页底版块：footer。,页面第一层结构：,示例：layoutDemo1.html,【第二步】：,1)网站logo一般是张图片，而且是可以点击的，,点击后回到首页，所以logo部分的结构为：,2)导航nav肯定要用标签ul和li，,而li里面内容又是链接，在加上真实的链接信息后，,导航条部分的结构如下：,首 页 企业简介 企业文化 企业荣誉 产品展示 机构设置 客户留言 联系我们,到此，整个头部的结构设计完成，完整的结构如下：,首 页 企业简介 企业文化 企业荣誉 产品展示 机构设置 客户留言 联系我们,示例：layoutDemo2.html,【第三步】：,banne
4、r部分布局时，只需将一个图片放在此处就可以，,因为广告是可以点击的，所以就需要在图片外面加上超链接，结构代码如下：,示例：layoutDemo3.html,【第四步】：,内容content版块是有左右两部分组成，,左侧部分放置文章，将left和article组合，命名左侧版块id为leftArticle。,右侧为资讯信息类的内容，右侧的id为rightInfo。,结构如下：,1)左侧的leftArticle文章版块，分文章图片，文章标题和文章内容三部分。,文章图片：从功能上来说文章顶部图片应该是可以点击的，点击后进入文章详情，所以图片外面要被链接a包含：,文章标题：文章标题就是文章内容的总结，
5、对搜索引擎来说文章标题的权重要比内容要高，,怎么才能让搜索引擎知道这里是标题呢？,用标题标签h1h6，这里选用h1，标题也是可以点击的，所以也要用a进行包含：,Web前端开发,文章内容：内容常用段落标签p。,有几段文字就用几个：,全国Web前端开发行业调查显示.,示例：layoutDemo4.html,Web前端开发工作吗？全国Web前端开发行业调查.。现在YAHOO、MSN等国际门户网站，.。正因为如此Web前端开发人员成为市场上.。,2)右侧分两个版块职业生涯和职位推荐，,分析职业生涯的网页结构，,它们有共同的结构、共同的样式。,首先有个标题，其次下面是标题的一个列表，可以用dl+dt+d
6、d组合。,dl、dt、dd的用法：/dl为内容块 内容标题/dt为内容块的标题 内容1/dd为内容 内容2,参见列表分析,职业生涯 Web前端开发 有必要进行Web 我是网站美工发.从事Web前端行.如何给自己定位.Web前端开发工.,职位推荐版块类似于职业生涯的结构。,示例：layoutDemo5.html,职业生涯.职位推荐.,【第五步】：,页底版块的布局。,由两行文字组成，第一行文字全部为链接：,关于|广告服务|提交问题|联系我们|版权声明|合作伙伴,第二行左边的是备案号，右侧是版权信息：,津ICP备0055601号 All rights(C)2010-2015Reserved,页底版块
7、结构：,关于|.广告服务 ICP备0055601号All rights(C)2008.,既然文字分两行，在第一行的最后加上一个就可以了，没有必要每一行都用p标签包含起来：,关于本企业.合作伙伴 津ICP备0055601号 All rights(C)2008-.,整个页面结构设计完成(页面的骨架搭建完成)。,示例：layoutDemo6.html,(二)浮动布局之表现设计,W3C标准建议结构和表现相分离，,结构是搭建的HTML页面框架，表现则是CSS样式，,样式设计会直接影响页面的加载速度及改版的复杂度。,【第六步】：,为了页面能够具有更好的浏览器兼容性，,在设计表现的时候，首先要对标签重置，,
8、用到哪些标签就重置哪些标签，,用到body,div,p,ul,li,dl,dt,dd,h1,a标签，,所以重置代码为：body,div,p,ul,li,dl,dt,dd,h1,amargin:0;padding:0;,效果图主背景是一个从上至下由蓝色渐变为白色，且带有云彩的背景。,针对背景的渐变，将渐变背景切割为一个宽度为10px的小图，起名为bg，然后水平方向平铺(repeat-x)。,而对于云彩这种无规律的背景，直接切割出来作为背景，起名为clouds，如下图：,如果不做任何处理直接将页面内的背景整个切割下来，,当用户打开页面，会看到背景一片空白，然后瞬间显示背景，给用户的感觉很突兀。,为
9、了提升网页的用户体验，先加载10px宽度的小图片，这样背景加载速度快，,用户打开网页的时候，先把这种背景图加载上，不至于展现在浏览者前面的是一片空白，,然后等云彩背景下载完毕后，再加载在页面内。,实现背景的显示顺序，为不同的盒子的设置背景，,bg.gif当做html盒子的背景，而clouds.gif当做body盒子的背景，,因为网页会先加载html盒子，然后再加载body盒子，那么CSS代码如下：,htmlbackground:url(images/bg.gif)repeat-x;bodybackground:url(images/clouds.gif)repeat-x;,示例：layoutD
10、emo7.css、layoutDemo7.html,body,div,p,ul,li,dl,dt,dd,h1,amargin:0;padding:0;htmlbackground:url(images/bg.gif)repeat-x;bodybackground:url(images/clouds.gif)repeat-x;,【第七步】：,页面的宽度为1000px，所以四大板块header、banner、content、footer的宽度也为1000px，且水平居中于浏览器，,所以用CSS集体声明的方法，对四大板块的共同样式进行定义：,#header,#banner,#content,#foo
11、ter width:1000px;margin:0 auto;,其中margin:0 auto;的作用就是将页面元素水平居中。,采用设置body上内边距的办法，将padding-top加到body的样式内：,头部与上边沿有45px的距离，为实现这个效果，,body background:url(images/clouds.gif)repeat-x;padding-top:45px;,示例：layoutDemo8.css、layoutDemo8.html,【第八步】：,网页里所有能够点击的链接图片，全部都有一个宽度为2px的紫色边框，,将边框去掉，CSS代码：imgborder:none;,上面
12、这段代码是对img标签边框的重置，所以把它和之前标签内外边距重置的代码放一块，如下：,body,div,p,ul,li,dl,dt,dd,h1,a,imgmargin:0;padding:0;imgborder:none;,如果后面有对其它标签的重置，就添加到第二条的后面。,示例：layoutDemo9.css、layoutDemo9.html,头部header包含两部分，左侧的logo和右侧的导航nav。,左侧logo部分的结构：,分析上面的结构，最外层由一个块状元素div构成的盒子，第二层由内联元素a构成，第三层由内联元素img构成。,img标签是一个很特别的标签，因为它本身是内联元素，但
13、却体现出块状元素宽高起作用的特性，,在这里需要它的块状元素的属性，所以将身为内联元素的img标签转化为块状元素，用display:block;。,既然第三层的img转化为块状元素，根据W3C规范，内联元素是不能包含块状元素的，,所以还必须把第二层的链接a，也要转化为块状元素，还是用display:block;。,希望点击logo图片的任何一个地方都可以回到首页，,即第二层a的有效点击区域大小就为图片的大小，,而外面的盒子的大小也等于图片的大小。,相应的CSS代码：#logo float:left;width:220px;height:54px;background:#991616;#logo
14、a display:block;width:220px;height:54px;#logo a imgdisplay:block;,代码中的background:#991616;是一个从logo图片上吸取下来的红色，,为了保证在网速比较慢的情况下，logo图片还未加载完成之时，,目的和前面的设置页面背景一样，,先显示红色背景，增强用户体验！,示例：layoutDemo10.css、layoutDemo10.html,a已经设置了宽度和高度，,外面的那个id为logo的div，就没有存在的必要了，,不妨直接去掉外层的div，并将a的id设置为logo，,这样结构就少一层，logo部分的HTML结
15、构变为：,CSS代码为：,#logo display:block;float:left;background:#991616;width:220px;height:54px;,而#logo a imgdisplay:block;就要转化为,#logo imgdisplay:block;,因为现在的#logo已经为a的id了，不再是原来最外层的div的id。,示例：layoutDemo11.css、layoutDemo11.html,导航nav CSS代码：,#nav float:left;width:780px;height:54px;background:#393838;list-style
16、:none;#nav lifloat:left;,#nav li a display:block;float:left;width:86px;height:54px;line-height:54px;text-align:center;font-size:12px;color:#ccc;text-decoration:none;#nav li a:hovercolor:#fff;,示例：layoutDemo12.css、layoutDemo12.html,现在要求实现的效果：,鼠标移至导航条栏目的上面，,文字由灰色变为白色，鼠标移出，文字又转为灰色，,处于激活状态的栏目的背景是一个灰色且两边带
17、有光影的图片，如下图：,激活状态的栏目是不受鼠标的移入和移出影响的，,需定义一个类选择器，专门加在处于激活状态的栏目上，,#nav li.navActive background:url(./images/navHoverBg.png)no-repeat;color:#fff;,如果激活状态的栏目是首页，结构代码就这么写,首 页,header的样式定义基本完成。,示例：layoutDemo13.css、layoutDemo13.html,注意：高度自适应的问题。,尽管header里面的logo和导航条nav都设置了高度，,但是header的高度在IE7、IE8、IE9、FF内，是不能自动适应里
18、面元素的高度的。,测试：,将HTML结构代码中的导航条部分删除，,然后再给header设置一个背景色为黑色#000，,参见overflow,删除导航条代码后的header结构代码：,CSS代码：#headerbackground:#000;,在IE6内的显示效果：,示例：layoutDemo14.css、layoutDemo14.html,在FF内的显示效果：,问题：在FireFox内，看不到背景为黑色的header，,因为它不能够自适应内部元素的高度，所以它的高度变为零，,而在IE6里面却可以正常显示。,高度不能自适应，就给它设置一个高度，,高度值为子级元素的高度，,这样header盒子就可
19、以刚好装下内部的子logo和nav，,但是这种办法不够灵活，,如果header内部多了一些元素，那就需要再次计算一下子级元素的高度，比较麻烦。,常用方法：在不设置header的高度情况下，,无论内部元素再多，header的高度也会自动适应，,直接在header的样式里写入overflow:hidden;就可以了。,#header overflow:hidden;,示例：layoutDemo15.css、layoutDemo15.html,FF下页面黑色的header显示出来了，,既然高度自适应了，黑色的背景也就没用了，去掉它，,再在HTML结构代码内恢复导航代码，完成页面header部分的样式
20、。,示例：layoutDemo16.css、layoutDemo16.html,【第九步】：,banner版块结构和logo版块一样，对结构进行优化，,将最外层的div去掉，然后将里面的a定义为banner，,所以banner版块的结构如下：,CSS代码：,#banner display:block;width:1000px;height:292px;margin:10px auto;#banner imgdisplay:block;,如果图片的大小不是1000px292px怎么办？,图片大了，就会溢出，图片小了不美观。,无论图片的大小如何，只要在页面上显示，,宽高永远是1000px292px
21、：,#banner imgdisplay:block;width:1000px;height:292px;,这句话的意思就是#banner里面的图片大小为1000px292px，无论图片原本大小，只要在#banner内，就是这个宽高。,示例：layoutDemo17.css、layoutDemo17.html,【第十步】：,针对content版块进行样式设计，从效果图上可以看出，,content版块分为两块，左侧的文章(leftArticle)和右侧的资讯(rightInfo)。,content内部的leftArticle和rightInfo两个都要左侧浮动，,内部元素浮动就会导致外面的con
22、tent的高度不能够自适应内部元素的高度，,所以首先要在content的CSS代码中加入overflow:hidden;，,定义背景色、文字大小和文字行距，如下：,#content overflow:hidden;background:#eaeaea;font-size:12px;line-height:24px;,示例：layoutDemo18.css、layoutDemo18.html,然后再针对leftArticle和rightInfo单独定义样式，,leftArticle和rightInfo上下左右都有10像素的外边距，,如果用左侧浮动来实现两栏效果，,在存在外边距的情况下就会出现IE
23、6的双倍边距bug，,为了避免出现bug，利用display:inline;,CSS定义：#leftArticle,#rightInfo margin:10px;float:left;display:inline;,示例：layoutDemo19.css、layoutDemo19.html,它们两个的公共样式定义完了，就开始对它们单个定义，,原本leftArticle和rightInfo的宽度分别为680px和320px，,当存在10px的外边距后，如果再给它们用CSS定义宽度，,那么宽度的数值就变为660px和300px，都要减去20像素（因为存在10px左外边距和10px右外边距）。,#l
24、eftArticlewidth:660px;#rightInfowidth:300px;,示例：layoutDemo20.css、layoutDemo20.html,左侧leftArticle有个图片，图片是可以点击的，,遇到图片链接这种情况，第一反应就是先将这两块给设置成块状元素，,给图片外面的链接起个id叫articlePicA，意思是文章图片外部的链接：,相应的CSS如下：,#articlePicA,#articlePicA imgdisplay:block;,示例：layoutDemo21.css、layoutDemo21.html,文章的标题在HTML结构中用标签，,标题距离上面图片
25、和下方文字的距离为20px，,文字的大小为24px，首选字体为“微软雅黑”，其次为“黑体”。,#leftArticle h1 margin:20px 0;font-size:24px;font-family:微软雅黑,黑体;,示例：layoutDemo22.css、layoutDemo22.html,制作出来的标题鼠标移上去会出现下划线，,需要对标题内的链接的样式进行定义：,#leftArticle h1 acolor:#900;text-decoration:none;#leftArticle h1 a:hovertext-decoration:underline;,示例：layoutDem
26、o23.css、layoutDemo23.html,内容的文字颜色是数值为#333的黑色，,并且每段文字都会缩进两个文字，,每段文字距离下段文字之间的距离是30px，文字大小为14px，,CSS如下定义：#leftArticle p color:#333;text-indent:2em;margin-bottom:30px;font-size:14px;,示例：layoutDemo24.css、layoutDemo24.html,定义rightInfo版块的样式，职业生涯和职位推荐之间有10px的距离，,实现这个效果采取设置dl的下外边距的方法:,#rightInfo dlmargin-bot
27、tom:10px;,针对每个版块的标题dt的定义，如下：,#rightInfo dl dt background:url(./images/title.jpg)no-repeat;height:32px;line-height:32px;color:#FFF;font-size:14px;font-weight:bold;text-indent:20px;,背景采用已经切好的title.jpg且不平铺，,dt高度就是title.jpg的高度32px，,为了使文字垂直居中，采取设置行高的方法，,然后设置文字大小为14px、粗细为加粗、以及文字缩进20px。,示例：layoutDemo25.css
28、、layoutDemo25.html,针对dd的定义：,#rightInfo dl dd height:24px;line-height:24px;background:url(./images/dot.gif)no-repeat 7px 10px;text-indent:16px;,第三句的目的是将做好的小红点图片dot.gif设置为dd的背景且不平铺，,距离dd左侧的距离为7px，上面的距离为10px;,dd里面的链接颜色定义如下：,#rightInfo dl dd acolor:#333;text-decoration:none;,#rightInfo dl dd a:hovercolo
29、r:#900;text-decoration:underline;,示例：layoutDemo26.css、layoutDemo26.html,【第十一步】：,footer是一个颜色为#393838的灰色块，,与上部的content距离是10px，自身高度是70px，,文字颜色为灰白色(#ccc)且水平居中，,文字与footer顶部的距离为18px，行距也是18px，,样式定义如下：,#footer background:#393838;height:52px;line-height:18px;margin-top:10px;padding-top:18px;text-align:center
30、;color:#ccc;font-size:12px;,因为设置了padding-top:18px,这个上内边距，,所以定义footer的高度就要由原来的高度，减去内边距，,即70px-18px=52px，这样footer在视觉上的高度才是70px。,链接的颜色和样式的代码：,#footer acolor:#ccc;text-decoration:none;,#footer a:hovertext-decoration:underline;,示例：layoutDemo27.css、layoutDemo27.html,页面内的英文的字体全部是宋体，,不如英文常用的字体verdana，,给整个页面内的文字字体设置首选字体为verdana，,只需要在body的样式里，加入“font-family”就可以了。,body background:url(./images/clouds.gif)repeat-x;padding-top:45px;font-family:Verdana,Geneva,sans-serif;,示例：layoutDemo28.css、layoutDemo28.html,
