《第2章 网页中的文本修饰课件》由会员分享，可在线阅读，更多相关《第2章 网页中的文本修饰课件（42页珍藏版）》请在金锄头文库上搜索。
1、1,第 2 章 编辑网页元素,2,目录,2.1 文本的基本操作 2.2 修饰文本 2.3 设置网页图像 2.4 使用超链接,3,2.1.1 插入与编辑文本,在 Dreamweaver 中插入文本有两种方法： 直接在文档窗口中输入文本 将已存在的文本复制到文档窗口中 对于插入到网页文档中的文本，可以像一般的文字处理软件一样进行编辑 。,4,2.1.2 插入特殊对象,插入特殊符号 在网页中要插入并显示一些特殊符号，如：“”、“”、“”、“”等，则要使用“插入”“HTML”“特殊字符”命令。,5,2.1.2 插入特殊对象（续）,插入日期对象 在要插入日期对象的区域单击，定位插入点，然后选择“插入”“
2、日期”命令，最后在打开的“插入日期”对话框中设置日期格式即可。,6,2.1.2 插入特殊对象（续）,插入水平线 在要插入水平线的区域定位插入点；然后选择“插入”“HTML”“水平线”命令。即可。,7,2.2.1 文本格式,文本格式包括：段落文本、标题文字和预格式化文本。 方法 首先选择要设置文本格式的文字，然后在属性面板中单击“格式”下拉列表框旁边的三角按钮，最后在弹出的列表中选择一种格式即可。,8,2.2.2 字体、字号与颜色,文本字体 在文档窗口中选取文本，然后单击属性面板中的字体选择框后的三角按钮，在弹出的字体列表中选择一种字体即可 。 文本颜色 选取文本后单击属性面板中的颜色框，然后在
3、拾色器中选择一种颜色即可。,9,2.2.2 字体、字号与颜色（续）,文本字号 选中文档窗口中的文本，然后在属性面板中单击“大小”选择框后的三角按钮，在列表中选择一种字号即可。如果要取消文本字号，选择“无”选项即可 。,10,2.2.3 文本样式,文本样式 文本样式就是文字的各种字符样式，如粗体、斜体、下划线、打字机体、上标、下标等，在 Dreamweaver 中可以通过使用“文本”菜单中的“样式” 命令来格式化文本，而在“属性”面板中，则提供了最常用的“粗体” 和“斜体” 文本样式按钮。,11,2.2.3 文本样式（续）,要使用文本样式，应首先在文档窗口中选取文本，然后在单击属性面板上的样式按
4、钮，或者选择“文本”菜单中的“样式”命令，然后在“样式”子菜单中选择一种样式选项，则文本应用该样式。,12,2.2.4 对齐方式,对齐方式的种类 在网页中文本的对齐方式分为三种：即“左对齐”（left）、“居中对齐”（center）、“右对齐”（right）。 设置方法 首先选中段落或文字，然后在单击属性面板中的“左对齐” 、“居中对齐” 或者“右对齐” 按钮 。,13,2.2.5 列表格式,列表格式常常用来格式化网页中包含逻辑关系的文本信息，可以使用属性面板上的列表格式按钮方便地将文字设置为文字列表。 网页中常用的列表格式分为项目（无序）列表、编号（有序）列表和定义列表，它们是一种可以使文字
5、产生缩排效果的文本格式。,14,2.2.5 列表格式（续）,创建项目列表 要创建项目列表，首先单击段落文本，然后再单击属性面板上的“项目列表” 按钮即可。 创建编号列表 要创建编号列表，首先单击段落文本，然后再单击属性面板上的“编号列表” 按钮即可。,15,2.2.5 列表格式（续）,更改列表项目符号 在文档窗口中选中列表文字，然后选择“文本”“列表”“属性”命令，在打开的“列表属性”对话框中选择一种新项目符号即可。,16,2.2.5 列表格式（续）,创建嵌套列表 在文档窗口中，还可以利用属性面板上的“文字向外缩进” 和“文字向内缩进”按钮，配合“项目列表”和“编号列表” 按钮，创建出嵌套结构
6、的文字列表格式。,17,2.3 设置网页图像,图像是文本的说明和解释，如果在文档的适当位置上放置一些图像，不仅可以使文本清晰易读，而且使得文档更加具有吸引力。但是图像的增加也会使网页的下载时间大大增加。所以设计网页时要整体考虑图像的数目和大小，一个网页的大小最好不要超过50KB。,18,2.3.1常用图像文件格式,GIF格式 JPEG/JPG格式 PNG格式,19,GIF格式图像,GIF 的全称是 Graphics Interchange Format（图形交换格式），由 CompuServe 公司设计开发，是一种专为联机图形而设计的图形格式。GIF 格式的图像最多只能使 8 位调色板，也就是
7、说最多它只能支持 256 色的图像。 GIF 有透明处理和交错处理两种特性。主要应用于卡通画、素描作品、插图、带有大块纯色区域的图形、透明图形、简单动画等。,20,JPEG 格式,JPEG 是由 Joint Photographic Experts Group（联合静态图形专家组）制定的图像压缩格式，它的正式名称是“连续色调静态图像的数学压缩与编码”，是一种通用的静态图像压缩标准。 JPEG 格式的图像文件主要应用于连续色调的作品、数字化照片和扫描图形等。,21,PNG 格式,PNG 格式是 Portable Network Graphics （可移植网络图形）的简称，是由托马斯布特尔开发的一
8、种图像格式。PNG 格式的图像兼有 GIF 和 JPEG 两种格式的优点，它不仅能保存 256 色的图像，还能保存 24 位真彩色图像，而且能将图像文件压缩，从而更利于网络传输。它不但支持交错方式显示图像和图像透明处理，还支持 Alpha 通道。,22,2.3.2 插入图像,在Dreamweaver 8中插入图像时，Dreamwever 8会在HTML源代码中自动为文件创建一个目录。为了确保目录的正确性，图像文件必须位于当前站点内。如果图像文件不在当前站点内，Dreamweaver 8将会提示用户将文件复制到该站点文件夹中。,23,2.3.3 设置图像属性,可在图像“属性”面板中更改其属性。
9、首先在文档中选中该图像，执行“窗口”“属性”命令或按Ctrl+F3组合键，即可打开图像“属性”面板。,24,2.3.4 设置背景图像,背景图像的颜色与前景文字的颜色要有一个较强的对比。 执行“修改”“页面属性”命令或者在“属性”面板中单击“页面属性”按钮，即可打开“页面属性”对话框。,25,2.3.4 设置背景图像（续）,“页面属性”对话框,26,2.3.5 编辑图像,27,2.3.5 编辑图像（续）,28,2.4.1 超链接的基本概念,网页中的超链接就是以文字或图像作为链接对象，然后指定一个要跳转的网页地址，当浏览者单击文字或其他对象时，浏览器跳转到指定的网页文件。,29,2.4.1 超链接
10、的基本概念（续）,什么是 URL 超链接利用统一资源定位器即 URL（Universal Resource Locator）定位 Web 上的资源。一个 URL 通常包括 3 部分：一个协议代码、一个装有所需文件的计算机地址（或一个电子邮件地址等），以及具体的文件地址和文件名。,30,2.4.1 超链接的基本概念（续）,绝对 URL 绝对 URL 是指 Internet 上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名。其形式为：协议：/计算机域名/文档名。,31,2.4.1 超链接的基本概念（续）,相对 URL 相对 URL 是指 Internet 上资源相对于当前页面的地
11、址，它包含从当前页面指向目的页面位置的路径。例如：public/example.htm 就是一个相对 URL，它表示当前页面所在目录下 public 子目录中的 example.htm 文档。,32,2.4.1 超链接的基本概念（续）,超链接的类型 页面间的超链接 页面内的超链接 指向电子信箱的链接 文件下载链接,33,2.4.2 制作超链接,网页外部链接 打开一个文档窗口，选取要作为超链接的文本，然后在属性面板中的“Link”（链接）框中，输入网页文件的 URL即可。,34,2.4.2 制作超链接（续）,网页内部链接 在站点窗口中，打开一个包含文本的网页文件，然后选取要作为超链接的文本；单击
12、在属性面板中的“链接”下拉列表框旁边“浏览文件”按钮 ；在弹出的“选择文件”对话框中的搜寻框中，定位到站点根目录下用于保存网页的文件夹，然后选择要跳转的网页文件，最后单击“确定” 按钮即可。,35,2.4.2 制作超链接（续）,网页中的锚点链接 在要创建锚点链接的文字处定位插入点，然后选择“插入”“命名锚记”命令，在弹出的“命名锚记”对话框中输入锚点名称；选取锚点对应的目标文字，然后在“属性”面板中的“链接”框内输入刚才命名锚点名称即可。,36,2.4.2 制作超链接（续）,电子邮件链接 在文档窗口中要添加链接的地方定位插入点，然后选择“插入”“电子邮件链接”命令，在弹出的“插入邮件链接” 对
13、话框中的“文本”框内，输入要指定为链接的文字，然后在“E-Mail”框内，输入电子邮件地址；最后单击“确定”按钮即可。,37,2.4.2 制作超链接（续）,文件下载链接 在文档窗口中，选取要指定链接的文字对象，然后单击属性面板中“链接”框旁边的“浏览文件”按钮；在弹出的“选择文件” 对话框中，定位到要下载的文件（必须是浏览器支持的格式，如 .zip 、.exe等文件格式），然后单击“确定”按钮即可。,38,2.4.3 制作图像链接,普通链接 当鼠标指针移动到某些图片上时，单击就会跳转到其他页面。,39,2.4.3 制作图像链接（续）,热点链接 当鼠标指针指向图片的不同部位时，可以打开不同的超链
14、接，这种技术叫网页图片热点。 热点链接不仅可以将整张图片作为链接的载体，还可以将图片的某一部分设为链接。,40,2.4.4 鼠标经过图像,鼠标经过图像是指当鼠标指针经过一幅图像时，图像的显示会变成另一幅图像。 鼠标经过图像实际上是由两幅图像组成。两幅图像大小必须相同，否则，Dreamwever 8会自动调整第二幅图像的大小，使之与第一幅图像匹配。,41,2.4.5 超链接颜色,浏览器中默认超链接文本的颜色为蓝色，而活动链接的颜色为红色，访问过的链接为紫色 。如果需要更改链接文本的颜色，可以在“页面属性”对话框中进行设置更改。,42,2.4.6 管理站点中的链接,选择“站点”“检查站点范围的链接”命令，在打开的“链接检查器”面板中即可查看超链接情况 。,
