2-05：DIV布局“电子工程系”网站主页的实现.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,知识复习巩固,技能操作示范,学习情境二 制作系部网站主页任务,5,：,DIV+CSS,布局“电子工程系”网站主页的实现,1,知识复习巩固,一、转变我们的思路,传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用,Photoshop,这类软件自由的画出来，最后再切成小图，再通过设计,HTML,生成页面。,改用,CSS,排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强,CSS,控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且,CSS,排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。,网页设计的很复杂怎么办？记住：如果用,CSS,实现不了的效果，一般用表格也是很难实现的，因为,CSS,的控制能力实在是太强大了。,用,CSS,排版有一个很实用的好处是，如果你是接单做网站的，你使用了,CSS,排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的,CSS,文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。,2,二、实现结构与表现分离,结构和表现相分离，这也用,CSS,布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。,例如：,P,是结构化标签，有,P,标签的地方表示这是一个段落区块，如果要让一个段落右缩进,2,字符，自然会想到加空格，而且每一段都需要反复添加。,现在可以给,P,标签指定一个,CSS,样式：,P text-indent:2em;,，如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的,CSS,加进,P,样式里就行了，参见实例,s1.html,和,s1-1.html,（演示）,.,S1.html,结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。,S1-1.html,使用,CSS,实现了结构与表现的分离。,知识复习巩固,3,知识复习巩固,结构和表现相分离，这也用,CSS,布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。,结构和表现相分离，这也用,CSS,布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。,S1-1.html,使用,CSS,S1.html,未使用,CSS,4,参见实例,s2.html,和,s2-2.html,（演示）,S2-2.html,是结构表现相分离，内容部分代码简单，如果还有更多的图片列表的话，那么这种采用,CSS,布局方法就更有优势。,比喻：在,BODY,中向你展示一张图片，只对你说它是一张图片个人，至于是一张多宽、多高的图片，是否有边框、边框什么颜色等等，你去,CSS,那里查下就知道。,这样在,BODY,的工作就简单了，也就是说,BODY,的代码就简单了。如果,BODY,有一组多个图片在那里，我在,CSS,记录其共同特性就行了，这有点像,Flash,软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到,CSS,网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。,知识复习巩固,5,知识复习巩固,使用,CSS,S2-2.html,使用,CSS,S2.html,未使用,CSS,6,三、使用,DIV+CSS,设计版面,如下版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用,CSS,写出来的，样式写一次，就可以被无数次调用了,只要改变其中的文字内容就可以生成风格统一的众多板块了,.,知识复习巩固,7,可以对同一个,div,应用,class,(s3.html),或,id,属性,(s3-1.html),（一般只应用其中的一种）。,主要差异,：,id,用于标识单独的唯一的元素，而,class,属性用于某一类元素，它可重复使用（比如，希望具有类似边框和背景表现的元素就可使用同一个,class,属性）。有理论认为，应尽量使用,class,属性，而,id,属性应该供,JavaScript,或其他程序使用，以避免程序人员修改,id,或其他操作而造成,CSS,应用失效。,知识复习巩固,8,知识复习巩固,S3.html,使用,class,S3-3.html,使用,ID,前言,正文内容,转变思想,正文内容,前言,正文内容,转变思想,正文内容,9,技能操作示范（一）,设计分析,s0.htm,和,s0-0.html,10,说明：,CSS,的应用方式,（,1,）三种,CSS,应用方式,内部样式表：样式规则在,区声明，内部样式表的样式仅对本网页起作用。,外部样式表：把,CSS,规则写在一个以,.CSS,为后缀的,CSS,文件里，然后在每个需要用到这些样式的网页里引用这个文件，能够保证网站的统一风格。推荐使用,行内样式表：如果上样式规则使用频率不高，只是极个别元素使用，可以把样式定义在元素的标签里，称为,“,行内样式表,”,。行内样式使用标签的,style,属性定义。少量使用,11,技能操作示范,(,二）,12,技能操作示范,13,1.,网页文档布局分析,技能操作示范,此处显示,id logo,的内容,此处显示,id banner,的内容,此处显示,id date,的内容,sidedate,此处显示,id menu,的内容,此处显示,id scroll,的内容,此处显示,id login,的内容,此处显示,id show,的内容,此处显示,id,friendlink,的内容,此处显示,id intro,的内容,此处显示,id news,的内容,此处显示,id activity,的内容,此处显示,id footer,的内容,14,1.,网页文档整体分析,技能操作示范,15,2.,文档初始设置,1,）创建网页并进行初始设置,新建,index.html,，标题为,“,泰州职业技术学院电子工程系,”,，保存到站点根文件夹下。单击属性面板上的,【,页面属性,】,按钮后设置：,技能操作示范,16,2,）清除浏览器默认样式,即清除部分块级元素在元素内部或前后保留的空白。要放在,style,元素中一开始部分。,块级元素,：在横向上充满其父元素的内容区域，且在其左右两边没有其他元素，即独占一行。,行内元素,：不形成新内容块的元素，即在其左右可以有其他元素，如,span,、,a,、,img,、,em,、,strong,、,input,等。,p,h1,h2,h3,h4,h5,h6,ul,ol,li,form,/*,分组选择器*,/,margin:0;,padding:0;,或,*,margin:0;,padding:0;,技能操作示范,17,3.,页面整体布局,1,）插入页头,div,切换到设计视图，并单击,【,插入,】,面板,【,布局,】,选项组中的,【,插入,Div,标签,】,按钮（,或打开,【,插入,】【,布局对象,】【Div,标签,】,菜单，以后不再单独列出,“,菜单命令,”,方法,）。,将,ID,设定为,header,，其余按默认设置，则在网页上插入了一个带虚线框的块状区域，其中有默认的显示文字，可以暂时保留着。,说明：,自动生成的代码：,此处显示,id header,的内容,如果是在,【,类,】,下拉列表框中输入,header,，则代码为：,此处显示,class header,的内容,可以对同一个,div,应用,class,或,id,属性（一般只应用其中的一种）。,主要差异,：,id,用于标识单独的唯一的元素，而,class,属性用于某一类元素，它可重复使用（比如，希望具有类似边框和背景表现的元素就可使用同一个,class,属性）。有理论认为，应尽量使用,class,属性，而,id,属性应该供,JavaScript,或其他程序使用，以避免程序人员修改,id,或其他操作而造成,CSS,应用失效。,技能操作示范,18,id,和,class,属性值的命名：不能以数字开头或连字符后面紧跟数字；要根据语义命名并尽量做到命名与,“,表现,”,分离。不要使用,left,、,right,、,center,、,top,、,red,、,green,等与表现有关的名称，可使用如下一些名称：,当需要多个单词来命名时仍可使用,骆驼,（混合使用大小写字母来构成变量和函数的名字，首字母小写）、,Pascal,（首字母大写）、,连字符,、,下划线,命名法。,技能操作示范,19,2,）给页头,div,新建,CSS,规则,在设计视图中，鼠标单击,id,属性为,header,的,div,（简称,div#header,）虚线框（,或先在虚线框内单击，再使用标记选择器选择最右边的标签,），再单击,【CSS,样式,】,面板上 按钮。,在,CSS,规则编辑器对话框中将,CSS,样式规则属性分为,8,大类别，每一类别中包含若干可定义的属性和值。现设定如下：,自动生成的代码：,#header,width:880px;,margin-top:0px;,margin-right:auto;,margin-bottom:0px;,margin-left:auto;,技能操作示范,20,说明,“,方框,”,类别,：网页中的元素可看成是一个装了内容的矩形盒子，它们嵌套、叠加或并列在一起。矩形盒子包含,4,个部分：,内容,：如文字、图片或其他元素等，内容也可看作是一个矩形区域，可设定其,width,和,height,两个,CSS,属性。,border,（边框）：可单独设定其外观,style,（样式）,、,width,（宽度）、,color,（颜色）,3,个,CSS,属性，位于,“,边框,”,类别中。,padding,（补白，也称为填充）：它是内容框与边框之间的空白区域，补白部分显示的是背景。,margin,（边距）：是边框外的透明区域，用来设定本元素与其他元素之间的距离。,除,“,内容,”,外，每个部分又有,top,（上）、,right,（右）、,bottom,（下）、,left,（左）,4,个方向。,技能操作示范,21,在组成实际宽度或高度的值中如果有,1,个或多个值为,auto,，则会自动求出,auto,的计算值，比如,margin-left,和,margin-right,均为,auto,时，它们的计算值相同，这正是,实现水平居中对齐使用,的方法。,技能操作示范,22,3,）插入页中,div,和页脚,div,选中页头,div,后，使用键盘上的键将光标定位到页头,div,下方，再插入,div,#main,和页脚,div#footer,。,4,）给页中和页脚,div,创建,CSS,规则,因页中、页脚的规则与页头一样，故使用,分组选择器,，即切换到代码视图，在,#header,后直接添加选择器：,#,header,#main,#footer,width:880px;,margin-top:0px;,margin-right:auto;,margin-bottom:0px;,margin-left:auto;,说明：,另一种使页头、页中、页脚均水平居中的,常用方法,：在页头、页中、页脚的外面包裹一个父级元素,div#wrap,。,#wrap,width:880px;,margin-top:0px;,margin-right:auto;,margin-bottom:0px;,margin-left:auto;,#header,#main,#footer,技能操作示范,23,4.,页头,div#header,布局,页头包含,3,部分：网站,Logo,和标志动画区、当前日期和导航栏区、欢迎区。,1,）插入,3,个,div,先删除页头,div#header,中的默认内容，再在其中从上至下插入,3,个互不嵌套的,div,，其,id,分别为：,logobanner,、,nav,、,scroll,。代码为：,技能操作示范,24,2,）新建,CSS,规则,#header#,loginbanner,height:120px;/*,系标和标志动画高度,120px*/,#header#,nav,height:30px;,margin-top:1px;,#header#scroll,height:25px;,margin-top:1px;,说明：,定义,CSS,规则时先选中对应的元素再定义，就会自动创建包含选择器,#header#,loginbanner,。,定义,CSS,规则时，尽量做到简单、到位，只要达到了预期目标就可以了。比如，页头,div#header,宽度为,880px,，而其中的,3,个,div,在横向上会自动充满父元素的内容区域，无需再设定,3,个,div,的宽度了。,如果某个属性可以继承而又不想改变其值，也不必再行定义，如字体、字号等。,技能操作示范,25,5.,细化页头,div#header,1,）网站,Logo,和标志动画区,div#loginbanner,的细化,先删除,div#loginbanner,中的默认内容，再在其中插入,2,个互不嵌套的,div,，,id,分别为,logo,和,banner,：,#header#,loginbanner,#logo,width:120px;/*Logo,大小为,120px120px*/,float:left;,#header#,loginbanner,#banner,width:760px;,float:left;,（,margin-left:120px;,）,技能操作示范,26,说明：,float,：设置当前元素向左或右浮动，以便在其右侧或左侧可布局其他元素。一个未设置宽或高的元素将压缩宽或高以适应内容。,none:,默认值，即当前元素不浮动。,left:,当前元素产生的块框向左浮动，直到它的外边沿接触到包含块的边沿或者其他浮动框的外边沿。,right:,与,left,类似。,clear,：清除元素的浮动，即不允许当前元素的左侧或右侧出现浮动元素。,none:,默认值，即元素两侧都可有浮动元素。,left:,元素左侧不允许有浮动元素。,right:,元素右侧不允许有浮动元素。,both,：元素两侧都不允许有浮动元素。,若要在同一水平方向上显示,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,，或综合使用。）,技能操作示范,#header#,loginbanner,#logo,width:120px;/*Logo,大小为,120px120px*/,float:left;,#header#,loginbanner,#banner,width:760px;,float:left;,27,2,）日期和导航菜单区,div#nav,的细化,删除,div#nav,中的默认内容，再在其中插入,3,个互不嵌套的,div,，,id,分别为,date,、,sidedate,、,menu,：,#header#,nav,#,sidedate,background-image:,url(image/bigbg.gif,);,background-repeat:no-repeat;,background-position:left top;,width:30px;,height:30px;,float:left;,#header#,nav,#menu,margin-left:18em;,#header#,nav,background-color:#EEE;,line-height:30px;,#header#,nav,#date,font-size:0.9em;,background-image:url(image/bg4.gif);,background-repeat:repeat-x;,text-align:center;,width:14em;,float:left;,技能操作示范,28,说明,line-height,：指的是两个相邻文本行的基线（,baseline,，即一行文本横排时英文字母,x,的下端沿）间的距离，,常用来使单行文字在行高设定的高度内垂直居中,。取值为：,normal,：默认值，一般为,1,到,1.2,。,实数值：缩放因子。,带单位的长度：合法的长度值，可为负数。以,em,和,ex,为单位时，指相对于当前元素的字体尺寸。,百分比：相对于当前元素的字体尺寸。,“,类型,”,类别中的其他属性：,font-famliy,、,font-size,：设定字体集和字体大小。,font-weight,（字体磅值）：设定文字的粗细。,font-style,（字体样式）：设定文字样式（,normal,：正常；,italic,：斜体；,oblique,：倾斜）。,font-variant,（字体变形）：设定西文文字（,normal,：正常；,small-caps,：小型大写字母）。,text-transform,（文本转换）：设定大小写方式（,capitalize,：首字母转为大写；,uppercase,：转换为大写；,lowercase,：转换为小写；,none,：不转换，默认值）。,text-decoration,（文本装饰）：设定文本装饰（,none,：无装饰，默认值；,underline,：下划线；,overline,：上划线；,line-through,：贯穿线；,blink,：闪烁）。不被继承。,color,（颜色）：字体颜色。,技能操作示范,29,使用,em,单位,：是为了使浏览者放大缩小文字后，显示的文字和显示区域的宽度可以自动缩放。,0.9em=0.9*13px,（即,small,）,12px,。,text-align,：设定,块级元素,内文本的水平对齐方式。而：,vertical-align,：,设定行内或表格单元格内内容的垂直对齐方式，比如行内包含文本和图像，则可设定文本相对于图像或图像相对于文本的对齐方式，它不能被继承。,“,区块,”,类别中的其他属性：,word-spacing,（单词间隔）：设定单词间间隔。判断单词（含汉字）以空格为标准，可为负值。,letter-spacing,（字母间隔）：设定字母或汉字间间隔。,text-indent,（文本缩进）：设定,块级元素,中第一行文本的缩进。负值可以悬挂缩进或用来隐藏单行文字（,text-indent:-9999em,）。,white-space,（空白字符）：设定空格的处理方式（,normal,：默认自动换行；,pre,：换行和其他空白字符都将受到保护；,nowrap,：强制在同一行内显示所有文本）。它不被继承。,display,（显示）：设定元素是否显示或显示方式，典型的取值为,none,（不显示）、,block,、,inline,、,list-item,等。,技能操作示范,30,#header#,nav,#,sidedate,规则中须设定,width,和,height,属性，因为定义了,float,属性后，其占据的空间将被压缩以适合内容（为空），从而看不到背景图像。,“,背景,”,类别,：属装饰类而非内容的图像不应该出现在,XHTML,文档的内容中以便使结构与表现分离，故应设定成背景图像。,background-color,、,background-image,：设定背景颜色,(,默认透明,),和图像。,background-repeat,：设定背景图像重复方式。,background-attachment,（附属）：设定背景图像是否随元素的滚动而滚动。,background-position,（背景图像定位）：设定背景图像在元素内的起始位置，默认时在左上角显示。取值为：,left,：相当于水平方向为,0,。,center,：相当于水平方向为,50%,或垂直方向为,50%,。,right,：相当于水平方向为,100%,。,top,：相当于垂直方向为,0,。,bottom,：相当于垂直方向为,100%,。,长度：为正时向右或向下偏移，为负时向左或向上偏移。,百分比：表示将背景图像的百分比位置与元素的百分比位置相对应。,定位值可以是,1,个或,2,个：若只有,1,个，则第,2,个被假定为,center,；若,2,个值都是关键字，则顺序任意；若,2,个值中至少有,1,个是具体值，则第,1,个为水平方向，第,2,个为垂直方向。建议不要将数值与关键字混用。,background,：缩写。以任意顺序列出各个属性值即可，未列举属性使用默认值。一般用它定义通用属性，再针对个别元素设定专用属性。例如：,abackground:#6CF no-repeat left bottom;,a.homebackground-image:url(image/bg1.gif);,a.blogbackground-image:url(image/bg2.gif);,技能操作示范,31,3,）欢迎条区,div#scroll,的细化,#header#scroll,font-size:0.9em;,line-height:25px;,background-image:url(image/bg1.gif);,background-repeat:repeat-x;,技能操作示范,32,6.,页中,div#main,布局,方法,1,：在,div#main,中插入,2,个互不嵌套、水平排列的外层,div,，再在各个,div,中分别插入,3,个互不嵌套、纵向排列的,div,。适用于初学者。,方法,2,：左列插入,1,个外层,div,，再在其中插入,3,个互不嵌套、垂直排列的,div,，右列不使用外层,div,而直接插入,3,个互不嵌套、垂直排列的,div,。,此处使用方法,2,。,1,）插入与,4,个区对应的,4,个,div,在,div#main,中插入,4,个互不嵌套的,div,，其,id,分别设置为,sidebar,、,intro,、,news,、,activity,。,技能操作示范,33,2,）新建,CSS,规则,#main#sidebar,float:left;,width:200px;,margin-top:2px;,#main#,intro,#main,#,news,#main,#activity,background-image:url(image/bg3.gif);,background-repeat:repeat-x;,background-position:left top;,width:670px;,float:right;,clear:right;,margin-top:2px;,margin-left:8px;,border:1px solid#6CF;,技能操作示范,34,说明,不设定,height,属性,：因各个,div,的高度不能确定。当浏览者放缩文字后，各个,div,的高度将会自动调整。如果强行设定高度，则当其中的内容超出当前,div,由宽和高决定的区域后，将会与其余元素中的内容发生重叠。,“,clear:right;,”,：确保各个,div,元素右侧不再有浮动的元素。,水平方向的长度之和,=200px+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,个属性均是缩写属性，每个属性都可以同时设定,1,4,个值。,各个属性也可细分为,top,、,right,、,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;/*,顺序任意，可省略部分属性*,/,技能操作示范,35,7.,细化页中左列,div#sidebar,1,）插入与,3,个区对应的,3,个,div,在,div#sidebar,中插入,3,个互不嵌套的,div,，其,id,分别设置为,login,、,show,、,friendlink,。,技能操作示范,36,2,）新建,CSS,规则,#main#sidebar#login,#main#sidebar#,show,#main,#sidebar#,friendlink,background-image:url(image/bg2.gif);,background-repeat:repeat-x;,text-align:center;,margin-bottom:2px;,技能操作示范,37,8.,细化页中右列,div#main,右栏已无需再细化，直接留待以后插入内容。,9.,页脚,div#footer,布局,页脚用以存放副导航和版权、联系方式等内容。,#footer,font-size:0.9em;,text-align:center;,clear:both;,技能操作示范,38,10.,使用样式表文件,（,1,）创建空白样式表文件,index.css,，保存到,CSS,子文件夹中。,（,2,）将,CSS,规则移入外部样式表文件,index.css,中。,（,3,）修改路径：检查,index.css,中所有的背景图像路径是否是以,./image/,引导，若不是则进行修改。,（,4,）给本系简介网页链接外部样式表文件,index.css,：,39,11.,课后作业：,（,1,）在,“,电子工程系,”,网站主页中加入导航菜单（参考,P91,内容）,（,2,）在,“,电子工程系,”,网站主页中加入选项卡式页面板（参考,P108,内容）,40,下次再见！,41,