dreamweaver第3讲(编辑修改稿)

dreamweaver第3讲(编辑修改稿)内容摘要：

没有访问过的链接 – a:visited 访问过的链接 – a:hover 鼠标放在链接上的状态 – a:active 在链接上按下鼠标时的状态 • 要注意四种状态之间的区别，学会使用这种设置方法，可以你的网页具有更好的视觉效果。 2020/6/28 网页制作教程 17 • “ a:link” ：定义链接的常规状态。 最常使用，网页上至少要定义这种链接。 • “ a:visited” ：定义访问过的链接状态。 在阅读文章时，为了能够判断出已经访问过的链接，需要设置。 多用于以内容为主的网站，讲究视觉效果的网站一般不用。 • “ a:hover” ：用于产生动态的视觉效果。 鼠标放在链接上，链接状态会改变。 一般设置较为醒目的颜色，如红色，可以产生极好的视觉效果。 • “ a:active” ：用于表现鼠标按下时的状态，很少使用。 • 如果没有特别的需要，只需定义 “ a:link” 和“ a:hover” 的状态，其它不用。 各种链接状态的用途 2020/6/28 网页制作教程 18 新建 CSS样式 1. 点击 “ CSS样式 ” 面板右下角的 “ 新建 CSS样式 ” 按钮。 2. 在“类型”中选择“使用 CSS选择器”，选择定义在“仅对该文档”。 如果需要保存成 CSS文件，选择第一项。 2020/6/28 网页制作教程 19 3. 点击 “ 选择器 ”旁边的下拉按钮，弹出各种状态的选项。 4. 选择“ a:link” ，单击“确定”按钮，设置链接的常规状态效果。 2020/6/28 网页制作教程 20 • 定义字体为默认字体，大小为 12像素，修饰选择 “ 无 ” ，可以去掉下划线，行高为 20像素，颜色为 333333灰色，以区别文本默认的黑色。 2020/6/28 网页制作教程 21 • 其它状态的设置方法相同，可以选择不同的字体、字号和颜色，可以达到很好的视觉效果。 • 最后按 F12预览一下，看看设置的效果。 2020/6/28 网页制作教程 22 创建图片超级链接 • 插入一张图片，单击将其选中； • 单击 “ 属性 ” 面板中的 “ 链接 ” 文本框后面的 “ 文件夹 ” 图标选择目标文件，操作方法同文本超级链接。 • 通过缩略图片打开一张大图片的方法： – 先用图片处理软件（ Fireworks）将一张图片处理成两张大小不同的图片（演示操作方法）； – 插入小图片，并使其超级链接至大图片文件，选择图片的显示方式为 “ _blank” ； • 查看一下对应的 HTML代码。 2020/6/28 网页制作教程 23 创建图像的热点链接 • 一个图像可以分配多个 URL，即给图像分成多个区域，单击不同的区域链接到不同的目标位置，这就是热点链接。 • 热点：是图像上被赋予一个超级链接属性的不可见区域，在浏览器中单击该区域后，可以链接到目标位置。 • 通常在具有网站地图等性质的网站经常使用。 • 创建方法： – 选择一张比较适合创建热点的图像，将它划分成不同的热点区域，使浏览者可以清楚的区分不同的区域。 – 在 “ 属性 ” 面板上单击左下角。