15.5  制作页面头部

经过上面的准备，可以正式制作网页了，要注意在制作过程中的一些技巧。

15.5.1  从外部引入CSS样式表

（1）打开CSS控制面板，单击按钮或在空白处右击，在弹出的菜单中选择【附加样式表】选项。

（2）弹出【链接外部样式表】对话框，选择样式表文件，选择【添加为】的选项为【链接】。

（3）单击【确定】按钮，完成从外部引入CSS样式表的设置，如图15.12所示。

图15.12  外部引入CSS样式表

15.5.2  建立头部表格

根据设计的界面效果，在文档视图中建立头部表格。操作步骤如下：

（1）新建一个宽为739px的2行2列的表格，详细属性设置如图15.13所示。

图15.13   表格属性

（2）合并第1列中的两个单元格，然后插入图片1-1.jpg。

（3）设置第2列的两个单元格高度分别为30px和32px，如图15.14所示。

图15.14  设置单元格高度

（4）将第2列中的上下两个单元格分别插入表格。

（5）在第2列第1行中插入一个宽为60%的1行3列的表格，设置居右对齐，并在3个单元格中分别输入文本【设为首页】、【加为收藏】、【与我联系】。

（6）将“设为首页”设置为空链接#，再切换到代码视图。输入设为首页的代码如下：

<td>·<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.yushukun
.com');">设为首页</a></td>

（7）设置“加为收藏”代码：同样设置空链接，切换到代码视图，输入加为收藏的代码如下：

<td>·<a href="#" onClick="window.external.addFavorite('http://www.yushukun.com','余淑坤医生的个人网页')">加为收藏</a></td>

（8）将“与我联系”设为邮件链接，链接到该主页的企业邮箱yushukun@yushukun.com，代码如下：

<td>·<a href="mailto:yushukun@yushukun.com">与我联系</a></td>

（9）设置好的效果如图15.15所示。

图15.15  设置表格内容

15.5.3  制作导航条

继续上面的操作。

（1）在第2列第2行插入1个宽度为100%的1行3列的表格，表格属性如图15.16所示。

图15.16  设置表格属性

注意：让填充和间距均为0，否则在插入图像后会有间隙。

（2）将表格设置成导航条的背景，在第1列和第3列中插入两个小图片作为背景的边缘部分，第2列用背景图片填充，如图15.17所示。

图15.17  设置导航条背景表格

注意：在单元格中插入小图时，单元格的宽度要与小图片的宽度或高度一致，且宽度必须设置。

（3）表格代码如下：

1

<table width="100%" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td width="4"><img src="images/cai_left.gif" width="4" height="32" /></td>

        <td background="images/cai_bg.gif">&nbsp;</td>

        <td width="5"><img src="images/cai_right.gif" width="5" height="32" /></td>

      </tr>

</table>

（4）在表格第2列中再插入一个宽为100%的表格，按栏目分配表格的列，输入导航栏目名称，并在两个名称之间插入一个细长图片，用于分隔各栏目，如图15.18所示。

图15.18  输入导航栏名称

（4）为刚插入的对象设置链接（暂时先设置为空链接#），并设置合适的CSS样式，如图15.19所示。

图15.19  设置对象CSS样式

注意：因为不同样式的链接不同，在设置时需要class="white_b"样式设置在<a>链接内，代码如下：

<table width="100%" border="0" cellspacing="0" cellpadding="0">

          <tr>

            <td align="center"><a href="#" class="white_b">网站首页</a></td>

            <td width="2"><img src="images/cai_tiao.gif" width="2" height="13" /></td>

            <td align="center"><a href="#" class="white_b">个人介绍</a></td>

            <td width="2"><img src="images/cai_tiao.gif" width="2" height="13" /></td>

            <td align="center"><a href="#" class="white_b">临床实践</a></td>

            <td width="2"><img src="images/cai_tiao.gif" width="2" height="13" /></td>

            <td align="center"><a href="#" class="white_b">肿瘤知识</a></td>

            <td width="2"><img src="images/cai_tiao.gif" width="2" height="13" /></td>

            <td align="center"><a href="#" class="white_b">生活感悟</a></td>

            <td width="2"><img src="images/cai_tiao.gif" width="2" height="13" /></td>

            <td align="center"><a href="#" target="_blank" class="white_b">健康问答</a></td>

          </tr>

        </table>

15.5.4  制作Banner部分

根据界面的设计，在头部表格之下是一个Banner动画。制作步骤如下：

（1）首先建立一个宽度为739px的3行1列的表格，间距和填充设为0，表格属性如图15.20所示。

图15.20  设置表格属性

（2）设置第1行高度为4，用背景图填充。代码如下：

<tr>

<td height="4" background="images/1-2.gif"></td>

</tr>

（3）在第2行插入设计好的Banner图片，然后根据插入图片的大小，设置所在单元格的高度和宽度，将其设置为单元格背景，然后将插入单元格的图片删除。

技巧：这样做的目的是为了符合余医生的要求在单元格中插入一个透明的飞鸟动画。

（4）此时界面如图15.21所示。

（5）在设计好Banner背景的单元格上右击，在弹出的快捷菜单中选择【插入】→【多媒体】→【Flash】，插入事先做好的动画文件，如图15.22所示。

   

图15.21  设置背景图片后的界面                            图15.22  插入Flash动画

（6）此时在浏览器中看到的动画效果如图15.23所示。

图15.23  动画的效果显示

（7）可见这个效果并不是我们想要的结果，需要将背景显示出来，也就是设置当前的动画为透明。选中刚插入的动画，切换到代码视图，插入如下代码：

<param name="wmode" value="transparent">

上行代码，可以让当前动画变为透明，显示出单元格中设置好的背景图片。这样，可以设置好背景图后直接引入动画，适合比较简单的应用，而且现在网络上也有很多透明的Flash动画可供下载。插入好的动画代码如下：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia
.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="739" height="220">

    <param name="movie" value="images/feiniao1.swf" />

    <param name="quality" value="high" />

         <param name="wmode" value="transparent">

<embed src="images/feiniao1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="739" height="220"></embed>

  </object>

（8）第三行同样设置高度为4，用背景图填充。代码如下：

<tr>

<td colspan="2" background="images/1_07.gif" height="4"></td>

</tr>

通过以上步骤，头部的表格制作完成，效果如图15.24所示。

图15.24  头部表格的显示效果