网页可视化效果制作解读.pptVIP

网页制作常用技巧 本章主要介绍网页技术方面的一些知识，网页制作的小窍门，网页制作的一些技巧，其目的只有一个，让你的网页制作水平更上一层楼，使你做的网页具有专业性。 1 实训项目一 网页可视化效果制作 1.1 实训目的与要求 通过本项目的实训和练习，要求学生能借助CSS样式的强大功能，来制作多彩的文字链接，利用相关网页文档背景的Background样式来设置背景图像不会重复出现而是固定在一个特定位置上，以此来丰富网页的视觉效果。 1.2 实训预备知识 文字链接是网页中最常见的页面元素，我们已在前面的章节中学习过创建超级链接的方法。但一般来说，在文本建立链接之后，文字就会出现带下划线的效果，这种一成不变的外观很多朋友都想改变它，以符合页面的整体效果，我们可以利用样式表来实现改变，并且还可以实现更加多彩的文字链接效果。 为网页添加背景图像可以增加网页的视觉效果，在Dreamweaver MX 2004中一般通过页面属性就可以指定背景图像，但是通过这种方式来指定的背景图像，将会是图片平铺在整个页面中的。要想利用一张图片来指定背景图像，我们可以利用样式表来实现，而且可以把图像固定在指定位置上。 6.1.3 实训步骤 实训1：改变链接格式，制作多彩链接 (1) 先创建一个基本的链接样式，采用默认蓝色，下划线，文字也很大，如图6.1所示。 (2) 按Shift+F11键打开CSS样式面板，单击新建CSS样式图标，如图6.2所示。 (3) 弹出“新建CSS样式”对话框之后，将“选择器类型”选项设置为“高级(ID、上下文选择器等)”，“定义在”选项设置为“仅对该文档”，如图6.3所示。 (4) 单击“选择器”旁边的下拉按钮，弹出各种状态的锚标签，如图6.4所示。 (5) 选择“a:link”标签，如图6.5所示。a:link是指没有接触过的链接，a:link表现的是链接的常规状态。 (6) 单击“确定”按钮，出现样式定义对话框，定义字体为“宋体”，修饰选择“无”，就可以去掉下划线，行高为20像素，颜色为#999999灰色，以和文本默认的黑色有差别，如图6.6所示。 (7) 单击“确定”按钮后可以看到定义“a:link”标签样式后的网页，如图6.7所示。 (8) 然后选择a:hover标签，如图6.8所示。a:hover是指鼠标放在链接上的状态。 (9) 单击“确定”按钮，出现样式定义对话框，定义字体为“宋体”，大小为“12”，行高为20像素，颜色为#FF0000红色，如图6.9所示。 (10) 单击“确定”按钮，按F12键，在浏览器中当鼠标放在链接上面，链接变成红色，如图6.10所示。 (11) 接下来选择“a:active”标签，如图6.11所示，a:active是指在链接上按下鼠标时的状态。 (12) 单击“确定”按钮，定义字体为“宋体”，大小为“24”，行高为20像素，颜色为#0066CC，如图6.12所示。 (16) 单击“确定”按钮，按F12键，在浏览器中当鼠标离开链接后，链接颜色就变成黑色。跟旁边灰色的链接还是有细微差别的，如图6.16所示。 实训2：固定网页背景图像 为网页添加背景图像可以增加网页的视觉效果，在Dreamweaver MX 2004中，一般通过页面属性就可以指定背景图像，其操作步骤如下。 (1) 新建网页文档，保存。 (2) 用一般的方法设置网页的背景图像，单击菜单栏中的“修改”→“页面属性”命令，则弹出“页面属性”对话框，单击“背景图像”选项右侧的“浏览”按钮，如图6.17所示。  (3) 弹出“选择图像源文件”对话框，选择合适的图像文件，单击“确定”按钮，如图6.18所示，关闭对话框。此时，重新出现“页面属性”对话框， 如图6.19所示，确认选定的背景图像，然后单击“确定”按钮，完成背景图像的设置。 此时我们看到的背景如图6.20所示，是图片平铺在整个页面中的，在“页面属性”对话框中指定背景图像只能获得这样的效果。要想利用一张图片来指定背景图像，就可以利用样式表来实现这一功能，而且可以把图像固定在指定的位置。 下面开始制作在画面中央只显示一张图片的背景图像。 (1) 先在刚才的基础之上，按Ctrl+Z键取消背景设置的操作。然后，打开CSS样式面板，然后单击“新建CSS样式”图标。 (2) 弹出“新建CSS样式”对话框，在“名称”中输入“.back”，然后单击“确定”按钮，如图6.21所示。 (3) 出现“样式定义”的对话框，在“分类”列表框中单击“背景”，然后单击“背景图像”选项右侧的“浏览”按钮，如图6.22所示。 (5) 然后还要将背景图像以外的其他部分的背景颜色选定为与背景图像边框一致的颜色，所以要设置“背景颜色”的值，如图6.24所示。 (6) 为了不让背景图像平铺显示，要把“重复