为了正常的体验网站,请在浏览器设置里面开启Javascript功能!

《网页设计》——创建和编辑网页文档

2013-06-05 31页 ppt 645KB 64阅读

用户头像

is_187882

暂无简介

举报
《网页设计》——创建和编辑网页文档null网页设计网页设计null3.1 创建一个新文档 3.2 文字处理 3.3 图像处理 3.4 超级链接 3.5 使用多媒体对象第3章 创建和编辑网页文档 null3.1.1 创建新的空白文档 在Dreamweaver 8.0中可以创建新的空白文档、创建以模板为基础的文档以及打开并编辑已经存在的文档。 三种方法: 1、 从启动界面中的“创建新项目”组合框中选择合适的文件类型,即可直接进入文档窗口进行编辑。 2、也可选择主菜单中的...
《网页设计》——创建和编辑网页文档
null网页网页设计null3.1 创建一个新文档 3.2 文字处理 3.3 图像处理 3.4 超级链接 3.5 使用多媒体对象第3章 创建和编辑网页文档 null3.1.1 创建新的空白文档 在Dreamweaver 8.0中可以创建新的空白文档、创建以为基础的文档以及打开并编辑已经存在的文档。 三种方法: 1、 从启动界面中的“创建新项目”组合框中选择合适的文件类型,即可直接进入文档窗口进行编辑。 2、也可选择主菜单中的“文件”→“新建”命令,系统弹出新建文档对话框。 3、按下Ctrl+N快捷键,系统弹出新建文档对话框。3.1 创建一个新文档null3.1.2 打开现有文档 在Dreamweaver 8.0中可以打开现有的Web页或基于文本的文档,即使这些文档不是用Dreamweaver 8.0创建的也可以将其打开,然后利用Dreamweaver 8.0在“设计”视图或“代码”视图中编辑该文档。 打开现有的文档有以下几种方法: 1.在“文档”窗口中打开选择的文档 2.导入Word文档 3.在资源管理器中打开文档3.1 创建一个新文档null3.1.3 设置页面属性 页面属性是指网页的一般属性信息,例如,网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。 1.设置网页标题及编码 2. 设置网页其他属性 (1)外观 (2)链接 (3)跟踪图像 3.1 创建一个新文档null 文字处理主要包括:输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。 3.2.1 输入文字 1.输入文字: 打开Dreamweaver 8.0之后,然后在需要插入文本的位置单击鼠标左键定位插入点,然后输入文字。如果需要开始新的一段,按键即可,对应的HTML标签是

;如果想换行显示一段内容,可以按组合键,对应的HTML标签是
;如果输入的文字超出一行的范围,输入的文本将自动换行。3.2 文字处理null2.输入连续空格 在Dreamweaver 8.0中一般只能输入一个空格,若要输入连续的空格时,可以采用下面几种方法中的一种: ①执行菜单命令“编辑/首选参数”,打开“首选参数”对话框后,选定“分类”栏中的“常规”选项,然后在右边编辑选项中勾选“允许多个连续的空格”复选框即可。 ②将光标定位到需要输入多个空格的位置,切换到代码视图即HTML源文档中连续输入多个“ ”,或者单击插入工具栏文本分类中的“字符”对象,弹出下拉菜单,选择“不换行空格”选项即可。 ③切换到中文输入法,设置为全角输入状态,然后在欲连续输入空格的位置按空格键。 3.输入特殊字符 3.2 文字处理---输入文字null3.2.2 编辑文字 1.设置文字标题与段落 设置文字段落与标题的方法基本相同,方法如下: (1)将光标定位到应用段落样式或文本样式的文本中,或直接选取文本。 (2)单击属性面板中的

选择框,在弹出的下拉列表中选择“段落”或“标题”。 切换到代码视图,我们就会发现,字符属性面板的“格式”列表框中的“段落”、“标题1”、“标题2”、“标题3”、“标题4”、“标题5”、“标题6”和“预先格式化的”等选项,分别对应HTML语言中的

标记。
3.2 文字处理null2.设置文字字体及大小
     (1)设置字体
     (2)设置字号
3.设置文本颜色
4.设置方本对齐方式

        3.2 文字处理---编辑文字null3.2.3 插入水平线
       水平线对于组织信息很有用。在页面上,可以使用一条或多条水平线以可视方式分隔文本和对象。
       1、插入水平线
        将光标移到要插入水平线的位置,执行菜单“插入”→“HTML”→“水平线”命令或者在“插入”栏中,选择“HTML”,然后单击“水平线”按钮,插入一条默认宽度和粗细的水平线。
        2、修改水平线
        选定插入的水平线,打开属性面板,设置水平线的高度、宽度、对齐方式以及是否有阴影等属性
       3、设置水平线的颜色
        选中水平线,然后单击属性面板中的快速标签编辑器按钮,打开编辑标签窗口,键入代码,如将水平线设为红色,键入代码:color=“red”。3.2 文字处理null3.2.4 插入更新日期
            Dreamweaver提供了一个方便的日期对象,该对象使用户可以以喜欢的格式插入当前日期,还可以选择在每次保存文件时都自动更新该日期。
        1.插入日期、星期和时间
        2.插入更新日期
        3.修改日期
        要修改网页中已插入的日期,有两种方法:
            (1)若没有勾选“储存时自动更新”,则直接手动修改日期。
             (2)若勾选了“储存时自动更新”,则选中日期后在属性面板中单击 按钮,同样弹出“插入日期”对话框,在其中编辑修改日期格式。3.2 文字处理null3.3.1 插入图像
在Dreamweaver中插入图像的基本方法是:
       1.将光标置于要插入图像的位置,在插入工具栏的“常用”类中单击“图像”按钮或选择“插入”菜单中的“图像”命令,打开“选择图像源文件”对话框。
      2.在对话框中显示有图像文件名、文件类型和图像源的路径URL(每个网页都有一个唯一的地址,称作统一资源定位器即URL)。我们选取存放在站点中的图像文件,然后单击【确定】按钮将显示“图像标签辅助功能属性”对话框,在“替代文本”和“详细描述”文本框中输入内容,单击“确定”按钮,即可将图片插入到指定区域。
       3.如果所选择的图像文件不在用户设定的当前站点,则将打开“Macromedia Dreamweaver”对话框。提示是否将图像文件复制到根文件夹,单击【是】按钮,然后打开“复制文件为”对话框,定位到站点中用于存放图像文件的文件夹images,最后单击【保存】按钮即可。3.3 图像处理null3.3.2 设置图像属性
        在网页中插入图像后可以对图像的各种相关属性进行设置,若要设置图像属性,请执行以下操作:
      1.图像名称及大小:使用缩略图下面的文本框设置名称,以便在使用 Dreamweaver 行为(如“交换图像”)或脚本语言(如 JavaScript 或 VBScript)时可以引用该图像。而缩略图右侧标明了所插入图像的大小。
     2.宽和高:以像素为单位指定图像的宽度和高度。当您在页中插入图像时,Dreamweaver 自动用图像的原始尺寸更新这些文本框。在“宽”和“高”文本框中输入新值,实现图像大小改变,但却与图像的实际宽度和高度不相符,若要恢复图像原始值,可单击“宽”和“高”文本框右侧的“恢复图像到原始大小”按钮重设大小。3.3 图像处理null     3.源文件:指定图像的源文件。单击文件夹图标以浏览到源文件,或者直接键入路径。
      4.链接:指定图像的超级链接。将“指向文件”图标拖到“站点”面板中的某个文件,或单击文件夹图标浏览到站点上的某个文档,或手动键入URL。
       5.对齐:可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。当图像与图像在网页中对齐时,可由属性面板中的按钮、、来确定,当图像与文本、插件或其它元素对齐时,可将图像视为一般字符,运用属性面板中的列表来确定。3.3 图像处理----设置图像属性null          6.替代:指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。在某些浏览器中,当鼠标指针滑过图像时也会显示该文本。
        7.地图名称和热点工具:允许您标注和创建图像映射。
        8.垂直边距和水平边距:沿图像的边缘添加边距(以像素为单位)。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。若图像和文字贴得太近,容易使人产生压迫感。因此,适当调整图像间边距可以使浏览者在浏览网页时更加舒适。
       3.3 图像处理---设置图像属性null       9.目标:指定链接的页应当在其中载入的框架或窗口。(当图像没有链接到其它文件时,此选项不可用。)当前框架集中所有框架的名称都显示在“目标”列表中。
也可选用下列保留目标名:
     _blank:将链接的文件载入一个未命名的新浏览器窗口中。
     _parent:将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的,则链接文件加载到整个浏览器窗口中。
     _self:将链接的文件载入该链接所在的同一框架或窗口中。此为默认值。
     _top:将链接的文件载入整个浏览器窗口中,因而会删除所有框架。3.3 图像处理---设置图像属性null     10.低解析度源:指定在载入主图像之前应该载入的图像。
     11.边框:以像素为单位的图像边框的宽度。默认无边框。
     12.编辑:启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。
     13.优化:打开“优化”对话框,使用 Fireworks优化图像。
     14.裁剪:修剪图像大小,删除不需要的区域。
     15.重新取样:对已调整大小的图像重新取样,提高图片在新的大小和形状下的品质。
     16.亮度和对比度:调整图像的亮度和对比度设置。
     17.锐化:调整图像的清晰度。3.3 图像处理----设置图像属性null3.3.3 插入图像占位符
       在Dreamweaver中插入图像占位符的基本操作:
      1.将光标置于要插入图像占位符的位置,在插入工具栏的“常用”分类中选择“图像占位符”按钮或选择“插入”菜单中的“图像对象”中的“图像占位符”命令,打开“图像占位符”对话框。
      2.在对话框中进行设置:
        (1)在“名称”文本框中,输入要作为图像占位符的标签文字显示的文本。名称可有可无,必须以字母开头,且只能包含字母和数字;不允许使用空格和高位 ASCII 字符。
        (2)在“宽度”和“高度”文本框中,以像素为单位键入数字以设置图像大小。 
        (3)为图像占位符选择一种颜色,可以使用颜色选择器或直接输入颜色的十六进制值(如 #FF0000)或输入网页安全色名称(如 red)。
        (4)在“替代文本”中,为使用只显示文本的浏览器的访问者输入描述该图像的文本。
     3.单击“确定”。网页文档中即会出现图像占位符。
3.3 图像处理null      3.3.4 插入“鼠标经过图像”
      鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时,图像变为另一幅图像;而鼠标指针离开时,图像又恢复为原始图像。这种效果通常用于导航条、图像互动等。它由两幅图像组成,一是首次载入时显示的图像即原始图像,二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像;如果这两个图像大小不同,Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。3.3 图像处理null       3.4.1 超级链接的概念
           超级链接是指从一个网页指向一个目标的连接关系,即在 Web 页面中插入的指向其它文档的引用。目标可以是一个另外的网页,也可以是一张图片、一个文件、一个程序等。链接可以将任何类型的资源转换为链接,但最常用的链接类型是文本链接。可以在站点创建过程的任何阶段创建超级链接。
        超级链接的外观多种多样,可以是导航按钮、文本、图片,无论是哪一种格式,只要用鼠标单击链接对象,即可跳转到指定的目标网页。当鼠标指向链接载体时,链接载体会发生一些变化,如鼠标指向文字载体,文字的字体、字号、颜色等会发生改变,有的带有下画线。
3.4 超级链接null
  1.超链接的分类
      
        根据超级链接目标文件的不同,可以分为页面超链接、锚点超链接、电子邮件超链接等;根据超级链接单击对象的不同,超级链接可分为文字超链接、图像超链接、图像映射等。
3.4 超级链接---概念null2.路径
          创建超链接必须先了解链接与被链接载体的路径。在一个网站中,路径通常有3种表示方式:绝对路径、根相对路径和文档目录相对路径。
    (1)绝对路径。
    (2)根目录相对路径。
    (3)文档目录相对路径。

3.4 超级链接—概念null3.4.2 创建超级链接
       Dreamweaver 提供多种创建超链接的方法,可创建到文档、图像、多媒体文件或可下载软件的链接。可建立到文档内任意位置的任何文本或图像(包括标题、列表、表、层或框架中的文本或图像)的链接。
    1、创建到其它文档或文件的超级链接
    2、创建到文档内的特定位置的超级链接
    3、创建电子邮件链接


3.4 超级链接null3.4.3 管理超级链接
        为避免站点中出现断链接,可以激活链接管理,使 Dreamweaver 在您作出更改后自动更新链接。也可以使用站点的可视化表示形式来修改链接,或者通过一次更改将所有链接更新到一个特定的文件中。
       ⒈自动更新链接
       ⒉在站点地图中修改链接
       ⒊在整个站点范围内更改链接
3.4 超级链接null
3.4.4 图像映射
        
     图像映射就是指在一幅图像中定义若干个区域(这些区域

称为热点),每个区域中指定一个不同的超链接,当单击不同

区域时可以跳转到相应的目标页面。3.4 超级链接null3.4.5 导航条
         导航条由图像或图像组组成,这些图像的显示内容随用户操作而变化。导航条项目最多呈现四种图像状态:
     (1)初始状态:用户尚未单击或尚未与此项目交互时所显示的图像。
     (2)滑过状态:指鼠标指针滑过初始图像时所显示的图像。
     (3)按下状态:指项目被单击后所显示的图像。 
     (4)按下时鼠标经过状态:指在项目被单击后,鼠标指针滑过“按下”图像时,所显示的图像。 
      1、创建导航条
      2、测试与修改导航条
3.4 超级链接null       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格式在国内使用最广。 3.5  使用多媒体对象null3.5.1插入和编辑多媒体对象
      可以在 Dreamweaver 文档中插入Flash SWF文件或对象、QuickTime或Shockwave 影片、Java applet、ActiveX 控件或者其它音频或视频对象。
      在页面中插入媒体对象的基本操作如下:
      (1)将插入点放在“文档”窗口中希望插入该对象的位置。
      (2)在“插入”工具栏的“常用”类别中单击“媒体”按钮,再选择要插入的媒体对象按钮;或者从“插入”→“媒体”菜单中选择适当的媒体对象,如插件,弹出“选择文件”对话框,然后从中选择源文件,单击“确定”按钮。 3.5  使用多媒体对象null3.5.2添加视频(非 Flash)
       可以通过不同方式和使用不同格式将视频添加到 Web 页面。视频可被下载给用户,或者可以对视频进行流式处理以便在下载它的同时播放它。
      在页面中包含一个可供用户下载的简短的视频剪辑,可执行以下操作:
       1.将剪辑放入站点文件夹。这些剪辑通常采用 AVI 或 MPEG 文件格式。
       2.链接到剪辑,或将其嵌入到页面中。
3.5  使用多媒体对象null3.5.3 向页面添加声音
      可以向 Web 页添加声音。有多种不同类型的声音文件和格式,例如 .wav、.midi 和 .mp3。在添加声音前,需要考虑以下一些因素:添加声音的目的、听众类型、文件大小、声音品质和不同浏览器中的差异。

1.链接到音频文件
      
2.嵌入声音文件
。3.5  使用多媒体对象null3.5.3 向页面添加声音
嵌入音频文件的基本操作如下:
(1)在“设计”视图中,将插入点放置在要嵌入文件的地方,然后在“插入”栏的“常用”类别中单击“媒体”按钮,然后选择“插件”图标或执行“插入”→“媒体”→“插件”菜单命令。
(2)在属性检查器中,单击文件夹图标浏览音频文件,或者在“链接”文本框中键入文件的路径和名称,然后在文本框中输入宽度和高度或者通过在“文档”窗口中调整插件占位符的大小来确定音频控件在浏览器中显示的大小,如图3-47所示在音频属性面板中设置音频链接及宽高值,图3-48则为该插件在浏览器中显示情况,可以控制音量和声音文件在播放器中的是否播放等。3.5  使用多媒体对象
/
本文档为【《网页设计》——创建和编辑网页文档】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。 本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。 网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。

历史搜索

    清空历史搜索