网页设计第4章在网页中插入基本元素共九章
合集下载
网页设计与制作(Dreamweaver)《插入网页基本要素之文本与样式》
斜体 强调 块引用
标题
编号列表定义列表 定义说明 首字母缩写词
粗体 加强
段落 已编排格式
项目列表 列表项 定义术语 缩写 字符
插入网页基本要素之文本与样式
添加空格和段落
插入空格
空格的添加：HTML只允许字符之间包含一个空格；若要在文档中 添加其他空格，必须添加连续空格。
（1）空格的HTML代码为： （2）在“插入”栏中，选择“文本”，然后单击最右侧下拉列表框中“不 换行空格”。 （3）选择“插入”>“HTML”>“特殊字符”>“不换行空格”。 （4）按 Ctrl+Shift+空格键 （首选）。
插入网页基本要素之文本与样式
层叠样式的应用
CSS样式面板
显示“CSS样式”面板：在“窗口”菜单中单击“CSS 样式”，或 者按 Shift+F11 键。CSS样式面板下方的四个按钮分别是：附加样 式表，新建CSS样式，编辑样式表，删除CSS样式表。
（1）将插入点置于欲设格式处，单击新建 CSS样式按钮。 （2）定义CSS样式的类型； （3）选择定义样式的位置； （4）单击“确定”。出现“CSS样式定义” 对话框。 （5）选择要为新CSS样式设置的样式选项。
插入网页基本要素之文本与图像
层叠样式的应用
插入网页基本要素之文本与图像
层叠样式的应用
插入网页基本要素之文本与图像
层叠样式的应用
CSS样式可以保存成一个独立的外部样式文件，使得多个网页文件可以共享同一CSS样式，以便统一网 页的格式。 CSS样式文件的扩展名是CSS，是一个纯文本文件。 CSS样式面板中单击附加样式按钮，可以将一个现成的样式链接到当前网页中使用。
编辑网页基本元素
• 4. 使用段落和标题
• 使用属性面板中的“格式”下拉列表框，或选择“文本”→“段落格式”菜单命令，可以设 置标准的段落和标题，不过在设置前，首先要选中相应的文本。如果要删除段落格式，可从 菜单或列表中选择“无”选项。
• 要改变网页段落和标题的默认设置，可以选择“修改”→“页面属性”命令，打开“页面属 性”对话框进行设置，如图4-9所示。
• 还可以给字体添加粗体、斜体、下划线、删除线等样式以改变字体的风格和修饰效果。
•
提示：Dreamweaver 8中的某些字体选项中含有多种字体组合，浏览器在显示
时是从前到后的顺序来选择字体的。如果前面的字体在浏览者的计算机上已安装，
则以这种字体来显示，否则，显示它后面的字体。
• （2）编辑字号
• 如果要改变字号，选择改变字号的文本，单击文本属性面板上“大小”下拉列表右侧的下三 角按钮，弹出字号列表，如图4-5所示。
其次要有丰富的内容，才能不断地吸引浏览者进行访问。文字是页面上不可缺少的元素，网 站的诉求思想、内容的表达都需要文字加以传递。同时，适当地配合一些图像，能够提高网 页的欣赏性。页面上的文本和图像应用超级链接就构成了一个有机整体，实现了网络互联， 这样才能够让浏览者在不同的页面间进行跳转，找到所需要的内容。 • 4.1编辑网页文本 编辑文本是最基本的网页制作技能，文字是文类文明的结晶，是网页传递信息最基本的方式。 编辑和设置内容丰富、格式美观的网页文本，既可以传达网站大量的信息，又可以激发浏览 者的阅读兴趣。在Deramweaver 8中可以输入普通文字，也可以插入特殊字符，设置字体大 小，改变文本颜色等。 4.1.1设置文本属性 1.输入文本 • 在Dreamweaver 8中输入文本有三种方法。
• （1）编辑字体样式
• 使用属性面板中的“格式”下拉列表框，或选择“文本”→“段落格式”菜单命令，可以设 置标准的段落和标题，不过在设置前，首先要选中相应的文本。如果要删除段落格式，可从 菜单或列表中选择“无”选项。
• 要改变网页段落和标题的默认设置，可以选择“修改”→“页面属性”命令，打开“页面属 性”对话框进行设置，如图4-9所示。
• 还可以给字体添加粗体、斜体、下划线、删除线等样式以改变字体的风格和修饰效果。
•
提示：Dreamweaver 8中的某些字体选项中含有多种字体组合，浏览器在显示
时是从前到后的顺序来选择字体的。如果前面的字体在浏览者的计算机上已安装，
则以这种字体来显示，否则，显示它后面的字体。
• （2）编辑字号
• 如果要改变字号，选择改变字号的文本，单击文本属性面板上“大小”下拉列表右侧的下三 角按钮，弹出字号列表，如图4-5所示。
其次要有丰富的内容，才能不断地吸引浏览者进行访问。文字是页面上不可缺少的元素，网 站的诉求思想、内容的表达都需要文字加以传递。同时，适当地配合一些图像，能够提高网 页的欣赏性。页面上的文本和图像应用超级链接就构成了一个有机整体，实现了网络互联， 这样才能够让浏览者在不同的页面间进行跳转，找到所需要的内容。 • 4.1编辑网页文本 编辑文本是最基本的网页制作技能，文字是文类文明的结晶，是网页传递信息最基本的方式。 编辑和设置内容丰富、格式美观的网页文本，既可以传达网站大量的信息，又可以激发浏览 者的阅读兴趣。在Deramweaver 8中可以输入普通文字，也可以插入特殊字符，设置字体大 小，改变文本颜色等。 4.1.1设置文本属性 1.输入文本 • 在Dreamweaver 8中输入文本有三种方法。
• （1）编辑字体样式
网页设计模块四 插入网页元素及超链接
任务一 设置页面的相关属性
步骤4 选择“链接”选项卡。如图4-2 所示。
图4-2 链接选项卡
任务一 设置页面的相关属性
信息卡
(1)“链接字体”：设置链接文字的默认字体，设置方法与页面字体 的设置方法相同。 (2)“大小”：设置链接文字的大小，与页面文字的大小设置方法完 全相同。 (3)“链接颜色”、“交换图像链接”、“已访问链接”、“活动链 接”：设置链接4种不同状态的颜色。这4种状态分别是：正常状态、 鼠标滑过状态、访问过的状态、鼠标单击时的状态。 (4)“下划线样式”：设置链接文字下面的下划线样式。系统提供了4 种样式，分别是“始终有下划线”、“始终无下划线”、“仅在变 换图像时显示下划线”、“变换图像时隐藏下划线”。
任务一 设置页面的相关属性
步骤5 选择“标题”选项卡。如图4-3所示。 “标题”选项卡中可以定义应用在具体文档中各级不同标题上的一种“标题字 体样式”。而不是指页面的标题内容。在分类中可以定义“标题字体”及6 种 预定义的标题字体样式，包括粗体、斜体、大小和颜色等。操作步骤同前面类 似，在此不再叙述。
步骤７ 选择““跟踪图像”选项卡。如图4-5所示。 “跟踪图像”是用于网页中元素定位的图像，该图像只是在编辑网页时提供参照， 起到辅助编辑的作用，最终不会显示在浏览器中，所以，并不能等同于背景图像。
图4-5 跟踪图像选项卡
任务一 设置页面的相关属性
信息卡
选择跟踪图像时，可以单击后面的〖浏览〗按钮，从系统中寻找图像 文件作为跟踪图像。 还可以设置跟踪图像的透明度，滚动条最左端是透明，最右端是不透 明，可以用鼠标拖动滑块来进行调整。
图4-3 标题选项卡
任务一 设置页面的相关属性
步骤６ 选择“标题/编码”选项卡。如图4-4所示。 这里的“标题”是页面的标题内容，可输入和首页相关的文字内容，它将
网页设计与制作(Dreamweaver)《插入网页基本要素之页面布局框架》
插入网页基本要素之页面的框架布局
选择框架和框架集
在“文档”窗口中选择框架和框架集 在按下ALT的同时，单击欲选的框架。 单击框架集中两个框架之间的边框，可以选择一个框架集。 或者在按下ALT的同时，按下左右上下光标移动键。
插入网页基本要素之页面的框架布局
编辑框架集
（1）将一个框架拆分成几个更小的框架 拆分插入点所在的框架，从“修改/框架集” 子菜单选择拆分项。 （2）删除一个框架 当拖动框架边框至四边外侧时，框架将被 自动删除。
Main Frame
插入网页基本要素之页面的框架布局
使用Iframe
Iframe是Inline Frame的缩写，也是框架的一种形式。但它与框架不同的是，Iframe可以嵌在网页的任意 部分，因而也被称作内联框架或者浮动框架。
(1)将光标定位在准备插入的目标区域，选择“插入录”|HTML|“框 架”|IFRAME命令即可。 (2)将光标定位在准备插入的目标区域，选择“插入”栏中的“布局” 选项卡，单击Iframe按钮即可。 (3)进入页面代码视图，在需要插入Iframe的标签中间输入Iframe标 记。
插入网页基本要素之页面的框架布局
使用Iframe
属性
align
frameborder height
longdesc
marginheight marginwidth
name scrolling
src width
值 left、right、top、middle、
bottom 1、0
pixels、%
URL
pixels pixels frame_name yes、no、auto URL pixels、%
描述 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 规定是否显示框架周围的边框。 规定 iframe 的高度。 规定一个页面，该页面包含了有关 iframe 的较长描 述。 定义 iframe 的顶部和底部的边距。 定义 iframe 的左侧和右侧的边距。 规定 iframe 的名称。 规定是否在 iframe 中显示滚动条。 规定在 iframe 中显示的文档的 URL。 定义 iframe 的宽度。
选择框架和框架集
在“文档”窗口中选择框架和框架集 在按下ALT的同时，单击欲选的框架。 单击框架集中两个框架之间的边框，可以选择一个框架集。 或者在按下ALT的同时，按下左右上下光标移动键。
插入网页基本要素之页面的框架布局
编辑框架集
（1）将一个框架拆分成几个更小的框架 拆分插入点所在的框架，从“修改/框架集” 子菜单选择拆分项。 （2）删除一个框架 当拖动框架边框至四边外侧时，框架将被 自动删除。
Main Frame
插入网页基本要素之页面的框架布局
使用Iframe
Iframe是Inline Frame的缩写，也是框架的一种形式。但它与框架不同的是，Iframe可以嵌在网页的任意 部分，因而也被称作内联框架或者浮动框架。
(1)将光标定位在准备插入的目标区域，选择“插入录”|HTML|“框 架”|IFRAME命令即可。 (2)将光标定位在准备插入的目标区域，选择“插入”栏中的“布局” 选项卡，单击Iframe按钮即可。 (3)进入页面代码视图，在需要插入Iframe的标签中间输入Iframe标 记。
插入网页基本要素之页面的框架布局
使用Iframe
属性
align
frameborder height
longdesc
marginheight marginwidth
name scrolling
src width
值 left、right、top、middle、
bottom 1、0
pixels、%
URL
pixels pixels frame_name yes、no、auto URL pixels、%
描述 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 规定是否显示框架周围的边框。 规定 iframe 的高度。 规定一个页面，该页面包含了有关 iframe 的较长描 述。 定义 iframe 的顶部和底部的边距。 定义 iframe 的左侧和右侧的边距。 规定 iframe 的名称。 规定是否在 iframe 中显示滚动条。 规定在 iframe 中显示的文档的 URL。 定义 iframe 的宽度。
第4章 添加网页元素
29
4.6
超级链接方式
虽然网页中的链接载体为文本与图像，但是 链接文件的不同，其链接方式也会有所不同。比如 在同一个网页中实现链接，或者在一幅图像中实现 局部链接，以及常见的邮件链接等。
30
4.6.1 锚点链接
创建命名锚记（简称锚点）就是在文档中设置位 置标签，并给该位置设置一个名称，以便引用。通过创 建锚点，可以使链接指向当前文档或者不同文档中的指 定位置。锚点常常被用来实现到特定的主题或者文档顶 部的跳转链接，使访问者能够快速浏览到选定的位置， 加快信息检索速度。创建锚点链接，要设置一个命名锚 点，该命名锚点就是链接目标。
第4 章
添加网页元素
网页中最基本的元素为文本与图像， 这两种元素可以组成最简单的网页。要想使 网页的视觉效果更加丰富，那么Flash动画 的加入必不可少。其中文本能够直接在 Dreamweaver 中 创 建 与 编 辑 ， 而 图 像 和 Flash动画则需要通过插入的方式显示在其 中。
1
本章学习要点： 本章学习要点：
13
插入Photoshop Photoshop智能图像 4.2.4 插入Photoshop智能图像
在旧版本的基础上，Dreamweaver CS4不仅能 够插入PSD格式的图像，还能够在修改PSD图像文 档后，允许在Dreamweaver中以简单的方法直接更 新输出的图像。并且还提供了各种方式，插入 Photoshop中的图像。
24
4.5
超级链接载体
网络中的所有资源都是通过超级链接联系在 一起的。链接能使网页从一个页面跳转到另一个页 面。成功地运用链接可以使网页变得更方便、更清 晰和更富有灵性。 所谓链接，就是当鼠标移动到某些文字或者 图片上时，单击就会跳转到其他的页面。这些文字 或者图片称为热点，跳转到的页面称为链接目标， 热点与链接目标相联系的就是链接路径。链接路径 分为绝对路径和相对路径。
网页设计实用教程第4章超链接ppt课件
网页设计实用教程第4章超链接 ppt课件
目录
• 引言 • 超链接的基本概念 • 如何创建超链接 • 超链接的使用场景 • 超链接的优化技巧 • 总结与展望
01 引言
课程简介
本章将介绍超链接在网页设计中的重 要性和应用，帮助读者掌握如何创建 和管理超链接，提高网页的交互性和 用户体验。
学习目标：了解超链接的概念、类型 和创建方法；掌握如何设置链接颜色 、下划线样式等样式属性；理解相对 路径和绝对路径的区别和应用场景。
链接的命名规范
总结词：统一规范
详细描述：超链接的命名应该统一规范，保持一致的风格和格式。这有助于提高网站的规范性和专业 性，同时也有利于网站的SEO优化。
链接的颜色和字体设置
总结词：突出重点
详细描述：为了突出重点，超链接的颜色和字体设置应该 与普通文本有所区别。通常，超链接会以醒目的颜色和不 同的字体样式显示，以吸引用户的注意力。
详细描述：超链接的交互设计应该提供易于返回的功能 ，方便用户返回上一个页面或回到主页。这有助于提高 用户体验，降低用户的操作成本。
06 总结与展望
超链接的重要性
导航功能
超链接是网页导航的核心，通过 超链接，用户可以方便地跳转到 其他页面或网站，提高浏览体验。
信息关联
超链接可以将不同页面或网站的内 容关联起来，形成知识网络，方便 用户获取更全面的信息。
02 超链接的基本概念
什么是超链接
总结词
超链接是网页中非常重要的元素之一，它允许用户通过点击文本、图片或其他 网页元素，从一个网页跳转到另链接，用户可以通过点击超链接来访问不同的网页 或网站。超链接使用户能够方便地浏览和获取信息，是互联网中不可或缺的组 成部分。
总结词
目录
• 引言 • 超链接的基本概念 • 如何创建超链接 • 超链接的使用场景 • 超链接的优化技巧 • 总结与展望
01 引言
课程简介
本章将介绍超链接在网页设计中的重 要性和应用，帮助读者掌握如何创建 和管理超链接，提高网页的交互性和 用户体验。
学习目标：了解超链接的概念、类型 和创建方法；掌握如何设置链接颜色 、下划线样式等样式属性；理解相对 路径和绝对路径的区别和应用场景。
链接的命名规范
总结词：统一规范
详细描述：超链接的命名应该统一规范，保持一致的风格和格式。这有助于提高网站的规范性和专业 性，同时也有利于网站的SEO优化。
链接的颜色和字体设置
总结词：突出重点
详细描述：为了突出重点，超链接的颜色和字体设置应该 与普通文本有所区别。通常，超链接会以醒目的颜色和不 同的字体样式显示，以吸引用户的注意力。
详细描述：超链接的交互设计应该提供易于返回的功能 ，方便用户返回上一个页面或回到主页。这有助于提高 用户体验，降低用户的操作成本。
06 总结与展望
超链接的重要性
导航功能
超链接是网页导航的核心，通过 超链接，用户可以方便地跳转到 其他页面或网站，提高浏览体验。
信息关联
超链接可以将不同页面或网站的内 容关联起来，形成知识网络，方便 用户获取更全面的信息。
02 超链接的基本概念
什么是超链接
总结词
超链接是网页中非常重要的元素之一，它允许用户通过点击文本、图片或其他 网页元素，从一个网页跳转到另链接，用户可以通过点击超链接来访问不同的网页 或网站。超链接使用户能够方便地浏览和获取信息，是互联网中不可或缺的组 成部分。
总结词
第4章 编辑网页基本元素
边框 低解析度源 “编辑”系列按钮
用于设置以像素为单位的图像边框的宽度，默认无边框 用于指定在载入主图像之前应该载入的图像 用于启动对图像的各种编辑，如修剪、重新取样、调整图像的亮度和对比度以及锐化图像等
• • •
•
4.2.3插入其他图像元素 1.图像占位符 所谓“图像占位符”，是指图像尚未编辑完成，在网页中保留该图像的位置。例如，像站点 徽标这样比较重要的图像可能需要经过多方同意才能定稿确认，那么在此之前设计网页时， 就需要使用占位符，现将徽标的位置空出来，方便日后更新。 要在网页中插入图像占位符，可以选择“插入”→“图像对象”→“图像占位符”命令，或 选择“插入”工具栏中“常用”选项卡下“图像”下拉菜单中的“图像占位符”命令，将打 开“图像占位符”对话框，如图4-22所示。在出现的对话框中，指定图像占位符的名称、宽 度和高度等属性。
•图4-16 “插入”栏中的“图像”菜单
图4-17 “选择图像源文件”对话框
• •
2.设置图像属性 要设置图像的属性，可在网页文档中选择一个图像，然后选择“窗口”→“属性”命令以显示“图像” 属性面板，用户可在该属性面板中设置图像的所有参数。有关参数的详细说明见表4-2。 • 表4-2 图像属性面板各选项的功能
• • •
图4-6 属性面板改变颜色
图4-7 “颜色”对话框
3.对齐文本 要对齐段落文本，可以使用属性面板中按钮，或选择“文本”→“对齐”命令。在 Dreamweaver 8中，文本的对齐方式共有4中：左对齐、居中对齐、右对齐和两端对齐， 效果如图4-8所示。
•
• •
•
• 图4-8 对齐文本 在设置文本对齐方式时，只能对整个文本块设置对齐属性，而不能对段落中的部分文本设置 对齐属性。所谓的段落时指用〈Enter〉键分开的文字（网页的HTML代码标记为〈p〉），用 〈Shift+Enter〉键分开的文字（网页的HTML代码标记为〈br〉）是换行而不是分段。 4. 使用段落和标题 使用属性面板中的“格式”下拉列表框，或选择“文本”→“段落格式”菜单命令，可以设 置标准的段落和标题，不过在设置前，首先要选中相应的文本。如果要删除段落格式，可从 菜单或列表中选择“无”选项。 要改变网页段落和标题的默认设置，可以选择“修改”→“页面属性”命令，打开“页面属 性”对话框进行设置，如图4-9所示。
模块四 插入网页元素及超链接
任务二 创建基本文本网页
步骤： 步骤1 步骤 运行Dreamweaver CS3，在“开始页”中选择“新建”下的“THML”， 新建一个网页文档。 步骤2 步骤 在文档窗口中单击，出现闪烁光标。选择合适的输入法，在光标处输 入文字。如图4-6所示。
图 4-6 直接输入文字
任务二 创建基本文本网页
步骤７ 步骤７ 选择““跟踪图像”选项卡。如图4-5所示。 “跟踪图像”是用于网页中元素定位的图像，该图像只是在编辑网页时提供参照， 起到辅助编辑的作用，最终不会显示在浏览器中，所以，并不能等同于背景图像。
图4-5 跟踪图像选项卡
任务一 设置页面的相关属性
信息卡 选择跟踪图像时，可以单击后面的〖浏览〗按钮，从系统中寻找图像 文件作为跟踪图像。 还可以设置跟踪图像的透明度，滚动条最左端是透明，最右端是不透 明，可以用鼠标拖动滑块来进行调整。
任务三
知识导读
创建基本图文混排网页
一个仅有文本的网页不会引起浏览者的好奇。网民们不难发现，网 络上的大多数网页都是由图象和多媒体来点缀整个页面。因为图象和多 媒体直观和生动，不受语言、人种、地域等差异限制，使得网页能被更 多浏览者关注并接受。合理地使用图像，可以让网页看起来更加美观、 赏心悦目，更加充满生命力。 图像与文本的完美结合可以提升网页的美观性，从而吸引更多 人的关注 此外，网页文件的大小，也影响着网页被关注的程度。如 果网页太大，在浏览的过程中用户会失去等待的耐心，无论网页多 么精彩，用户都会放弃它。而网页的大小关键就在于网页中图像的 大小。所以处理图像时要尽可能使其变得更小，使它能够在狭窄的 网络带宽中快速传递；但质量又不能太差，要显示它应有的效果。 这就要求设计者既要选择合适的图像格式，又要作相应的调整。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
对齐。用于设置影片的对齐方式。 背景颜色。用于设置影片区域的背景颜色。 垂直边距和水平边距。用于设置影片上下和左右空白区
域的像素值，可以在数值框中输入单位是像素的间距值。
品质。用于设置Flash影片的显示质量。 比例。用于设置Flash影片的显示比例。有“全部显示”、“
无边框”和“严格匹配”3个选项。
2．页面音乐的链接和嵌入
（1）在页面中单击要链接声音文件的网页元素，例如：文 本或图像等。
（2）在属性面板中的Link文本框中输入声音文件即可。
4.3.4 实例13：插入FLASH按钮
有序列表又称为编号列表，是有一定排列顺序的列表 ，一般前面有数字前导字符，也可以是阿拉伯数字、 英文字母、罗马数字等符号。
2．无序列表
无序列表又称为项目列表，是一系列无顺序级别关系 的项目文本组成的列表，一般前面是用项目符号作为 前导字符。
3．定义列表
定义列表不使用项目符号或数字这样的前导字符，通 常用在词汇表或说明书中。
4.3 交互对象
4.3.1各种媒体的来源 1．系统集成 2．网络下载 3．从素材库导入 4．自己制作
4.3.2 Flash动画
1．插入Flash影片
“Flash影片”属性面板
Flash。用于设置Flash影片的名称，以便在脚本中引用。 宽和高。用于设置Flash影片的宽度和高度。 文件。用于设置Flash影片文件的路径。 源文件。用于指定Flash影片源文件。
4．用现有文本创建列表 5．创建嵌套列表 6．列表属性设置
使用“列表属性”对话框可以设置整个列表或个别列 表项的外观，如设置编号样式、重置计数、设置个别 列表项或整个列表的项目符号样式选项。
列表类型。指定列表属性；
列表项目。指定列表中的个别项。使用弹出式菜单选择项
目符号、编号、目录或菜单。用于为Flash影片提供一种样式。
2．插入Flash按钮
3．插入Flash文本
4.3.3 插入其他动态元素
1．插入Shockwave影片 2．插入Applet 3．插入ActiveX控件 4．插入插件
4.3.4 为网页加入音乐
1．背景音乐
（1）添加背景音乐代码 （2）通过插入插件来添加背景音乐
4.2 图像元素
在网页的制作中图像的格式有一定的要 求，一般用于网页的图像要求是GIF、 JPEG或PNG 3种格式中的一种。
4.2.2 插入图像 1．直接插入图像 2．用占位符插入图像
4.2.3 插入Fireworks图片
Fireworks可以将优化后的图像和HTML文件导出 并保存到所需的Dreamweaver站点文件夹中。
“文本”属性面板中各选项含义及设置方法如下。
格式。设置所选文本（一般是标题文本）的段落样式。 样式。显示当前应用于所选文本的类样式。 粗体。将<b>或<strong>标签应用于选定的文本，即对所选文
本加粗。
斜体。将<i>或<em>标签应用于选定的文本，即对所选文本
进行倾斜设置。
字体。对所选的文本进行字体设置，默认情况下中文字体是
第4章 在网页中插入基本元素
本章学习目标
熟悉普通文本、特殊文本的插入方法， 项目列表和文本格式化的方法;
掌握图像插入、属性设置的方法和网站 相册的制作。
掌握各种媒体的插入方法、不同媒体相 关参数的具体设置、系统集成Flash按钮 和文本的插入以及加入音乐的技巧。
4.1文本元素的插入
4.1.1 文本元素的插入 1．普通文本的插入 2．特殊文本的插入 3. 在字符之间添加空格
4.2.4 实例12：制作网站相册
在Dreamweaver中内置了创建网站相册的命令， 但此命令实际是调用了Fireworks的图片处理功能 ，因此，如要创建网站相册，必须先安装 Fireworks软件。另外，为了创建网站相册，还需 收集建立相册的图片。在开始创建相册之前，将 相册的所有图像放置在一个文件夹中（该文件夹 不必位于站点中）。另外，确保图像文件名是以 .gif、.jpg、.jpeg、.png、.psd、.tif或.tiff为扩展名 ，并不能以中文命名。
“宋体”。要设置文本的“字体”，在“字体”下拉列表中选择 一种字体即可。
大小。对所选文本进行字体大小的设置。
颜色。
“#00ff00”形式的颜色代码是RGB颜色，必须以“＃
”字符开头。
对齐方式。对文本段落进行对齐设置。
链接。对所选的文本建立超级链接。
4.1.3 项目列表
1．有序列表
选中该复选框，则影片会循环播放。
选中该复选框，则当装载网页时即自动播放动画。
单击该按钮将自动打开Flash软件对源文件进行
处理，但要确定有源文件，并已经在源文件属性中指定
了其路径。
用于恢复Flash影片的原始尺寸。
用于在设计视图中播放Flash影片。
用于打开“参数”对话框，在该对话框中可以输
话框中将出现不同的选项；
样式。确定用于编号列表或项目列表的编号、项目符号的样
式。所有列表项都将具有该样式，除非为列表项指定新样式；
开始计数。设置第一个编号列表项的值。
4.1.4 插入文本及美化
在本例中，将在已有 基本框架的“科技学 院招生网”网站的首 页页面中添加一些文 本、项目列表，并对 它们进行设置，如缩 进、加粗、倾斜、大 小、颜色等，最终效 果如图所示。
4.1.2 格式化文本
Dreamweaver中的文本格式设置与使用 标准字处理程序类似。
可以为文本块设置默认格式化样式（段 落、标题 1、标题 2等），更改所选文本 的字体、大小、颜色和对齐方式，或者 应用文本样式（如粗体、斜体、等宽字 体和下划线等）。
对字体的属性进行设置一般有属性面板法和菜 单命令两种方法，使用菜单命令时，只需要选 择“文本”菜单下的相应命令，然后进行具体 的设置即可。