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

学习情境二 制作系部网站主页任务5： DIV+CSS布局“电子工程系”网站主页的实现 知识复习巩固 一、转变我们的思路 传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再通过设计HTML生成页面。 改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。 网页设计的很复杂怎么办？记住：如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了。 用CSS排版有一个很实用的好处是，如果你是接单做网站的，你使用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。 知识复习巩固 二、实现结构与表现分离 结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。 例如：P是结构化标签，有P标签的地方表示这是一个段落区块，如果要让一个段落右缩进2字符，自然会想到加空格，而且每一段都需要反复添加。 现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，参见实例s1.html和s1-1.html（演示）. S1.html结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。 S1-1.html使用CSS实现了结构与表现的分离。 知识复习巩固 知识复习巩固 参见实例s2.html和s2-2.html（演示） S2-2.html是结构表现相分离，内容部分代码简单，如果还有更多的图片列表的话，那么这种采用CSS布局方法就更有优势。 比喻：在BODY中向你展示一张图片，只对你说它是一张图片个人，至于是一张多宽、多高的图片，是否有边框、边框什么颜色等等，你去CSS那里查下就知道。 这样在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一组多个图片在那里，我在CSS记录其共同特性就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。 知识复习巩固 知识复习巩固 三、使用DIV+CSS设计版面 如下版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了,只要改变其中的文字内容就可以生成风格统一的众多板块了. 知识复习巩固 可以对同一个div应用class (s3.html)或id属性(s3-1.html) （一般只应用其中的一种）。 主要差异：id 用于标识单独的唯一的元素，而class属性用于某一类元素，它可重复使用（比如，希望具有类似边框和背景表现的元素就可使用同一个class属性）。有理论认为，应尽量使用class属性，而id属性应该供JavaScript或其他程序使用，以避免程序人员修改id或其他操作而造成CSS应用失效。 知识复习巩固 技能操作示范（一） 设计分析s0.htm和s0-0.html 说明：CSS的应用方式 （1）三种CSS应用方式 内部样式表：样式规则在head区声明，内部样式表的样式仅对本网页起作用。 外部样式表：把CSS规则写在一个以.CSS为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个文件，能够保证网站的统一风格。推荐使用 行内样式表：如果上样式规则使用频率不高，只是极个别元素使用，可以把样式定义在元素的标签里，称为“行内样式表”。行内样式使用标签的style属性定义。少量使用 技能操作示范(二） 技能操作示范 技能操作示范 1. 网页文档布局分析 技能操作示范 1. 网页文档整体分析 技能操作示范 2.文档初始设置 1）创建网页并进行初始设置 新建index.html，标题为“泰州职业技术学院电子工程系”，保存到站点根文件夹下。单击属性面板上的【页面属性】按钮后设置： 技能操作示范 2）清除浏览器默认样式 即清除部分块级元素在元素内部或前后保留的空白。要放在style元素中一开始部分。 块级元素：在横向上充满其父元素的内容区域，且在其左右两边没有其他元素，即独占一行。 行内元素：不