2.3 使用Dreamweaver CS6制作简单网页_网页设计综合实践教程-QQ阅读男生武侠网

上QQ阅读APP看书，第一时间看更新

2.3　使用Dreamweaver CS6制作简单网页

站点结构建立好后就可以开始建设网站内容了。网站是需要通过网页来展示和传递信息的，本节介绍的是怎样在Dreamweaver CS6中制作一个简单网页。

2.3.1　案例分析：“嘉州画派”网页设计

1．网页结构分析

在“嘉州文化长廊网站”的多个网页中，“嘉州画派”是内容和形式都较简单的一个网页，如图2-17所示。网页中没有用到任何布局工具，直接将网页内容按照从上到下，从左到右的顺序排列。从上到下依次是标题、主要内容、页脚。

2．网页内容分析

嘉州画派作为嘉州人文艺术的重要组成部分，是嘉州文化长廊网站首先要介绍的内容。介绍的网页中用到了文字和图片两种类型的元素。标题以图文混排的方式展示。主要内容以文字的方式介绍画派简介，以图片的方式展示作品信息。页脚为版权信息。

3．网页风格分析

为了让网页看上去美观并易于阅读，网页中设置了两种不同类型的标题效果，加入了水平线分隔标题和正文，设置了段落缩进效果、文字居中效果、图片对齐效果等。为突显主题，标题上的图片采用的是水墨效果。

图2-17　“嘉州画派”网页效果图

2.3.2　HTML基础

HTML（HyperText Markup Language，超文本标记语言）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。网页中不但包含文字，还有图片、视频、Flash小游戏，有复杂的排版、动画效果，所以，HTML定义了一套语法规则，来告诉浏览器如何把一个丰富多彩的页面显示出来。HTML标记用于描述、设置网页文件的内容及格式，设计者只需输入文件内容和必要的标记，文件内容就能在浏览器中按照标记定义的格式显示出来。用HTML编写的文件称为HTML文档，就是常见的静态网页，扩展名为.html或.htm，它能独立于各种操作系统平台（如Windows、Mac OS等）。HTML文件可以用Dreamweaver等编辑软件来编写（Dreamweaver CS6中的“代码”视图显示的就是当前网页的HTML代码），也可以用记事本、写字板来编写。懂得HTML有助于提高网页制作水平，对网页进行修改或者借鉴别人网页制作经验时需要通过HTML代码来完成。

1．HTML标记格式

HTML用于描述功能的符号称为“标记”，所有HTML标记都必须用一对尖括号“＜＞”括起来，这叫作“定界符”。标记在表示HTML文档内容结构和含义的时候，通常有两种方式，分别称作单标记和双标记。

（1）单标记。单标记表示一种功能，没有范围之分。单标记的语法格式为：

<标记名称>

例如，＜br/＞表示给标记处换行，<hr/>表示画一根横线（即水平线）。标记中的“／”表示标记到此结束的意思，在HTML5版本中标记后面的“／”可以省略，如<br>。

（2）双标记。成对出现的标记称为双标记，双标记包括开始标记和结束标记，二者之间为标记所影响的范围。开始标记和结束标记名称相同，无斜杠的标记为开始标记，表示该标记的作用开始，有斜杠的标记为结束标记，表示该标记的作用结束。双标记的语法格式为：

<标记名称>内容</标记名称>

例如：<title>嘉州画派</title>，在两个标记之间的文本“嘉州画派”，是指网页文档的标题为“嘉州画派”的意思。此处标记“title”表示文档标题。

（3）包含属性的标记。标记属性的作用是对标记影响的内容进行更详细的控制，属性不是必要的。标记属性可以由用户设置，否则采用默认值。属性出现在标记名称的后面，并且以空格进行分隔。如果标记有多个属性，属性不区分先后顺序，不同属性之间也可以空格隔开。其格式如下：

<标记名称属性1=＂值1＂属性2=＂值2＂…/>内容</标记>

例如：<hr width＝＂400＂/>，表示水平线的宽度为400像素。

<h1 align＝＂center＂>我是文章标题</h1>，表示“我是文章标题”文本水平居中显示。

在书写标记时要注意以下几点。

①HTML标记名称大都为相应的英文单词首字母或缩写，如p表示paragraph（段落）、img表示image（图像），可以通过记单词的方法来记标记名称。

②双标记中，标记属性只能写在开始标记中。

③超文本标记名称不区分大小写（建议使用小写），如＜HTML＞和＜html＞是等效的，但标记之间的内容的名称要区分大小写。

④一个标记元素可写在多行，参数位置不受限制。

⑤Dreamweaver CS6在【代码】窗口书写代码有提示功能，如写完标记名称再按空格键，则会在旁边出现该标记的属性列表，用户可在属性列表中直接选择想要的属性，不用自己输入。

2．HTML文档的基本结构

HTML文档分为文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。一个基本的HTML文档结构如下。

代码说明如下。

（1）通常HTML页面均以DOCTYPE开始，它声明文档的类型，且之前不能有任何内容（包括换行符和空格），否则将使文档声明无效。如果缺少DOCTYPE会导致文件在浏览器中显示不正常。

（2）接着是<html>标记，以</html>结束。

结构中包含三个顶层标记：<html>、<head>和<body>。文档以<html>开始，以</html>结束，<head>和<body>嵌入其中。

（3）在<head>和</head>标记中的内容是文档头，用于描述页面的头部信息，如文档的标题（<title>标记）、页面的元信息（<meta/>标记）、CSS样式代码、JS代码等信息。所有在<head>和</head>标记之间的内容都是不会显示在页面上的。

（4）<body>和</body>之间的内容是文档体，是HTML的主要部分，它包括文件所有的实际内容和绝大多数标记符号。页面上显示的任何东西都包含在这两个标记之中。

HTML的标记非常多，在后面章节中会介绍各种不同的标记及其用法。

2.3.3　CSS基础

CSS（Cascading Style Sheet，层叠样式表）简称样式表，用于为网页文档中的元素添加各种样式，如字体大小、背景颜色、边框设置、列表格式等，起到了网页文档的美化作用。CSS是将格式规则存放在样式表中，网页通过对样式表的引用为目标区域的元素添加样式。

网页设计最初使用HTML标记来定义页面文档及格式，但这些标记不能满足更多的文档样式需求，如果利用HTML标记来实现所有格式设置，会导致代码烦琐且臃肿。设计者需要认识到，在网页设计中，HTML负责的工作是网页框架搭建和内容显示，在此基础上，设计者还需要对内容进行外观设计和美化，这个工作就交由CSS来完成，两者各司其职。利用CSS，设计者可以精确、灵活地控制网页里每一个元素的字体样式、背景、排列方式、区域大小、边框等。

1．CSS样式表

CSS有三种使用方式，根据声明位置的不同分为内联样式表、内部样式表和外部样式表。

（1）内联样式表。内联样式表又称为行内样式表，通过使用style属性为各种HTML元素标记添加样式，其作用范围只在指定的HTML元素内部。基本语法格式如下：

<标记名称style=＂属性名称1：属性值1；属性名称2：属性值2；…＂>

当有多个属性时，需要用分号将属性隔开。

例如：<h1 style＝＂color：red; font-size:36px">我是文章标题</h1>

该声明表示设置当前<h1>和</h1>标签之间的文本字体颜色为红色，字体大小为36像素。

（2）内部样式表。内部样式表通常位于<head>和</head>标记内，通过使用<style>和</style>标签标记各类样式规则，其作用范围是当前整个文档。语法格式如下：

该语句包含一个<body>标记，意思是设置整个网页的上边距为0像素，文字字体为“宋体”。

（3）外部样式表。外部样式表为独立的CSS文件，其后缀名为.css，在网页文档的首部<head>和</head>标签之间使用<link>标签对其进行引用，该文件的所有格式即可用于当前整个文档。对CSS文件的引用语法格式如下：

      ＜link rel=＂stylesheet＂href=＂样式文件＂＞

同一个网页文档可以引用多个外部样式表文件，不同网页也可以引用同一个外部样式表文件以统一网页风格。通常将多个网页中相同的格式设置放入外部样式表文件，以提高制作网页的效率。

（4）样式表层叠优先级。

内联样式表、内部样式表和外部样式表可以在同一个网页文档中被引用，多种样式可能会用于同一个HTML，如果其中有样式条件冲突，CSS会优先选择级别高的样式应用到该网页元素上。

三种样式表的优先级为：内联样式拥有最高的优先权，其次是内部样式表，最后是外部样式表中的样式声明。也就是说，元素是以就近原则显示离其最近的样式规则。如果没有任何样式表文件，则以当前浏览器中的样式声明（默认值）为最终效果。

2．创建CSS样式表

创建CSS样式表的方式有以下三种。

图2-18　【CSS样式】面板

（1）选择【格式】|【CSS样式】|【新建】命令。

（2）单击【CSS样式】面板上的【新建CSS规则】按钮，或者在面板的空白处右击，在弹出的快捷菜单里选择【新建】命令。

（3）在【属性】面板中选择CSS选项卡，在【目标规则】下拉列表里选择【新CSS规则】命令，再单击【编辑规则】按钮。

【CSS样式】面板是建立和管理CSS样式最方便的工具，因此后面的介绍均以【CSS样式】面板中建立样式的方式来讲解怎样创建CSS样式。【CSS样式】面板（如图2-18所示）默认位于Dreamweaver窗口的右侧，可以通过【窗口】|【CSS样式】命令，打开或隐藏【CSS样式】面板，也可按Shift＋F11组合键来实现。

在面板的顶部有【全部】和【当前】两种模式可选。【全部】是显示当前文档所有的CSS规则，【当前】只显示当前选定的CSS规则。

面板底部排列着几个按钮，其功能如下。

（1）【附加样式表】按钮：附加链接到或导入外部样式表到当前文档中。

（2）【新建CSS规则】按钮：创建新的CSS样式，可选择要创建的样式类型。

（3）【编辑样式】按钮：编辑修改选定的CSS规则。

（4）【删除CSS规则】按钮：删除选中的CSS规则，并删除所有应用了该规则元素的相应格式。

单击【新建CSS规则】按钮后，将弹出【新建CSS规则】对话框，如图2-19所示。该对话框由三个选项构成：选择器类型、选择器名称和规则定义。

图2-19　【新建CSS规则】对话框

1）选择器类型

“选择器”是指明“样式”规则的作用对象，也就是“样式”应用于网页中的哪些元素。要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，就需要用到CSS选择器。不同类型的选择器有着对HTML页面中的元素不同的控制范围。

（1）类选择器：所定义的规则样式可应用于任何HTML元素，也可重复多次应用于不同的HTML元素。类选择器在声明时需要在【选择器名称】文本框中输入样式名称。类名必须以英文句号“．”开头，后面加上英文、数字等构成的名称，如“.pstyle”样式如下：

      .pstyle{line－height:30px;}

在标签中应用格式如下。

     ＜h1 class=＂pstyle" ＞嘉州画派＜/h1＞

     ＜p class=＂pstyle" ＞我是一个小段落＜/p＞

“h1”和“p”这两个不同标签控制的内容，通过使用类选择器pstyle具有相同的风格。

（2）ID选择器：仅用于一个HTML元素，ID值具有唯一性，类似于现实生活中的身份证号码。有一个元素使用该样式后，其他元素就不能再选择该样式。ID选择器名称必须以井号“＃”开头。

（3）标签选择器：一个完整的HTML页面由很多不同的标签（标记）组成，而标签选择器则是指修改HTML文档中该标签所代表的元素，也就是对HTML指定标签进行重新定义。

例如：p{background：black}

此代码表示将当前文档中所有段落的背景颜色设置为黑色。“p”代表了所有段落。

（4）复合内容：基于选定的内容以及伪类选择器。

2）选择器名称

选择好选择器类型后，再选择或输入选择器名称。如果选择【标签】选择器，可在选择器名称的下拉列表中选择相应的标签名，如图2-20所示。如果选择【类】选择器或者是ID选择器，就需要在【选择器名称】中输入相应名称，如图2-21和图2-22所示。

图2-20　标签选择器名称

图2-21　类选择器名称

图2-22　ID选择器名称

3）规则定义

选择定义规则的位置，即CSS类型。Dreamweaver提供了以下两个选项。

（1）仅限该文档：也称CSS内嵌风格，把CSS规则放在当前HTML文档中。只应用于当前文档的HTML元素。

（2）新建样式表文件：也称CSS外部风格，把CSS规则单独存放在后缀名为CSS的文件中。其他HTML文档要应用外部CSS文件里的样式可通过“附加样式表”的方式来实现。

3．CSS规则定义

确定CSS类型和选择器名后，将弹出【CSS规则定义】对话框，在对话框中设计者可以定义各类元素的格式，如字体、颜色、边距和边框等网页元素的属性。在Dreamweaver CS6中，CSS属性分为9大类，分别是：类型、背景、区块、方框、边框、列表、定位、扩展和过渡。

（1）类型：主要定义网页中文字的字体、大小、颜色等风格，如图2-23所示。

①Font-family：设置样式字体。

②Font-size：设置字体大小。可以通过选择数字和度量单位来选择特定的大小，也可以选择相对大小。

③Font-weight：设置字体粗细效果。normal等于400，bold等于700。

④Font-style：指定normal（正常）、italic（斜体）或oblique（偏斜体）作为字体样式，默认设置为“正常”。

⑤Font-variant：设置文本的小型大写字母变体。

⑥Line-height：设置文本所在行的高度。习惯上将该设置称为行高。可选择“正常”自动计算字体大小的行高，或输入一个确切的值并选择一种度量单位。

⑦Text-transform：将所选内容中每个单词的首字母大写或将文本设置为全部大写或小写。none：无转换。capitalize：将每个单词的第一个字母转换成大写。uppercase：将每个单词转换成大写。lowercase：将每个单词转换成小写。

图2-23　【类型】规则定义

⑧Text-decoration：向文本中添加underline（下画线）、overline（上画线）、line-through（删除线）、blink（文本闪烁）。常规文本的默认设置是none（无）。链接的默认设置是“下画线”。

⑨Color：设置文本颜色。颜色可通过颜色调板选择，可在文本框中填入颜色名称（如red），也可用十六进制值的颜色（如＃8000FF）来表示。

（2）背景：定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性，如在文本、表格、页面等的后面添加背景。还可以设置背景图像的位置，如图2-24所示。

图2-24　【背景】规则定义

①Background-color：设置元素的背景颜色。

②Background-image：设置元素的背景图片。

③Background-repeat：确定是否以及如何重复背景图像。no-repeat（不重复）是只在元素开始处显示一次图像。repeat（重复）是同时在水平和垂直方向重复平铺图像。repeat-x（横向重复）是指水平方向重复平铺图像。repeat-y（纵向重复）是在垂直方向重复平铺图像。图像会被剪辑以适合元素的边界。

④Background-attachment：确定背景图像是fixed（固定）在其原始位置还是随内容一起scroll（滚动）。默认选项为滚动。

⑤Background-position（X）和Background position（Y）：指定背景图像相对于元素的起始位置。这可用于将背景图像与页面中心垂直（Y）和水平（X）对齐。

（3）区块：定义标签和属性的间距和对齐设置，如图2-25所示。

图2-25　【区块】规则定义

①Word-spacing：设置字（单词）之间的间距。其默认值normal与设置值为0是一样的。若要设置特定的值，请在弹出菜单中选择【值】选项，然后输入一个数值。在第二个弹出菜单中选择度量单位（如像素、点等）。属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为Word-spacing设置一个负值，会把它拉近。

②Letter-spacing：增加或减小字母或字符的间距。设置方式与Word-spacing相同。字母间距设置覆盖对齐的文本设置，输入的长度值会使字母之间的间隔增加或减少指定的量。

③Vertical-align：指定应用此属性的元素的垂直对齐方式，图像的对齐方式也用此属性设置。

④Text-align：设置文本在元素内的对齐方式。left左对齐，默认值。right右对齐。center居中对齐。justify实现两端对齐文本效果。

⑤Text-indent：指定第一行文本缩进的程度。设置时注意选择缩进量的单位，如果是段落缩进，通常单位选择pixels。可以使用负值创建凸出，但显示方式取决于浏览器。

⑥White-space：确定如何处理元素中的空格。

⑦Display：指定是否及如何显示元素。none（无）指定到某个元素时，此元素不会被显示。

（4）方框：用于设置元素属性定义以及控制元素在页面上的放置方式。可以理解为方框就是一个盒子，在这里可以定义盒子的宽、高、外边距和内边距，以及整个盒子是否要浮动和是否要清除浮动。在应用填充和边距设置时将设置应用于元素的各个边，也可以使用【全部相同】设置将相同的设置应用于元素的所有边，如图2-26所示。

图2-26　【方框】规则定义

①Width：宽，设置元素的宽度

②Height：高，设置元素的高度。

③Float：浮动，指定其他元素在浮动的元素周围流动的一侧。浮动的元素固定在浮动一侧，其他内容在另一侧围绕它流动。类似环绕效果，left是指浮动元素固定位于左侧，其他内容环绕该元素。right指元素固定在右侧，与左侧类似。none无环绕效果。float在绝对定位和display为none时不生效。

④Clear：指定不允许有其他浮动元素的元素一侧。none允许两边都可以有浮动对象。both不允许有浮动对象。left不允许左边有浮动对象。right不允许右边有浮动对象。

⑤Padding：填充。指定元素内容与元素边框之间的间距（如果没有边框，则为边距）。取消选择【全部相同】复选框可设置元素各个边的填充。

⑥Margin：边距。指定一个元素的边框与另一个元素之间的间距（如果没有边框，则为填充）。

（5）边框：定义元素周围的边框的设置（宽度、颜色和样式），如图2-27所示。

①Style：设置边框的样式外观。样式的显示方式取决于浏览器。取消选择【全部相同】可设置元素各个边的边框样式。none无边框。dotted点状边框。dashed虚线边框。solid实线边框。double双线边框。两条单线与其间隔的和等于指定的border-width值。groove为3D凹槽轮廓。ridge为3D凸槽轮廓。inset为3D凹边轮廓。outset为3D凸边轮廓。

②Width：设置元素边框的粗细。

图2-27　【边框】规则定义

③Color：设置边框的颜色。

选定【全部相同】复选框时，以上属性上下左右4条边值相同。取消选择【全部相同】可设置元素各个边的不同属性。如果border-width等于0或者没有设置，则边框将不会显示。

（6）列表：定义列表标签相关属性，如项目符号图片和类型，如图2-28所示。

图2-28　【列表】规则定义

①List-style-type：设置列表符号或编号的外观。disc实心圆。circle空心圆。square实心方块。decimal阿拉伯数字。lower-roman小写罗马数字。upper-roman大写罗马数字。lower-alpha小写英文字母。upper-alpha大写英文字母。none不使用项目符号。

②List-style-image：为项目符号指定自定义图像。单击【浏览】按钮选择图像，或输入图像的路径。

③List-style-Position：outside设置列表项文本是否换行并缩进（外部），列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inside文本是否换行到左边距（内部），列表项目标记放置在文本以内，且环绕文本根据标记对齐。

（7）定位：确定与选定的CSS样式相关的内容在页面上的定位方式，如图2-29所示。

图2-29　【定位】规则定义

①Position：位置。确定浏览器应如何定位选定的元素。absolute绝对定位。fixed固定定位，是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。relative相对定位。static无特殊定位，它是HTML元素默认的定位方式，即设计者不设定元素的position属性时默认的position值就是static。

②Visibility：可见性。确定内容的初始显示条件。如果不指定可见性属性，则默认情况下，内容将继承父级标签的值。visible可见，默认值。hidden元素不可见。inherit规定应该从父元素继承visibility属性的值。

③Z-Index: Z轴。确定内容的堆叠顺序。Z轴值较高的元素显示在Z轴值较低的元素（或根本没有Z轴值的元素）上方。值可以为正，也可以为负。

④Overflow：溢出。确定当容器（如div或p）的内容超出容器的显示范围时的处理方式。

⑤Placement：位置。指定内容块的位置和大小。浏览器如何解释位置取决于【类型】设置。如果内容块的内容超出指定的大小，则将改写大小值。

⑥Clip：剪辑。定义内容的可见部分。如果指定了剪辑区域，则可以通过脚本语言（如JavaScript）访问它，并操作属性以创建像擦除这样的特殊效果。

（8）扩展：样式属性包括滤镜、分页和指针选项，如图2-30所示。

①Page-breake-before：打印期间在样式所控制的对象之前强行分页。

②Page-break-after：打印期间在样式所控制的对象之后强行分页。

③Cursor：当指针位于样式所控制的对象上时改变指针图像。

④Filter：对样式所控制的对象应用特殊效果。

（9）过渡：是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：一是指定要添加效果的CSS属性；二是指定效果的持续时间，如图2-31所示。过渡效果也可以通过【CSS过渡效果】面板来制作。

图2-30　【扩展】规则定义

图2-31　【过渡】规则定义

4．样式的应用

样式定义好后怎样才能让样式起作用？不同类型的样式应用方式不同。

（1）标签样式：标签样式设置好后不需要应用直接生效。

（2）类。类可以用于任何HTML元素，因此应用前应该先选中需要应用的对象。应用的方式如下。

①在【文档】窗口中右击选中的对象，从弹出的快捷菜单中选择【CSS样式】命令，然后选择要应用的样式。

②选中对象后，在【属性】面板的HTML选项卡中，【类】下拉列表中选择要应用的样式，如图2-32所示

图2-32　【属性】面板类的应用

③单击菜单【格式】|【CSS样式】命令，然后在子菜单中选择要应用的样式。

④在【CSS样式】面板中选择【全部】模式，右击要应用的样式名称，在弹出的子菜单中选择应用。

（3）ID。只能用于唯一的对象。应用方法如下。

①选定对象后可在【属性】面板中ID下拉列表中选择要应用的样式，如图2-33所示

图2-33　【属性】面板ID应用

②在代码中修改要应用标签的ID属性，如：

      <p id="footer">版权所有乐山师范学院计算机科学学院</p>

2.3.4　案例制作：图文并茂页面制作

了解了制作网页需要用到的一些基础知识后，设计者就可以开始设计网页了。下面利用Dreamweaver CS6制作“嘉州画派”这个简单网页。网页效果展示在2.3.1节中。网页制作步骤如下。

1．新建网页

设计者需要新建一个用于介绍“嘉州画派”的网页jzhp.html，并将该网页存在站点“嘉州文化长廊”的根文件夹lsculture中。新建网页的方法如下。

（1）选择菜单【文件】|【新建】命令，弹出【新建文档】对话框，如图2-34所示，选择左列【空白页】选项，页面类型为HTML，布局为【无】，单击【创建】按钮，即可创建并打开名为“Untitled-1”的空白网页文件。

说明：如果需要修改文件名，需要选择菜单【文件】|【保存】命令，在弹出的【另存为】对话框中，选择站点根目录lsculture作为保存的位置，输入文件名“jzhp.html”，单击【保存】按钮即可。

图2-34　【新建文档】对话框

（2）在【文件】面板中右击站点根文件夹lsculture，选择弹出菜单中的【新建文件】命令，建好后直接在【文件】面板中修改新建网页文件文件名为“jzhp.html”。

网页建好后就需要往网页中加入内容了。在“嘉州画派”网页中有文字、图片、水平线、列表等元素。把网页所用元素加入到网页后还需要对网页内容进行格式设置，如对齐方式、文字颜色、列表格式等。这部分需要用CSS样式来完成。

2．输入并编辑文本

文本是网页中必不可少的重要元素，Dreamweaver中可以通过直接输入、复制粘贴或导入的方式轻松地将文本输入文档中。还可在文档中插入一些特殊字符，如版权符号、商标等。文字在网页中主要以以下三种格式呈现。

（1）标题。标题1~标题6，标记为<h1>~<h6>，标题1的字号最大，标题6的字号最小，能自动换行，同时有加粗效果。网页中的“嘉州画派”、“作品展示”等标题就是以标题格式来显示的。

（2）段落。标记<p>，正文段落，在文字的开始和结尾处都会自动换行。如图2-35所示，正文内容均由段落格式控制，有多少段落，就需要多少对<p>标记控制。

图2-35　段落格式

图片左边显示的为代码窗口中带标记的段落格式，右边显示的是设计窗口中段落格式的显示效果。

（3）列表。为使文本结构更清晰，使用列表来排列文本，主要有以下两种形式的列表。

①有序列表。又称为编号列表，列表标记为<ol>，列表项目使用有序的数字、英文字母或罗马字符进行排列，其标记代码和显示效果如图2-36所示。

②无序列表。又称为项目列表，列表标记为<ul>，列表项目使用实心或空心圆点、正方形等进行排列，其标记代码和效果如图2-37所示。

图2-36　有序列表

图2-37　无序列表

图中左边代码窗口的<ol>和<ul>标签分别代表有序列表和无序列表，<li>表示列表项。有序列表和无序列表中都使用此标签表示列表项。

了解了文本格式后，利用Dreamweaver CS6对jzhp.html网页中的文本进行编辑。

步骤1：将【文档】窗口的视图切换为【设计】视图，在空白文档的第一行输入“嘉州画派”，选中文字并在【属性】面板中选择格式为【标题1】，如图2-38所示。可选择【代码】或【拆分】视图进行代码查看，最终效果如图2-39所示。在后面的内容中，用同样的方式输入“嘉州画派简介”“作品展示”和“代表人物”三个标题，并将这三个标题设置为【标题3】。

图2-38　设置标题格式

步骤2：为了使标题与正文分隔，插入“水平线”进行简单排版，水平线的标记为<hr>，是horizontal line的缩写。选择菜单【插入】|HTML|【水平线】命令（如图2-40所示），即可完成水平线的插入。水平线有自动换行功能，效果如图2-41所示。当选择水平线时，在【属性】面板中可对其进行宽度、高度、排列方式等设置，如图2-42所示。

图2-39　标题1效果

图2-40　插入水平线

图2-41　水平线效果

图2-42　水平线【属性】面板

步骤3：通过复制粘贴方式将正文内容放置到插入点，选择【编辑】|【选择性粘贴】命令，弹出【选择性粘贴】对话框，如图2-43所示。选择【仅文本】单选按钮，单击【确定】按钮。

图2-43　【选择性粘贴】对话框

【仅文本】的形式粘贴只会将文字内容粘贴到网页中，所有的格式都没有，因此也没有分段。如果需要在指定位置分段，将插入点放置在需要分段位置，按Enter键即可。分段后效果如图2-44所示。粘贴时想要保留文本的段落等结构可选择第二个项【带结构的文本（段落、列表、表格等）】。

图2-44　段落格式化效果

步骤4：在“代表人物”下插入列表信息。输入文字后，选中文本内容，在【属性】面板中选择编号列表或项目列表，如图2-45所示。最终效果如图2-46所示。需要注意的是，要设置为列表项目的文字必须是段落格式。

图2-45　设置列表

步骤5：插入水平线，制作版权区域信息，如图2-47所示。

换行和分段效果的行间距不同。段落间距较大，因此版权信息内容整个为一段，每一行内容只是换行但是没有分段。一行输入完成按Enter键，会生成一个段落。要实现换行但不分段效果，可通过按Shift＋Enter组合键（或者在代码窗口需要换行的位置输入<br>标记）实现。

图2-46　项目列表效果

图2-47　版权区效果

图2-48　插入特殊字符

图2-49　插入其他字符

在HTML中特殊符号以“&”开始，“；”结束的格式对此类信息进行控制。

空格在HTML中就是一个特殊符号，空格的代码为“ ”。由于空格会影响网页的显示格式，建议尽量少输入空格。如需插入多个空格，方法如下。

（1）可以直接在代码窗口中需要空格的位置输入代码“ ”。

（2）选择菜单【插入】|HTML|【特殊字符】|【不换行空格】命令实现。

（3）按Shift＋Ctrl＋Space组合键。

（4）选择菜单【编辑】|【首选参数】|【常规】|【允许多个连续空格】，设置好参数后直接按空格键就可以输入多个空格。

通过以上步骤，文本录入已完成，但与最终网页效果有差别，如文字颜色、对齐方式、水平线外观风格、段落的行间距以及列表标记的图形化等，这些工作将放在CSS部分介绍。

3．插入并编辑图片

网页中文本内容已全部编辑好，但是只有文字的网页看上去很单调。为了让网页看上去更生动美观，下面需要在网页中插入一些图片来调节。

1）图片格式

图片格式有很多种，使用最为广泛的是GIF（.gif）、JPEG（.jpg）和PNG（.png）三种格式。这三种格式的图片文件小，适合网络传输，也能被所有浏览器支持。

（1）GIF格式

GIF（Graphics Interchange Format，图形交换格式）是一种索引颜色的图像格式。GIF格式的特点是压缩比高、磁盘空间占用较少、可以同时存储若干幅静止图像，进而形成连续的动画。

GIF的缺点是不能存储超过256色的图像，图片质量较低。对于大面积同一颜色或颜色变化不大的图片可以使用此格式，如导航条、按钮、图标、透明图像和动画。

（2）JPEG格式

JPEG是由联合照片专家组（Joint Photographic Experts Group）开发的静态图像压缩技术，是一种有损压缩图像格式。JPEG支持32位颜色图像，可以保持原图像的真实颜色。JPEG是一种灵活的格式，具有调节图像质量的功能，允许用不同的压缩比例对文件进行压缩，能用最少的磁盘空间得到较好的图像质量。

JPEG适合网页中对图片质量要求较高、有颜色渐变、需要精确色彩显示的图片。对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。建议在页面中使用的商品图片、采用人像或者实物素材制作的广告Banner等图像适合采用JPG的图片格式保存。

JPEG的缺点是不能制作动画和透明背景。

（3）PNG格式

PNG（Portable Network Graphics，便携式网络图像）是一种无损压缩的图片格式，是目前保证最不失真的格式，它吸取了GIF和JPG二者的优点，存储形式丰富，兼有GIF和JPG的色彩模式；能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息；显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。

PNG适合图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充，或者具备较大亮度差异以及强烈对比的简单图像（如【加入购物车】按钮中的背景和文字）。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG格式。

PNG支持透明图像的制作，但是不支持动画效果。

2）插入图片

HTML中图片的标记是<img>，其基本格式如下：

      ＜img src=＂图片文件路径＂width=＂图片宽度＂height=＂图片高度＂/＞

在Dreamweaver中，插入图片的方法主要有以下4种。

（1）在【插入】面板的【常用】类别中单击【图像】按钮。

（2）选择菜单【插入】|【图像】命令。

（3）在【文件】面板中选中图像，直接拖放至相应位置。

（4）在【代码】窗口中需要插入图片的位置输入图片代码。

整个网页中一共插入了4张图片，首先在文章标题“嘉州画派”左边插入图片sm.png。插入点定位好后，选择菜单【插入】|【图像】命令。在弹出的【选择图像源文件】对话框中选定图片sm.png，再单击【确定】按钮即可。用同样的方法在“作品展示”下方，依次插入ylzp.jpg、lqjzp.jpg和hzx.jpg三张图片。效果如图2-50所示。

从效果看出图片大小不一，看上去不够整齐美观，设计者需要修改图片相关属性来让图片看起来更协调。选中图像，在位于窗口下方图像【属性】面板中（如图2-51所示）对图像进行设置，通过单击面板右下角的或图标，可对面板进行折叠和展开。

面板包括如下属性。

（1）源文件：指定图像的源文件。在右侧的文本框中输入图像的路径或单击图标定位到图像源文件。

（2）链接：指定图像的超链接。

（3）宽度和高度：设置图像的宽度和高度，以像素为单位。当图像插入页面时，Dreamweaver会自动使用图像的原始尺寸。

图2-50　插入图片后网页效果

图2-51　图片【属性】面板

（4）替换：用来代替图像显示的替代文本。

（5）编辑：启动外部编辑器对指定的图像进行进一步编辑。

（6）地图名称和热点工具：允许用户创建图像地图。

（7）目标：指定链接的页面加载的框架或窗口名称。

分别选中并设置网页内容“作品展示”下方的ylzp.jpg、lqjzp.jpg和hzx.jpg三张图片的高度和宽度均为200像素。修改后效果如图2-52所示。

图2-52　修改图片大小后网页效果

插入的图片如果不是位于当前站点文件夹中，Dream weaver会弹出如图2-53所示对话框，询问是否要将图片存到站点文件夹内。为了让网页上的图片在上传到服务器后也能正常显示，需要将该图片复制到站点的文件夹中。建议放置在存放图片素材的images文件夹中。

图2-53　复制图片提示

图片不具有自动换行的功能，它可以与文字处于同行，同行文字默认位于图片底部。图片之间的间隔可以通过输入多个空格的方式来实现。要设置图片对齐方式、水平和垂直间距等可通过右键单击图片，在弹出的快捷菜单中选择【编辑标签】命令，或CSS样式来完成。

网页加入图片和文字后的最终效果如图2-54所示。

图2-54　加入图片和文字后的网页效果

4．CSS样式应用实例

把网页内容编辑完成后，网页效果和设计者想要的最终效果还有很大差距，接下来设计者需要利用CSS样式来修改各元素的格式，以达到2.3.1节中所展示的网页效果。

1）页面整体风格设置

网页中文字内容较多，要能快速地将网页中大部分文字改成相同的格式设置，最好的方法是修改标签<body>的CSS样式。<body>标签代表了整个网页，当标签属性被修改后会影响整个网页所有的内容。<body>标签CSS格式设置方法如下。

单击【CSS样式】面板中的【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中，设置选择器类型为【标签】，选择器名称在下拉列表中选定为body（当选择器类型为标签时，选择器名称尽量通过在下面的下拉列表中选择的方式来设置，以免自己输入时输错标签名称），由于该格式只用于当前网页文件，因此规则定义选择【仅限该文档】选项，如图2-55所示。后面所有的规则都只用于当前文档，在其他规则定义中将不再赘述。

图2-55　新建body规则

全部设置好后单击【确定】按钮，在弹出的【body的CSS规则定义】对话框中选定【类型】，设置文字字体（Font-family）为【宋体】，如图2-56所示。再选择【方框】分类，设置上下左右边距（margin）为0，如图2-57所示。

图2-56　body规则字体属性

body边距设置为0，是为了让网页内容距离网页边框4个边没有缝隙。为了让网页内容能在任何计算机里正常显示，建议将网页的正文字体设置为【宋体】。如果想要选择的字体在字体列表中没有，可单击列表最下方的【编辑字体列表】选项，如图2-58所示，在弹出的对话框中添加要用的字体，如图2-59所示。

<body>作为标签选择器类型的规则，定义好后格式设置就可生效。

图2-57　body规则边距属性

图2-58　添加字体

图2-59　【编辑字体列表】对话框

2）标题风格设置

标题“嘉州画派”是【标题1】格式，标签为<h1>。整个网页中只有一个，可通过修改标签格式的方法来修改格式。该标题的格式设置方法如下。

选中标题“嘉州画派”，单击【CSS样式】面板中的【新建CSS规则】按钮，在弹出的对画框中设置选择器类型为【标签】，因为选定的文字是标签<h1>包含的内容，所以选择器名称文本框中将自动显示“h1”。

在【h1的CSS规则定义】对话框中将字体设置为【华文行楷】，字体大小（Font-size）为45px，字体颜色（Color）设置为＃91111e，单击【应用】按钮查看效果，如图2-60所示。

图2-60　标题1格式效果

说明：HTML中元素的颜色是由6位或3位的十六进制来表示的，格式是以“＃”开头，数字分别代表红色、绿色和蓝色（RGB），如“＃061”中，0代表红色，6代表绿色，1代表蓝色。

“嘉州画派简介”“作品展示”“代表人物”三个文字都是标题3格式，如果要把这三部分文字设置相同格式可直接修改“标题3”标签<h3>。用同样的方式新建<h3>规则定义，在【类型】分类中设置文字字体为【幼圆】，行高（Line-height）为30px，文字颜色为＃ba090d。在【背景】分类中设置背景颜色（Background-color）为＃DBB39B。在【方框】分类中设置宽度（Width）为200px。【区块】中修改水平对齐（Text-align）为center。应用后效果如图2-61所示。

3）水平线风格设置

水平线的标签为<hr>，网页里有两条水平线，且具有相同的风格，即深红色点状水平线。因此建立一个选择器类型为【标签】，选择器名称为“hr”的CSS规则。

在【hr的CSS规则定义】对话框中选择【边框】分类，边框风格（Style）设置为dotted，边框粗细（Width）设为2px，颜色（Color）设置为＃d17172，与标题色同色系，如图2-62所示。但在【设计】视图中无法看到最终效果，设计者可单击【实时视图】按钮查看最终效果。

图2-61　标题3格式效果

图2-62　水平线规则定义

4）段落风格设置

段落标签为<p>，除了正文中会用到此标签外，页脚文字信息也是用<p>标签控制的，如果用标签作为选择器，将会导致所有<p>控制的内容应用相同风格，为了避免这种情况发生，选择使用【类名】作为选择器，类名为pstyle。段落格式设置方法如下。

单击【CSS样式】面板中的【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中，设置选择器类型为【类】，选择器名称在下拉列表中输入名称pstyle，类名可以是英文或拼音，可以包含数字，但必须以字母开头，按照“所见即所知”规则进行命名，如图2-63所示。

图2-63　新建类.pstyle

在【.pstyle的CSS规则定义】对话框中，设置【类型】分类的字体大小（Font-size）为12px，行高为25px。【区块】分类的首行缩进（Text-indent）为24px。

类建立好后并不能立即有效果，需要选中元素应用才有效果。选择正文三段文本，单击鼠标右键，在弹出的快捷菜单中选择【CSS样式】|.pstyle命令，如图2-64所示。通过【实时视图】查看行间距效果，如图2-65所示。

图2-64　应用类.pstyle

5）列表格式设置

将项目或编号列表标记替换成图片。当前页面中只有一个列表项，列表标记可以是<ul>或<ol>，列表项标记是<li>，因此选择标签作为选择器。这里选择li作为选择器。

图2-65　段落最终效果

在【li的CSS规则定义】对话框中，对【列表】分类中的List-style-image属性进行设置，单击【浏览】按钮选择图片文件list.png选项，应用后效果如图2-66所示。

图2-66　修改列表图片后的列表效果

但与最终效果相比，不难发现，列表项之间的间距较小，还需对列表进行其他风格设置。由于li选择器已经创建，因此在【CSS样式】面板中双击li选择器进行编辑。设置Line-height属性值为30px，得到如图2-67所示效果。

图2-67　修改行高后列表效果

6）图片与文字对齐方式设置

设置网页标题文字与图片的垂直关系为居中对齐。目前它们的垂直关系是居底部对齐，垂直居中对齐设置方法如下。

新建一个选择器类型为【类】，选择器名称为“.img_middle”的CSS规则，修改【区块】分类中垂直对齐方式（Vertical-align）为middle。设置好后选择标题1左边的sm.png图片，单击右键，在弹出的快捷菜单中选择【CSS样式】|.img_middle。应用后单击【实时视图】效果如图2-68所示。

图2-68　图片居中对齐效果

7）页脚格式设置

页脚内容居中且行间距增大。新建一个选择器类型为ID，选择器名称为“footer”的CSS规则。在【footer的CSS规则定义】对话框中，将【类型】分类的字体大小（Font-size）设置为12px，行高（Line-height）属性值设为25px，【区块】分类的水平对齐（Text-align）属性设置为center。规则建好后，选中页脚内容，在【属性】面板中选择ID选择器名称footer，如图2-69所示，即可完成CSS的应用。

图2-69　应用ID规则footer

ID选择器类型的CSS规则只能用一次，如果一个ID被应用后，其他元素就不能再选择该ID。如果应用时选错元素，需要再次选定用错的元素，在【属性】面板里设置该元素的ID为【无】。之后其他元素才能选择该ID。

5．修改文档标题

窗口标题是在浏览器中浏览时显示在窗口左上角标题栏的文字。文档默认的窗口标题是“无标题文档”，如果所有的网页都使用“无标题文档”不方便浏览者阅读，在此设计者将此网页的文档标题改为“嘉州画派”，以方便访问者分辨不同网页。设置方法为：在当前文档的【文档工具栏】处修改标题为“嘉州画派”，如图2-70所示。

图2-70　修改文档标题

6．保存并浏览网页

网页内容和格式都设置好后，需要将该网页保存才能在浏览器中看到最新的效果。保存网页的方式如下。

（1）选择菜单【文件】|【保存】命令。

（2）按Ctrl＋S组合键。

网页保存好后，应该在浏览器中预览，这样才能看到网页的最终效果。在浏览器中预览可以单击文档工具栏中的【在浏览器中预览／调试】按钮，或者按快捷键F12。“嘉州画派”网页最终效果如图2-71所示。

图2-71　网页最终效果

在制作网页时应该养成边做边保存，并在浏览器中预览的习惯。在编辑状态下，甚至在实时视图下看到的网页效果和在浏览器中看到的网页效果，有可能是有区别的。做好一部分就预览一下，如果和想要的效果有出入可以及时调整。如果全部做完了再预览调整相对就会麻烦许多。

在设计CSS的时候，如果所有建立的规则都是【仅限该文档】，那么CSS相关代码都是保存在当前文档的文件头，也就是<head>标签内。所有的CSS规则用标签<style>来控制，如图2-72所示。

图2-72　“嘉州画派”网页CSS代码