实例十步学会用div+css建站课件.ppt

  1. 1、本文档共54页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
实例十步学会用divcss建站课件

第一步:规划网站,本教程将以图示为例构建网站; 第二步:创建html模板及文件目录等; 第三步:将网站分为五个div,网页基本布局的基础; 第四步:网页布局与div浮动等; 第五步:网页主要框架之外的附加结构的布局与表现; 第六步:页面内的基本文本的样式(css)设置; 第七步:网站头部图标与logo部分的设计; 第八步:页脚信息(版权等)的表现设置; 第九步:导航条的制作(较难); 第十步:解决IE浏览器的显示BUG;;第一步:规划网站,本教程将以图示为例构建网站 ;其基本布局见下图 ;规划网主要由五个部分构成 1.Main Navigation 导航条,具有按钮特效。 Width: 760px Height: 50px 2.Header 网站头部图标,包含网站的logo和站名。 Width: 760px Height: 150px 3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content 4.Sidebar 边框,一些附加信息。 Width: 280px Height: Changes depending on content 5.Footer 网站底栏,包含版权信息等。 Width: 760px Height: 66px。 ;第二步:创建html模板及文件目录等 ;将其保存为index.html,并创建文件夹css,images,网站结构如下;2.创建网站的大框,即建立一个宽760px的盒子,它将包含网站的所有元素。 ;控制html的id为container的盒子的宽为760px,背景为红色。表现如下 ;第三步:将网站分为五个div,网页基本布局的基础 ;2.为了将五个部分区分开来,我们将这五个部分用不同的背景颜色标示出来,在css文件写入 ;表现如下 ;第四步:网页布局与div浮动等 ;2.往主要内容的盒子中写入一些文字。在html文件中写入 ;表现如下 ;;表现如下 ; 这也不是我们想要的,网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动,由于是浮动,所以可以理解为它位于整个盒子之上的另一层。因此,底框和内容盒子对齐了。 因此我们往css中写入: ;表现如下 ;第五步:网页主要框架之外的附加结构的布局与表现 ;现在我们加入标题(heading) ;接下来是导航条 ; 目前导航条的表现比较糟糕,但是要在以后的教程中介绍其特殊表现,故需要暂时隐藏导航条,于是加入: ;我们跳一步,先到页脚: ; 理论上,我们可以控制源文件上的任意元素的浮动,但由于IE浏览器的BUG,被浮动层需要首先出现在源文件上,也就是说我们把副标题放在版权和认证的前面: ;刷新你的页面,你将看到如下所示 ;最后我们回到内容部分:用h2表现内容标题–About,Contact us;用p表现段落;用/br断行。 ; 刷新页面可以看到在Content层中又出现一些空白,这是由于h2p标签的默认边距(margin)造成的,我们必须 消除这些恼人的空白,当又不想把网页中所有的h2p标签地边距都设为0,这就需要使用css的子选择器(child css selector),在html的文件结构中,我们想控制的h2p标签(child)是属于#content层(parent)的,因此在css文件中写入: ;第六步:页面内的基本文本的样式(css)设置;如果你都是按本教程的操作,应该能看到下图 ; 你可以看到内容(content)的各块(block)之间的间隙太小了,而基于最初的设计,内容标题(即h2)和正文之间的间隙大概是15px,每个段落的间距也大概是15px,所以在css中写入: ; 然后需要让content层的四周都空出25px的间隙,这本来是件很简单的事,理论上我们只需在#content的css文件中加入padding: 25px;就行了,但是IE给我们上了“一课”,它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁,所以我们用另一种办法。 我们往需要填充的层中加入padding层,它的功能仅限于显示间隙: ;同样的,再往html文件的content层中加入padding层。 由于padding层的功能仅是制造空隙,所以不要设置它的宽度,只需在css中添加: ; 就像我们之前用的方法一样,我们只选择了类(class)为padding,且父类(parent)为#content或#sidebar-a的元素(element)。 接下来设置行距,content和si

文档评论(0)

dmdt5055 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档