DW中的图片和超链接.ppt

网页设计与制作入门网页设计与制作入门•名为《冰河世纪》的3D街道艺术作品由德国街头艺术家在爱尔兰敦拉奥海里创作成功画面逼真，犹如身临其境——冰河在行人的脚下融化，顿成万丈深渊；脚下的火山喷发，人们伸手相助……作品耗时5天，占地250平方米      这组艺术杰作是由德国著名的绘画艺术家艾德加·穆勒完成的，这些立体画在运用普通色彩的基础上，又添加了一些艺术灯光，使得整个视觉效果极具冲击力穆勒说，普通绘画和摄影作品，包括电脑制作的三维动画只是运用了人眼对光影、明暗、虚实的感觉得到立体的感觉，而没有利用双眼的立体视觉，一只眼看和两只眼看都是一样的而充分利用双眼立体视觉的立体画，将使你看到一个无比精彩的世界 色彩的构成色彩的构成 色彩一般分为无彩色和有彩色两大类无彩色是指白、灰、黑等不带颜色的色彩，即反射白光的色彩　　有彩色是指红、黄、蓝、绿等带有颜色的色彩色彩的表现手法色彩的表现手法 •人的色感可用色彩三属性——色调、亮度、饱和度表示不过三属性毫无差异的同一色彩会因所处位置、肯景物不同而给人截然相反的印象以蓝色编织物和蓝色木地板为例，假定它们的三属性相同，但在观赏者的眼中，编织物的色彩与木地板的色彩毫无共同之处。

这种现象称为“色彩的表现形式” 色彩给人的心理感受色彩给人的心理感受 •明亮、鲜艳的色彩，会使人感到华丽，而灰暗、陈旧的色彩会使人感到质朴，这就是色彩的华丽感和质朴感 这主要是由于色彩的纯度和色相决定的通常，高纯度色显得华丽，低纯度色显得质朴色彩的冷暖色彩的冷暖•色彩的冷暖感主要是由色彩的色相决定的 给人“暖感”最强的颜色是橘红，在色立体的位置被定为暖极，蓝色为冷极其他颜色的冷暖感则以他们到冷极和暖极的距离来判断，靠近冷极的叫冷色，靠近暖极的叫暖色，居中的是中性色，还有一种是无彩色色彩的份量感色彩的份量感 •白色的云给人漂浮的感觉，而黑色的金属自然给人感觉沉重了•色彩的份量感主要是由它们的明度决定的，一般来说，高明度色使人感到轻松，而低明色度使人感到沉重•一般情况下，暖色和高明度色会有靠前和胀大的作用，相反，冷色和低明色有后退和缩小的作用 网页色彩的搭配网页色彩的搭配 1．用一种色彩这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感 　　 2．用两种色彩先选定一种色彩，然后选择它的对比色 　　 3．用一个色系简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

3.不要将所有颜色都用到，尽量控制在三~五种色彩以内 　　4.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容 白色的配色白色的配色•白色作为单色时，能够给人一种清洁、无效或者冰冷、冷漠的感觉•白色与黑色组合起来，则创造出一种尖锐的效果；白色与粉色组合起来，可以更加突出粉色的温柔感；白色与明快的蓝色组合起来，有一种清新、清爽的感觉红色的配色红色的配色•红色作为单色时，给人热情、兴奋的印象•红色与黄色的搭配，能够营造出一种明快、快乐的气氛；•红色与粉色组合起来，可以凸显出女性的温柔；•红色与黑色搭配，则可以突出红色的强大网页图像的格式及来源网页图像的格式及来源•GIF格式 •JPEG格式 •PNG格式 •网页图像来源 GIF格式格式•GIF全称为“Graphics Interchange Format”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别它最多支持256种颜色，可以使图像变得容量相当小GIF图像可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画 JPEG格式格式 •JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。

常用的常用的GIF与与JPEG文件格式的区别文件格式的区别文件格式 说明 JPEG 真彩色图片（多于256色），对于高颜色数的照片最好使用JPEG文件格式 GIF 256色或者更少的图像，低颜色数下GIF比JPEG装载的更快 PNG格式格式 • PNG全称为“Portable Network Graphics”，意为便携网络图像，它是逐渐流行的网络图像格式PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图 使用网页图像的要点使用网页图像的要点•确保文件较小•控制图像的数量和质量•合理使用动画各类超链接各类超链接•按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接 •如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等创建文本超级链接创建文本超级链接 •文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页 锚记链接锚记链接•锚点即为一个文档中的某一个特定的位置的标记，通过创建锚点，可以某个超级链接链接到文档的某个锚点，方便文档之间的跳转。

•创建到锚点的链接的过程分为两步：创建锚点、创建到该锚点的链接创建命名锚记创建命名锚记 •在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上 链接命名锚记链接命名锚记 • 创建好锚记之后，必须创建对应的超级链接源端点 若需要链接到父目录中的文件的某个链接，则使用相对路径就可实现在文本框中输入“../文件名.htm#”锚记名称若需链接到某个外部服务器目录下的文件中的某个锚记，则使用绝对路径注意注意•创建到锚点的链接，会在锚点名称前加一个#号，表示后面为一个锚点的名称•在#和锚记名称之间不要留有空格，否则链接会失败•在不同文件夹中为锚记创建链接时，其文件名后缀必定为.htm•符号#必须是半角符号，而不能为全角符号创建空链接创建空链接 •要想对文本设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效•为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可建立空超级链接的目的只是为了应用行为，其他情况下不必建立。

创建电子邮件超级链接创建电子邮件超级链接 •电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系 创建图像热点超级链接创建图像热点超级链接 •要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到目的，但这时整幅图片就不能对齐，利用Dreamweaver 的图像热点超级链接功能就能避免这个问题 目标文件载入方式目标文件载入方式•_blank：表示将链接文件在新的浏览器窗口中打开；•_parent：表示将链接文件在上级框架集或包含该链接的窗口中打开；•_self：表示将链接文件载入到相同的框架集或窗口中打开；•_top：表示将链接文件载入到整个浏览器窗口中打开，将删除所有框架。