网页基本页面属性.pptx

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2011-3-22,#,单击此处编辑母版标题样式,第,4,章 创建和编辑网页文档,4.1,创建一个新文档,4.2,文字处理,4.3,图像处理,4.4,超级链接,4.5,使用多媒体对象,第,4,章 创建和编辑网页文档,4.1,创建一个新文档,4.1.1,创建新的空白文档,在,Dreamweaver 8,中可以创建新的空白文档、创建以模板为基础的文档以及打开并编辑已经存在的文档。,三种方法：,1,、从启动界面中的“创建新项目”组合框中选择合适的文件类型，即可直接进入文档窗口进行编辑。,2,、也可选择主菜单中的“文件”“新建”命令，系统弹出新建文档对话框。,3,、按下,Ctrl+N,快捷键，系统弹出新建文档对话框。,第,4,章 创建和编辑网页文档,4.1.2,打开现有文档,在,Dreamweaver 8,中可以打开现有的,Web,页或基于文本的文档，即使这些文档不是用,Dreamweaver 8,创建的也可以将其打开，然后利用,Dreamweaver 8,在“设计”视图或“代码”视图中编辑该文档。,打开现有的文档有以下几种方法：,1.,在“文档”窗口中打开选择的文档,2.,导入,Word,文档,3.,在资源管理器中打开文档,第,4,章 创建和编辑网页文档,4.1.3,设置页面属性,页面属性是指网页的一般属性信息，例如，网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。,1.,设置网页标题及编码,2.,设置网页其他属性,(1),外观,(2),链接,(3),跟踪图像,第,4,章 创建和编辑网页文档,4.2,文字处理,文字处理主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。,4.2.1,输入文字,1,输入文字：,打开,Dreamweaver 8,之后，然后在需要插入文本的位置单击鼠标左键定位插入点，然后输入文字。如果需要开始新的一段，按,键即可，对应的,HTML,标签是,；如果想换行显示一段内容，可以按,组合键，对应的,HTML,标签是,；如果输入的文字超出一行的范围，输入的文本将自动换行。,第,4,章 创建和编辑网页文档,2,输入连续空格,在,Dreamweaver 8,中一般只能输入一个空格，若要输入连续的空格时，可以采用下面几种方法中的一种：,执行菜单命令“编辑,/,首选参数”，打开“首选参数”对话框后，选定“分类”栏中的“常规”选项，然后在右边编辑选项中勾选“允许多个连续的空格”复选框即可。,将光标定位到需要输入多个空格的位置，切换到代码视图即,HTML,源文档中连续输入多个“,”,，或者单击插入工具栏文本分类中的“字符”对象，弹出下拉菜单，选择“不换行空格”选项即可。,切换到中文输入法，设置为全角输入状态，然后在欲连续输入空格的位置按空格键。,3,输入特殊字符,第4,章 创建和编辑网页文档,4.2.2,编辑文字,1,设置文字标题与段落,设置文字段落与标题的方法基本相同，方法如下：,(1),将光标定位到应用段落样式或文本样式的文本中，或直接选取文本。,(2),单击属性面板中的格式选择框，在弹出的下拉列表中选择“段落”或“标题”。,切换到代码视图，我们就会发现，字符属性面板的“格式”列表框中的“段落”、“标题,1”,、“标题,2”,、“标题,3”,、“标题,4”,、“标题,5”,、“标题,6”,和“预先格式化的”等选项，分别对应,HTML,语言中的,、,、,、,、,、,、,和,标记。,第,4,章 创建和编辑网页文档,2,设置文字字体及大小,(1),设置字体,(2),设置字号,3,设置文本颜色,4,设置方本对齐方式,第,4,章 创建和编辑网页文档,4.2.3,插入水平线,水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。,1,、插入水平线,将光标移到要插入水平线的位置，执行菜单“插入”“,HTML”“,水平线”命令或者在“插入”栏中，选择“,HTML”,，然后单击“水平线”按钮，插入一条默认宽度和粗细的水平线。,2,、修改水平线,选定插入的水平线，打开属性面板，设置水平线的高度、宽度、对齐方式以及是否有阴影等属性,3,、设置水平线的颜色,选中水平线，然后单击属性面板中的快速标签编辑器按钮，打开编辑标签窗口，键入代码，如将水平线设为红色，键入代码：,color=“red”,。,第,4,章 创建和编辑网页文档,4.2.4,插入更新日期,Dreamweaver,提供了一个方便的日期对象，该对象使用户可以以喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期。,1.,插入日期、星期和时间,2.,插入更新日期,3.,修改日期,要修改网页中已插入的日期，有两种方法：,(1),若没有勾选“储存时自动更新”，则直接手动修改日期。,(2),若勾选了“储存时自动更新”，则选中日期后在属性面板中单击 按钮，同样弹出“插入日期”对话框，在其中编辑修改日期格式。,第,4,章 创建和编辑网页文档,4.3,图像处理,4.3.1,插入图像,在,Dreamweaver 8,中插入图像的基本方法是：,1,将光标置于要插入图像的位置，在插入工具栏的“常用”类中单击“图像”按钮或选择“插入”菜单中的“图像”命令，打开“选择图像源文件”对话框。,2,在对话框中显示有图像文件名、文件类型和图像源的路径,URL(,每个网页都有一个唯一的地址，称作统一资源定位器即,URL),。我们选取存放在站点中的图像文件，然后单击,【,确定,】,按钮将显示“图像标签辅助功能属性”对话框，在“替代文本”和“详细描述”文本框中输入内容，单击“确定”按钮，即可将图片插入到指定区域。,3,如果所选择的图像文件不在用户设定的当前站点，则将打开Macromedia Dreamweaver”,对话框。提示是否将图像文件复制到根文件夹，单击,【,是,】,按钮，然后打开“复制文件为”对话框，定位到站点中用于存放图像文件的文件夹,images,，最后单击,【,保存,】,按钮即可。,第,4,章 创建和编辑网页文档,4.3.2,设置图像属性,在网页中插入图像后可以对图像的各种相关属性进行设置，若要设置图像属性，请执行以下操作：,1.,图像名称及大小：使用缩略图下面的文本框设置名称，以便在使用,Dreamweaver,行为,(,如“交换图像”,),或脚本语言,(,如,JavaScript,或,VBScript),时可以引用该图像。而缩略图右侧标明了所插入图像的大小。,2.,宽和高：以像素为单位指定图像的宽度和高度。当您在页中插入图像时，,Dreamweaver,自动用图像的原始尺寸更新这些文本框。在“宽”和“高”文本框中输入新值，实现图像大小改变，但却与图像的实际宽度和高度不相符，若要恢复图像原始值，可单击“宽”和“高”文本框右侧的“恢复图像到原始大小”按钮重设大小。,第,4,章 创建和编辑网页文档,3.,源文件：指定图像的源文件。单击文件夹图标以浏览到源文件，或者直接键入路径。,4.,链接：指定图像的超级链接。将“指向文件”图标拖到“站点”面板中的某个文件，或单击文件夹图标浏览到站点上的某个文档，或手动键入,URL,。,5.,对齐：可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。当图像与图像在网页中对齐时，可由属性面板中的按钮来确定，当图像与文本、插件或其它元素对齐时，可将图像视为一般字符，运用属性面板中的列表来确定。,第,4,章 创建和编辑网页文档,6.,替代：指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。,7.,地图名称和热点工具：允许您标注和创建图像映射。,8.,垂直边距和水平边距：沿图像的边缘添加边距,(,以像素为单位,),。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。若图像和文字贴得太近，容易使人产生压迫感。因此，适当调整图像间边距可以使浏览者在浏览网页时更加舒适。,第,4,章 创建和编辑网页文档,9.,目标：指定链接的页应当在其中载入的框架或窗口。,(,当图像没有链接到其它文件时，此选项不可用。,),当前框架集中所有框架的名称都显示在“目标”列表中。,也可选用下列保留目标名：,_blank:,将链接的文件载入一个未命名的新浏览器窗口中。,_parent:,将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。,_self:,将链接的文件载入该链接所在的同一框架或窗口中。此为默认值。,_top:,将链接的文件载入整个浏览器窗口中，因而会删除所有框架。,第,4,章 创建和编辑网页文档,10.,低解析度源：指定在载入主图像之前应该载入的图像。,11.,边框：以像素为单位的图像边框的宽度。默认无边框。,12.,编辑：启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。,13.,优化：打开“优化”对话框，使用,Fireworks,优化图像。,14.,裁剪：修剪图像大小，删除不需要的区域。,15.,重新取样：对已调整大小的图像重新取样，提高图片在新的大小和形状下的品质。,16.,亮度和对比度：调整图像的亮度和对比度设置。,17.,锐化：调整图像的清晰度。,第,4,章 创建和编辑网页文档,4.3.3,插入图像占位符,在,Dreamweaver,中插入图像占位符的基本操作：,1.,将光标置于要插入图像占位符的位置，在插入工具栏的“常用”分类中选择“图像占位符”按钮或选择“插入”菜单中的“图像对象”中的“图像占位符”命令，打开“图像占位符”对话框。,2.,在对话框中进行设置：,(1),在“名称”文本框中，输入要作为图像占位符的标签文字显示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；不允许使用空格和高位,ASCII,字符。,(2),在“宽度”和“高度”文本框中，以像素为单位键入数字以设置图像大小。,(3),为图像占位符选择一种颜色，可以使用颜色选择器或直接输入颜色的十六进制值,(,如,#FF0000),或输入网页安全色名称,(,如,red),。,(4),在“替代文本”中，为使用只显示文本的浏览器的访问者输入描述该图像的文本。,3,单击“确定”。网页文档中即会出现图像占位符。,第,4,章 创建和编辑网页文档,4.3.4,插入“鼠标经过图像”,鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原始图像。这种效果通常用于导航条、图像互动等。它由两幅图像组成，一是首次载入时显示的图像即原始图像，二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像；如果这两个图像大小不同，,Dreamweaver,将自动调整第二个图像的大小以匹配第一个图像的属性。,第,4,章 创建和编辑网页文档,4.4,超级链接,4.4.1,超级链接的概念,超级链接是指从一个网页指向一个目标的连接关系，即在,Web,页面中插入的指向其它文档的引用。目标可以是一个另外的网页，也可以是一张图片、一个文件、一个程序等。链接可以将任何类型的资源转换为链接，但最常用的链接类型是文本链接。可以在站点创建过程的任何阶段创建超级链接。,超级链接的外观多种多样，可以是导航按钮、文本、图片，无论是哪一种格式，只要用鼠标单击链接对象，即可跳转到指定的目标网页。当鼠标指向链接载体时，链接载体会发生一些变化，如鼠标指向文字载体，文字的字体、字号、颜色等会发生改变，有的带有下画线。,第,4,章 创建和编辑网页文档,1.,超链接的分类,根据超级链接目标文件的不同，可以分为页面超链接、锚点超链接、电子邮件超链接等；根据超级链接单击对象的不同，超级链接可分为文字超链接、图像超链接、图像映射等。,第,4,章 创建和编辑网页文档,2.,路径,创建超链接必须先了解链接与被链接载体的路径。在一个网站中，路径通常有,3,种表示方式：绝对路径、根目录相对路径和文档目录相对路径。,(1),绝对路径。,(2),根目录相对路径。,(3),文档目录相对路径。,第,4,章 创建和编辑网页文档,4.4.2,创建超级链接,Dreamweaver,提供多种创建超链接的方法，可创建到文档、图像、多媒体文件或可下载软件的链接。可建立到文档内任意位置的任何文本或图像,(,包括标题、列表、表、层或框架中的文本或图像,),的链接。,1,、创建到其它文档或文件的超级链接,2,、创建到文档内的特定位置的超级链接,3,、创建电子邮件链接,第,4,章 创建和编辑网页文档,4.4.3,管理超级链接,为避免站点中出现断链接，可以激活链接管理，使,Dreamweaver,在您作出更改后自动更新链接。也可以使用站点的可视化表示形式来修改链接，或者通过一次更改将所有链接更新到一个特定的文件中。,自动更新链接,在站点地图中修改链接,在整个站点范围内更改链接,第,4,章 创建和编辑网页文档,4.4.4,图像映射,图像映射就是指在一幅图像中定义若干个区域,(,这些区域称为热点,),，每个区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面。,第,4,章 创建和编辑网页文档,4.4.5,导航条,导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。导航条项目最多呈现四种图像状态：,(1),初始状态：用户尚未单击或尚未与此项目交互时所显示的图像。,(2),滑过状态：指鼠标指针滑过初始图像时所显示的图像。,(3),按下状态：指项目被单击后所显示的图像。,(4),按下时鼠标经过状态：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。,1创建导航条,2,、测试与修改导航条,第,4,章 创建和编辑网页文档,4.5,使用多媒体对象,Macromedia Dreamweaver 8,可以快速便捷地向,Web,站点添加多媒体对象，如,Flash,和,Shockwave,影片、,QuickTime,、,AVI,、,Java applet,、,Active X,控件以及各种格式的音频文件，从而使制作出的网页有声有色。目前使用的音频和视频文件格式包括：,(1),音频：主要包含,Wav,、,Midi,、,Mp3,、,Aif,和,Ra,等文件格式。,(2),视频：主要有,Real Media,、,Windows Media,、,QuickTime 3,种视频文件，其中,Real Media,和,Windows Media,格式在国内使用最广。,第,4,章 创建和编辑网页文档,4.5.1,插入和编辑多媒体对象,可以在,Dreamweaver,文档中插入,Flash SWF,文件或对象、,QuickTime,或,Shockwave,影片、,Java applet,、,ActiveX,控件或者其它音频或视频对象。,在页面中插入媒体对象的基本操作如下：,(1),将插入点放在“文档”窗口中希望插入该对象的位置。,(2),在“插入”工具栏的“常用”类别中单击“媒体”按钮，再选择要插入的媒体对象按钮；或者从“插入”“媒体”菜单中选择适当的媒体对象，如插件，弹出“选择文件”对话框，然后从中选择源文件，单击“确定”按钮。,第,4,章 创建和编辑网页文档,4.5.2,添加视频（非,Flash,）,可以通过不同方式和使用不同格式将视频添加到,Web,页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载它的同时播放它。,在页面中包含一个可供用户下载的简短的视频剪辑，可执行以下操作：,1,将剪辑放入站点文件夹。这些剪辑通常采用,AVI,或,MPEG,文件格式。,2,链接到剪辑，或将其嵌入到页面中。,第,4,章 创建和编辑网页文档,4.5.3,向页面添加声音,可以向,Web,页添加声音。有多种不同类型的声音文件和格式，例如,.wav,midi,和,.mp3,。在添加声音前，需要考虑以下一些因素：添加声音的目的、听众类型、文件大小、声音品质和不同浏览器中的差异。,链接到音频文件,嵌入声音文件,第,4,章 创建和编辑网页文档,4.5.3,向页面添加声音,嵌入音频文件的基本操作如下：,(1),在“设计”视图中，将插入点放置在要嵌入文件的地方，然后在“插入”栏的“常用”类别中单击“媒体”按钮，然后选择“插件”图标或执行“插入”“媒体”“插件”菜单命令。,(2),在属性检查器中，单击文件夹图标浏览音频文件，或者在“链接”文本框中键入文件的路径和名称，然后在文本框中输入宽度和高度或者通过在“文档”窗口中调整插件占位符的大小来确定音频控件在浏览器中显示的大小，如图所示在音频属性面板中设置音频链接及宽高值，图则为该插件在浏览器中显示情况，可以控制音量和声音文件在播放器中的是否播放等。,