3章用文本和图像充实网页-中文版Dreamweaver-CS6网页制作课件

1、 清华大学出版社 第3章用文本和图像充实网页中文版Dreamweaver CS6从入门到精通 清华大学出版社 第3章中文版Dreamweaver C本章导读从入门到精通清华大学出版社2Contents1 添加文本2 设置文本格式3 创建列表4 为网页添加图像5 图像的设置和应用本章导读从入门到精通清华大学出版社2Contents1 添3.1 添加文本Concept3.1.1 添加普通文本3.1.2 添加空格3.1.3 添加水平线3.1.4 添加日期3.1.5 添加特殊符号3.1.6 文本换行与分段3.1 添加文本Concept3.1.1 添加普通文本33.1.1 添加普通文本从入门到精通清华大

2、学出版社4 直接输入文本1从其他文档中复制文本2导入文本33.1.1 添加普通文本从入门到精通清华大学出版社4 1直接输入文本从入门到精通清华大学出版社5在网页文档中，将鼠标光标定位在需添加文本的位置，切换到所需的输入法即可进行文本的输入。 1直接输入文本从入门到精通清华大学出版社5在网页文档中，将在其他包含文本的文档中选中所需复制的文本，单击鼠标右键，在弹出的快捷菜单中选择“复制”命令，然后将鼠标光标定位到网页中需插入文本的位置，单击鼠标右键，在弹出的快捷菜单中选择“粘贴”命令即可完成文本的插入。2从其他文档中复制文本从入门到精通清华大学出版社6在其他包含文本的文档中选中所需复制的文本，单击

3、鼠标右键，在弹除了使用复制文本的方法为网页快速添加文本，Dreamweaver还可以直接将Word、Excel中的内容导入到网页中。3导入文本从入门到精通清华大学出版社7 除了使用复制文本的方法为网页快速添加文本，Dreamweav在Word等文字编辑软件中若要添加空格只需按空格键即可，但是在Dreamweaver中无论按多少次空格键都只会出现一个空格，这是因为Dreamweaver中的文档格式都是以HTML的形式存在，而HTML文档只允许字符之间包含一个空格。要在网页文档中添加连续的空格，可以采用以下几种方式： 选择【窗口】/【插入】命令打开“插入”面板，在“常用”下拉列表中选择“文本”选项

4、切换到“文本”插入栏，在插入列表中单击“已编排格式”按钮 ，然后在文档中连续按空格键即可。3.1.2 添加空格从入门到精通清华大学出版社8在Word等文字编辑软件中若要添加空格只需按空格键即可，但是水平线对于信息的组织很有用。在页面中，可以使用一条或多条水平线以可视方式分隔文本和对象，使段落区分更明显，让网页更具层次感。3.1.3 添加水平线从入门到精通清华大学出版社9水平线对于信息的组织很有用。在页面中，可以使用一条或多条水平Dreamweaver提供了一个方便的日期对象，该对象可以以任何格式插入当前的日期，并可在每次保存文件时都自动更新该日期。3.1.4 添加日期从入门到精通清华大学出版社

5、10 Dreamweaver提供了一个方便的日期对象，该对象可以以在Dreamweaver中，可以为文档添加多种特殊符号，如版权符号 、注册商标符号 等。3.1.5 添加特殊符号从入门到精通清华大学出版社11 在Dreamweaver中，可以为文档添加多种特殊符号，如版在Dreamweaver中输入文本时不会自动换行，当在浏览器中预览时，文本的行数和每行的字数会随着浏览器大小改变而改变，如果要换行，需按“Shift+Enter”键进行手动换行，如果要分段，则直接按“Enter”键。3.1.6 文本换行与分段从入门到精通清华大学出版社12在Dreamweaver中输入文本时不会自动换行，当在浏览

6、器从入门到精通清华大学出版社3.2 设置文本格式Text3.2.1 设置文本基本格式TextText3.2.2 设置段落格式从入门到精通清华大学出版社3.2 设置文本格式Text3.3.2.1 设置文本基本格式从入门到精通清华大学出版社14 编辑字体列表1设置文本字体格式23.2.1 设置文本基本格式从入门到精通清华大学出版社14不同的电脑中所安装的字体可能不同，所以为了尽可能让大多数电脑中显示的网页外观保持一致，网页中的文本通常都采用最常用的字体，如中文采用“宋体”、“黑体”，英文采用“Arial”等。1编辑字体列表从入门到精通清华大学出版社15 不同的电脑中所安装的字体可能不同，所以为了尽

7、可能让大多数电脑要设置文本的字体和大小，可选中要设置字体的文本，文本将以反白形式显示，在“属性”面板中可进行字体、大小、颜色、对齐方式以及粗体或斜体设置。2设置文本字体格式从入门到精通清华大学出版社16 要设置文本的字体和大小，可选中要设置字体的文本，文本将以反白3.2.2 设置段落格式从入门到精通清华大学出版社17 设置段落标题123设置段落对齐设置段落缩进3.2.2 设置段落格式从入门到精通清华大学出版社17 利用“属性”面板“格式”下拉列表框中的选项，可以快速地将段落文本设置为一级标题、二级标题、三级标题等标题样式，其中标题号越小，字体越大。1设置段落标题从入门到精通清华大学出版社18

8、利用“属性”面板“格式”下拉列表框中的选项，可以快速地将段落段落文本的对齐在网页布局中起着十分重要的作用，Dreamweaver提供了左对齐、居中对齐、右对齐和两端对齐4种对齐方式。2设置段落对齐从入门到精通清华大学出版社19 段落文本的对齐在网页布局中起着十分重要的作用，Dreamwe设置段落缩进可以将整个段落文本进行凸出或缩进显示。 3设置段落缩进从入门到精通清华大学出版社20 设置段落缩进可以将整个段落文本进行凸出或缩进显示。 3设置从入门到精通清华大学出版社3.3 创建列表编号列表3.3.13.3.2项目列表3.3.3定义列表3.3.4嵌套列表的创建从入门到精通清华大学出版社3.3 创

9、建列表编号列表3.3.3.3.1 编号列表从入门到精通清华大学出版社22 创建编号列表可以使文本条理清晰，让人一目了然。编号列表前面通常有数字前导字符，可以是英文字母、阿拉伯数字或罗马数字等符号。 3.3.1 编号列表从入门到精通清华大学出版社22 项目列表可以对一些并列的，没有先后顺序的项目进行格式设置，其前面一般用项目符号作为前导字符。3.3.2 项目列表从入门到精通 清华大学出版社23 项目列表可以对一些并列的，没有先后顺序的项目进行格式设置，其定义列表一般用在词汇表或说明书中，没有项目符号或数字等前导字符。3.3.3 定义列表从入门到精通清华大学出版社24 定义列表一般用在词汇表或说明

10、书中，没有项目符号或数字等前导字列表可以进行嵌套，即在其他列表中再创建列表，比如可以在编号列表中嵌套项目列表，也可以在项目列表中嵌套编号列表。 3.3.4 嵌套列表的创建从入门到精通清华大学出版社25列表可以进行嵌套，即在其他列表中再创建列表，比如可以在编号列从入门到精通清华大学出版社3.4 为网页添加图像3.4.1 网页中支持的图像格式3.4.2 直接插入图像3.4.3 用占位符插入图像从入门到精通清华大学出版社3.4 为网页添加图像3.4.13.4.1 网页中支持的图像格式从入门到精通清华大学出版社27 网页图像对图像的格式有一定要求，目前网页中通常使用的图像格式为GIF、JPG和PNG这

11、3种，各种图像格式的特点如下：GIF：图像交换格式。GIF图像是第一个在网页中应用的图像格式，通常用作站点Logo、广告条Banner及网页背景图像等。其优点是它可以使图像文件变得相当小，也可以在网页中以透明方式显示，并可以包含动态信息。JPG：联合照片专家组（Join Photograph Graphics），也称为JPEG。这种格式的图像可以高效地压缩，图像文件变小的同时基本不失真，因为其丢失的内容是人眼不易察觉的部分，因此常用来显示颜色丰富的精美图像，如照片等。PNG：便携网络图像（Portable Network Graphics），既有GIF能透明显示的特点，又具有JPEG处理精美图

12、像的优势，常常用于制作网页效果图。 3.4.1 网页中支持的图像格式从入门到精通清华大学出版社3.4.2 直接插入图像从入门到精通清华大学出版社28在网页中插入图像可以使网页更生动，表达更直观。网页中的图像并不是直接粘贴在文档中的，它是以一种文件链接的方式插入的，所以网页中显示的是保存在链接文件夹中的图片文件。 3.4.2 直接插入图像从入门到精通清华大学出版社28在网在网页制作过程中若需要插入的图像未制作完成，如客户暂时未提供其Logo，则可以使用占位符的方式插入图像 。3.4.3 用占位符插入图像从入门到精通清华大学出版社29 在网页制作过程中若需要插入的图像未制作完成，如客户暂时未提从入

13、门到精通清华大学出版社3.5 图像的设置和应用设置图像属性创建鼠标经过图像3.5.13.5.2从入门到精通清华大学出版社3.5 图像的设置和应用设置图像在Dreamweaver中选中网页文档中的图像后，在其 “属性”面板即可对图像的属性进行设置，如设置图像的大小、对齐方式等。3.5.1 设置图像属性从入门到精通清华大学出版社31 出现阴影确定裁切范围裁切后的图像在Dreamweaver中选中网页文档中的图像后，在其 “属要通过Dreamweaver CS6向Internet服务器上传并发布站点，需要先进行站点的远程信息配置。 3.5.2 创建鼠标经过图像从入门到精通清华大学出版社32要通过Dr

14、eamweaver CS6向Internet服务器从入门到精通清华大学出版社333.6 基础实例3.6.1 创建软件下载列表3.6.2 制作导航条页面基础实例从入门到精通清华大学出版社333.6 基础实例3.6.1 本例将制作一个软件下载列表的网页，通过输入文本、设置文本格式、创建列表和嵌套列表等方式，来达到创建软件下载列表的目的，并巩固本章网页文本方面的知识。 3.6.1 创建软件下载列表从入门到精通清华大学出版社34本例将制作一个软件下载列表的网页，通过输入文本、设置文本格式本例制作的软件下载列表，主要是从文本方面着手，由于是下载列表，所以少不了要添加多个下载列表和软件项目，这些可以通过添

15、加列表的方式来解决，并且由于是多个类型，所以还需要添加多个类型的列表，因此使用嵌套列表的方法最为恰当。另外还需要通过不同的字体格式来区分类型与项目文本。而既然是下载列表，一般需要添加超级链接，即单击一个列表项目后跳转到相应的页面，但是由于本章主要是介绍文本的添加和设置，所以关于超级链接的添加，将在后面的章节专门讲解。1行业分析从入门到精通清华大学出版社35本例制作的软件下载列表，主要是从文本方面着手，由于是下载列表2操作思路从入门到精通清华大学出版社36输入标题文本设置字体格式添加项目列表操作思路1234嵌套编号列表2操作思路从入门到精通清华大学出版社36输入标题文本设置字本例将利用制作好的一

16、组图片，通过图像的各种方式，来制作一个网页导航页面。3.6.2 制作导航条页面从入门到精通清华大学出版社37本例将利用制作好的一组图片，通过图像的各种方式，来制作一个网导航条是很多网站都需要的一个网页元素，在一个网站中，通过导航条可以快速浏览站点中的主要页面，所以不管是在首页，还是在其他主题页面中，都需要添加导航条来方便浏览者浏览。导航条可以是纯文字，也可以是图片或Flash按钮等，一般为了美观，会使用自己设计的图片作为导航条元件。以前版本的Dreamweaver有专门的插入导航条功能，其实该功能与插入鼠标经过图像非常类似，所以在Dreamweaver CS6中将该功能取消了。但是要实现利用图

17、片制作导航条的功能，只需制作好一组导航图片，然后通过插入鼠标经过图像的方法来实现导航功能。1行业分析从入门到精通清华大学出版社38导航条是很多网站都需要的一个网页元素，在一个网站中，通过导航2操作思路从入门到精通清华大学出版社39插入导航条图像插入其他图像设置图像属性操作思路12342操作思路从入门到精通清华大学出版社39插入导航条图像插从入门到精通清华大学出版社403.7 基础练习3.7.1 为时尚网页添加和设置文本3.7.2 制作动物网页基础练习从入门到精通清华大学出版社403.7 基础练习3.7.1 3.7.1 为时尚网页添加和设置文本从入门到精通清华大学出版社41打开素材文档并输入相关

18、文本设置字体格式和颜色添加嵌套列表3.7.1 为时尚网页添加和设置文本从入门到精通清华大学出3.7.2 制作动物网页从入门到精通清华大学出版社42打开素材文件添加顶部单元格背景图像添加公鸡图像及马图像添加“鸡”字图像和“马”字图像并设置属性3.7.2 制作动物网页从入门到精通清华大学出版社42打开从入门到精通清华大学出版社433.10 知识问答问：网页的字体设置有没有固定的标准呢？问：在网页中插入图像，必须插入站点文件夹中的图像吗？问：在使用网页图像时，有什么讲究或需注意的地方？问：制作网页时网页图像的选择一直是最令我头疼的事，关于网页图像的准备和选择有没有好的方法？从入门到精通清华大学出版社433.10 知识问答问：网页的从入门到精通清华大学出版社知识关联：网页图像的一些技巧快速插入网络图像：使用网络图像时，需要将其URL地址复制到Dreamweaver图像“源文件”文本框中。这里介绍一种更简便的方法，在浏览器中找到要引用的网络图像文件，在其上单击鼠标右键，在弹出的快捷菜单中选择“复制”命令，然后在Dreamweaver中目标位置定位插入点，并单击鼠标右键，在弹出的