文档介绍：第3章网页样式和网页表格
教学提示和教学目标
使用样式
表格应用
使用模板
教学提示和教学目标
教学提示:通过上一章的学****我们可以了解到,在制作网页时网页中文本文字的插入与编排的一些基本知识。为本章更深入的学****打下了基础。本章将更进一步的学****网页中文本文字的处理,它主要包括网页样式、表格与模板的应用,将网页中的文子和图片更加融洽的结合在一起,方便浏览者能够更好的浏览网页中的内容。
教学目的:通过本章的学****要求读者能够很好的认识到样式、表格与模板的意义,在制作网页时能够灵活地运用它们进行网页的编辑。从而制作出一些比较有个性的个人网页或者企业网页,给浏览者留下一个好的印象。
使用样式
样式是控制网页文本外观的一组格式。样式在网页的设置中起到了控制作用,通过样式控制的网页给人一种赏心悦目、工工整整的感觉,同时字体的色彩变化也使主页变得更加生动活泼。
样式的定义
CSS样式
样式应用实例
样式的定义
样式在网页的制作里应用比较广泛。在设计网页时,常常需要对网页文本进行修饰,即对文本进行格式化。以前,在网页修饰方面还缺乏一种对网页样式的整体定义方法,致使在网页制作时要做很多重复性的工作。例如,如果网页中有100个<h3>子标题,就要定义100次<h3>的样式。而现在只需要定义一次,然后再直接使用样式即可以轻而易举地得到了相同的显示效果。
网页设计最初是用HTML标记来定义页面文档及格式,例如标题<h1>、段落<p>,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1,自CSS1的版本之后,又在1998年5月发布了CSS2版本,样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器( scape Navigator等)和CSS样式表。
CSS样式
内嵌样式表是混合在HTML标记里使用的一种样式表。使用该样式表可以简单的对某个元素单独定义样式。内嵌样式的使用是直接在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值,如下例:
<p style="color: sienna; margin-left: 20px">这是一个段落</p>(这个段落颜色为土黄,左边距为20象素)
在style参数后面的引号里的内容相当于在样式表大括号里的内容。
链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,而且这个<link>标记必须放到页面的<head>区内。
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表,导入时用要使用***@import样式表。
样式应用实例
通过对一个或数个CSS文件的控制实现整个网站页面的格式、版面控制,该技术大大简化大型网站的代码长度。同时对网页中文字和图片的布局、字体、颜色、背景和其它图文效果也能实现更加精确的控制。
表格应用
Dreamweaver是目前最常用的网页制作工具,在它的系统里附带了表格工具。通过表格可以将文字或图片放置在网页指定的位置上,并能清晰地显示出表格中的数据。解决了网页上由于各元素格式不一样,而不能够很好的结合在一起的重大问题。这样就能够合理的利用网页上的每一点空间。
创建表格
表格设置
单元格的处理
套用表格
利用表格排版
表格数据处理
创建表格
表格是网页设计制作时不可以缺少的重要元素,它以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上,从而设计出版式漂亮的页面。使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持布局,所以表格是网页中常用的信息展示方式,如下图所示,一个使用了明显表格的网页。
表格设置
本节学****如何设置表格。在设置表格时包括对整体表格的设置、对齐或列的设置以及对表格单元格的设置。
表格的背景颜色,既可以是整个表格,也可以是某个单元格,(也就是说大表格用一种颜色,某个或某些单元格用另外的颜色。)因此它的灵活设置往往可以创建出别具一格的网页配色;清除行高与列宽的主要作用是创建规则的表格,制作好表格后,在向单元格输入数据时,Dreamweaver往往会改变表格单元格尺寸大小,使