5.网页交互

5.网页交互

①打开Dreamweaver软件（图5-37）。双击切片文件夹中以“ywh.html”命名的文件（图5-38）。打开文件后，会看到和原图一模一样的图片，不同的是该文件由多个切片组成（图5-39）。

图5-37

图5-38

图5-39

②编辑文字。本次网页页面的文字都有背景，所以在实现文字的交互性时，可将文字所在的区域作为背景图片插入，否则无法编辑文字。在PS保存切片时将文字隐藏，具体操作方法如下：

单击切片，将其删除，按照删除切片的尺寸重新定义图片所在表格的长和宽，单击鼠标右键，选择编辑标签浏览器特定的背景图像，单击“浏览”按钮（图5-40），找到切片文件夹中的images文件夹，选择相应图片，单击“确定”按钮即可作为背景图插入。

图5-40

编辑文字时，可单击编辑页面下方的“水平”和“垂直”两个按钮，分别选择“左对齐”和“顶端”。文字可直接在DW中编辑，也可从Word、记事本等处复制粘贴。在文字编辑时，如需要较多空格，可将输入法改成全角式或者同时按下“Ctrl+Shift+空格键”。按“Enter”键是段落换行，会在文本换行的同时在文本间增加一个空行。如果仅需要文本换行而不需要空行，则只需按住“Shift+Enter”键。设计者可根据需要使用两种方式调整换行和空行。

网页中文本的字号、字体、颜色都可以通过CSS样式表来设置。勾选菜单“窗口”，选择“CSS样式”选项，在打开的“CSS样式”面板中单击“新建CSS规则”图标。弹出“新建CSS规则”对话框（图5-41），将选择器类型设置为“类”，在名称文本框中以英文形式自定义名称，单击“确定”按钮。弹出如图5-42所示的对话框，可对字体的大小、形式、颜色、是否有下划线等进行设置，设置好后单击“确定”按钮。

图5-41(https://www.daowen.com)

图5-42

③热区链接（图5-43）。设计者在软件编辑界面左下角可找到如图5-44所示的图标，选择第一个长方形（也可任选），把需要链接的地方划出来，在如图5-45所示的位置选择链接页面即可。热区链接可以指定不规则的交互页面，也可以在一张大图上实现多个热区链接。

图5-43

图5-44

图5-45

④登录注册（图5-46）。文字可直接编辑，将注册字体设为“红色”，在CSS中编辑它的属性。具体方法是：选中注册字体，单击“CSS编辑规则”。　弹出对话框后，在选择或输入选择器名称下面输入英文的“.1”，进入下面的页面，可编辑字体属性，选择“12#”字，并将颜色改为“红色”，单击“确定”按钮，然后在编辑界面中将链接框部分链接到相应页面即可。

图5-46

⑤不需要编辑文字的切片部分可直接选中（图5-47），查看尺寸后删除，按刚刚删掉的切片尺寸将切片所在表格尺寸重新输入。确定表格位置与大小，选择界面菜单栏的插入图像，在images文件夹中找到相应切片，单击“确定”按钮即可。

图5-47