《第3章用文本和图像充实网页 中文版Dreamweaver CS6网页制作课件》由会员分享，可在线阅读，更多相关《第3章用文本和图像充实网页 中文版Dreamweaver CS6网页制作课件（44页珍藏版）》请在金锄头文库上搜索。
1、, 清华大学出版社 ,第3章 用文本和图像充实网页,中,文,版,Dreamweaver CS6,从入门到精通,本章导读,从入门到精通,清华大学出版社,2,Contents,1 添加文本,2 设置文本格式,3 创建列表,4 为网页添加图像,5 图像的设置和应用,3.1 添加文本,Concept,3.1.1 添加普通文本,3.1.2 添加空格,3.1.3 添加水平线,3.1.4 添加日期,3.1.5 添加特殊符号,3.1.6 文本换行与分段,3.1.1 添加普通文本,从入门到精通,清华大学出版社,4,1直接输入文本,从入门到精通,清华大学出版社,5,在网页文档中，将鼠标光标定位在需添加文本的位置，
2、切换到所需的输入法即可进行文本的输入。,在其他包含文本的文档中选中所需复制的文本，单击鼠标右键，在弹出的快捷菜单中选择“复制”命令，然后将鼠标光标定位到网页中需插入文本的位置，单击鼠标右键，在弹出的快捷菜单中选择“粘贴”命令即可完成文本的插入。,2从其他文档中复制文本,从入门到精通,清华大学出版社,6,除了使用复制文本的方法为网页快速添加文本，Dreamweaver还可以直接将Word、Excel中的内容导入到网页中。,3导入文本,从入门到精通,清华大学出版社,7,在Word等文字编辑软件中若要添加空格只需按空格键即可，但是在Dreamweaver中无论按多少次空格键都只会出现一个空格，这是因
3、为Dreamweaver中的文档格式都是以HTML的形式存在，而HTML文档只允许字符之间包含一个空格。要在网页文档中添加连续的空格，可以采用以下几种方式： 选择【窗口】/【插入】命令打开“插入”面板，在“常用”下拉列表中选择“文本”选项切换到“文本”插入栏，在插入列表中单击“已编排格式”按钮 ，然后在文档中连续按空格键即可。,3.1.2 添加空格,从入门到精通,清华大学出版社,8,水平线对于信息的组织很有用。在页面中，可以使用一条或多条水平线以可视方式分隔文本和对象，使段落区分更明显，让网页更具层次感。,3.1.3 添加水平线,从入门到精通,清华大学出版社,9,Dreamweaver提供了一
4、个方便的日期对象，该对象可以以任何格式插入当前的日期，并可在每次保存文件时都自动更新该日期。,3.1.4 添加日期,从入门到精通,清华大学出版社,10,在Dreamweaver中，可以为文档添加多种特殊符号，如版权符号 、注册商标符号 等。,3.1.5 添加特殊符号,从入门到精通,清华大学出版社,11,在Dreamweaver中输入文本时不会自动换行，当在浏览器中预览时，文本的行数和每行的字数会随着浏览器大小改变而改变，如果要换行，需按“Shift+Enter”键进行手动换行，如果要分段，则直接按“Enter”键。,3.1.6 文本换行与分段,从入门到精通,清华大学出版社,12,从入门到精通,
5、清华大学出版社,3.2 设置文本格式,3.2.1 设置文本基本格式,从入门到精通,清华大学出版社,14,不同的电脑中所安装的字体可能不同，所以为了尽可能让大多数电脑中显示的网页外观保持一致，网页中的文本通常都采用最常用的字体，如中文采用“宋体”、“黑体”，英文采用“Arial”等。,1编辑字体列表,从入门到精通,清华大学出版社,15,要设置文本的字体和大小，可选中要设置字体的文本，文本将以反白形式显示，在“属性”面板中可进行字体、大小、颜色、对齐方式以及粗体或斜体设置。,2设置文本字体格式,从入门到精通,清华大学出版社,16,3.2.2 设置段落格式,从入门到精通,清华大学出版社,17,设置段
6、落标题,1,2,3,设置段落对齐,设置段落缩进,利用“属性”面板“格式”下拉列表框中的选项，可以快速地将段落文本设置为一级标题、二级标题、三级标题等标题样式，其中标题号越小，字体越大。,1设置段落标题,从入门到精通,清华大学出版社,18,段落文本的对齐在网页布局中起着十分重要的作用，Dreamweaver提供了左对齐、居中对齐、右对齐和两端对齐4种对齐方式。,2设置段落对齐,从入门到精通,清华大学出版社,19,设置段落缩进可以将整个段落文本进行凸出或缩进显示。,3设置段落缩进,从入门到精通,清华大学出版社,20,从入门到精通,清华大学出版社,3.3 创建列表,编号列表,3.3.1,3.3.2,
7、项目列表,3.3.3,定义列表,3.3.4,嵌套列表的创建,3.3.1 编号列表,从入门到精通,清华大学出版社,22,创建编号列表可以使文本条理清晰，让人一目了然。编号列表前面通常有数字前导字符，可以是英文字母、阿拉伯数字或罗马数字等符号。,项目列表可以对一些并列的，没有先后顺序的项目进行格式设置，其前面一般用项目符号作为前导字符。,3.3.2 项目列表,从入门到精通,清华大学出版社,23,定义列表一般用在词汇表或说明书中，没有项目符号或数字等前导字符。,3.3.3 定义列表,从入门到精通,清华大学出版社,24,列表可以进行嵌套，即在其他列表中再创建列表，比如可以在编号列表中嵌套项目列表，也可
8、以在项目列表中嵌套编号列表。,3.3.4 嵌套列表的创建,从入门到精通,清华大学出版社,25,从入门到精通,清华大学出版社,3.4 为网页添加图像,3.4.1 网页中支持的图像格式,3.4.2 直接插入图像,3.4.3 用占位符插入图像,3.4.1 网页中支持的图像格式,从入门到精通,清华大学出版社,27,网页图像对图像的格式有一定要求，目前网页中通常使用的图像格式为GIF、JPG和PNG这3种，各种图像格式的特点如下：GIF：图像交换格式。GIF图像是第一个在网页中应用的图像格式，通常用作站点Logo、广告条Banner及网页背景图像等。其优点是它可以使图像文件变得相当小，也可以在网页中以透
9、明方式显示，并可以包含动态信息。 JPG：联合照片专家组（Join Photograph Graphics），也称为JPEG。这种格式的图像可以高效地压缩，图像文件变小的同时基本不失真，因为其丢失的内容是人眼不易察觉的部分，因此常用来显示颜色丰富的精美图像，如照片等。 PNG：便携网络图像（Portable Network Graphics），既有GIF能透明显示的特点，又具有JPEG处理精美图像的优势，常常用于制作网页效果图。,3.4.2 直接插入图像,从入门到精通,清华大学出版社,28,在网页中插入图像可以使网页更生动，表达更直观。网页中的图像并不是直接粘贴在文档中的，它是以一种文件链接的
10、方式插入的，所以网页中显示的是保存在链接文件夹中的图片文件。,在网页制作过程中若需要插入的图像未制作完成，如客户暂时未提供其Logo，则可以使用占位符的方式插入图像 。,3.4.3 用占位符插入图像,从入门到精通,清华大学出版社,29,从入门到精通,清华大学出版社,3.5 图像的设置和应用,设置图像属性,创建鼠标经过图像,在Dreamweaver中选中网页文档中的图像后，在其 “属性”面板即可对图像的属性进行设置，如设置图像的大小、对齐方式等。,3.5.1 设置图像属性,从入门到精通,清华大学出版社,31,出现阴影,确定裁切范围,裁切后的图像,要通过Dreamweaver CS6向Intern
11、et服务器上传并发布站点，需要先进行站点的远程信息配置。,3.5.2 创建鼠标经过图像,从入门到精通,清华大学出版社,32,从入门到精通,清华大学出版社,33,3.6 基础实例,3.6.1 创建软件下载列表,3.6.2 制作导航条页面,基础实例,本例将制作一个软件下载列表的网页，通过输入文本、设置文本格式、创建列表和嵌套列表等方式，来达到创建软件下载列表的目的，并巩固本章网页文本方面的知识。,3.6.1 创建软件下载列表,从入门到精通,清华大学出版社,34,本例制作的软件下载列表，主要是从文本方面着手，由于是下载列表，所以少不了要添加多个下载列表和软件项目，这些可以通过添加列表的方式来解决，并
12、且由于是多个类型，所以还需要添加多个类型的列表，因此使用嵌套列表的方法最为恰当。另外还需要通过不同的字体格式来区分类型与项目文本。而既然是下载列表，一般需要添加超级链接，即单击一个列表项目后跳转到相应的页面，但是由于本章主要是介绍文本的添加和设置，所以关于超级链接的添加，将在后面的章节专门讲解。,1行业分析,从入门到精通,清华大学出版社,35,2操作思路,从入门到精通,清华大学出版社,36,输入标题文本,设置字体格式,添加项目列表,操作思路,1,2,3,4,嵌套编号列表,本例将利用制作好的一组图片，通过图像的各种方式，来制作一个网页导航页面。,3.6.2 制作导航条页面,从入门到精通,清华大学
13、出版社,37,导航条是很多网站都需要的一个网页元素，在一个网站中，通过导航条可以快速浏览站点中的主要页面，所以不管是在首页，还是在其他主题页面中，都需要添加导航条来方便浏览者浏览。 导航条可以是纯文字，也可以是图片或Flash按钮等，一般为了美观，会使用自己设计的图片作为导航条元件。以前版本的Dreamweaver有专门的插入导航条功能，其实该功能与插入鼠标经过图像非常类似，所以在Dreamweaver CS6中将该功能取消了。但是要实现利用图片制作导航条的功能，只需制作好一组导航图片，然后通过插入鼠标经过图像的方法来实现导航功能。,1行业分析,从入门到精通,清华大学出版社,38,2操作思路,
14、从入门到精通,清华大学出版社,39,插入导航条图像,插入其他图像,设置图像属性,操作思路,1,2,3,4,从入门到精通,清华大学出版社,40,3.7 基础练习,3.7.1 为时尚网页添加和设置文本,3.7.2 制作动物网页,基础练习,3.7.1 为时尚网页添加和设置文本,从入门到精通,清华大学出版社,41,打开素材文档并输入相关文本,设置字体格式和颜色,添加嵌套列表,3.7.2 制作动物网页,从入门到精通,清华大学出版社,42,打开素材文件,添加顶部单元格背景图像,添加公鸡图像及马图像,添加“鸡”字图像和“马”字图像并设置属性,从入门到精通,清华大学出版社,43,3.10 知识问答,问：网页的
15、字体设置有没有固定的标准呢？,问：在网页中插入图像，必须插入站点文件夹中的图像吗？,问：在使用网页图像时，有什么讲究或需注意的地方？,问：制作网页时网页图像的选择一直是最令我头疼的事，关于网页图像的准备和选择有没有好的方法？,从入门到精通,清华大学出版社,知识关联：网页图像的一些技巧,快速插入网络图像：使用网络图像时，需要将其URL地址复制到Dreamweaver图像“源文件”文本框中。这里介绍一种更简便的方法，在浏览器中找到要引用的网络图像文件，在其上单击鼠标右键，在弹出的快捷菜单中选择“复制”命令，然后在Dreamweaver中目标位置定位插入点，并单击鼠标右键，在弹出的快捷菜单中选择“粘贴”命令，即可快速插入网络图像。 选择插入网页的图像格式：在进行网页设计时，在jpg、gif、png等格式中，到底选择哪种格式为宜呢？其实，这几种格式各有特点，都有不可替代的作用。对于照片等色彩丰富、色彩过渡较多的图片，使用jpg格式可以在质量与图像存储大小之间取得平衡；对于按钮、网页元素背景（如导航栏背景）等较为简单的图像，使用gif格式图像更合适一些，同时gif格式还支持帧动画，这是其他两种格式无法做到的；对于需要背景透明的图像则使用png格式是最理想的选择，不过要注意的是部分浏览器并不支持png格式。,
