第四讲 使用Dreamweaver制作一个简单的网页

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,第,4,章使用,DW,制作一个简单的网页,1,2,3,在页面中插入和处理图像,在页面中添加和处理文字,设置网页属性,1,在页面中添加和处理文字,文字处理主要包括：,输入文字,设置文字大小,设置字体,设置文本颜色,设置文本对齐方式等。,1.1,插入文本,1,插入普通文本,将插入点定位在文档编辑区中，直接输入文本即可。,在,Word,等文本编辑软件中编辑好文本之后，将其复制到剪贴板上，然后在,Dreamweaver 8,中将插入点定位到文档编辑区中，粘贴剪贴板中的文本即可。,2,添加“换行”,如果需要开始新的一段，按,键即可，对应的,HTML,标签是,；,如果想换行显示一段内容，可以按,组合键，对应的,HTML,标签是,；如果输入的文字超出一行的范围，输入的文本将自动换行。,3,在字符之间添加“空格”,在,Dreamweaver,8.0,中一般只能输入一个空格，若要输入连续的空格时，可以采用下面几种方法中的一种：,执行菜单命令“编辑,/,首选参数”，打开“首选参数”对话框后，选定“分类”栏中的“常规”选项，然后在右边编辑选项中勾选“允许多个连续的空格”复选框即可。,将光标定位到需要输入多个空格的位置，切换到代码视图即,HTML,源文档中连续输入多个“,&,nbsp,;”,。,单击插入工具栏文本分类中的“文本”对象，弹出下拉菜单，选择“不换行空格”选项即可。或者直接按快捷键：,Ctrl+Shift,+,空格键。,切换到中文输入法，设置为全角输入状态（,Shift+,空格键），然后在欲连续输入空格的位置按空格键。,4,插入特殊字符,在,Dreamweaver,8,中编辑文本时,，,往往会遇到一些无法通过键盘直接输入的特殊字符,，,如版权符号,、注册商标符号,等。,可通过,Dreamweaver,8,插入特殊字符的功能进行插入。在“设计”窗口中，将插入点放在要插入特殊字符的位置，执行下列操作之一：,选择菜单栏中的“,插入,/HTML/,特殊字符,”命令，现在字符名称。,在“插入”面板中的“文本”类别中，单击“字符按钮”选择需要的字符。,1.2,编辑文字,1,设置字体外观,用户可对属性面板的“字体”下拉列表框中的字体列表重新编辑。,2,设置字体大小,在属性面板的“大小”下拉列表框中选择相应的选项，并选择其后的“单位”下拉列表框中相应的单位选项，即可设置所选文本的字体大小。,其中字体的度量单位有像素（,px,）、厘米（,cm,）等，可根据具体情况进行选择，但一般都以像素为单位。,3,设置颜色,单击属性面板中的 按钮，在弹出的颜色列表框中选择相应的选项可设置所选文本的字体颜色，在其后的文本框中直接输入颜色的英文名（如,Red,、,Green,等）或以“,#”,开头的十六进制颜色代码（如,#ff0000,、,00ff00,）设置所选文本的颜色。,4,设置字体样式,粗体,根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将,或,标签应用于选定的文本，即对所选文本加粗。单击按钮即可设置“加粗”设置。再次单击按钮可取消“加粗”设置。,斜体,根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将,或,标签应用于选定的文本，即对所选文本进行倾斜设置。选中按钮即可将所选的文本应用“倾斜”。再次单击按钮可取消“加粗”设置。,5,设置对齐方式,通过属性面板中的“左对齐”按钮、“居中对齐”按钮、“右对齐”按钮和“两端对齐”按钮可设置文本的对齐方式。,6,设置标题格式,在属性栏的“格式”下拉列表框中可设置标题格式，其中“段落”是应用,标签的默认格式，“标题,1”,选项应用,标签，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。,1.3,添加和修改水平线,在文档编辑区将插入点定位到所需位置，选择,插入,HTML,水平线,菜单命令或单击“插入”栏中的“,HTML”,选项卡在其中单击 按钮即可添加水平线。,选定插入的水平线，打开属性面板，设置水平线的高度、宽度、对齐方式以及是否有阴影等属性,设置水平线的颜色,选中水平线，然后单击属性面板中的快速标签编辑器按钮，打开编辑标签窗口，键入代码，如将水平线设为红色，键入代码：,color=“red”,。,1.4,插入日期,在制作网页时，有时需要插入当前的日期，,Dreamweaver,8,提供了快速插入日期和时间的功能。,勾选这里，日期在每次保存文件时自动更新,1.5,项目列表的应用,有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字符，其中前导字符可以是阿拉伯数字、英文字母或罗马数字等。,无序列表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字符。,定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。,2,在页面中插入和处理图像,2.1,网页图像的格式及来源,2.2,插入图像,2.3,设置图像属性,2.1,网页图像的格式及来源,GIF,格式,GIF,全称为“,Graphics Interchange Format”,，意为可交换图像格式，它是第一个支持网页的图像格式，在,PC,机和苹果机上都能被正确识别。它最多支持,256,种颜色，可以使图像变得容量相当小。,GIF,图像可以在网页中以透明方式显示，还可以包含动态信息，即,GIF,动画。,JPEG,格式,JPEG,全称为“,Joint Photographic Experts Group”,，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。,PNG,格式,PNG,全称为“,Portable Network Graphics”,，意为便携网络图像，它是逐渐流行的网络图像格式。,PNG,格式既融合了,GIF,能透明显示的特点，又具有,JPEG,处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。,网页图像来源,网页图像的素材有很多来源，如可以使用图形处理软件（如,Photoshop,、,Fireworks,等软件）制作；可以购买网页素材光盘；可以从网络上下载等。,2.2,插入图像,1,直接插入,选择,插入,图像,菜单命令。,单击插入栏的“常用”选项卡中的按钮。,按,【,Ctrl+Alt+I,】,键。,2,占位符插入,制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。,选择,插入,图像对象,图像占位符,菜单命令。,单击插入栏的“常用”选项卡中的按钮。,将图像确定后双击占位符，在打开的对话框中设置后插入即可。,2.3,设置图像属性,在网页中插入图像后可通过属性面板对其属性进行修改等设置。,1,图像命名,为了在使用,Dreamweaver,行为（如交换图像）或脚本撰写语言（如,JavaScript,或,VBScript,）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。,2,图像大小,在,Dreamweaver,8,中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。,在“宽”和“高”文本框中输入新值，实现图像大小改变，但却与图像的实际宽度和高度不相符，若要恢复图像原始值，可单击“宽”和“高”文本框右侧的“恢复图像到原始大小”按钮重设大小。,3,源文件设置,在属性面板的“源文件”文本框中显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属性面板中的“源文件”文本框中重新输入要插入图像的地址，或单击右侧后的 按钮，在打开的“选择图像源文件”对话框中重新选择需要的图像。,4,文本说明,在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。,5,图像与文本的对齐,选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。,6,图像边距,选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上方和左侧之间的距离，也可以设置图像与其他网页元素之间的距离,。,7,图像边框,选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“,0”,表示无边框。,3,设置网页的页面属性,页面属性是指网页的一般属性信息，例如，网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。,1.,设置网页标题及编码,2.,设置网页其他属性,(1),外观,(2),链接,(3),跟踪图像,综合实例,