第3章 Dreamweaver基础应用课件_第1页
第3章 Dreamweaver基础应用课件_第2页
第3章 Dreamweaver基础应用课件_第3页
第3章 Dreamweaver基础应用课件_第4页
第3章 Dreamweaver基础应用课件_第5页
已阅读5页,还剩28页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第3章Dreamweaver基础应用本章要点:一、Dreamweaver概述二、创建站点三、文档基本操作(建立一个简单网页)四、表格布局五、插入对象六、超链接(空链接,锚点链接,页面之间的链接,链接到其他文件,站点链接,e-mail链接,图像热点链接,跳转菜单)Dreamweavercs5是专业的html编辑软件。利用它可以轻松制作出跨平台、跨浏览器的充满动感的网页。Dreamweavercs5工作界面如:一、dreamweacercs5概述浮动面板标题栏文档窗口属性面板插入工具栏文档工具栏DW工作环境5二、创建站点

站点是网站的基础,创建好站点,方便网站文档的管理和调试。

基本步骤:(1)在本地计算机建立站点文件夹这个文件夹的建立,就是为了对建立的站点所有文件进行集中存储,并且也是为了Dreamwearver在建立站点时指向该文件夹,进行全面的管理和控制。

(2)建立Dreamwearver站点。打开Dreamwearver,单击“站点”菜单,在弹出的菜单中选择“新建站点”菜单命令。在“站点”选项中,输入站点名称和站点文件夹。创建好站点后就可以开始设计网站结构文件夹和编辑网页了!文件夹一般可以按“栏目类别“来创建,也可以按“文件类别”来创建。网页编辑则从主页开始!1.新建网页文档(1、从启动界面中的“创建新项目”组合框中选择合适的文件类型,即可直接进入文档窗口进行编辑。(2、也可选择主菜单中的“文件”→“新建”命令,系统弹出新建文档对话框。(3、按下Ctrl+N快捷键,系统弹出新建文档对话框。(4、在已经创立的站点中的某个文件夹下直接建立网页三、文档基本操作2.保存网页文档(1、预览前要求保存(2、编辑完后点击右键或菜单保存。3.设置页面的属性

页面属性是指网页的一般属性信息,例如,网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。4.连续输入空格在Dreamweaver中一般只能输入一个空格,若要输入连续的空格时,可以采用下面几种方法中的一种:①执行菜单命令“编辑/首选参数”,打开“首选参数”对话框后,选定“分类”栏中的“常规”选项,然后在右边编辑选项中勾选“允许多个连续的空格”复选框即可。②将光标定位到需要输入多个空格的位置,切换到代码视图即HTML源文档中连续输入多个“ ”,或者单击插入工具栏文本分类中的“字符”对象,弹出下拉菜单,选择“不换行空格”选项即可。③切换到中文输入法,设置为全角输入状态,然后在欲连续输入空格的位置按空格键。5.插入水平线水平线对于组织信息很有用。在页面上,可以使用一条或多条水平线以可视方式分隔文本和对象。(1、插入水平线将光标移到要插入水平线的位置,执行菜单“插入”→“HTML”→“水平线”命令或者在“插入”栏中,选择“HTML”,然后单击“水平线”按钮,插入一条默认宽度和粗细的水平线。(2、修改水平线选定插入的水平线,打开属性面板,设置水平线的高度、宽度、对齐方式以及是否有阴影等属性(3、设置水平线的颜色选中水平线,然后单击属性面板中的快速标签编辑器按钮,打开编辑标签窗口,键入代码,如将水平线设为红色,键入代码:color=“red”。

表格是一种在HTML页面上布局数据与图像的工具,它以简洁明了和高效快捷的方式将数据、文本、图片以及表单等元素有序地显示在页面上,控制文本和图像在页面上的位置,使用表格能使页面看起来更加直观和有调理。四、表格布局(一)、表格的创建1.插入表格2.表格、行、列、单元格的选定(二)、表格的编辑1.表格属性2.单元格、行和列属性

如果选定的单元格(或行、列),“属性”面板会显示出相关的单元格(或行、列)的各项属性。3.行、列的添加与删除4.拆分与合并单元格表格布局实例1.插入日期Dreamweaver提供了一个方便的日期对象,该对象使用户可以以喜欢的格式插入当前日期,还可以选择在每次保存文件时都自动更新该日期。五、插入对象2.插入图片目前,网页中使用的图像格式主要有GIF、JPEG(包括JPG和JEPG)和PNG三种:GIF(图形交换格式):最多只能显示256种颜色,可以制作网络动画及透明图像。适合于色彩要求较低的导航条、按钮、图标和项目符号等。JEPG(联合图像专家组标准):压缩率很高,可显示数大约1670万种颜色。适合于对色彩要求较高的风景画、照片等。PNG(可移植网络图形):是一种替代GIF格式的无专利权限制的格式,它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。3.鼠标经过图像“鼠标经过图像”是网页特效中的一种,它的效果是,当鼠标箭头经过一个图像时,该图像将被另一幅图像代替,当鼠标箭头从图像上移走的时候,原图像恢复;单击鼠标,将跳转到其链接的页面。4.插入图像占位符图像占位符是网站排版布局中经常用到的功能。我们可以随意定义其大小,并且在预插入图象的位置上放置,用自定义的颜色来替代图象的出现,在布局表格里的单元格可根据其中的内容改变大小。有时候内容太长,会让其他暂时无内容的单元格布局改变,要是不想让这个情况发生,就要插入图象占位符,暂时让区域有内容。5.插入导航条(直接插入fireworkshtml导航条)导航条由图像或图像组组成,这些图像的显示内容随用户操作而变化。导航条项目最多呈现四种图像状态:(1)初始状态:用户尚未单击或尚未与此项目交互时所显示的图像。(2)滑过状态:指鼠标指针滑过初始图像时所显示的图像。(3)按下状态:指项目被单击后所显示的图像。(4)按下时鼠标经过状态:指在项目被单击后,鼠标指针滑过“按下”图像时,所显示的图像。操作方法:插入记录——图像对象——导航条,进行相应设置。6.插入声音可以向Web页添加声音。有多种不同类型的声音文件和格式,例如.wav、.midi和.mp3。方法一:“插入”→“媒体”→“插件”菜单命令。方法二:<embedsrc="*.mp3"width=""height=""></embed>。这种方法是嵌入播放插件。方法三:在网页代码<head><body>中插入下面代码:<bgsoundsrc=“你的音乐地址”loop=-1>7.插入flash“插入→媒体→Flash”选项,然后在弹出的对话框中选择一个Flash文件(swf文件)Flash常用与表格背景图片结果产生结合效果(要设置flash透明)8.插入视频Dreamweaver本身并没有插入视频的功能,要想播放视频,可以直接在Dreamweaver的代码视图中插入代码或者用插入—媒体—activex控件(不过需要相应的格式)

9.Spry菜单栏Spry框架就是一个JavaScript库,网页中常用的折叠构件和菜单栏,用Spry空间都能很容易创建,可以向各种页面元素中添加不同种类的效果。利用spry菜单栏可以轻松创建菜单,并可以通过修改其css文件修改菜单外观样式。超级链接是指从一个网页指向一个目标的连接关系,即在Web页面中插入的指向其它文档的引用。目标可以是一个另外的网页,也可以是一张图片、一个文件、一个程序等。链接可以将任何类型的资源转换为链接,但最常用的链接类型是文本链接。可以在站点创建过程的任何阶段创建超级链接。超级链接的外观多种多样,可以是导航按钮、文本、图片,无论是哪一种格式,只要用鼠标单击链接对象,即可跳转到指定的目标网页。六、超链接1.超链接分类

根据超级链接目标文件的不同,可以分为空链接、页面超链接、锚点超链接、电子邮件超链接等;根据超级链接单击对象的不同,超级链接可分为文字超链接、图像超链接、图像映射等。2.路径创建超链接必须先了解链接与被链接载体的路径。在一个网站中,路径通常有3种表示方式:绝对路径、根目录相对路径和文档目录相对路径。(1)绝对路径。

(2)根目录相对路径。(3)文档目录相对路径。3.链接打开方式,共有四个选项:_blank:将链接的文件载入一个未命名的新浏览器窗口中。_parent:将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的,则链接文件加载到整个浏览器窗口中。_self:将链接的文件载入该链接所在的同一框架或窗口中。此为默认值。_top:将链接的文件载入整个浏览器窗口中,因而会删除所有框架。4.超链接:(1)空链接。在链接文本框中输入链接符号“#”即可。(2)锚点链接。锚点链接分两步进行,一是在页面中插入锚点,另一个就是为锚点建立链接。(一般用于用一个页面的链接)(3)链接到站内其他文件。直接用属性对话框中的指向文件标志指向就可。但是要注意被链接文件的路径不能轻易更改,否则可能造成链接错误。(4)站点链接(用绝对地址URL)(5)创建e-mail链接。在链接对话框输入mailto:(6)下载链接。如果超链接所链接的目标文件为浏览器不能自动打开的文件格式(例如“.rar”、“.zip”、“.exe”等

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论