divcss网页标准布局经典布局PPT文件格式下载.ppt
- 文档编号:14287298
- 上传时间:2022-10-21
- 格式:PPT
- 页数:109
- 大小:2.75MB
divcss网页标准布局经典布局PPT文件格式下载.ppt
《divcss网页标准布局经典布局PPT文件格式下载.ppt》由会员分享,可在线阅读,更多相关《divcss网页标准布局经典布局PPT文件格式下载.ppt(109页珍藏版)》请在冰豆网上搜索。
下面就新建一个css样式表文件:
在DW文件菜单选择新建,然后在打开的窗口页面类型中选择css,创建后保存在css文件夹中并命名为layout.css,保存后先设置全局的样式,而后写每一块单独的样式,全局样式如下:
bodymargin:
0auto;
font-size:
12px;
font-family:
Verdana;
line-height:
1.5;
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,ppadding:
0;
margin:
ullist-style:
none;
imgborder:
0px;
acolor:
#05a;
text-decoration:
a:
hovercolor:
#f00;
全局的样式定义完后,下面定义以上几大块的样式,先设置下#containerr的样式如下:
#containerwidth:
900px;
预览下index.htm,发现并没有改变,因为刚定义的样式表没有和html文件关联,所以设置的样式不能对它生效:
在css面板中点击附加样式表按钮,然后在弹出的窗口中选择刚才创建的样式表文件,确定,ok了,预览一下,是不是整体已经居中了呢。
如果已经是宽度为900px并居中,说明样式和文件关联好了。
因为许多文件要关联在一起才能构成一个完整的网页,所以要把它们放在一起,才能让这个页面找到和它相关的文件在哪里。
下面设置内部几大块的样式,为便于观察,部分块设置了背景色。
代码如下:
/*body*/#containerwidth:
/*header*/#headerheight:
70px;
background:
#CCFFCC;
margin-bottom:
8px;
#navheight:
30px;
/*main*/#maincontentmargin-bottom:
#mainfloat:
left;
width:
664px;
height:
500px;
#FFFF99;
#sidefloat:
right;
228px;
#FFCC99;
/*footer*/#footerheight:
预览一下:
在IE6下#maincontent的底部外边距并没有生效,而在IE8下,#footer干脆跑到#maincontent的下边了,这又是怎么回事呢?
这就是之前我们讲的,如果一个容器内的元素都浮动的话,那么它的高度将不会去适应内部元素的高度。
解决办法是在#maincontent增加overflow:
auto;
zoom:
1;
,这样就可以让它自动适应内部元素的高度了。
现在再预览一下,是不是都正常了。
为了更加保险,建议在header、nav、maincontent、footer之间增加如下一句代码并设置css样式如下,它的作用是清除浮动。
.clearfloatclear:
both;
1px;
主页此处显示idheader的内容此处显示idnav的内容此处显示idmain的内容此处显示idside的内容此处显示idfooter的内容,四、切割效果图基本框架搭建完毕后,下一步就是要分析每一块该怎么切图了。
切图方法有多种,可以使用ps或fireworks自带的切片工具,也可以用QQ的截屏或者创建新文件,把需要的部分复制过来保存都可以,关键看个人喜好。
用ps的切片工具的话,把需要切割的区域用切片工具切分,如果要设置图片的名称,请使用切片选择工具,然后在切片上双击,会弹出如下窗口,填写名字后确定即可。
切割完后,需要保存图片了,选择文件存储为web和设备所用格式,在弹出的窗口中点击选中切片,然后在右侧可以设置当前切片的图片格式。
这里有个技巧,一般小型色彩单一的图片,采用gif格式,照片类大型图片采用jpg,这样生成的图片既能保证质量,图片体积又小,设置完图片的格式后,就可以存储了,这里选择到images的上一级目录就行了,ps会自动创建images目录并把图片文件放入,如果已存在,直接放入。
在格式处选择仅限图像,如果选择html和图像,ps会自动生成一个表格式的网页,这个页面不是我们需要的,就不让它生成了;
还有一个需要注意的地方就是选择所有用户切片,这样只把我们手动切割的图片保存下来,其它的就不保存了。
保存后的图片如下所示,其中hot_bg.gif这张图片切割时没有隐藏上边的文字,一会儿在ps里再处理一下把文字抹掉。
目前所切的图片只是一部分,并没有把整个页面所需的图片全都切割下来,比如导航部分所用背景图片可以放到一张图片上,下面就用新建文件,然后用QQ截屏,粘贴过去的方法来创建。
分析一下上图的导航部分:
1、两端的圆角;
2、鼠标划过状态和当前栏目状态宽度应该随着字数的多少而改变;
3、二级导航有鼠标划过时的状态。
分析完之后,就需要把需要的图片整合到一张图片上了,整合的结果如下图,这个根据自己的需要进行整合。
其实完全可以把其它一些小图标都整合在一张,但那样操作起来比较麻烦,所以我们还是归一下类,把相关的图标整合到一起。
接下来整合侧边栏的背景图片,分析发现侧边栏应用同样的样式,只不过高度有所不同,而且是四角都是圆角,所以只用一个通用的就可以满足所有侧边栏块的需求了。
那么怎么制作这个通用的背景呢?
从下图我们发现,标题的高度都是一样的,只不过是下边的内容高度不同而已,那么我们把下边内容的背景制作的足够长,超过可能出现的最大高度就可以满足需求了。
把三个图标也给切出来,如下图:
联系我们的图片和修饰小图标。
联系我们的图片如下,这些图片和小图标要背景透明,这样才不会遮盖下面的背景,五、布局页面头部和导航有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面就需要填砖分割空间了。
先分析下头部:
分为两部分,一个是logo靠左侧显示,一个是搜索靠右侧显示,那么布局时插入两个div,一个向左浮动,一个向右浮动的方式来完成。
另外还有很多种实现方法,比如logo用h1标签,搜索用span,或者把logo做为背景图片也是可以的,不管采用哪种方法,要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话,那么就不能用背景图片的方法了。
此处显示idlogo的内容此处显示idsearch的内容,先在header里插入以上两块元素。
然后分别插入相应的内容,在logo里插入我们事先切割好的logo图片,在search里插入一个表单,一个文本框和一个按钮,插入后如下:
搜索产品接下来定义css吧,在ps里测量,头部的高度是71px,logo距顶部18px,搜索产品距顶部30px,下面在css里把这些参数都给定义上,看显示的效果和效果图中的效果是不是一样呢?
#logofloat:
margin-top:
18px;
#searchfloat:
这两项的位置已经差不多了。
预览会发现,搜索框和按钮跟效果图中的不一样,这是因为还没对它设置样式,接下来把文本框增加一个class为inp_srh样式,按钮增加btn_srh的样式。
24px;
color:
#444;
.inp_srhwidth:
140px;
17px;
padding-left:
20px;
url(./images/srh_bg.gif)00no-repeat;
border:
1pxsolid#cbcbcb;
.btn_srhwidth:
58px;
23px;
url(./images/btn_srh.gif)00no-repeat;
cursor:
pointer;
text-indent:
-999em;
#search*vertical-align:
middle;
给search增加了高度和文字颜色,其中高度设置为24px,是为了照顾IE6,可以去掉测试下;
inp_srh的宽度和高度并不是实际效果图中的宽高,是因为默认情况下文本框带有内边距造成的。
另外就是padding的值也会算到总宽度上的;
btn_srh是应用背景图像来实现的,说明一点这里的border的值为none指的是无边框,cursor定义鼠标样式为手形,之前也有用hand,但这个通不过w3c认证。
-999em这个属性作用相当于word中的首行缩进,这里设置成-999,意思是向左侧缩进-999em,这样就看不到文字了,它的作用是将按钮上的文字隐藏,当然也可以在html代码中插入空格代替文字,但这样做在不支持css的设备上查看时,用户不知道这个按钮是干什么的了。
所以建议采用这种形式;
有必要解释下最后一行,它的特殊之处在样式名和大括号之间加了一个*号,这里兼容所用的,知道当需要垂直居中对齐时就采用这种写法就行了,但是一定不要滥用,这个属性也是有缺陷的,当有英文和中文同时出现时,英文会靠上显示的。
这些设置完后,把最初搭建框架时设置的header的背景色和底部外边距给去掉吧。
#headerheight:
71px;
至此,头部的样式就完成了,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- divcss 网页 标准 布局 经典