网页设计第二讲

复习上一节课的内容 如何建立站点 如何新建站点文件和文件夹 插入对象 文本 图像 鼠标轮回图像 Flash文本 Flash动画 Flash按钮 设置文本的属性 设置图像的属性 设置标题 2020 4 6 网页制作教程 1 设置页面属性 利用菜单命令 修改 页面属性 命令 在页面的空白处右击选择 页面属性 命令 设置背景设置标题设置上下左右边界 2020 4 6 网页制作教程 2 3 3创建超级链接 网上所有的内容都是由URL进行定位 然后通过超级链接连接起来的 浏览网页 实际上就是从一个页面跳转到另一个页面 从一个位置跳转到另一个位置 从一个网站跳转到另一个网站的过程 创建超级链接的对象是文本或者图像 2020 4 6 网页制作教程 3 2020 4 6 网页制作教程 4 超级链接的组成 超级链接主要由两部分组成 超级链接源端点和超级链接目标端点 源端点 通常采用文本或图像目标端点 是用户单击超级链接时打开的网页文件或其它文件 通常用URL地址定义 例如 源端点是文本 目标端点是河南大学网站的首页文件 相对路径和绝对路径 如果在链接中使用完整的URL地址 这种链接路径就是绝对路径 绝对路径的特点是同链接的源站点无关 采用绝对路径的优点在于 只要网站的地址不变 无论文档在站点中如何移动 都可以正常实现跳转而不发生错误 另外 如果希望链接其它网站上的内容 就必须使用绝对路径 采用绝对路径的缺点 不用于链接的测试 2020 4 6 网页制作教程 5 相对路径 为了避免使用绝对路径产生的问题 对于本地站点内的链接 使用相对路径是一个很好的方法 相对路径可以表述源端点与目标端点之间的相对位置 它与源端点的位置密切相关 如果链接的源端点与目标端点在同一个目录下 则只需在链接路径中指明目标端点的文档名即可 优点在于 如果站点的结构和文档的位置不变 那么链接就不会出错 缺点在于 如果修改了站点的结构或移动了文档 则文档中的链接关系就会失效 2020 4 6 网页制作教程 6 2020 4 6 网页制作教程 7 表示文件路径的方法 用URL地址表示文件路径时 我们可以采用绝对路径或相对路径来表示 绝对路径 如果在链接中使用完整的URL地址 这种路径就被称为绝对路径 如 2020 4 6 网页制作教程 8 相对路径 相对路径 指的是链接中源端点同目标端点之间的相互位置 它同源端点的位置关系密切 相对路径的好处 表示方法简单 如果站点的结构不变 那么链接就不会出错 不需要联网就可以测试链接 相对路径的缺点 如果链接的源端点或目标端点的位置发生了变化 则文档中的链接关系就会失效 相对路径是最适合用于本地链接的路径类型 内部链接一般都使用相对路径表示 2020 4 6 网页制作教程 9 相对路径的表示方法 如果链接中的源端点和目标端点位于同一个目录下 则只需输入目标端点的文件名称即可 如 login htm 如果目标端点位于子目录中 需输入目录名称和文件名 如 xiangce index htm 如果目标端点不在当前目录中 要用 表示出当前目录的上层目录 再转入其它目录中 如 image 001 gif 2020 4 6 网页制作教程 10 超级链接的类型 超级链接可以在一个Web网站中的各网页之间链接 而且可以将全球任何位置的Web网站中的网页甚至其它类型的文件联系在一起 根据超级链接的目标不同 超级链接有这样几类 2020 4 6 网页制作教程 11 一个文本超级链接只能链接到一个URL地址 而一个图像超级链接可以用以下两种方式之一来分配目标URL地址 整个图像分配一个URL 当鼠标变成手形时 单击即可链接到目标位置 一个图像也可以分配多个URL 即给图像分配多个热点区域 单击某个特定区域可以链接到不同的目标位置 又称为热点链接 超级链接的目标 2020 4 6 网页制作教程 12 常用的链接方式 文本链接图像链接锚点链接电子邮件链接设置超级链接的提示信息和访问键空链接和带脚本的链接导航菜单热点链接网站相册 2020 4 6 网页制作教程 13 创建文本超级链接 用鼠标选中要作为链接的文本或图形对象 在文档窗口下的 属性面板 中设置链接的相关属性 各个选项功能如下 2020 4 6 网页制作教程 14 超级链接的设置说明 链接 文本框 用于输入要链接的URL地址 如文件路径 web地址 电子邮件地址 文件指向 图标 拖动 文件指向 图标指到 站点 面板中的文件上 即可创建本地链接 内部链接 浏览文件 按钮 打开 浏览 窗口 选择你要链接的文件 超级链接的目标属性 用来确定目标文档在哪个位置打开 取值有 blank表明在新窗口中展开链接指向的页面 self在当前文档的框架集中展开页面 parent在当前文档的父级框架集中展开页面 top在链接所在的完整窗口中展开页面 2020 4 6 网页制作教程 15 创建文本链接 文本超级链接是最常用的 创建文本链接的方法有两种 选中要做为链接的文字 使用 属性 面板设置链接 将插入点放在要插入链接的位置 点击 常用 面板上的 超级链接 按钮 2020 4 6 网页制作教程 16 当鼠标指向链接会出现提示信息 访问键是指按键盘上的快捷键选择链接 例如 在实例中按Alt D键会选中该链接 2020 4 6 网页制作教程 17 注意事项 需要注意的是 目标文件的路径表示方法一定要正确才能实现链接 如果创建内部链接 都要用相对路径表示 而且一般都使用选择文件的方法 不需要自己输入 如果创建外部链接 需要输入绝对路径 即完整的URL地址 如Http 通常情况下 在一个网站中 第一级链接或者导航链接选择在当前窗口打开链接 第二级链接和友情链接选择 blank 2020 4 6 网页制作教程 18 定义字体为默认字体 大小为12像素 修饰选择 无 可以去掉下划线 行高为20像素 颜色为 333333灰色 以区别文本默认的黑色 2020 4 6 网页制作教程 19 创建图片超级链接 插入一张图片 单击将其选中 单击 属性 面板中的 链接 文本框后面的 文件夹 图标选择目标文件 操作方法同文本超级链接 通过缩略图片打开一张大图片的方法 先用图片处理软件 Fireworks 将一张图片处理成两张大小不同的图片 演示操作方法 插入小图片 并使其超级链接至大图片文件 选择图片的显示方式为 blank 查看一下对应的HTML代码 2020 4 6 网页制作教程 20 创建图像的热点链接 一个图像可以分配多个URL 即给图像分成多个区域 单击不同的区域链接到不同的目标位置 这就是热点链接 热点 是图像上被赋予一个超级链接属性的不可见区域 在浏览器中单击该区域后 可以链接到目标位置 通常在具有网站地图等性质的网站经常使用 创建方法 选择一张比较适合创建热点的图像 将它划分成不同的热点区域 使浏览者可以清楚的区分不同的区域 在 属性 面板上单击左下角的热点按钮选择热点区域 然后设置链接目标即可 注意必须首先创建目标文件 也可以输入提示性文字 2020 4 6 网页制作教程 21 超级链接到其它文件 如果链接的文件是HTML文件 GIF或JPG的图片则可以直接显示在浏览器中 如果是浏览器不能直接识别的文件 如 exe的可执行文件等 通常会打开对话框提示如何处理 在Internet中通常可以利用这种特性为用户提供文件下载功能 2020 4 6 网页制作教程 22 锚点链接 锚点链接主要用在比较长的文档中 如读书网站 当一个网页的文字较多时 浏览者在浏览页面时 就需要拖动滚动条 很不方便 我们可以在网页内建立多个标记点 将超链接指定到这些标记点上 能够使浏览者快速找到要阅读的内容 就象目录一样 我们将这些标记点称为锚点 它类似于书签的功能 其特点是 超级链接的源端点和目标端点均在同一文档中 也可以链接到其它文档的指定位置 2020 4 6 网页制作教程 23 创建锚点 创建方法 把光标放在需要插入锚点的地方 单击 常用 面板上的 命名锚记 按钮 注意 命名锚记时 一个站点中的锚记名称是唯一的 而且必须使用英文 大小写要区分 还要含义明确 便于区别 2020 4 6 网页制作教程 24 设置锚点链接 选中要作为链接的文字 如果要链接的目标位于当前文档 则可以在属性面板的 链接 列表框中输入一个 号 然后输入链接的锚名称 如 a 如果要链接的目标位于其它文档中 则需要在 a前面加上该文档的URL地址和名称 如 read htm a 另外 可以在阅读文档的末尾加上 返回顶部 的文字 并在 链接 文本框中输入 top 即可返回页面顶端 2020 4 6 网页制作教程 25 也可以选中要创建链接的文本 点击 指向文件 图标 并将它拖动到需要链接的锚记处 2020 4 6 网页制作教程 26 创建电子邮件链接 选取需要创建链接的文本或者图像 点击 常用 面板中的 电子邮件链接 按钮 输入邮件地址 或在属性面板中的链接栏中输入mailto username hostname 2020 4 6 网页制作教程 27 使用空链接 空链接 就是没有指派目标端点的链接 可以使文本显示出带有链接的形式 但并不链接到其它目标 空链接的作用 可以激活文档中链接对应的对象或文本 一旦对象被激活 就可以为之添加一个行为 behavior 实现当鼠标指针移动到链接上时的动作 关于行为的使用我们将在第8章动态网页技术中讲解 要创建空链接 可以按如下方法 选中要设置链接的文本 图像或其它对象 在属性面板的 链接 下拉列表框中输入一个 号即可 2020 4 6 网页制作教程 28 给链接加上提示 在文档窗口中选取文本 图象等对象 在 属性面板 上的 链接 栏中键入javascript 其后紧接JavaScript代码或函数调用 例如 输入javascript alert 哈哈你上当了 创建一个链接 点击链接后就会出现一个警告框 2020 4 6 网页制作教程 29 用CSS样式设置链接样式 默认情况下 添加过超级链接的文本自动变成蓝色 并加上了下划线 链接被访问过后 自动变为紫色 可以用CSS样式定义链接的各种状态 这是经常使用的链接样式设置的方法 在新建CSS对话框中选择 高级 ID或类选择器等 鼠标链接共有四种状态 a link没有访问过的链接a visited访问过的链接a hover鼠标放在链接上的状态a active在链接上按下鼠标时的状态要注意四种状态之间的区别 学会使用这种设置方法 可以你的网页具有更好的视觉效果 2020 4 6 网页制作教程 30 a link 定义链接的常规状态 最常使用 网页上至少要定义这种链接 a visited 定义访问过的链接状态 在阅读文章时 为了能够判断出已经访问过的链接 需要设置 多用于以内容为主的网站 讲究视觉效果的网站一般不用 a hover 用于产生动态的视觉效果 鼠标放在链接上 链接状态会改变 一般设置较为醒目的颜色 如红色 可以产生极好的视觉效果 a active 用于表现鼠标按下时的状态 很少使用 如果没有特别的需要 只需定义 a link 和 a hover 的状态 其它不用 各种链接状态的用途 2020 4 6 网页制作教程 31 新建CSS样式 1 点击 CSS样式 面板右下角的 新建CSS样式 按钮 2 在 类型 中选择 使用CSS选择器 选择定义在 仅对该文档 如果需要保存成CSS文件 选择第一项 2020 4 6 网页制作教程 32 3 点击 选择器 旁边的下拉按钮 弹出各种状态的选项 4 选择 a link 单击 确定 按钮 设置链接的常规状态效果 2020 4 6 网页制作教程 33 其它状态的设置方法相同 可以选择不同的字体 字号和颜色 可以达到很好的视觉效果 最后按F12预览一下 看看设置的效果 创建CSS样式 新建CSS样式四种方法 使用菜单命令 文本 CSS样式 新建 利用CSS样式面板上的新建按钮 利用CSS样式面板上的快捷菜单命令利用右击快捷键 2020 4 6 网页制作教程 34 类CSS 必须以 开头 通过设立样式表可以统一控制HTML中各标志的显示属性 它将对布局 字体 颜色 背景和其它图文效果实现更加精确的控制 只通过修改一个文件就可以改变大量网页的外观和格式 设置不同颜色链接在文档中设置不同的段落字体样式类的使用方法 在标签上右击 选择 设置类 2020 4 6 网页制作教程 35 补充CSS滤镜的使用 如何设置各种滤镜属性Alpha滤镜命名为 Alpha参数Opacity 70 Style 2 其它项全部删除 Opacity不透明的程度 Style指定渐进的显示形状 0没有渐进 1直线渐进 2圆形渐进 3矩形辐射渐进 2020 4 6 网页制作教程 36 Blur滤镜 命名 Blur参数设置 Add 1 Direction 3 Strength 10 Add是否要在已经应用Blur滤镜上的HTML元件上显示原来的模糊方向 0表示不显示原对象 非0表示要显示原对象 Direction设置模糊方向 0向上 45右上90右 135右下 180下 225左下 270左 315左上 Strength指定模糊图像模糊的半径大小 默认是5 取值为自然数 2020 4 6 网页制作教程 37 Wave滤镜 命名 Wave参数设置 Add 0 Freq 8 LightStrength 10 Phase 0 strength 12 各参数的含义 Add表示是否已经使用了Wave滤镜的元件对象上显示原对象 0表示不显示 非0表示要显示原对象Freq设置波动的个数 LightStrength设置波浪效果的光照强度 Phase波浪的起始相角 从0到100的百分数值 25相当于90度 50相当于180度 Strength设置波浪摇摆的幅度 2020 4 6 网页制作教程 38 Shadow Glow Mask滤镜 使用方法一样 同学们可以自己设置试一下 先命名 设置参数Shadow color 808080 Direction 135 Glow color FF0000 Strength 2 Mask color 00FF00 2020 4 6 网页制作教程 39 管理CSS样式 编辑CS