第5章Div+css网页布局.中职课件电子教案.ppt

《第5章Div+css网页布局.中职课件电子教案.ppt》由会员分享，可在线阅读，更多相关《第5章Div+css网页布局.中职课件电子教案.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、商务网页设计与制作 长沙民政第五章第五章 DIV+cssDIV+css网页布局网页布局 商务网页设计与制作 长沙民政学习目标 掌握掌握DIV+CSS方法布局网页方法布局网页熟练运用熟练运用CSS 美化网页美化网页商务网页设计与制作 长沙民政项目概述项目概述小小李所在的项目团队承接了长沙市碧雅园花卉苗木基地网站建设业务，通过前小小李所在的项目团队承接了长沙市碧雅园花卉苗木基地网站建设业务，通过前期需求分析，网页美工小王已绘制了网站首页的效果图。经理让小李在两天期需求分析，网页美工小王已绘制了网站首页的效果图。经理让小李在两天时间内根据效果图，为该苗木基地网站制作静态的前台页面。为方便与网站时间内

2、根据效果图，为该苗木基地网站制作静态的前台页面。为方便与网站后台系统集成，要求小李使用后台系统集成，要求小李使用DIV+CSSDIV+CSS技术制作网站的前台页面。技术制作网站的前台页面。最终网站首页效果图商务网页设计与制作 长沙民政将本项目的实施分解为以下几个子任务： 任务1：首页DIV框架制作任务2：内容制作任务3：CSS特效导航栏制作商务网页设计与制作 长沙民政CSS：层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素，用来控制网页的样式和布局。商务网页设计与制作 长沙民政导入DIV+CSS已成为网站标准（或称“WEB标准”）中常用术语之一，其中DIV

3、是一个标签，称为块元素（或层元素）。DIV元素是用来为html文档内大块（block-level）的内容提供结构和背景的元素，类似于表格技术中的标签。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的。块的大小和位置由其属性来控制，或者是通过使用样式表（即CSS）格式化这个块来进行控制。 商务网页设计与制作 长沙民政例如在某个页面中输入如下代码：在设计模式下，产生的效果如下图所示。Div示意图商务网页设计与制作 长沙民政在中插入以下代码，用来定义一个名为zw的样式：This is a testThis is a test产生的效果如下图所示。CSS控制div外观示意图商务网页设计与制

4、作 长沙民政由此可见，应用了CSS的Div外观和字体大小都与默认的样式不同。因此，人们常用不同的CSS来区分DIV。（在这里#ZW为一个ID样式，其细节说明参考后续内容）商务网页设计与制作 长沙民政任务任务1 1：首页：首页DIVDIV框架制作框架制作1、网页DIV层次规划 通过分析，网页可以分成几个大的区域，将页面用DIV分块。DIV是HTML的标签，表示部分的意思。页面分块如下图所示： 商务网页设计与制作 长沙民政实际的页面布局及嵌套关系如下图所示。 任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政body /*HTML元素，具体不做说明*/#Contai

5、ner /*页面层容器*/#Header /*页面头部*/ #Nav /*页面导航*/ #Banner /*页面广告*/ #Content /*主体内容*/ #Footer /*页面底部*/ 根据上图的分析，本页面DIV结构如下（此处用样式来区分不同的DIV）任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政2、网页DIV布局实现 新建站点，在该站点中新建index.html网页，切换到代码模式下，自动产生以下内容： 任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政以上语句说明该文档是过渡类型，另外还有框架和严格类型，目前一般都

6、采用过渡类型。因浏览器对XHTML的解析比较宽松，允许使用HTML4.01 中的标签，但必须符合XHTML的语法。建议保留这句话，删除它可能引起某些样式表失效，或产生其它意想不到的问题。任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政表示文档的语言编码，类似平时说的汉语、英语。“gb2312”是告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF- 8编码，它是国际通用的编码。不管采用哪种编码，本文档中包含的css样式表或包含的其它文件中的代码必须和本文档的代码编码一致，否则会出现乱码。任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设

7、计与制作 长沙民政在标签对中写入DIV的基本结构，代码如下： 表示注释，为了使以后阅读代码更简易，应该添加相关注释。任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政新建CSS命名为css1.css。接下来打开css1.css文件，点击CSS浮动面板右下侧的【新建样式】按钮，弹出【新建CSS规则】面板，如下图所示。任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政选择ID样式，输入container.弹出【#container的CSS规则定义】面板。选择方框选项，设置宽为100%，如下图所示。任务任务1 1：首页：首页DIVDIV

8、框架制作框架制作商务网页设计与制作 长沙民政 Css1.css文件中同时出现代码如下。 #container width:100%;这里将#container的宽度定义为100%，是为了让所对应的DIV能随着页面大小的不同进行缩放，自动为满屏。当整个网页需要背景颜色时，这样定义非常有效。任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政【新建CSS规则】面板中，有类样式、ID 样式、标签样式、复合内容样式。 在上图中，类是指定义一个class样式，可以多个对象引用，样式名称为用户定义，在生成后，前面会自动生成一个小圆点；标签是指对默认的已有 html标签进行重新

9、定义，如可以定义bodymargin:0，意思是 将body的外边距设置为0，Pcolor:#f00是将所有P标签的文字颜色设置为红色；高级样式即ID样式，是以#开始，id样式只能作用于一个对象，不能作用于多个对象，优先级高于class样式，这是id样式和class样式的区别。复合内容将在后述内容中详细讲解。任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政点击新【建样式按钮】，新建#Header高级样式。输入值如下图所示。Css1.css文件中同时出现代码如下。#Header background-image: url(images/index_02.gif)

10、;margin: 0px;height: 120px;width: 950px;任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政background-image: url(images/index_02.gif)表示背景图片来自于images文件夹下的index_02.gif。background属性可以用来给指定的层填充背景色、背景图片。背景有背景颜色background-color和背景图案background-image属性。 任务任务1 1：首页：首页DIVDIV框架制作框架制作浏览效果如下图所示：商务网页设计与制作 长沙民政任务任务1 1：首页：首页

11、DIVDIV框架制作框架制作点击CSS面板上编辑样式按钮，修改#Header样式。如左图所示。商务网页设计与制作 长沙民政将左边界调整为自动，右边界调整为自动。也就意味着让电脑自动去计算该DIV与其外部容器即页面边距之间的距离，并左右平均分配。那么该DIV就居中了。 Css1.css中的#Header样式代码变更情况如下 #Header background-image: url(images/index_02.gif);height: 120px;width: 950px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin

12、-left: auto;任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政代码中margin是指边界，表示内容与外部的距离。margin-top ：0px；表示#Header样式对应DIV对上边距为0像素。 任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政添加#Banner、 #NAV、 #Content 、#Footer高级样式。为醒目起见，分别设置下部两个区域的背景颜色为蓝色和黄色。把以上文件保存，用浏览器打开，可以看到基础结构了，如下图所示，这就是页面的框架。 任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页

13、设计与制作 长沙民政CSS的定义是由三个部分组构成：选择器（Selector），属性（properties）和属性的取值（value）。任何HTML元素都可以是一个CSS的选择器。选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。例如：P text-indent: 3px ，当中的选择器是P。selector property: value 任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政用DIV+CSS技术制作

14、网页时，经常会在外部DIV中嵌入几个DIV，实现DIV的嵌套。通过细分DIV，可搭建比较完整的网页框架。在前述操作的基础上，继续分析效果图，Content部分又可细分为三个部分，如下图所示：任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政修改index.htm中代码如下： 任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政Css1.css中对应三个样式代码如下：#Leftcontent background-color: #00FFFF;height: 585px;width: 202px;float: left;#Line b

15、ackground-color: #009900;height: 585px;width: 8px;float: left;#Maincontent background-color: #FF00FF;height: 585px;width: 740px;float: left;任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政浏览结果如下：任务任务1 1：首页：首页DIVDIV框架制作框架制作商务网页设计与制作 长沙民政任务任务2 2：内容制作：内容制作1、Header区制作2、完善#Leftcontent区商务网页设计与制作 长沙民政任务任务3 3：CSSCSS特效制作特效制作1、添加导航栏列表2、设置导航栏样式