网页可视化效果制作.ppt

《网页可视化效果制作.ppt》由会员上传分享，免费在线阅读，更多相关内容在PPT专区-天天文库。

1、网页制作常用技巧本章主要介绍网页技术方面的一些知识，网页制作的小窍门，网页制作的一些技巧，其目的只有一个，让你的网页制作水平更上一层楼，使你做的网页具有专业性。1实训项目一网页可视化效果制作1.1实训目的与要求通过本项目的实训和练习，要求学生能借助CSS样式的强大功能，来制作多彩的文字链接，利用相关网页文档背景的Background样式来设置背景图像不会重复出现而是固定在一个特定位置上，以此来丰富网页的视觉效果。1.2实训预备知识文字链接是网页中最常见的页面元素，我们已在前面的章节中学习过创建超级链接的方法。但一般来说，在文本建立链接之后，文字就会出现带下划线的效果

2、，这种一成不变的外观很多朋友都想改变它，以符合页面的整体效果，我们可以利用样式表来实现改变，并且还可以实现更加多彩的文字链接效果。为网页添加背景图像可以增加网页的视觉效果，在DreamweaverMX2004中一般通过页面属性就可以指定背景图像，但是通过这种方式来指定的背景图像，将会是图片平铺在整个页面中的。要想利用一张图片来指定背景图像，我们可以利用样式表来实现，而且可以把图像固定在指定位置上。6.1.3实训步骤实训1：改变链接格式，制作多彩链接(1)先创建一个基本的链接样式，采用默认蓝色，下划线，文字也很大，如图6.1所示。(2)按Shift+F11键打开CSS

3、样式面板，单击新建CSS样式图标，如图6.2所示。(3)弹出“新建CSS样式”对话框之后，将“选择器类型”选项设置为“高级(ID、上下文选择器等)”，“定义在”选项设置为“仅对该文档”，如图6.3所示。(4)单击“选择器”旁边的下拉按钮，弹出各种状态的锚标签，如图6.4所示。(5)选择“a:link”标签，如图6.5所示。a:link是指没有接触过的链接，a:link表现的是链接的常规状态。图6.1基本链接样式图6.2新建样式表图6.3样式表新建窗口图6.4查看各状态标签图6.5新建CSS样式(6)单击“确定”按钮，出现样式定义对话框，定义字体为“宋体”，修饰选择“

4、无”，就可以去掉下划线，行高为20像素，颜色为#999999灰色，以和文本默认的黑色有差别，如图6.6所示。(7)单击“确定”按钮后可以看到定义“a:link”标签样式后的网页，如图6.7所示。(8)然后选择a:hover标签，如图6.8所示。a:hover是指鼠标放在链接上的状态。图6.6a:link样式定义(9)单击“确定”按钮，出现样式定义对话框，定义字体为“宋体”，大小为“12”，行高为20像素，颜色为#FF0000红色，如图6.9所示。(10)单击“确定”按钮，按F12键，在浏览器中当鼠标放在链接上面，链接变成红色，如图6.10所示。(11)接下来选择“a

5、:active”标签，如图6.11所示，a:active是指在链接上按下鼠标时的状态。图6.7定义样式后的链接效果图6.8新建CSS样式图6.9a:hover样式定义图6.10定义样式后的链接效果图6.11新建CSS样式(12)单击“确定”按钮，定义字体为“宋体”，大小为“24”，行高为20像素，颜色为#0066CC，如图6.12所示。图6.12a:active样式定义(13)单击“确定”按钮，按F12键。在浏览器中当鼠标单击链接时，链接变成蓝色，如图6.13所示。(14)最后选择“a:visited”标签，如图6.14所示。a:visited是指访问过的链接。图6

6、.13定义样式后的链接效果图6.14新建CSS样式(15)单击“确定”按钮，定义字体为“宋体”，大小为“12”，行高为20像素，颜色为#000000黑色，如图6.15所示。图6.15a:visited样式定义(16)单击“确定”按钮，按F12键，在浏览器中当鼠标离开链接后，链接颜色就变成黑色。跟旁边灰色的链接还是有细微差别的，如图6.16所示。实训2：固定网页背景图像为网页添加背景图像可以增加网页的视觉效果，在DreamweaverMX2004中，一般通过页面属性就可以指定背景图像，其操作步骤如下。(1)新建网页文档，保存。(2)用一般的方法设置网页的背景图像，单击

7、菜单栏中的“修改”→“页面属性”命令，则弹出“页面属性”对话框，单击“背景图像”选项右侧的“浏览”按钮，如图6.17所示。(3)弹出“选择图像源文件”对话框，选择合适的图像文件，单击“确定”按钮，如图6.18所示，关闭对话框。此时，重新出现“页面属性”对话框，图6.16定义样式后的链接效果图6.17“页面属性”对话框如图6.19所示，确认选定的背景图像，然后单击“确定”按钮，完成背景图像的设置。图6.18“选择图像源文件”对话框图6.19确认背景图像此时我们看到的背景如图6.20所示，是图片平铺在整个页面中的，在“页面属性”对话框中指定背景图像只能获得这样的效果