5.5 案例实战

本节将通过几个案例演示如何借助Dreamweaver完成网页图像样式的初步设计，并演示如何设计图文混排版式效果。

5.5.1 定义图像自适应大小

<img>标签包含width和height属性，使用它们可以控制图像的大小，在标准网页设计中这两个属性依然有效。也可以在CSS中使用width和height属性定义图像的宽度和高度。下面示例演示了如何快速设计文档中新闻图像的大小。

【操作步骤】

第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。

第2步，在页面中选中段落文本中的插图，然后在【属性】面板中设置图像的大小，如图5.27所示。

图5.27 定义图像的大小

提示：定义图像大小后，可以在【代码】视图中看到新添加的代码属性，如下所示：

<img src="images/bg.jpg" width="600"/>

在代码中，宽度值没有带单位，默认为像素。当用户使用Dreamweaver插入命令插入图像时，会自动设置图像原始大小。

技巧：当仅为图像定义宽度或高度，则浏览器能够自动调整纵横比，使宽和高能够协调缩放，避免图像变形。同时为图像定义宽和高，如果没有计算好宽高比，则显示的图像会出现变形、失真现象，因此比较稳妥的方法是只定义图像高度或宽度，而不是同时定义高度和宽度。

第3步，选择【窗口】｜【CSS设计器】命令，打开【CSS设计器】面板，依次执行下面操作，详细提示如图5.28所示。

图5.28 定义图像的大小

（1）在【源】标题右侧单击按钮，在弹出的下拉菜单中选择【在页面中定义】选项，设计网页内部样式表。

（2）在【选择器】标题右侧单击按钮，新增一个选择器，命名为img。

（3）在【属性】列表框中找到width属性，单击右侧属性值列，输入值为100%，即设置图像宽度为100%。当图像大小取值为百分比时，浏览器将根据图像包含框的宽和高计算图像。

第4步，按Ctrl+S快捷键，保存网页，再按F12键在浏览器中预览，演示效果如图5.29所示，则可以看到CSS的width属性会优先于HTML的width属性，图像先按100%进行显示，而不是600px。

图5.29 设计图像100%大小显示效果

提示：用HTML的width和height属性定义图像大小不符合标准化设计原则：结构和表现的分离；另一方面使用标签属性定义图像大小只能够使用像素单位，而使用CSS属性可以自由选择任何相对和绝对单位。在设计图像大小随包含框宽度而变化时，使用百分比非常有用。

【拓展】

在响应式网页设计中，一般会使用max-width和max-height属性来设计图像大小，用法如下：

     img {
         max-width: 100%;
         max-height: 100%;
     }

这两个属性的意思是设置图像最大高度和最大宽度为100%，这样能够避免过大的图像撑开包含框，同时又能够让图像尽可能大的显示。

5.5.2 定义图像边框

使用<img>标签的border属性可以设置图像边框粗细，当设置为0时，则能够清除边框。在标准设计中已不建议使用，推荐使用CSS的border属性定义图像边框样式。下面分别讲解边框样式、颜色和粗细的设置方法。

1．边框样式

CSS的border-style属性定义元素的边框样式，这种边框样式包括虚线框和实线框两种。该属性的用法如下：

     border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

该属性取值众多，说明如表5.1所示。

表5.1 边框样式类型

常用边框样式包括solid（实线）、dotted（点）和dashed（虚线）。dotted（点）和dashed（虚线）这两种样式效果略有不同，同时在不同浏览器中的解析效果也略有差异。

当单独定义对象某边边框样式，可以使用单边边框属性：border-top-style（顶部边框样式）、border-right-style（右侧边框样式）、border-bottom-style（底部边框样式）和border-left-style（左侧边框样式）。

下面示例演示了如何为网页插图设计边框样式。

【操作步骤】

第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。

第2步，在页面中把光标置于插图位置，选择【插入】｜【图像】｜【图像】命令，插入images/pic.png图像文件，如图5.30所示。

图5.30 插入图像

第3步，选择【窗口】｜【CSS设计器】命令，打开【CSS设计器】面板，依次执行下面操作，详细提示如图5.31所示。

图5.31 定义图像边框样式

（1）在【源】标题右侧单击按钮，在弹出的下拉菜单中选择【在页面中定义】选项，设计网页内部样式表。

（2）在【选择器】标题右侧单击按钮，新增一个选择器，自动命名为“#apDiv1 img”。

（3）在【属性】列表框顶部单击【边框】按钮，切换到边框样式列表中，然后找到border-color属性，单击右侧属性值列，输入颜色值为#FFC1B2；再找到border-width属性，设置值为3px；找到border-style属性，单击右侧属性值列，从弹出的值列表中选择double。

第4步，按Ctrl+S快捷键，保存网页，再按F12键在浏览器中预览，演示效果如图5.32所示。

图5.32 双边框图像样式效果

【拓展】

双线边框的宽度由两条单线及其间隔空隙的宽度组成，即border-width属性值。但是双线框的值分配也会存在一些矛盾，无法做到平均分配。例如，如果边框宽度为3px，则两条单线与其间空隙分别为1px；如果边框宽度为4px，则外侧单线为2px，内侧和中间空隙分别为1px；如果边框宽度为5px，则两条单线宽度为2px，中间空隙为1px，其他取值依此类推。

2．边框颜色和宽度

CSS的border-color属性定义边框的颜色，颜色取值可以是任何有效的颜色表示法。使用CSS的border-width属性可以定义边框的粗细，取值可以是任何长度单位，但是不能取负值。

提示：如果定义单边边框的颜色，可以使用这些属性：border-top-color（顶部边框颜色）、border-right-color（右侧边框颜色）、border-bottom-color（底部边框颜色）和border-left-color（左侧边框颜色）。

如果定义单边边框的宽度，可以使用这些属性：border-top-width（顶部边框宽度）、border-right-width（右侧边框宽度）、border-bottom-width（底部边框宽度）和border-left-width（左侧边框宽度）。

当元素的边框样式为none时，所定义的边框颜色和边框宽度都会无效。在默认状态下，元素的边框样式为none，而元素的边框宽度默认为2px~3px。

下面示例演示如何利用不同边框颜色设计立体边框图像效果。

【操作步骤】

第1步，启动Dreamweaver CC，新建网页，保存为test.html，在<body>内使用<img>标签插入一幅图像。

     <img src="images/1.jpg" />

第2步，选中插入的图像，在【CSS设计器】面板中设计图像边框宽度为80px，实线样式，然后分别设计各边边框颜色：顶边颜色为red，右边颜色为blue，底边颜色为green，左边颜色为yellow。

第3步，按Ctrl+S快捷键，保存网页，再按F12键在浏览器中预览，演示效果如图5.33所示。

图5.33 定义各边边框颜色效果

提示：CSS为方便用户控制元素的边框样式，提供了众多属性，这些属性从不同方位和不同类型定义元素的边框。例如，使用border-style属性快速定义各边样式，使用border-color属性快速定义各边颜色，使用border-width属性快速定义各边宽度。这些属性在取值时，各边值的顺序是顶部、右侧、底部和左侧，各边值之间以空格进行分隔。

【拓展】

在默认状态下网页中的图像是不显示边框的，但当为图像定义超链接时会自动显示2px~3px宽的蓝色粗边框。因此，当为图像绑定链接时，一定在【CSS设计器】面板中为图像添加如下样式，清除粗边框效果。

选择器“a img”表示页面中所有被<a>标签包含的<img>标签，设计border-style属性值为none，即清除链接图像的边框样式。

5.5.3 设计半透明图像效果

使用CSS的opacity属性可以设计图像的半透明效果，该属性取值范围为0~1，数值越低透明度也就越高，0为完全透明，而1表示完全不透明。

下面示例演示了如何为网页插图设计透明效果。

【操作步骤】

第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。

第2步，在页面中把光标置于插图位置，选择【插入】｜【图像】｜【图像】命令，插入images/icon.png图像文件，如图5.34所示。

图5.34 插入图像

第3步，选择【窗口】｜【CSS设计器】命令，打开【CSS设计器】面板，依次执行下面操作，详细提示如图5.35所示。

图5.35 定义遮罩层样式

（1）在【源】标题右侧单击按钮，在弹出的下拉菜单中选择【在页面中定义】选项，设计网页内部样式表。

（2）在【选择器】标题右侧单击按钮，新增一个选择器，自动命名为“#apDiv1”。

（3）在【属性】列表框中分别设置背景样式为“background-color: #000;”，定义背景色为黑色；设置文本样式为“text-align: center;”，定义文本居中；设置布局样式为“padding-top: 190px;”，定义上边补白为190px，如图5.35所示。

第4步，在布局样式中定义不透明效果为“opacity: 0.6;”，设计遮罩层的不透明度为0.6，设置如图5.36所示。

图5.36 定义遮罩层的不透明效果

第5步，按Ctrl+S快捷键，保存网页，再按F12键在浏览器中预览，演示效果如图5.37所示。通过这种方式可以设计鼠标经过时，以半透明的遮罩层覆盖效果，以便要求浏览者单击查看大图。

图5.37 半透明度遮罩层样式效果

【拓展】

在CSS3以前的版本没有定义图像透明度的标准属性，不过各个主要浏览器都自定义了专有透明属性。简单说明如下。

IE浏览器使用CSS滤镜来定义透明度，用法如下：

     filter:alpha(opacity=0~100);

alpha()函数取值范围在0~100之间，数值越低透明度也就越高，0为完全透明，而100表示完全不透明。

Firefox浏览器定义了-moz-opacity私有属性，该属性可以设计透明效果，用法如下：

     -moz-opacity:0~1;

该属性取值范围为0~1，数值越低透明度也就越高，0为完全透明，而1表示完全不透明。

W3C在CSS3版本中增加了定义透明度的opacity属性，用法如下：

     opacity: 0~1;

由于早期的IE浏览器不支持标准属性，因此当需要定义图像透明度时，需要利用浏览器兼容性技术把这几个属性同时放在一个声明中，这样就可以实现在不同浏览器中都能够正确显示的效果。

5.5.4 设计图文混排版式

图文混排一般多用于网页正文内容部分或者新闻焦点部分，处理的方式也很简单，文字是围绕在图像的一侧，或者一边，或者四周。本案例的设计效果如图5.38所示。

图5.38 设计图文混排版式

图文混排版式一般情况下不是在页面设计过程中实现的，而是在后期网站发布后通过网站的新闻发布系统进行自动发布，这样的内容发布模式对于图像的大小、段落文本排版都是属于不可控的范围，因此要考虑到图与文不规则问题。

在设计时一般通过浮动设计图文混排是比较理想的方式，适当利用补白（padding）或者文字缩进（text-indent）的方式将图像与文字分开。

【操作步骤】

第1步，启动Dreamweaver CC，新建网页，保存为index.html，切换到【代码】视图，在<body>标签内输入如下结构代码。为了方便快速练习，用户也可以直接打开模板页面temp.html，另存为index.html。

整个结构包含在<div class="pic_news">新闻框中，新闻框中包含3部分，第一部分是新闻标题，由标题标签负责；第二部分是新闻图像，由<div class="pic">图像框负责控制；第三部分是新闻正文部分，由<p>标签负责管理。

第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义新闻框显示效果。

第3步，继续添加样式，设计新闻标题样式，其中包括三级标题，统一标题为居中显示对齐，一级标题字体大小为28px，二级标题字体大小为14px，三级标题字体大小为12px，同时三级标题取消默认的上下边界样式。

第4步，设计新闻图像框和图像样式，设计新闻图像框向左浮动，然后定义新闻图像大小固定，并适当拉开与环绕的文字之间的距离。

第5步，设计段落文本样式，主要包括段落文本的首行缩进和行高效果。

简单的几句CSS样式代码就能实现图文混排的页面效果。其中重点内容就是将图像设置浮动，float:left就是将图像向左浮动，那么如果设置float:right后又将会是怎么样的一个效果呢，用户可以修改代码并在浏览器中查看页面效果。

上一章目录下一章