1、第第7章章 HTML和和CSS基础基础 2014.11网页设计与制作网页设计与制作第第7章章 HTML和和CSS基础基础 CSS基础基础7.2 HTML基础基础7.1 模板模板7.3网页设计与制作网页设计与制作本章要点本章要点在网页中，文本、图像、表格、样式、框架等基本元素在网页中，文本、图像、表格、样式、框架等基本元素或者对象都是建立在或者对象都是建立在HTML基础上的，可以说基础上的，可以说HTML是是搭建网站的基本搭建网站的基本“材料材料”。而使用。而使用CSS样式可以轻松地解样式可以轻松地解决网页文本的格式化问题。利用模板则可以创建统一结决网页文本的格式化问题。利用模板则可以创建统一结
2、构与外观的网站，并且可以批量制作网页，快速更新网构与外观的网站，并且可以批量制作网页，快速更新网站。站。vHTML基础基础vHTML的各种标记的各种标记v设置和管理设置和管理CSS样式样式vCSS样式的用途样式的用途v模板的用途模板的用途v创建模板和设定可编辑区域创建模板和设定可编辑区域网页设计与制作网页设计与制作7.1 HTML基础基础HTML（Hyper Text Markup Language）称为超文本标记语言。使用HTML编写的超文本文档称为HTML文档。任何网页页面都是以HTML语言为核心和基础的。例如，第一章图1-1所示的是一个标准的网站页面，单击浏览器的“查看”菜单，选择“源文
3、件”选项，打开的即是网页页面的源代码。该源代码就是使用HTML语言编写的。HTML至今经历了多个版本，2008年W3C发布了HTML5工作草案，并计划在2014年推出HTML5标准。网页设计与制作网页设计与制作7.1 HTML基础基础HTML网页的编写方法网页的编写方法7.1.11HTML网页文件的命名规则（1）允许使用、汉字、英文字母、数字和下划线，但不能包含空格与特殊符号。（2）名称区分大小写。（3）网站主页文件名一般为index.htm或index.html。2使用HTML编写网页（1）手工编写这是最传统的编写方法。只要装有Windows系统，使用记事本即可编写HTML网页。（2）使用可
4、视化的HTML编辑软件这是最方便的编写方法。例如，Dreamweaver、FrontPage等。（3）通过编写程序，由Web服务器实时动态地生成网页。属于动态网页制作方法。网页设计与制作网页设计与制作7.1 HTML基础基础HTML网页的编写方法网页的编写方法7.1.1操作实例操作实例7-1 使用使用HTML编写网页编写网页操作步骤：操作步骤：生成网页页面：在“开始”菜单，选择“程序”、“附件”、“记事本”选项，启动Windows系统中的“记事本”程序，如图7-1所示。也可以启动Dreamweaver，直接在“代码视图”窗口编写网页。在“记事本”中输入如图7-1所示的HTML源代码。在“文件”
5、菜单选择“保存”选项，在“另存为”对话框选择存放位置、输入网页文件名。例如，输入“html01.html。在“保存类型”中选择“所有文件”，然后单击“保存”按钮。双击打开“html01.html文件，显示如图7-2所示的网页，浏览器标题栏显示“使用HTML编写网页”，浏览器窗口显示“HTML是超文本标记语言”。网页设计与制作网页设计与制作7.1 HTML基础基础HTML网页的编写方法网页的编写方法7.1.13HTML网页的结构网页的结构（1）网页源代码的基本结构如下：与标记表示HTML文档的开始与结束。任何HTML文档都被包含在一对与标记中。与标记之间是网页的头部信息，其中与标记之间指定了网页
6、的标题。与标记之间是网页的主体，在网页中看到的页面标识一般都包含在与之间。网页设计与制作网页设计与制作7.1 HTML基础基础HTML网页的编写方法网页的编写方法7.1.1（2）元素是HTML语言的基本部分，元素一般成对出现，每一对元素都有一个开始标记与一个结束标记。例如，与。元素的标记应使用一对尖括号括起来，结束标记前应有一个斜杠。（2）HTML元素具有自己的相关属性，每一个属性可以赋予一定的值。元素属性出现在元素的内，并与元素名之间有一个空格分隔，属性值应使用双引号（“”）括起来。例如，与标记表示将所包含的文字存放在一个段落中；align表示排列属性，“center”表示居中对齐。（3）书
7、写HTML源代码时，字符不区分大小写，标记之间空格的多少不影响网页的显示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的头部标记与主体标记的头部标记与主体标记7.1.2HTML源代码包括头部和主体两部分。1HTML的头部标记的头部标记（1）标记标记出现在HTML网页的开头部分。与之间的内容不在浏览器窗口显示。（2）标记用于定义HTML网页的标题。与之间的内容将显示在浏览器窗口的标题栏。（3）标记标记用于提供HTML网页的字符编码、关键字、描述、作者、自动刷新等多种信息，其属性包括如下选项。name：定义一个数据的名称，一般是一个字符串。content：定义一个数据的属性。htt
8、p-equiv：可用于代替name，一般是一个字符串。chartset：设置字符与汉字的编码。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的头部标记与主体标记的头部标记与主体标记7.1.2操作实例操作实例7-2 标记的应用标记的应用例如：meta标记的应用网页设计与制作网页设计与制作7.1 HTML基础基础HTML的头部标记与主体标记的头部标记与主体标记7.1.2其中：用于设置网页字符的编码方式。：用于指定对网页的描述。：用于标记搜索引擎在搜索网页时所获取的关键词。：用于表示网页的设计者。：用于定义网页打开5秒钟后自动跳转到”http:/”。注意：除刷新之外，其他的meta标记
9、均不在浏览器中显示。如果希望网页每隔15秒钟自动刷新，可以写为：网页设计与制作网页设计与制作7.1 HTML基础基础HTML的头部标记与主体标记的头部标记与主体标记7.1.22HTML的主体标记的主体标记用于标记HTML网页的主体部分。在与标记之间，一般含有其他标记，这些标记和标记属性构成了HTML网页的主体部分。标记包含如下属性：（1）设置背景颜色bgcolor属性用于设置HTML网页的背景颜色。例如，用于设置背景颜色为红色。（2）插入背景图片background属性用于设置HTML网页的背景图片。例如，用于将图片l.jpg设置为背景。注意：HTML文档可以使用的图片格式为GIF、JPG。在
10、标记中添加“bgproperties=fixed”，可将背景图片设置为水印效果，并且图片不随滚动条滚动。例如，。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的头部标记与主体标记的头部标记与主体标记7.1.2（3）设置文字颜色与链接颜色text属性表示HTML网页的文本颜色。使用text定义的颜色将应用于整篇文档。例如，用于设置文本颜色为红色。此外，使用link、vlink、alink属性可以分别控制普通的超级链接、访问过的超级链接、当前活动的超级链接文本的颜色。例如，（4）设置页边距topmargin和leftmargin属性用于设置网页主体内容与网页顶端、左端的距离。例如，操
11、作实例操作实例7-3 标记的应用标记的应用为操作实例7-1编写的网页插入一幅背景图片，源代码如图7-3所示，显示效果如图7-4所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.3文本标记分为文本的基本设置与文本的修饰设置。1文本属性的设置文本属性的设置face属性表示文本的字体，color属性表示文本的颜色，size属性表示文本的字号。操作实例操作实例7-4 设置文本的字体、字号与颜色设置文本的字体、字号与颜色请为我唱一首出塞曲，用那遗忘了的古老言语。请用美丽的颤音轻轻呼唤，我心中的大好河山。那只有长城外才有的清香，谁说出塞歌的调
12、子太悲凉。如果你不爱听那是因为，歌中没有你的渴望。而我们总是要一唱再唱，看着草原千里闪着金光。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.3看着风沙呼啸过大地，看着黄河岸啊阴山旁。英雄骑马壮，骑马荣归故乡。显示效果如图7-5所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.32文本的修饰文本的修饰适当地应用文本修饰可以增加网页的美观效果。（1）标题设置属性用于设置标题的字号大小。操作实例操作实例7-5 设置标题设置标题长城颂歌长城颂歌长城颂歌长城颂歌长城颂歌长城颂歌其
13、中，表示最大的标题，表示最小的标题。显示效果如图7-6所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.3（2）文本的修饰操作实例操作实例7-6 不同效果的文本修饰不同效果的文本修饰常规字加粗常规字斜体常规字下划线常规字上标常规字下标常规字删除线常规字Strike实现的删除线常规字em标记斜体常规字-strong标记强调常规字-code标记等宽常规字-var标记变量或程序参数斜体常规字-small标记小字体显示常规字-big标记大字体显示显示效果如图7-7所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记
14、与链接标记的文本标记与链接标记7.1.3（3）代码的注释可以在HTML文档中插入注释，注释内容不显示在浏览器窗口。HTML注释的格式如下：网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.33段落标记段落标记（1）分段与分行HTML使用标记实现段落分段；使用标记实现换行，这种换行与浏览器的自动换行基本相同。元素不是成对出现的。操作实例操作实例7-7 标记与标记与标记的综合应用标记的综合应用我们都有一个家名字叫中国兄弟姐妹都很多景色也不错家里盘着两条龙是长江与黄河还有珠穆朗玛峰儿是最高山坡我们都有一个家名字叫中国 兄弟姐妹都很多景色也不错
15、看那一条长城万里在云中穿梭看那青藏高原比那天空还辽阔我们的大中国呀好大的一个家经过那个多少那个风吹和雨打我们的大中国呀好大的一个家永远那个永远那个我要伴随她中国祝福你你永远在我心里中国祝福你不用千言和万语显示效果如图7-8所示。其中，的作用是实现段落的分段，段落之间的距离明显比换行所产生的距离要宽。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.3（2）文本的对齐HTML使用align属性实现文本的对齐。标记作为文本的分区标记，使用方法与标记相似。此外，使用标记也可以完成文本的居中对齐。标记的功能是使所标记的字符居中，其作用与使用标记
16、中的align=center类似。操作实例操作实例7-8 、与与标记控制的文本对齐标记控制的文本对齐 align在h标记中的左对齐 align在div标记中的居中对齐 align在p标记中的右对齐 center的居中对齐显示效果如图7-9所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.34水平线水平线在网页中，可以使用水平线分隔文本。水平线的设置方法如下：:设定线宽 :设定线长:设定对齐方式#=left,right :设定线的颜色操作实例操作实例7-9 修改操作实例修改操作实例7-3，插入一条水平线，插入一条水平线使用HTML编
17、写网页HTML是超文本标记语言显示效果如图7-10所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.35列表标记列表标记列表是HTML网页中重要的元素，列表的作用相当于文字处理软件中的“项目符号与编号”。HTML规定了多种列表元素。列表分为无序列表和有序列表。（1）无序列表无序列表是由和元素定义的。无序列表的默认符号是圆点。元素包含type属性，通过定义不同的type属性可以改变列表的项目符号。type属性包括：disc（圆）、circle（圆圈）、square（方块）。操作实例操作实例7-10 无序列表的设置无序列表的设置例如：
18、红楼歌曲词世人都晓神仙好唯有功名忘不了古今将相在何方荒冢一堆草没了世人都晓神仙好只有金银忘不了终朝只恨聚无多及到多时眼闭了显示效果如图7-11所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.3（2）有序列表有序列表是由和元素定义的。元素也包含type属性，type属性值有l、A、a、I、i等。元素还可以定义列表的起始编号，如果希望列表的第一个编号为5，而不是1，则需要定义元素的start属性。操作实例操作实例7-11 有序列表的设置有序列表的设置红楼梦人名谜 集思广益 木兰飘香 致富之道 少壮不努力 始皇统一六国 燕山教子俱成名
19、 严监生临终伸指网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.3 零存整取 科学致富 新年献辞 严冬过后花争发 珍珠 灯谜知识浅谈 六一节 欢、后、腥、姚、好 珠、霞 岁朝图 显示效果如图7-12所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.36链接标记链接标记超级链接是整个WWW应用的核心和基础。如果没有超级链接，那么所有的WWW应用将不复存在。因此，使用超级链接具有重要的意义。（1）基本链接超级链接是由锚元素定义的。元素包含href属性与target属性。hre
20、f属性的值是一个URL地址或E-mail地址；target属性控制链接的网页在新的浏览器窗口打开。操作实例操作实例7-12 设置超级链接设置超级链接链接新浪主页链接指定的网页文件链接指定的邮箱地址将链接的网页文件在新窗口打开显示效果如图7-13所示。例如，单击“链接新浪主页”，将打开新浪主页页面。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的文本标记与链接标记的文本标记与链接标记7.1.3（2）锚点链接所谓锚点是指网页中的某个位置，单击该位置可实现同一个网页之内的链接。例如，常用的“返回页首”操作。在需要跳转到的位置输入如下代码：设置锚点a1在制作链接的位置输入如下代码：链接本
21、页锚点a1网页设计与制作网页设计与制作7.1 HTML基础基础HTML的图像标记的图像标记7.1.41图像标记图像标记引用图像必须使用标记，标记包含src属性。src的属性值是所引用图像的URL地址，该地址既可以是绝对地址，也可以是相对地址。例如：输入下列代码，将在网页中插入图像文件2.jpg。2设置图像标记的属性设置图像标记的属性通过图像属性的设置，可以调整或完善图像在浏览器中的显示。（1）设置图像的替代文本所谓图像的替代文本是指：当图像不能正常显示时，在图像的所在位置显示一段提示文本，或当鼠标移至图像时显示替代文本。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的图像标记的图
22、像标记7.1.4操作实例操作实例7-13 设置图像的替代文本设置图像的替代文本显示效果如图7-14所示。（2）设置图像的显示大小可以指定一幅图像在浏览器窗口显示的大小。例如：定义操作实例7-13图像的显示大小。其中，width指定图像的宽度，height指定图像的高度，属性值的单位既可以是像素，也可以是百分比。显示效果如图7-14所示。（3）设置图像的边框可以为一幅图像加一个边框以突出显示。例如：为操作实例7-13的图像设置边框。其中，border属性值的单位是像素。显示效果如图7-14所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的图像标记的图像标记7.1.4（4）设置图
23、像的对齐方式图片的对齐方式是相对于页面或单元格的。定义水平对齐方式 定义垂直对齐方式 （5）定义图像的间距显示图像时，应与左右文本之间有一定的间距。定义图像间距的方法如下：其中，hspace定义水平间距，vspace定义垂直间距，单位是像素。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的图像标记的图像标记7.1.43图像映射图像映射所谓图像映射是指，一幅图像上的不同位置被设置了不同的超级链接，单击图像的不同位置将打开不同的超级链接目标。图像映射是由标记定义的。标记包含name属性。name用于为图像映射命名，该命名将被标记的usemap属性所引用。因此，图像映射实际上是对所定义
24、映射的一个引用。标记可以定义3种形状的映射，即circle（圆形）、rect（方形）、poly（多边形）。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的图像标记的图像标记7.1.4操作实例操作实例7-14 设置图像映射设置图像映射 显示效果如图7-15所示。单击“热点区域”可显示超级链接的操作实例7-4.html网页。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表格标记的表格标记7.1.51表格的编写方法表格的编写方法表格一般用于网页布局，设计一个完整的表格，至少需要以下3个标记。（1）元素定义一个表格。这是每个表格必须的元素，每个表格只有一对和，一个网页中可
25、以包含多个表格。（2）元素定义表格的行。一个表格可以有多个行，因此，对于一个表格来说不是惟一的。（3）元素定义一个表格单元。表格的每行可以有不同数量的单元格，在和之间，将出现表格中每一个单元格的具体内容。需要注意的是，上述3个元素必须配对使用。缺少任何一个元素，都无法定义出一个表格。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表格标记的表格标记7.1.5操作实例操作实例7-15 设置如图设置如图7-16所示的带边框的表格所示的带边框的表格 带边框的表格 A类 B类 C类 34 68 12 显示效果如图7-16所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的
26、表格标记的表格标记7.1.52表格的属性表格的属性（1）表头标记表示表头。表头的字体比一般字体特殊。操作实例操作实例7-16 修改操作实例修改操作实例7-15的代码的代码 带边框的表格 A类 B类 C类 32 68 12 网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表格标记的表格标记7.1.5（2）表格的外观表格的外观包括如下属性：width属性：指定表格或某一个单元格的宽度。单位可以是百分比或像素。height属性：指定表格或某一个单元格的高度。单位可以是百分比或像素。border属性：指定表格边线的粗细。bordercolor属性：指定表格或某一个单元格的边框颜色。bor
27、dercolorlight属性：指定亮边框的颜色。bordercolordark属性：指定暗边框的颜色。bgcolor属性：指定表格或某一个单元格的背景颜色。background属性：指定表格或某一个单元格的背景图片。其属性值是一个URL地址。（3）表格的间距表格的间距包括如下属性：cellspacing属性：单元格间距。单元格间距是指单元格之间的距离。cellpadding属性：单元格边距。单元格边距是指单元格内部文字与边框之间的距离。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表格标记的表格标记7.1.5操作实例操作实例7-17 为操作实例为操作实例7-16的表格添加间距
28、的表格添加间距 A类 B类 C类 32 68 12 显示效果如图7-17所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表格标记的表格标记7.1.5操作实例操作实例7-18 为操作实例为操作实例7-16的表格添加边距的表格添加边距 A类 B类 C类 32 68 12 网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表格标记的表格标记7.1.5（4）表格的单元格合并表格中的某些单元格需要占据多行或多列，称为表格的跨行与跨列，包括如下属性：Colspan：表示当前单元格跨越几列。Rowspan：表示当前单元格跨越几行。操作实例操作实例7-19 合并列单元格合并列单
29、元格 各类商品统计 A类 B类 C类 32 68 12 显示效果如图7-18所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表格标记的表格标记7.1.5操作实例操作实例7-20 合并行单元格合并行单元格 各类商品统计 A 32 B类 68 C类 12 网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表单标记的表单标记7.1.6font 111111111111111111。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表单标记的表单标记7.1.61表单的基本概念表单的基本概念HTML表单是网页与浏览器端实现交互的重要手段。利用表单可以收集客户端
30、提交的有关信息。HTML可以定义表单，并且使表单能被CGI、ASP或JSP等服务器端的表单处理程序所识别。图7-19所示的是一个非常典型的表单页面。2表单标记表单标记表单是网页上的一个特定区域，这个区域是由一对标记定义的，语法如下：其中，标记的action属性用于定义表单的处理程序（例如JSP、ASP、CGI等程序）的位置。method属性用于定义将表单结果从浏览器传送到服务器的方法，一般有两种方法，即get、post。get方式的传输有数据量的限制；而post方式的传输没有数据量的限制，并以文件形式传输。例如：输入如下代码，定义一个基本的表单，并以E-mail的方式实现提交。网页设计与制作网
31、页设计与制作7.1 HTML基础基础HTML的表单标记的表单标记7.1.63表单元素表单元素（1）文本框和密码框例如：在和标记中建立文本框和密码框。姓名：网址：密码：留言：其中，是表单中最常用的标记，type=text定义单行文本框，name表示表单元素的名称，value定义文本框的初始值；maxlength限制在密码框输入的最大字符数；type=password定义单行密码框；定义多行文本框，rows和cols分别代表其行数与列数。显示效果如图7-19所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表单标记的表单标记7.1.6（2）按钮按钮分为提交按钮与重置按钮两种。例如
32、：输入如下代码：其中，submit代表提交按钮，reset代表重置按钮。显示效果如图7-19所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表单标记的表单标记7.1.6操作实例操作实例7-21 制作图制作图7-19的效果的效果留言板留言板姓名：网址：密码：留言：网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表单标记的表单标记7.1.6（3）单选框和复选框在一个表单里，所有变量名相同的单选框只能有一个被选中，所有复选框可以有一个或多个被选中。操作实例操作实例7-22 单选框和复选框的应用单选框和复选框的应用请选择您的学历：博士硕士学士无请选择您喜欢的音乐：摇滚
33、爵士流行其中，radio表示单选框，各个选项的name属性必须相同才能达到预期效果。checkbox表示复选框。checked表示该项被默认选中。效果如图7-20所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的表单标记的表单标记7.1.6（4）菜单和列表与标记表示菜单的开始与结束；每一个属性表示菜单中的一个选项，selected属性表示该选项被默认选中。而列表，还应以size属性定义列表的高度，以multiple属性设置允许用户多选。操作实例操作实例7-23 下拉菜单与列表菜单下拉菜单与列表菜单菜单实例：博士 硕士 学士列表实例：博士硕士学士显示效果如图7-21所示，单击菜
34、单的下拉按钮可显示选项列表。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的框架标记的框架标记7.1.71框架的基本写法框架的基本写法框架用于网页的布局。一个网页的页面可以由多个框架构成。制作框架的基本步骤如下：（1）编写所有子框架页面。（2）编写主框架页面。（3）在主框架页面中设定子框架名称。（4）如果框架页面之间存在链接，在子框架中设定链接。2基本框架基本框架框架是由一对标记定义的。标记有两个属性，rows属性定义上下分割的框架大小；cols属性定义左右分割的框架大小。在定义大小时，rows和cols可以使用相对大小或百分比为单位。每一个定义一个子框架页面。注意，框架页面是不
35、含标签的。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的框架标记的框架标记7.1.7操作实例操作实例7-24 设置分行框架设置分行框架设置三个行框架，每个框架显示一个链接的网页，如图7-22所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的框架标记的框架标记7.1.7操作实例操作实例7-25 设置分列框架设置分列框架设置三个列框架，每个框架显示一个链接的网页，如图7-23所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的框架标记的框架标记7.1.73嵌套框架嵌套框架操作实例操作实例7-26 制作嵌套框架制作嵌套框架设置两个列框架，第二个列框架
36、中包含两个行框架。显示效果如图7-24所示。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的框架标记的框架标记7.1.74框架标记的属性框架标记的属性常用的框架标记属性如下：各窗口边框的设置。通过设置，其中为yes、no或1、0。框架边框的宽度设置。通过设置。框架边框的颜色设置。通过设置。此外，scrolling属性决定是否显示滚动条，取值为yes、no、auto。Noresize属性可以禁止在浏览器中调整框架的大小。网页设计与制作网页设计与制作7.1 HTML基础基础HTML的其他标记的其他标记7.1.81移动标记移动标记设计网页中滚动的文字，应使用移动标记。标记用于控制文本的
37、移动。如操作实例7-27所示，标记包含很多属性。操作实例操作实例7-27 让文字滚动起来让文字滚动起来我会移动！我从右向左移动！我从左向右移动！我从上向下移动！我从下向上移动！我可以绕圈移动！我只移动一次！我来回来去的移动！我可以循环移动3次！我跑的很快！我移动一会儿，停一停！网页设计与制作网页设计与制作7.1 HTML基础基础HTML的其他标记的其他标记7.1.82多媒体标记多媒体标记在网页中可以嵌入多种多媒体对象。例如，Flash动画、Midi音乐、MPEG电影等。这些对象的嵌入形式如下：其中#为多媒体对象的URL地址。例如：嵌入Flash动画。又如：在网页中加入背景音乐。网页设计与制作网
38、页设计与制作7.2 CSS基础基础CSS（Cascading Style Sheets），译为“层叠样式表”或“级联样式表”，是由W3C（Word Wide Web Consortium）组织制定的一种非常实用的定义网页元素的规则。CSS样式是一组在某个网页中设置的网页外观的格式属性，样式表包括该网页的所有格式。利用CSS，网页制作者可以有效地定制并改善网页。CSS样式可以控制使用该样式的所有网页，当CSS样式更新或修改时，所有使用该样式的网页将会自动更新。使用CSS样式可以轻松地解决网页格式化的问题。例如，在管理一个非常庞大的Web站点时，可以通过CSS样式对整个站点或多个网页迅速而准确地作
39、出格式或字体的修改；可以使用CSS样式自定义列表项目符号；可以使用CSS样式为一段文字加上背景颜色或图像、去掉超级链接的下划线、指定不同的字体、字号与单位。按CSS样式应用的形式，CSS样式一般分为嵌入式与外部链接式。所谓嵌入式是指在独立的网页中应用CSS样式；所谓外部链接式是指可应用于多个网页中，生成专门的*.css文件。使用CSS样式的方法是：首先将指定的一些格式定义为样式，然后再为需要设置格式的网页应用样式。网页设计与制作网页设计与制作7.2 CSS基础基础CSS的基本操作的基本操作7.2.11CSS样式的基本写法样式的基本写法CSS语言由选择符和属性构成，样式表的基本写法如下：CSS选
40、择符属性1：属性值1；属性2：属性值2；属性3：属性值3；（1）在head标签内的实现CSS样式表一般位于HTML文件的头部，即与标记内，并且以开始，以结束。其中与之间的是样式的内容。（2）在body标签内的实现在body中实现主要是在标记中引用如下代码：内容这样的写法虽然直观，但是无法体现出层叠样式表的优势，因此并不推荐使用。（3）在文件外的调用CSS的定义既可以在HTML文档内部，也可以单独建立文件。如下代码显示为调用文件名为css1的外部样式表：网页设计与制作网页设计与制作7.2 CSS基础基础 CSS的基本操作的基本操作7.2.12创建创建CSS样式样式操作实例操作实例7-28 创建新
41、样式创建新样式操作步骤：操作步骤：在“窗口”菜单选择“CSS样式”选项，打开“CSS样式”面板。如图7-25所示。单击“CSS样式”面板的“新建CSS规则”按钮，弹出“新建CSS规则”对话框。如图7-26所示。网页设计与制作网页设计与制作7.2 CSS基础基础 CSS的基本操作的基本操作 7.2.1“新建CSS规则”对话框的“选择器类型”包含如下四种类型：类（可应用于任何HTML元素）：创建自定义样式。在“选择器名称”输入自定义样式的名称。必须以“点”开头，如果没有输入“点”，Dreamweaver将自动添加。用于生成一个新样式，该样式可应用于网页中的任何文本。制作完成的样式将显示在CSS样式
42、面板中。应用样式时，首先在网页中选中对象，然后选择所应用的样式即可。ID（仅应用于一个HTML元素）：主要用于定义包含特定ID属性的标签格式。标签（重新定义HTML元素）：使用已有的标签制作样式。单击“选择器名称”下拉列表，选择已有的样式。如图7-27所示。制作完成后，不必选中任何对象即可应用到网页中。网页设计与制作网页设计与制作7.2 CSS基础基础 CSS的基本操作的基本操作7.2.1复合内容（基于选择的内容）：用于对超级链接的4种状态进行设置，可以通过“选择器名称”下拉列表进行选择，如图7-28所示。超级链接的4种状态分别是：a:Active：活动超级链接状态，即单击鼠标时的状态。a:H
43、over：鼠标指向超级链接时的状态。a:Link：默认的超级链接状态，即不做任何动作时的状态。a:Visited：已访问过的超级链接状态。网页设计与制作网页设计与制作7.2 CSS基础基础 CSS的基本操作的基本操作7.2.1“新建CSS规则”对话框的“规则定义”包含两个选项。新建样式表文件：生成专门的*.css文件，该样式可应用于多个网页，是外部链接式样式。单击“确定”按钮之后，系统将提示保存CSS样式表文件。仅对该文档：只对当前网页应用，是嵌入式样式。本例选择“类（可应用于任何HTML元素）”选项，在“选择器名称”输入自定义的CSS样式表名称css1，选择“仅限该文档”选项。单击“确定”按
44、钮，打开如图7-29所示的“CSS规则定义”对话框。在对话框中可以定义样式表的文字、背景、边框、列表、区块、颜色等属性。单击“确定”按钮，一个CSS样式创建完成。新的CSS样式显示在“CSS样式”面板中。网页设计与制作网页设计与制作7.2 CSS基础基础 CSS的基本操作的基本操作7.2.1网页设计与制作网页设计与制作7.2 CSS基础基础 CSS的基本操作的基本操作7.2.13应用应用CSS样式样式操作实例操作实例7-29 在当前网页中应用样式在当前网页中应用样式操作步骤：操作步骤：打开或新建网页文件。打开“CSS样式”面板，面板中将显示自定义的CSS样式表。重定义的标签与超级链接的样式将自
45、动应用，所以不在“CSS样式”面板中显示。选中需要应用CSS样式的对象。例如，文本、图片、表格等。在“CSS样式”面板中右键单击需要应用的CSS样式名称，选择“套用”选项。操作实例操作实例7-30 删除删除CSS样式样式操作步骤：操作步骤：打开“CSS样式”面板。选中需要删除的样式名称，单击“删除CSS规则”按钮。注意：样式被删除之后，已应用了该样式的内容将恢复应用样式之前的显示。网页设计与制作网页设计与制作7.2 CSS基础基础 CSS的基本操作的基本操作7.2.1操作实例操作实例7-31 编辑编辑CSS样式样式操作步骤：操作步骤：打开“CSS样式”面板。在“CSS样式”面板双击需要修改的样
46、式名称，或选中需要修改的样式名称单击“编辑样式”按钮，弹出“CSS规则定义”对话框。在“CSS规则定义”对话框中对该样式进行修改。单击“确定”按钮返回。网页中已应用该样式的对象将发生相应的变化。网页设计与制作网页设计与制作7.2 CSS基础基础 设置设置CSS样式的属性样式的属性 7.2.2CSS“样式定义”对话框包含9个选项卡：类型、背景、区块、方框、边框、列表、定位、扩展、过渡。1类型类型类型选项卡的功能是定义样式的文本属性，如图7-29所示。字体（Font-family）：设置字体。大小（Font-size）：设置字号的大小，可选择不同的单位。样式（Font-style）：设置字体的显示
47、样式，包括：正常、斜体、偏斜体。粗细（Font-weight）：设置文本的粗细。包括：正常、粗体、特粗、细体等。变体（Font-variant）：文本变量。包括：正常、小型大写字母。行高（Font-height）：设置文本的行高。大小写（Text-transform）：设置英文文本。包括：首字母大写、大写、小写。颜色（Color）：设置文本的颜色。修饰（Text-decoration）：修饰文本。可选择：下划线、上划线、删除线、闪烁。一般文本的默认设置是“无”，链接文本的默认设置是“下划线”。网页设计与制作网页设计与制作7.2 CSS基础基础 设置设置CSS样式的属性样式的属性 7.2.22背
48、景背景背景选项卡的功能是定义网页对象的背景颜色。例如，表格、AP Div、文本、表单对象等。如图7-30所示。背景颜色（Background-color）：设置对象的背景颜色。背景图像（Background-image）：设置对象的背景图像。重复（Background-repeat）：当背景图像不能填满页面时，决定是否重复和如何重复背景图像。不重复：不重复填充。在指定位置显示一次图像。重复：横向和纵向重复填充。横向重复：图像横向重复填充。纵向重复：图像纵向重复填充。附件（Background-attachment）：决定背景图像是在其初始位置固定，还是与内容一起滚动。水平位置（Backgrou
49、nd-position(X)）：设置背景图像的起始水平位置。可选择左对齐、居中、右对齐等。垂直位置（Background-position(Y)）：设置背景图像的起始垂直位置，可选择顶部、居中、底部等。网页设计与制作网页设计与制作7.2 CSS基础基础 设置设置CSS样式的属性样式的属性 7.2.23区块区块区块选项卡的功能是定义文本对象的基本样式。如图7-31所示。单词间距（Word-spacing）：设置文字之间的间距。字母间距（Letter-spacing）：设置字符之间的间距。垂直对齐（Vertical-align）：设置网页纵向的对齐方式。文本对齐（Text-align）：设置文本水
50、平的对齐方式。文字缩进（Text-indent）：设置首行缩进的距离，空格（White-space）：决定如何处理文本中的白色空格。正常：合并白色空格。保留：将所有白色空格（包括空格、跳格和回车符）都作为文本并用PRE标签包围起来。不换行：指定文本只有在碰到BR标签时才换行。显示（Display）：设置文本的显示方式。网页设计与制作网页设计与制作7.2 CSS基础基础 设置设置CSS样式的属性样式的属性 7.2.24方框方框方框选项卡的功能是控制网页对象的布局。如图7-32所示。宽（Width）：设置对象的宽度。高（Height）：设置对象的高度。浮动（Float）：设置对象在网页中的位置。清
