《网页设计第二章iii》由会员分享，可在线阅读，更多相关《网页设计第二章iii（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常用属性,第二章 网页布局
2、基础,本章主要内容 7 浮动 8 清除浮动 9 导航条 10 页面布局 11 定位 12 CSS Hack,十 页面布局,网页效果图(参见布局素材)：,背景图片bg.gif、clouds.gif； 网站logo标识logo.png； 导航条背景图片navHoverBg.png； 网站banner或广告图片：banner.jpg； 网页正文显示图片articleBanner.jpg； 栏目标题背景图片title.jpg，栏目列表项图片dot.gif。,(一)浮动布局之结构设计,【第一步】：,首先分析页面由几大块组成。,从效果图上看，由四大块组成：头部版块、广告版块、内容版块、页底版块，,分别命名
3、：头部版块：header、广告版块：banner、内容版块：content、页底版块：footer。,页面第一层结构：,示例： layoutDemo1.html,【第二步】：,1)网站logo一般是张图片，而且是可以点击的，,点击后回到首页，所以logo部分的结构为：,2)导航nav肯定要用标签ul和li，,而li里面内容又是链接，在加上真实的链接信息后，,导航条部分的结构如下：, 首 页 企业简介 企业文化 企业荣誉 产品展示 机构设置 客户留言 联系我们 ,到此，整个头部的结构设计完成，完整的结构如下：, 首 页 企业简介 企业文化 企业荣誉 产品展示 机构设置 客户留言 联系我们 ,示例
4、： layoutDemo2.html,【第三步】：,banner部分布局时，只需将一个图片放在此处就可以，,因为广告是可以点击的，所以就需要在图片外面加上超链接，结构代码如下：,示例： layoutDemo3.html,【第四步】：,内容content版块是有左右两部分组成，,左侧部分放置文章，将“left“和“article“组合，命名左侧版块id为“leftArticle“。,右侧为资讯信息类的内容，右侧的id为“rightInfo“。,结构如下： ,1)左侧的leftArticle文章版块，分“文章图片，文章标题和文章内容“三部分。,文章图片：从功能上来说文章顶部图片应该是可以点击的，点
5、击后进入文章详情，所以图片外面要被链接a包含：,文章标题：文章标题就是文章内容的总结，对搜索引擎来说文章标题的权重要比内容要高，,怎么才能让搜索引擎知道这里是标题呢？,用标题标签h1h6，这里选用h1，标题也是可以点击的，所以也要用a进行包含：, Web前端开发 ,文章内容：内容常用段落标签p。,有几段文字就用几个“：,全国Web前端开发行业调查显示 . . . . . .,示例：layoutDemo4.html, Web前端开发工作吗？ 全国Web前端开发行业调查.。 现在YAHOO、MSN等国际门户网站，。 正因为如此Web前端开发人员成为市场上。 ,2)右侧分两个版块“职业生涯“和“职位
6、推荐“，,分析“职业生涯“的网页结构，,它们有共同的结构、共同的样式。,首先有个标题，其次下面是标题的一个列表，可以用“dl+dt+dd“组合。,dl、dt、dd的用法： /dl为内容块 内容标题/dt为内容块的标题 内容1 /dd为内容 内容2 ,参见列表分析, 职业生涯 Web前端开发 有必要进行Web 我是网站美工发 从事Web前端行 如何给自己定位 Web前端开发工 ,“职位推荐“版块类似于“职业生涯“的结构。,示例：layoutDemo5.html, 职业生涯 . . 职位推荐 . ,【第五步】：,页底版块的布局。,由两行文字组成，第一行文字全部为链接：, 关于 | 广告服务 | 提
7、交问题 | 联系我们 | 版权声明 | 合作伙伴 ,第二行左边的是备案号，右侧是版权信息：, 津ICP备0055601号 All rights(C)2010-2015Reserved ,页底版块结构：, 关于 | . 广告服务 ICP备0055601号All rights(C)2008. ,既然文字分两行，在第一行的最后加上一个就可以了，没有必要每一行都用p标签包含起来：, 关于本企业合作伙伴 津ICP备0055601号 All rights(C)2008- ,整个页面结构设计完成(页面的骨架搭建完成)。,示例：layoutDemo6.html,(二)浮动布局之表现设计,W3C标准建议结构和表
8、现相分离，,“结构“是搭建的HTML页面框架，“表现“则是CSS样式，,样式设计会直接影响页面的加载速度及改版的复杂度。,【第六步】：,为了页面能够具有更好的浏览器兼容性，,在设计表现的时候，首先要对标签重置，,用到哪些标签就重置哪些标签，,用到“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，然后水平方向平铺(repea
9、t-x)。,而对于云彩这种无规律的背景，直接切割出来作为背景，起名为clouds，如下图：,如果不做任何处理直接将页面内的背景整个切割下来，,当用户打开页面，会看到背景一片空白，然后瞬间显示背景，给用户的感觉很突兀。,为了提升网页的用户体验，先加载10px宽度的小图片，这样背景加载速度快，,用户打开网页的时候，先把这种背景图加载上，不至于展现在浏览者前面的是一片空白，,然后等云彩背景下载完毕后，再加载在页面内。,实现背景的显示顺序，为不同的盒子的设置背景，,bg.gif当做html盒子的背景，而clouds.gif当做body盒子的背景，,因为网页会先加载html盒子，然后再加载body盒子，
10、那么CSS代码如下：,htmlbackground:url(images/bg.gif) repeat-x; bodybackground:url(images/clouds.gif) repeat-x;,示例：layoutDemo7.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;,【第七步】：,页面的宽度为1000p
11、x，所以四大板块header、banner、content、footer的宽度也为1000px，且水平居中于浏览器，,所以用CSS集体声明的方法，对四大板块的共同样式进行定义：,#header,#banner,#content,#footer width:1000px; margin:0 auto; ,其中“margin:0 auto;“的作用就是将页面元素水平居中。,采用设置body上内边距的办法，将padding-top加到body的样式内：,头部与上边沿有45px的距离，为实现这个效果，,body background:url(images/clouds.gif) repeat-x; p
12、adding-top:45px; ,示例：layoutDemo8.css、layoutDemo8.html,【第八步】：,网页里所有能够点击的链接图片，全部都有一个宽度为2px的紫色边框，,将边框去掉，CSS代码：imgborder:none;,上面这段代码是对img标签边框的重置，所以把它和之前标签内外边距重置的代码放一块，如下：,body,div,p,ul,li,dl,dt,dd,h1,a,imgmargin:0; padding:0; imgborder:none;,如果后面有对其它标签的重置，就添加到第二条的后面。,示例：layoutDemo9.css、layoutDemo9.html
13、,头部header包含两部分，左侧的logo和右侧的导航nav。,左侧logo部分的结构：,分析上面的结构，最外层由一个块状元素div构成的盒子，第二层由内联元素a构成，第三层由内联元素img构成。,img标签是一个很特别的标签，因为它本身是内联元素，但却体现出块状元素宽高起作用的特性，,在这里需要它的块状元素的属性，所以将身为内联元素的img标签转化为块状元素，用“display:block;“。,既然第三层的img转化为块状元素，根据W3C规范，内联元素是不能包含块状元素的，,所以还必须把第二层的链接a，也要转化为块状元素，还是用“display:block;“。,希望点击logo图片的任
14、何一个地方都可以回到首页，,即第二层a的有效点击区域大小就为图片的大小，,而外面的盒子的大小也等于图片的大小。,相应的CSS代码： #logo float:left; width:220px; height:54px; background:#991616; #logo a display:block; width:220px; height:54px; #logo a imgdisplay:block;,代码中的“background:#991616;“是一个从logo图片上吸取下来的红色，,为了保证在网速比较慢的情况下，logo图片还未加载完成之时，,目的和前面的设置页面背景一样，,先显示
15、红色背景，增强用户体验！,示例：layoutDemo10.css、layoutDemo10.html,a已经设置了宽度和高度，,外面的那个id为logo的div，就没有存在的必要了，,不妨直接去掉外层的div，并将a的id设置为logo，,这样结构就少一层，logo部分的HTML结构变为：,CSS代码为：,#logo display:block; float:left; background:#991616; width:220px; height:54px; ,而#logo a imgdisplay:block;就要转化为,#logo imgdisplay:block;,因为现在的#logo
16、已经为a的id了，不再是原来最外层的div的id。,示例：layoutDemo11.css、layoutDemo11.html,导航nav CSS代码：,#nav float:left; width:780px; height:54px; background:#393838; list-style: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,现在
