Chapter3制作网页内容.ppt

网页设计与制作实用教程 （Dreamweaver+Flash+Photoshop） 2013 . 3 1 第3章 制作网页内容 l 文字和段落在网页中的应用 l 图像在网页中的应用 l 多媒体对象在网页中的应用 l 超级链接 文字、图像、动画、声音和视频是网页中常见的对象，它 们构成了网页的基本内容。Dreamweaver提供了功能强大的 可视化设计工具，可以对这些网页对象进行编辑和处理。 本章主要内容： 2 3.1 文字和段落在网页中的应用 文字是网页的主体，传达各种各样的信息，浏览者主要通 过文字了解网页的内容。本节介绍在网页中应用文字、设置 文字和段落格式的方法。 3.1.1 插入文字 3.1.2 设置文本格式 3.1.3 设置段落格式 3.1.4 设置文本样式 3.1.5 使用段落列表 3 3.1.1 插入文字 在网页中插入文字有3种方法：直接输入、粘贴剪贴板中的 文字、导入Word文档。 1直接通过键盘输入 2粘贴剪贴板中的文字 3导入Word文档 4 3.1.2 设置文本格式 1设置文本格式 默认情况下，Dreamweaver使用 CSS 设置文本格式。可以更 好地控制网页设计。Dreamweaver的格式设置命令会将规则嵌 入到当前文档中。若使用HTML标签而不是CSS，则必须更改 Dreamweaver的默认文本格式设置首选参数。方法如下。 编辑首选参数打开“首选参数”对话框 常规类别编辑选项，取消选中“使用CSS 而不是HTML标签 ”复选框。 5 3.1.2 设置文本格式 2设置文本字体 首次打开Dreamweaver CS3的字体列表，里面只有很少几种 汉字字体，需要用户自己添加。 选择需要改变字体的文本属性面板字体下拉列表编辑 字体列表在可用字体列表框中，选择需要的字体，将其添加 到左侧的列表中确定，在字体列表中即有所选的字体 6 3.1.2 设置文本格式 3设置文字大小 选中所需文字属性面板大小选择 右边的单位选择框，可设置像素(px)、点数(pt)、厘米(cm) 等9个单位选项。默认用像素为单位 也可在“大小”列表框中直接输入数字 7 3.1.2 设置文本格式 4设置文本颜色 选中文本，属性文本颜色调色板选择 或者用“系统颜色拾取器”，自己调配颜色 8 3.1.3 设置段落格式 段落分明，便于阅读，页面整洁、大方 1设置文本标题 HTML的标题标签是、.等 在设计视图中，通过“属性”面板设置 光标定位在要设置标题的段落 单击“属性”面板“格式”右侧的下三角按钮，在弹出的 列表框中选择 提示：取消设置好的标题格式，在“属性” 面板的“格式”列表框中选择“无” 9 3.1.3 设置段落格式 2设置段落对齐 居左、居右、居中和两端对齐 3段落间距和换行标签 在设计视图中，在文本中光标定位，按下Enter键：硬回车 ；Shift +Enter软回车 在代码视图，可看到相应的标签，这是一个换行标签 ，标签是段落标签 10 3.1.4 设置文本样式 用【属性】面板设置文本格式时，Dreamweaver会跟踪每个 文本元素的属性，并使用如下命名约定为每个元素指定一个标 识：Style1、Style2、Style3、Stylen。如果为两个以上文本 元素指定相同的格式属性，Dreamweaver将使用相同的标识。 之后再使用相同的文本属性设置，只需在属性的“样式”列 表框中选择。 可根据需要样式重命名。 提示：Style1、Style2、Style3 等标识就是CSS样式名 11 3.1.5 使用段落列表 列表是HTML中组织多个段落文本的一种方式，列表分成编号 列表和项目列表，前一种列表用数字顺序为列表中的项目进行 编号，后一种列表则在每个列表项目之前使用一个项目符号。 1. 编号列表 项目列表 12 3.2 图像在网页中的应用 图像是网页中最常用的元素，制作漂亮的网页离不开图像 元素。网页中的图像可用Fireworks或Photoshop这样的专业 图像处理软件进行编辑，再插入到Dreamweaver中对网页进 行修饰和美化。 3.2.1 插入图像 3.2.2 设置图像属性 13 3.2.1 插入图像 下面结合实例介绍在网页中插入图像和插入图像占位符的方 法。 1插入图像 使用工具栏或者菜单 2插入图像占位符 临时代替图像，占位用 14 3.2.2 设置图像属性 在网页中插入图像以后，用“属性”面板设置图像的属性 图像：在图像ID文本框中输入一个名称，以便在有些情况下 （如脚本语言）可以引用该图像。 宽、高：以像素为单位精确指定图像尺寸。在页面中插入图 像时，Dreamweaver会自动用图像原始尺寸更新这些文本框。 源文件：指定图像的源文件。单击文件夹图标可以浏览找到 图像的源文件，也可以直接键入图像源文件所在路径。 15 3.2.2 设置图像属性 链接：指定图像的超链接。可手工输入URL、或“指向文件 ”图标拖到某个文件、或浏览文件。 替换：在无法显示图像的浏览器中用文本代替该位置。 对齐：用于对齐同一行上的图像和文本。 地图：标注和创建自定义的图中局部热点。 垂直边距、水平边距：以像素表示图像到页面边的距离。 目标：链接打开的页如何载入。 边框：以像素为单位设置图像边框的宽度。 编辑：启动 外部图像编辑器（在首选参数中指定）。 裁剪：修剪图像的大小，从所选图像中删除不需要的区域。 16 3.2.2 设置图像属性 重新取样：重新取样已调整大小的图像，提高图片在新的大 小和形状下的品质。 亮度和对比度：调整图像的亮度和对比度设置。 锐化：调整图像的清晰度。 重设大小：当改变了图像尺寸后，“宽”和“高”文本框右 边会出现这个按钮，单击它可以将“宽”和“高”的值重设为 图像的原始尺寸。 17 3.3 多媒体对象在网页中的应用 由于多媒体技术的发展，Internet的功能也得到较大的提 高。音乐、动画、视频等媒体的应用越来越广泛。音乐网站 、电影网站、播客等融合多媒体技术的网站越来越多。 3.3.1 插入Flash动画 3.3.2 应用声音和视频 18 3.3.1 插入Flash动画 在制作网页时，使用Flash动画有助于制作出更具动感的网 页，网页的表现效果也更受用户的青睐。 在Dreamweaver中插入Flash动画： （1）新建一个网页文档，保存为.html格式。 （2）光标定位在需要插入Flash动画的位置，常用工具栏-媒 体-SWF 按钮 19 3.3.1 插入Flash动画 （3）对话框-选预先准备好的 .swf Flash影片文件，确定。 （4）页面中出现一个Flash动画占位符。点击 属性 面板中的 播放按钮，可在文档窗口中查看播放效果。 提示：有时无法 在浏览器中显示 Flash影片，是因 为没有Flash影片 的播放插件。 20 3.3.2 应用声音和视频 目前在网页中大量采用多媒体技术，尤其是音乐网站和电影 网站更为常见。在Dreamweaver中，可通过在网页中插入媒体 对象进行声音和视频的应用。 声音在主页中常被用做背景音乐，也可以实现单击或其他情 况的特效音，还能实现在线广播。在网页中插入背景音乐：（ 1）新建一个网页文档，保存为.html格式。 （2）常用工具-媒体按钮-插件 21 3.3.2 应用声音和视频 （3）对话框-选择相应文件夹下的 .mp3 文件，确定。 （4）出现插件图标，选中后在属性面板中调整其宽、高。在 浏览器中预览结果，将自动运行Media Player。 提示：用做网页背景音乐 的文件格式建议选压缩较 小的，如mid、mp3、wma等。 22 3.3.2 应用声音和视频 （6）上述操作会在页面上出现一个播放器。为了隐藏，选插 件图标，在属性面板单击参数按钮，在其中的“参数”列输入 hidden，并在“值”列输入true。单击“”按钮，在“参数”列输 入loop，并在“值”列输入true，可重复播放，然后确定。 提示：可用类似方法插入视频 23 3.4 超级链接 网络之所以引人注目，除了具备丰富多彩的内容之外，更 重要的是它具有网络相连的特性。这些网络相连的特性是通 过超级链接来完成的。超链接是网页的灵魂。 3.4.1 创建超级链接的方法 3.4.2 超级链接的路径 3.4.3 链接目标 24 3.4.1 创建超级链接的方法 一个网站由多个网页组成，站点和页面具备一定的链接关系 才能正常运行，在制作网站时，需要建立站点与网页、网页与 网页之间的链接关系。 所谓超链接是指从一个网页指向一个目标的连接关系，这个 目标可以是另一个网页（同一个网站内部的网页或者其他网站 的网页），也可以是同一个网页的不同位置，还可以是一个电 子邮件地址、一个文件等。 在网页中最常见的就是在文字或者图片上建立超链接，下面 通过例子介绍给文字和图片创建超链接的方法。 25 3.4.1 创建超级链接的方法 1给文字创建超级链接 （1）事先准备3个HTML文档，并存放在站点的同一个文件夹下 。 （2）打开3.4.html，页面中有3行文字。下面要给其中的两个 文字分别加上超级链接。 26 3.4.1 创建超级链接的方法 （3）选中文字“宝马”-属性面板-指向到文件按钮到右侧的 bmw.html上。此时鼠标变成带箭头的形状，松开后完成。 或：选中“奔驰”，在“属性”面板中单击“浏览文件”按钮 ，在弹出的“选择文件” 对话框中，选择benz.html， 确定即可。 说明：上述方法即内部链接 27 3.4.1 创建超级链接的方法 2给图片创建超级链接 给图片添加超级链接的方法和文字方法类似。 （1）在网页中入一个图片。 （2）选中图片，给图片添加一个外部链接，在“属性”面板 链接文本框输入 提示：外部链接添加的网址一定要输入包含协议（如http:/）的绝对路径 ，如果直接写作，Dreamweaver会把网址当成文件名，会出 现找不到服务器的提示。 28 3.4.1 创建超级链接的方法 3添加E-mail链接 在网页中加入E-mail链接地址，单击E-mail链接会自动打开 新邮件窗口，并在地址栏中自动添加E-mail链接中的邮箱地址 。 创建电子邮件链接，选中需要添加E-mial链接的对象，在“ 属性”面板中的“链接”文本框中，键入“mailto:电子邮件 地址”。注意在冒号与电子邮件地址之间不能有空格。 4添加空链接 空链接是指未指派的链接。用于向页面上的对象或文本附加 行为。例如，可向空链接附加一个行为，以便在指针滑过该链 接时会交换图像或显示绝对定位的元素（AP元素）。 选中设置超链接对象，在“链接”文本框中输入一个 # 29 3.4.2 超级链接的路径 每个可被访问元素（图像、声音、动画、视频等），都有一 个唯一的地址（URL）。超链接应使用正确的统一资源定位路 径。路径有3种表示方法： 1绝对路径 是被链接文档的完整URL，包括所使用的传输协议。如 http:/ 。创建外部链接必须使用绝对路径。 2文档相对路径 是以当前文档所在位置为起点到被链接文档经由的路径。内 部链接使用。同文件夹内的文件链接只写文件名；与下一级文 件夹里的文件链接，写文件夹名称与文件名；与上一级文件夹 的文件链接，文件名前加上/文件夹名。 30 3.4.2 超级链接的路径 3站点根目录相对路径 是指所有路径都开始于当前站点的根目录。站点根目录相对 路径以一个正斜杠开始，该正斜杠表示站点根文件夹。如： /images/google.gif。移动含有根目录相对链接的文档时，不 需要更改这些链接，不过，如果不熟悉此类型的路径，最好使 用文档相对路径。 可以在“选择文件”对话框中设置相对路径类型。在“选择 文件”对话框中，“相对于”下拉列表中有两个选项：文档和 站点根目录，可以根据需要进行选择。 31