03模块静态网页基础 静态网页是相对于动态网页而言的，是指没有后台数据库、不含程序和不可交互的网页。静态网页是网站建设的基础，静态网页和动态网页相互依存。本模块主要介绍网页设计工具——Dreamweaver CS5的常用操作，如插入表格、图像、视频和Flash动画等网页元素，同时介绍了HTML的常用标签。另外，讲解了CSS(层叠样式表)的基础知识，以及如何用CSS设计超链接的样式和实现网页换肤效果等。 (1) 能使用CSS定义网页样式。 (2) 常用网页元素的插入和编辑。 (3) 表单的制作。 (1) CSS的基本语法。 (2) CSS选择器的种类。 (3) CSS的使用方式。 (4) 常用HTML标签语法。 (5) HTML标签的属性设置。 知识储备 知识1Dreamweaver CS5的工作环境 启动Dreamweaver后，单击“新建”项目下的HTML，即可进入Dreamweaver的工作界面。Dreamweaver的工作窗口主要由应用程序栏、插入栏、文档工具栏、文档窗口、面板组、属性检查器和标签选择器等部分组成，如图31所示。 1) 应用程序栏 应用程序窗口顶部包含一个工作区切换器、菜单栏(主要包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”“帮助”等菜单)以及其他应用程序控件。单击菜单栏中的命令，在弹出的下拉菜单中选择要执行的命令。 图31Dreamweaver CS5工作界面 2) 插入栏 插入栏包含用于将各种类型的“对象”(如图像、表格和层)插入文档中的按钮。每个对象都是一段HTML［1］代码，使用户在插入时设置不同的属性。例如，可以在“插入”栏中单击“图像”按钮插入图像。也可以不使用插入栏而使用菜单“插入”|“图像”命令插入图像。 3) 文档工具栏 文档工具栏包含一些按钮，它们提供在各种“文档”窗口视图(如“设计”视图、“拆分”视图和“代码”视图)间快速切换的选项、各种查看选项和一些常用操作(如“在浏览器中预览/调试”“文件管理”“验证标记”“检查浏览器兼容性”等)。 用户可以在“标题”右侧的文本框中输入一个标题，它会显示在浏览器的标题栏中。单击“在浏览器中预览/调试”按钮，在弹出的菜单中选择一个浏览器，可以预览网页显示效果，快捷键是F12。 注意： 单击“查看”|“工具栏”|“文档”命令菜单，就会在Dreamweaver CS5中显示文档工具栏。若去掉“文档”选项前的对钩，就可以隐藏文档工具栏。 4) 文档窗口 文档窗口用于显示当前正在创建和编辑的文档。将鼠标在文档中单击，即可开始在光标位置输入网页元素并进行编辑。 5) 面板组 面板组是分组在某个标题下面的相关面板的集合，用来帮助用户监控和修改工作。主要包括“插入”面板、“行为”面板、“CSS样式”面板和“文件”面板等。用户可以根据自己的需要，选择隐藏和显示面板。若要展开某个面板，请双击其选项卡。 6) “属性”面板 属性检查器用于查看和更改所选对象或文本的各种属性。“属性”面板会随着选择对象的不同而有所不同。单击“属性”面板右下角的三角箭头可以折叠/展开“属性”面板。单击“属性”面板右上角的下拉菜单选择“关闭”或“关闭面板组”命令可以关闭“属性”面板。如果要重新打开，可以单击“窗口”|“属性”命令。 7) 标签选择器 标签选择器位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。 8) “文件”面板 “文件”面板类似于Windows资源管理器，用于管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是位于远程服务器上。用户还可以通过“文件”面板访问本地磁盘上的全部文件。 知识2样式表的优点 样式设计是指应用HTML和CSS(层叠样式表)设计网页的外观样式。CSS是Cascading Style Sheet的缩写，译为“层叠样式表”或“级联样式表”。虽然CSS在网页里与HTML编写在一起，但是它不属于HTML。它可以扩展HTML的功能，如调整字间距、行间距，取消链接的下画线、多种链接效果和固定背景图像等。CSS可以实现原来HTML标签无法实现的效果。一个样式表又称为CSS，由样式规则组成，具有以下特点。 (1) 同时更新站点的多个页面，更快更容易。 在对多个网页文件设置同一种属性时，无须对所有的文件进行反复操作，只需给多个页面都应用相同的样式表就可以了。利用外部样式表，可以将站点上所有网页都指向同一个外部CSS文件，只要更改外部CSS文件的某一规则，整个站点的外观就会随之发生改变。 (2) 格式和结构分离。 CSS通过将定义结构的部分和定义格式的部分相分离，使用户对页面的布局可以施加更多的控制。 (3) 制作体积小，页面下载速度快。 样式表只包含简单的文字，不需要图像、执行程序及插件。使用CSS可以减少表格标签及其他加大HTML体积的代码，从而减小文件的大小。浏览页面时，外部样式表文件会被加载到浏览者的计算机缓存中，这样就大大提高了页面的下载速度。 知识3CSS的基本语法 CSS的样式规则由三部分构成： selector(选择器)、property(属性)和value(属性的取值)。基本的格式如下。 (1) selector： CSS选择器，用来定义样式类型并将其运用到特定的部分，有类选择器、标签选择器、ID选择器和关联选择器四种。 (2) property： 指将要被设置的属性，如color。 (3) value： 赋给property的值，例如赋给color的值可以为red或者#FF0000。下面是一个典型的例子。 body{background-color:#FFFFFF;color:#FF0000;} a{color:red;} 该样式定义实现将页面背景颜色设置为白色、文字颜色设置为红色； 所有的链接都设置为红色。为了方便阅读，可以采用以下分行书写的格式。 body{ background-color:#FFFFFF; color:#FF0000; } a{ color:red; } 通常把所有的样式定义放在标签里，然后再放到标签中。如下面样式将设置网页背景色为白色，文字颜色为黑色，超链接的颜色为红色带下画线。 知识4常用CSS选择器 CSS通过定义规则并将其应用到文档中同一元素，这样就可以减少网页设计者的工作。每个样式都是由一系列规则组成，每条规则有两部分： 选择器和声明。每条声明又是属性和值的组合。通常规则左边是选择器，右边是CSS属性和值。CSS选择器指明文档中要应用此样式的元素，可以有多种形式。 1. 类选择器 类选择器能够把相同的元素分类定义成不同的样式，对HTML标签均可以使用class="类名"的形式对类属性进行名称指派，且允许重复使用。类选择器的名称可以由用户自己定义，需要注意的是在定义选择器时，名称前面要加一个点号(.)。例如，定义了一个类样式.text，用于给段落文本添加样式。在使用时只需设置应用样式的段落标签class属性为text即可(class="text")，设置完成的HTML代码如下。

网站建设与管理基础与实训

2. ID选择器 ID选择器的使用方法和类选择器基本相同，不同之处主要在于ID选择器只能在HTML页面中使用一次，因此针对性更强，只用来对单一元素定义单独的样式。ID选择器使用时需要设置标签的ID属性，对于一个网页而言，每个标签均可以使用ID="ID名"的形式对ID属性进行名称的指派。 在定义ID选择器时，要在ID名称前面加一个#。例如，以下为网页中的层定义了样式。 #apDiv1 { position:absolute; left:37px; top:12px; width:137px; height:135px; z-index:1; } 然后只需要在层(div)标签中设置ID属性为apDiv1，该层就具有了以上样式。设置完的层HTML代码如下。
3. 标签选择器 标签选择器也称标记选择器，一个HTML页面由很多不同的标签组成，标签选择器的CSS样式能让页面中的同一标签保持相同样式。HTML中的每个标签都有默认的样式，标签选择器的主要作用是提供重新定义HTML元素样式的方法。例如

选择器可以声明文档中的所有

标签的样式风格。HTML中的所有标签都可以作为标签选择器，通过标签选择器可以快速改变网页的外观样式。 例如，以下为给

标签定义的样式。 p { font-family: "宋体"; font-size: 24px; color: #FF0000; } 以上样式定义文档中的p标签的样式为“字体为宋体，字号为24px，颜色为红色”。应用该样式的页面中的所有p标签都将具有“字体为宋体，字号为24px，颜色为红色”的样式。 4. 关联选择器 关联选择器可定义以上三种选择器样式和链接的四种样式a:link、a:visited、a:hover和a:active。此外，还可对选择器进行集体和嵌套声明。 知识5CSS的使用方式 CSS按其使用位置的不同，主要分为以下三种类型： 行内样式表(Inline Style Sheet)、内嵌样式表(Internal Style Sheet)和外部样式表(External Style Sheet)。 1. 行内样式表 行内样式表也叫内联样式表，行内样式直接定义在HTML标签内，只对所在标签有效，行内样式定义在HTML标签的style属性中。使用行内样式失去了样式表的优势，这样就将内容和外观形式混淆在一起了，一般这种方法在个别元素需要改变样式时使用。 例如，给一个段落添加样式，代码如下。

这是 行内样式

行内样式是最为简单的CSS使用方法，但由于需要为每个标签设置style属性，后期维护成本很高，而且网页代码容易“臃肿”，因此不推荐使用。 2. 内嵌样式表 内嵌样式表也叫内部样式表，内嵌样式表使用标签在head区域内定义样式，内部样式表只对所在的网页有效，可针对具体页面进行具体调整，以下为内嵌样式表。 3. 外部样式表 外部样式表可以集中控制和管理多个网页的格式和布局，省去了对这些网页的每个标签都要进行格式的麻烦。外部样式表将CSS写成一个以css为扩展名的外部CSS文件，在HTML文档头部通过链接或导入的方式引用该文件进行样式控制。 第一种是通过链接的方式导入。 这种导入方式会在标签内使用标签将样式表文件链接到HTML文件内，如。 第二种是通过导入方式导入外部样式表。 这种导入方式会在标签内添加一对标签，然后通过@import方式导入外部样式表，完整代码如下所示。 通过@import方式导入外部样式表时，在HTML文件初始化时，会被导入HTML文件内，作为文件的一部分，类似内嵌式样式表效果。推荐使用链接的方式添加外部样式表。 知识6CSS选择器的嵌套与继承 在CSS选择器中，还可以通过嵌套的方式进行组合使用，页面中标签嵌套定义的代码如下所示，其规则为标签名、ID名或类名后空格再加下一级标签名。 p a { font-family: "宋体"; font-size: 24px; color: #F00; text-decoration: none; } #bot a { font-family: "隶书"; font-size: 18px; color: #0F0; text-decoration: underline; } .bot a { font-family: "黑体"; font-size: 16px; color: #00F; text-decoration: overline; } 以上样式分别在p、#bot和.bot三个选择器下定义了超链接(标签a)的样式，这样就可以实现网页样式的分块控制。 模拟制作任务 任务1插入和编辑表格 表格通常用于网页布局，因此熟练表格的相关操作是十分必要的。在网页中插入和编辑表格的步骤如下。 (1) 选择菜单“窗口”|“插入”命令，打开“插入”栏，在“插入”栏中单击“表格”按钮，或直接选择菜单“插入”|“表格”命令，弹出图32所示的对话框。在该对话框中可以设置表格的行数、列数、表格宽度和边框粗细等参数。 (2) 单击“确定”按钮即可在网页中插入一个宽度为200px的表格，如图33所示。 图32插入表格对话框 图33插入网页中的表格 (3) 图33中的表格已经被选中，此时可以在“属性”面板中设置表格的属性，如图34所示。 图34表格的“属性”面板 (4) 当然也可以选择表格的行、列或单元格进行属性设置，图35即为选择表格行后的“属性”面板。 图35表格中行的“属性”面板 (5) 其他属性的设置大体相似，在此不做赘述。插入的表格在浏览器中的浏览效果如图36所示。 图36在浏览器中浏览表格 任务2插入图像 图像是网页中的常用元素，在网页中插入图像和设置图像属性的步骤如下。 (1) 选择菜单“窗口”|“插入”命令，打开“插入”栏，在“插入”栏中单击“图像”按钮，或直接选择菜单“插入”|“图像”命令，在弹出的“选择图像源文件”对话框中选择要插入的图像后，单击“确定”按钮即可插入图像。 (2) 选中网页中的图像，在“属性”面板可以修改其相应的属性，如图37所示。 图37“属性”面板 (3) 在图37中可以设置图像的ID、宽、高和边框等属性，图38即为设置图像边框为10的浏览效果。 图38在浏览器中浏览图像 任务3插入音频和视频 在文档窗口中插入音频和视频文件的具体步骤如下。 (1) 将插入点定位到要嵌入音视频文件的位置，然后在“插入工具栏”的“常用”选项卡中单击“媒体”图标，选择“插件”命令。或者选择菜单“插入”|“媒体”|“插件”命令。在弹出的“选择文件”对话框中选择要嵌入的音视频文件(注意： 文件名必须使用英文，不能使用汉字)。 (2) 选中插入的音视频文件，通过在“属性”面板的“宽”和“高”文本框中输入数值或在“设计”视图中拖曳插件控制点来调整插件大小，最终确定播放器控件在浏览器中显示的大小，如图39所示。 图39插入音频和视频插件 (3) 将音视频文件插入到指定位置后，可以利用“属性”面板设置音视频文件的属性。插件使用的HTML标签为。 提示： 插件默认使用的是Windows Media Player播放器，浏览器在加载页面时会自动加载Windows Media Player的控制面板。不同的浏览器根据访问者安装的播放器插件不同，可能显示的播放器的界面有所不同。 (4) 插件插入之后，如果需要对音视频文件的播放进行更多的控制，还需要修改相应的参数。方法是单击“属性”面板的“参数”按钮，弹出“参数”对话框，常用的参数如下。  autostart： 是否在页面加载时自动开始播放，取值为true或者false。  loop： 重复播放，若值为true，则自动重复播放； 若值为false，则不重复播放； 若取值为n，则重复播放n次。  controls： 播放器控制面板设置，取值为一串英文逗号间隔的字符串，用于指定播放器控制的可见性。 参数设置如图310所示。 图310音视频播放参数设置 (5) 在浏览器中播放插入的视频，效果如图311所示。 图311播放插入的视频效果 任务4插入FLV格式视频 在文档窗口中插入FLV［2］格式视频的步骤如下。 (1) 将插入点定位到要嵌入音视频文件的位置，然后在“插入工具栏”的“常用”选项卡中单击“媒体”图标，选择FLV命令。或者选择菜单“插入”|“媒体”|FLV命令。在弹出的“插入FLV”对话框中选择要插入的FLV视频文件，在对话框中为要插入的视频设置相应的参数，如图312所示。 图312“插入FLV”对话框 (2) 单击“确定”按钮即可插入FLV视频，当保存网页时会弹出如图313所示的对话框。提示网站开发人员在发布网站时应该把FLV视频播放的支持文件一起发布。 图313复制FLV视频支持文件 (3) 在浏览器中预览，FLV视频的播放效果如图314所示。 图314FLV视频格式播放效果 任务5插入Flash动画 在文档窗口中插入Flash文件的步骤如下。 (1) 将插入点定位到要插入Flash动画的位置，然后在“插入工具栏”的“常用”选项卡中单击“媒体”图标，选择SWF命令。或者选择菜单“插入”|“媒体”|SWF命令。在弹出的“选择文件”对话框中选择要插入的SWF文件，单击“确定”按钮即可将Flash动画插入网页中。Flash动画不会在Dreamweaver文档窗口中显示具体动画内容，而是以一个带有字母F的灰色框来表示，如图315所示。 图315设计状态下插入网页中的Flash动画 (2) 在图315下方的“属性”面板中可以设置当前选中的Flash动画的参数，其中需要特别注意Wmode参数的运用，有时为了显示网页的背景颜色和背景图像，需要设置Flash动画的Wmode参数值为“透明”。如图316和图317即为设置Wmode参数值为“透明”前后的效果区别。 图316背景透明前的Flash动画 图317背景透明后的Flash动画 任务6制作超链接 在Dreamweaver中创建文字超链接的方法十分简单，首先选中要创建链接的文字或图像，然后为其指定被链接文档的访问路径，即URL。被链接文档可以是网址、网页、各类文档和压缩文档等。 选中文字后，给链接文字指定被链接文档访问路径有以下四种方法。 (1) 在“属性”面板上的“链接”文本框中手工输入被链接文档的路径。 (2) 首先用鼠标左键按住“属性”面板上“链接”文本框后的“指向文件”按钮不放，然后移动鼠标到“文件”面板中要链接的对象上即可。 (3) 单击“属性”面板上“链接”文本框后面的“浏览文件”按钮，在弹出的“打开文件”对话框中选择要链接的对象。 (4) 单击“插入”菜单下的“超级链接”命令，弹出如图318所示的“超链接”对话框。按要求设置完成后，单击“确定”按钮即可在网页中插入超链接。 图318“超链接”对话框 提示： 创建超链接时，“属性”面板和“超链接”对话框中的“目标”文本框用来设置超链接的打开方式。其下拉列表中包含四个选项，其含义如下。  _blank： 将被链接对象载入新的浏览器窗口中。  _parent： 将被链接对象载入父框架集或包含该链接的框架窗口中。  _self： 将被链接对象载入到与该链接相同的框架或窗口中(本选项也是默认打开方式)。  _top： 将被链接对象载入到整个浏览器窗口并取消所有框架。 任务7制作表单 表单是网站中收集信息的主要途径，只要是动态网站，基本上都会应用到表单。下面以一个用户注册表单为例，简单讲述表单的制作，制作表单的大致步骤如下。 (1) 切换“插入工具栏”到“表单”选项，该选项下列出了制作表单的所有表单元素。如图319所示，当把鼠标放到表单工具栏上具体的表单元素时，会提示相应的表单元素名称。 图319表单工具栏 (2) 单击“表单”按钮(第1个表单元素)往网页中插入一个表单，表单在设计状态下显示为红色虚线框，如图320所示。在浏览器中浏览表单时，表示表单的红色虚线框是不会显示的。 图320设计状态下的表单 (3) 接下来需要往表单中添加相应的表单元素，通常可以在表单中插入表格来布局表单元素。插入一个10行2列的400像素宽的表格，合并表格的第1行和第10行的两个单元格，并设置这两行居中对齐。插入表格后的表单如图321所示。 图321插入表格后的表单 (4) 在表格中添加相应的表单元素，表单如图322所示。 图322添加表单元素后的表单 (5) 在“标签选择器”中选择标签，然后就可以在“属性”面板中设置表单属性，如图323所示。 图323设置表单属性 (6) 至此，一个完整的表单设计完成，如果需要对表单数据进行相应处理，只需制作好表单处理页面(如formAction.asp)即可。 任务8超链接的四种状态的样式设计 通常在设计网页超链接时需要有样式变化，这样可以起到提示浏览者的作用。通过设置超链接的四种链接状态［3］( a:link，a:visited，a:hover和a:active)可以实现链接样式的变化。 超链接的四种链接状态应该要有一定的差别，并且每种状态的文字颜色应该与背景颜色要有一定的反差。设置超链接四种链接样式的大致步骤如下。 (1) 编写如下代码设置网页超链接的四种状态的样式。 注意： 在定义链接样式时，一定要按照a:link、a:visited、a:hover和a:active的顺序书写，否则有些状态的样式不能正常显示。 (2) 也可以通过选择器的嵌套实现样式的分块控制，如下面的样式代码为网页中的两个层分别定义了样式的四种状态。 超链接样式的分块控制
链接的四种状态
链接的四种状态
任务9网页换肤效果的实现 有时网页为了满足用户更换网页风格的需要，可以为用户提供网页换肤功能。换肤功能的实现相对简单，通常的做法是提供多个外部样式表文件，用户选择不同的网页样式时通过程序修改网页依赖的样式文件，从而达到为网页换肤的效果。 本任务较为简单，只需制作多个外部样式表文件，然后使用脚本语言实现网页样式文件的切换，最终达到网页换肤的效果。制作网页换肤效果的大致步骤如下。 (1) 制作样式文件a.css，输入如下样式代码。 body { margin:0; padding:0; background:url(bg1.jpg); } #wrap { height:600px; background:url(dw1.jpg) no-repeat center top; margin-top:20px; } (2) 同样制作样式文件b.css，输入如下样式代码。 body { margin:0; padding:0; background:url(bg2.jpg); } #wrap { height:600px; background:url(dw2.jpg) no-repeat center top; margin-top:20px; } (3) 制作一个静态网页，代码如下。 样式切换
(4) 在浏览器中预览的效果如图324和图325所示。 从图324和图325可以看出，当单击“风格二”按钮时，网页的显示风格发生了明显的变化。样式变化的原因是网页加载了另一个样式文件。从第(3)步的网页代码中可以看出，网页通过link标签加载外部CSS文件，代码如下所示。 图324样式效果——风格一 图325样式效果——风格二 当用户单击不同的按钮时可以通过代码document.all.mycss.href="cssName.css"来加载不同的外部CSS文件，从而实现样式的切换。 知识点拓展 ［1］ HTML语言中的常用标签如下。 1） 标签 文档标识符，它是成对出现的。首标签和尾标签分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言(HTML)编写的。 2） 标签 习惯上把HTML文档分为文档头部和文档主体两部分。文档的主体部分是我们在浏览器用户区中看到的内容。而文档头部分用来规定该文档的标题(出现在浏览器窗口的标题栏中)和文档的其他一些属性。 3） 标签 <title>标签是成对标签，用来规定HTML文档的标题。在<title>和之间的内容将显示在Web浏览器窗口的标题栏中。 4） 标签 标签也是成对标签。在之间的内容将显示在浏览器窗口的用户区内，它是HTML文档的主体部分。在标签中可以规定整个文档的一些基本属性，如背景颜色、背景图片、字体和字号等。 5） 标题标签 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签，其中n为标题的等级，HTML总共提供6个等级的标题，n值越小，标题字号就越大，

定义最大号标题，

定义最小号标题。 6） 换行标签
换行标签是个单标签，也叫空标签，不包含任何内容，在HTML文件中的任何位置只要使用了
标签，当文件显示在浏览器中时，该标签之后的内容将在下一行显示。
标签用于定义文本从新的一行显示，它不产生一个空行，但连续使用多个
标签可以产生多个空行的效果。 7） 水平线标签
使用
标签可以在网页上画出一条横跨网页的水平分隔线，以分隔不同的文字段落。
标签有size、width和color等属性。 8） 字体标签 标签是HTML里最常用的文字格式控制标签，通过改变标签的属性可以改变文字的大小、颜色、字体等。标签的主要属性如下。  size： 标签的size属性指定文字的大小，它的取值范围是1~7，当它取值为1时文字最小，取值为7时文字最大，默认值是3。  color： 标签的color属性可以指定文字的颜色，它的取值有用英文关键字、十六进制颜色代码、RGB函数三种类型。  face： 标签的face属性指定文字的字体。 如代码登鹳雀楼设置了文字“登鹳雀楼”的字体为“宋体”，字号为“5”，颜色为“红色”。 9） 段落标签

标签用于划分段落，控制文本位置。

是成对标签，用于定义内容从新的一行开始，并与上段之间有一个空行，其align 属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left(左对齐)、center(居中对齐)或者right(右对齐)。 10） 图片标签 是图像的标签，用来在网页中显示图像，其常用属性如下。  src属性指定浏览器图片的具体位置，类似超链接的href属性指定浏览器要链接的目标文件。  alt属性代表图片的替代文字。有些浏览者不想看到图片(如网速太慢)，有些早期的浏览器也不支持图片，还有一种可能是把图片的具体位置写错了，这些情况浏览者是看不到图片的，这时alt可以在图片的位置上显示出代替的文字，这是非常有用的，记得一定要加上。  title属性指示图片的提示文字，当鼠标停留到图片上时，会提示相关文字。 11） 超链接标签 超链接是WWW的魅力所在，是超文本的一个重要特征。它可以链接文本、图片、程序、音乐和影像等文件。 标签的语法为显示的文字，其常用属性如下。  href是链接属性，告诉浏览器链接到的网址(URL)，URL是要链接到的网页或者文件。URL可以是一个绝对的地址，如： http://www.sina.com.cn/； 或者是一个相对网页，如index.html。URL除了是网页外，还可以是其他的文件(如文本文件、PDF格式文件和ZIP格式文件等)、锚文本链接和Email地址。  target是链接的目标属性，target属性指定所链接的页面在浏览器窗口中的打开方式，它的参数值主要有： _blank、_parent、_self、_top。 如超链接新浪可以链接到新浪网站。 12） 表格标签 HTML表格标签用
表示。一个表格可以分成若干行(row)，用表示； 每行又可以分成若干单元格(cell)，用
表示。 表格常用属性有宽、高、边框、背景颜色、背景图片、对齐方式、填充和间距等。下面分别对这些属性进行详细介绍。  表格的宽和高分别用width和height属性来表示。宽高默认的单位为像素（px），可以给表格设置固定像素的宽高值，如代码
设置表格的宽度为400px，高度为300px。也可以给表格设置百分比的宽高值，如代码
设置表格的宽度为浏览器窗口的40%。  表格的边框用border属性来表示，边框的单位默认为像素(px)，给表格添加边框可通过给表格的标签添加border属性实现。border属性设置的值越大，表格的边框就越粗。  表格的背景颜色是通过bgcolor属性来设置的，而背景图片则是通过background属性来进行设置的。 ［2］ FLV格式是Flash Video格式的简称，随着Flash MX的推出，Macromedia公司开发了属于自己的流媒体视频格式——FLV格式。FLV流媒体格式是一种新的视频格式，由于它文件体积极小、加载速度极快，使得网络观看视频文件成为可能，FLV视频格式的出现有效地解决了视频文件导入Flash后，使导出的SWF格式文件体积庞大，不能在网络上很好的使用等缺点。目前各在线视频网站均采用此视频格式，如新浪博客、优酷网、土豆网等无一例外，FLV格式已经成为当前网络视频文件的主流格式。 提示： 本书由于篇幅限制不能展开讲述本章内容，如需详细熟悉Dreamweaver CS5的相关操作，可以参考《网页设计基础与实训(第二版)》(吴代文，清华大学出版社，2017)。 ［3］ 在给文字或图像设置链接后，它们就会自动包含了4种链接状态，分别是a:link、a:visited、a:hover和a:active，每种状态代表的含义如下。  a:link链接的默认状态，即没有触发任何鼠标事件时所呈现的状态。  a:visited访问过的链接状态，即当该链接被单击后所呈现的状态。  a:hover鼠标经过时的链接状态，即当鼠标放置在有链接的对象时所呈现的状态。  a:active鼠标单击时的链接状态，即单击链接但未释放鼠标时所呈现的状态。 职业技能知识点考核 1. 填空题 (1) 图片标签的属性指定浏览器图片的具体位置，类似超链接的href属性指定浏览器超链接要链接的目标文件一样。 (2) 用于设置网页标题的HTML标签是。 (3) HTML总共提供个等级的标题。 (4) CSS的样式规则由、和三部分构成。 (5) CSS选择器的种类有、、和。 2. 简答题 (1) 列举超链接标签的target属性的四种可选参数值，并说明每种参数值的意义。 (2) 列举组成表格的HTML标签，并简要说明每种标签的意义。 (3) CSS按其使用位置的不同可分为哪些类型？ 练习与实践 1. 练习Dreamweaver的基本操作，如插入表格、图像、视频和动画等。 2. 制作几个测试链接，并给这些测试链接设计a:link、a:visited、a:hover和a:active四种链接状态。 3. 模仿任务9制作一个具有换肤效果的网页。