第02章：布局网站主页资料课件.ppt

1、九、布置作业主要教学环主要教学环节节七、完成训练项目 一、明确教学内容与目的 二、项目效果展示三、任务描述 四、预备知识讲解八、演示、点评与总结五、技能操作示范六、学生实施任务 一、教学内容与目的 二、项目效果与任务描述三、预备知识包括DOM）和ECMAScript等。行为是对内容的交互及操作效果）。l使用Web标准设计网页的好处：1）HTMLlXHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作，还能很好地工作在无线设备上。l目前所广泛使用的“DIV+CSS”只是Web标准中XHTML+CSS实现方式的一部分，它也是目前应用Web标准设计网页所使用的主流方式。1）CSS概

2、述lCSS（Cascading Style Sheet，即层叠样式表）是一组格式设置规则，用于控制页面内容的外观，以实现表现与结构分离。lCSS集中存放在XHTML文档（网页文档是由XHTML元素构成的，也称为XHTML文档）的文件头部分或外部样式表文件中，便于集中维护，只需修改CSS规则即可使网页呈现完全不同的外观。lCSS版本从1.0到2.0到2.1。3.0刚刚研制，许多新属性还不能被各个浏览器很好地支持。本书使用CSS 2.1。l有些CSS样式规则在 IE、Mozilla Firefox、Netscape、Opera、Apple Safari 等中呈现的外观不尽相同，而有些 CSS 样式

3、规则目前不受任何浏览器支持。2）基本样式规则（2）注释lXHTML中注释使用。lCSS内的注释使用/*/，可放在各个声明之后，也可放在之外，注释可以占多行。（3）CSS规则代码的自动生成与属性的缩写l通过Dreamweaver【CSS规则定义】对话框自动生成CSS规则代码：lCSS缩写：用通用属性来代替多个相关属性的集合，可减少样式表的大小。上述代码缩写成：另一种情况，如background（背景）、font（字体）、list-style（列表）等，虽然没有4个方向上的值，但也可以缩写，例如：3）CSS选择器类型（1）通配选择器：*。代表所有的标签，其优先级最低，一般放在style元素中一开始

4、定义。（4）类选择器：用XHTML标签的class属性值作为选择器名并以“.”开头。class属性允许重复。（5）包含选择器（也称后代选择器）：类似于E1 E2。其中，Ei可为标签、ID、类选择器之一，它将应用于“E1元素后代中的所有E2元素”上，例如：（6）伪类选择器：以“:”开头的选择器。4）CSS的层叠规则（1）选择器的层叠规则：多个选择器同时作用于某一元素时的最终效果所有的规则属性层叠起来共同决定。若有重复定义的属性，则“特殊性”大的选择器中的规则属性胜出。选择器“特殊性”的计算步骤如下：（2）继承与特殊性（1）对美工人员或自行构思设计的网页设计图进行整体分析并提取尺寸；（2）从设计图

5、中提取图片，或者自行制作、下载并处理图片；（3）用div布局页面并根据需要定义CSS规则；（4）内容编排并根据需要定义CSS规则；（5）优化CSS规则。四、技能操作示范及学生实施任务l新建index.html，标题为“泰州职业技术学院电子工程系”，保存到站点根文件夹下。单击属性面板上的【页面属性】按钮后设置：l即清除部分块级元素在元素内部或前后保留的空白。要放在style元素中一开始部分。块级元素：在横向上充满其父元素的内容区域，且在其左右两边没有其他元素，即独占一行。行内元素：不形成新内容块的元素，即在其左右可以有其他元素，如span、a、img、em、strong、input等。1）插入页

6、头divl切换到设计视图，并单击【插入】面板【布局】选项组中的【插入Div标签】按钮（或打开【插入】【布局对象】【Div标签】菜单，以后不再单独列出“菜单命令”方法）。l将ID设定为header，其余按默认设置，则在网页上插入了一个带虚线框的块状区域，其中有默认的显示文字，可以暂时保留着。自动生成的代码：此处显示 id header的内容 如果是在【类】下拉列表框中输入header，则代码为：此处显示class header的内容 可以对同一个div应用class或id属性（一般只应用其中的一种）。主要差异：id 用于标识单独的唯一的元素，而class属性用于某一类元素，它可重复使用（比如，希

7、望具有类似边框和背景表现的元素就可使用同一个class属性）。有理论认为，应尽量使用class属性，而id属性应该供JavaScript或其他程序使用，以避免程序人员修改id或其他操作而造成CSS应用失效。id和class属性值的命名：不能以数字开头或连字符后面紧跟数字；要根据语义命名并尽量做到命名与“表现”分离。不要使用left、right、center、top、red、green等与表现有关的名称，可使用如下一些名称：当需要多个单词来命名时仍可使用骆驼、Pascal、连字符、下划线命名法。l在设计视图中，鼠标单击id属性为header的div（简称div#header）虚线框（或先在虚线框

8、内单击，再使用标记选择器选择最右边的标签），再单击【CSS样式】面板上 按钮。l在 CSS规则编辑器对话框中将CSS样式规则属性分为8大类别，每一类别中包含若干可定义的属性和值。现设定如下：自动生成的代码：#header width:880px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;l选中页头div后，使用键盘上的键将光标定位到页头div下方，再插入div#main和页脚div#footer。l因页中、页脚的规则与页头一样，故使用分组选择器，即切换到代码视图，在#header后直接添加选择器：#h

9、eader,#main,#footer width:880px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;#wrap width:880px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;#header,#main,#footerl页头包含3部分：网站Logo和标志动画区、当前日期和导航栏区、欢迎区。l先删除页头div#header中的默认内容，再在其中从上至下插入3个互不嵌套的div，其id分别为：logoba

10、nner、nav、scroll。代码为：2）新建CSS规则定义CSS规则时先选中对应的元素再定义，就会自动创建包含选择器#header#loginbanner。定义CSS规则时，尽量做到简单、到位，只要达到了预期目标就可以了。比如，页头div#header宽度为880px，而其中的3个div在横向上会自动充满父元素的内容区域，无需再设定3个div的宽度了。如果某个属性可以继承而又不想改变其值，也不必再行定义，如字体、字号等。#header#loginbanner height:120px;/*系标和标志动画高度120px*/#header#nav height:30px;margin-top:

11、1px;#header#scroll height:25px;margin-top:1px;l先删除div#loginbanner中的默认内容，再在其中插入2个互不嵌套的div，id分别为logo和banner：#header#loginbanner#logo width:120px;/*Logo大小为120px120px*/#header#loginbanner#banner clear：清除元素的浮动，即不允许当前元素的左侧或右侧出现浮动元素。none:默认值，即元素两侧都可有浮动元素。left:元素左侧不允许有浮动元素。right:元素右侧不允许有浮动元素。both：元素两侧都不允许有浮

12、动元素。若要在同一水平方向上显示n个div元素，常用方法有如下2种：给前n-1个div设定width（值不能为auto）以及float:left，给第n个div设定margin-left属性。给n个div均设定width（值不能为auto）和float:left。也可使用right代替left，margin-right代替margin-left，或综合使用。2）日期和导航菜单区div#nav的细化#header#nav#sidedate background-image:url(image/bigbg.gif);background-repeat:no-repeat;background-po

13、sition:left top;#header#nav#menu#header#nav background-color:#EEE;#header#nav#date font-size:0.9em;background-image:url(image/bg4.gif);background-repeat:repeat-x;text-align:center;float:left;使用em单位：是为了使浏览者放大缩小文字后，显示的文字和显示区域的宽度可以自动缩放。0.9em=0.9*13px（即small）12px。text-align：设定块级元素内文本的水平对齐方式。而：vertical-a

14、lign：设定行内或表格单元格内内容的垂直对齐方式，比如行内包含文本和图像，则可设定文本相对于图像或图像相对于文本的对齐方式，它不能被继承。“区块”类别中的其他属性：#header#nav#sidedate规则中须设定width和height属性，因为定义了float属性后，其占据的空间将被压缩以适合内容（为空），从而看不到背景图像。“背景”类别：属装饰类而非内容的图像不应该出现在XHTML文档的内容中以便使结构与表现分离，故应设定成背景图像。#header#scroll font-size:0.9em;background-image:url(image/bg1.gif);backgroun

15、d-repeat:repeat-x;l方法一：在div#main中插入2个互不嵌套、水平排列的外层div，再在各个div中分别插入3个互不嵌套、纵向排列的div。适用于初学者。l方法2：左列插入1个外层div，再在其中插入3个互不嵌套、垂直排列的div，右列不使用外层div而直接插入3个互不嵌套、垂直排列的div。此处使用方法2。1）插入与）插入与4个区对应的个区对应的4个个divl在div#main中插入4个互不嵌套的div，其id分别设置为sidebar、intro、news、activity。#main#sidebar width:200px;margin-top:2px;backgro

16、und-image:url(image/bg3.gif);background-repeat:repeat-x;background-position:left top;width:670px;margin-top:2px;margin-left:8px;border:1px solid#6CF;不设定height属性：因各个div的高度不能确定。当浏览者放缩文字后，各个div的高度将会自动调整。如果强行设定高度，则当其中的内容超出当前div由宽和高决定的区域后，将会与其余元素中的内容发生重叠。“clear:right;”：确保各个div元素右侧不再有浮动的元素。水平方向的长度之和=200px

17、+8px+670px+右列的边框宽2px=880px。如果宽度总和超过880px，则右列的各个区域便会在下一行显示，而不会与左列在同一行显示了。“边框”类别：设定元素的边框属性。border-style：设定4个边框的线型，默认值none，并迫使border-width为0。border-width：设定4个边框的宽度，默认值为0。可设定数值或thin、medium、thick（thin=medium=thick）。border-color：设定4个边框的颜色。默认值是使用元素的color属性值。注意：上述3个属性均是缩写属性，每个属性都可以同时设定14个值。各个属性也可细分为top、righ

18、t、bottom、left 4个方向，如border-top-width、border-right-width等。边框属性还可缩写为：border-top、border-right等以及border。如：#intro border-top:1em solid#0CF;/*顺序任意，可省略部分属性*/#intro border:1em solid#0CF;/*顺序任意，可省略部分属性*/2）新建CSS规则#main#sidebar#login,#main#sidebar#show,#main#sidebar#friendlinkbackground-image:url(image/bg2.gif

19、);background-repeat:repeat-x;text-align:center;margin-bottom:2px;l右栏已无需再细化，直接留待以后插入内容。l页脚用以存放副导航和版权、联系方式等内容。#footer font-size:0.9em;text-align:center;clear:both;五、巩固与拓展l在学校网站站点根文件夹下新建泰职院网站主页index.html，并运用本章所学的知识和技能对主页进行布局，该主页分为页头、页中、页脚3个部分。所需素材请参考学校现有网站搜集整理。页头 侧栏1 主要内容 侧栏2 页脚#wrap width:880px;margin

20、:0 auto;#header#sidebar1 width:200px;float:left;#content width:480px;float:left;margin:0px 10px 10px;#sidebar2 width:180px;float:left;#footer clear:both;/*或或clear:left;，使页脚另起一行显示，使页脚另起一行显示*/所有长度均可使用以em或%为单位的值。要使中间3列与页脚之间保留一定的空间，应设定3列中最高列的margin-bottom，设定页脚的margin-top是没有效果的。（1）嵌入式样式表（即内部样式表）：通过style元

21、素嵌入到文档的头部head中。如本章所用方法。（2）外部样式表：即存储在外部 CSS(.css)文件中的若干组 CSS 规则。外部样式表文件利用头部head中的标签链接或style元素中的import 命令导入。后2个供浏览者在浏览器中进行选择（在【查看】【样式】中可看到title属性定义的风格列表，可以选择所需的风格）。（3）内联样式（也称行内样式）：使用style属性将CSS规则直接定义在body元素内的特定的XHTML标签中，如：显示为蓝色。内联样式的优先级最高，但建议少用，因其无法体现层叠样式表的优势，一般只在代码调试时使用。六、演示、点评与总结（1）在电子系网站主页页中的6个区域（左

22、列的3个区域及右列的3个区域）中，如果水平方向上的左右2个区域的高度分别对应相同（即站内登录区与系部简介区高度相同，依此类推），那么用DIV+CSS可以如何进行布局？（2）为了方便浏览者可以使用浏览器提供的放大缩小文字功能来调整文字大小，如果去掉网站主页页头的系标和标志动画区，那么各div的宽度以什么为单位比较合适？为什么？（3）如果某个div的背景是一个整幅图像，那么该div的宽度和高度以什么为单位比较合适？如果div的背景使用的是某个大幅图像中以坐标（100，200）为起点的右下部分，如何设定背景图像的定位属性background-position？（4）如果去掉网站主页页头的系标和标志动画区，考虑到浏览器窗口的缩放，那么各div的宽度以什么为单位比较合适？为什么？七、作业