资源描述
Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Dreamweaver 是由Micromedia公司出品的一款网页制作的专业软件，与Fireworks、Flash并称为网页制作的“三剑客”。,Dreamweaver 也是一款“所见即所得”的可视化软件，适合专业的网页设计师使用。,3.1 Dreamweaver 简介,第1页，共31页。,如果用户熟悉手工编写标记代码，Dreamweaver包括许多与编码相关的工具和功能，其使用将更加灵活。并且，借助Dreamweaver还可以使用服务器语言（例如ASP、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web应用程序。,目前，Dreamweaver的最新版本是Dreamweaver cs5。,第2页，共31页。,一、Dreamweaver 界面介绍,在首次启动Dreamweaver时会出现如图,3-1,界面,这是一个“工作区设置”对话框，在对话框左侧是Dreamweaver的设计视图，右侧是Dreamweave 的代码视图。,由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。,图3-1 “工作区设置”对话框,第3页，共31页。,.组合面板,活动面板内容,插入工具栏,文档工具栏,文档编辑窗口,属性面板,Dreamweaver 标准工作界面大致可以分为以下几个区域:,标题栏:菜单栏：文档工具栏：“插入”栏：,文档窗口：属性栏：状态栏：活动面板组：,第4页，共31页。,1、菜单栏,文件：用来管理文件。插入：用来插入各种元素.修改：具有对页面元素修改的功能。文本：用来对文本操作。命令：所有的附加命令项 站点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。,第5页，共31页。,2、文档工具栏,“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。界面如图所示。,第6页，共31页。,3“插入”栏,包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共个二级菜单共137个按钮。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。面板的界面如图,。,第7页，共31页。,4、文档窗口,“文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。,“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。,“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图,。,第8页，共31页。,5属性栏,属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。属性面板的界面如图,。,第9页，共31页。,6状态栏,“文档窗口”的底部的状态栏提供了与你正在创建的文档的有关其他信息。“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。,第10页，共31页。,若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。,说明：“index.,文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。,注意：如果超级链接指向的不是一个网文件。,选择要从其创建链接的文本或图像。,文本：用来对文本操作。,然后在“锚记名称”文本框中，键入锚记的名称，并单击“确定”。,“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。,注意：如果超级链接指向的不是一个网文件。,标题栏:菜单栏：文档工具栏：“插入”栏：,(3)文档目录相对路径,链接结构的设计，在实际的网页制作中是非常重要的一环，采用什么样的链接结构将直接影响到版面的布局。,7、面板组,是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。,第11页，共31页。,单击“编辑”“首选参数”命令，或按Ctrl+U组合键，打开“首选参数”对话框。,8、Dreamweaver 的参数设置,第12页，共31页。,1、网站的目录结构,网站的目录是指你建立网站时创建的目录。,清晰的目录结构有利于站点的维护，,网站的链接结构是指页面之间相互链接的拓扑结构。研究网站的链接结构目的在于用最少的链接，使得浏览最有效率。,二、定义站点,第13页，共31页。,建立目录结构的一些建议：,1不要将所有文件都存放在根目录下,2按栏目内容建立子目录,3.在每个主目录下都建立独立的images目录。,4.目录的层次不要太多，建议不要超过3层,（1）不要使用中文名字的目录名。,（2）不要使用过长的目录名。,（3）尽量使用意义明确的目录名，尽量做到“见名知意”。,第14页，共31页。,将存储于Internet服务器上的站点和相关文档称作远端站点。,位于Internet服务器上的站点仍是以文件和文件夹作为基本要素的磁盘组织形式。,本地站点：在本地计算机的磁盘上构建出整个网站的框架，保存相应的文档。,利用Dreamweaver，可以在本地计算机上创建出站点的框架，从整体上对站点全局进行把握。在站点设计完毕，可以利用各种上传工具，将本地站点上传到Internet服务器上以形成远端站点。,2 站点管理,本地站点和远端站点,第15页，共31页。,设计目标,建立一个本地站点，定义站点名称和站点使用的本地根文件夹以及默认的图像文件夹，为以后的页面制作和管理打好基础。,“站点/新建站点”命令或“站点/管理站点”,【例3-1】,图 需要建立的站点结构,建立本地站点,第16页，共31页。,说明：“index.htm”为默认的首页，“images”文件夹用来存储网页中所用到的图片等文件，“_private”文件夹用来存放自动生成的一些关于网站属性的文件。,第17页，共31页。,1.编辑站点,在Dreamweaver中创建好本地站点后，如果需要，还可以对整个站点进行编辑操作。例如，编辑修改站点、复制站点、删除站点等。,2.文件的基本操作,在Dreamweaver中，可以使用“文件”菜单来对单独的文件进行管理。例如，执行“新建”、“打开”、“保存”、“另存为”等命令,。,第18页，共31页。,设计目标,制作一个浅黄色背景的,介绍中国四大名著的页面,网页，在页面上通过添加文字和水平线，展示,四大名著,的宣传内容，并且在页面的右下方日期，实例效果如图所示。,【例3-2】,3.2 制作第一个网页,一、制作网页的一般过程,图 实例效果,第19页，共31页。,1、新建网页,选择菜单栏上的“文件/新建”命令。出现“新建文档”对话框，选定“基本页”中的“HTML”选项，单击【创建】按钮，在文档窗口创建一个空白网页。,注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。,第20页，共31页。,2、设置页面属性,页面属性是指网页的一般属性信息，例如，网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。,3.设置网页其他属性,(1)外观,(3)链接,(3)跟踪图像,“修改”菜单中的“页面属性”命令,第21页，共31页。,3、在浏览器中预览网页,可按F12键或单击“文件”工具栏中的（在浏览器中预览/调试）按钮，从弹出式菜单中选择“预览在iexplore”。,4、保存网页,第22页，共31页。,1.文本,文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。,注意：设置文字字体时，可能字体下拉列表中不存在想要的字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选“+”号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。,3.2 文本修饰,第23页，共31页。,在输入文字时，一般情况下让系统自动换行，若强制换行，可按回车键（会空出一行）或按Shift+Enter（没有空行的强制换行）。,注意：在设置文字格式的时候，尽量为文字设置一些常用的字体。通常的文本都设置为宋体、12磅或10磅为好。如果非常需要使用某种特殊字体来表达特殊效果，可以将该部分文字制作成图片插入网页中。,第24页，共31页。,2.插入日期,Dreamweaver提供了一个方便的日期对象，该对象使用户可以以任何喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期。,将插入点放置到要插入日期的位置，执行“插入”“日期”命令，弹出“插入日期”对话框，选择一种日期格式。设置完毕后，单击“确定”按钮完成日期的插入。,第25页，共31页。,标题栏:菜单栏：文档工具栏：“插入”栏：,1 Dreamweaver 简介,例如，执行“新建”、“打开”、“保存”、“另存为”等命令。,注意：设置文字字体时，可能字体下拉列表中不存在想要的字体，则选择字体中的最后一项：编辑字体列表。,位于Internet服务器上的站点仍是以文件和文件夹作为基本要素的磁盘组织形式。,文档目录相对路径是指以当前文档所在位置为起点到被链接文档经过的路径，这种方式适合于创建本地链接。,目录的层次不要太多，建议不要超过3层,首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。,创建命名锚记，然后创建到该命名锚记的链接。,建立网站的链接结构有以下两种基本方式：,如果看不到锚记，请选择菜单栏上的“查看/可视化助理/不可见元素”命令使之可见。,Dreamweaver 是由Micromedia公司出品的一款网页制作的专业软件，与Fireworks、Flash并称为网页制作的“三剑客”。,文档窗口：属性栏：状态栏：活动面板组：,修改：具有对页面元素修改的功能。,注意：如果超级链接指向的不是一个网文件。,3、在浏览器中预览网页,一、网站的链接结构,建立网站的链接结构有以下两种基本方式：,1树状链接结构,2星状链接结构,链接结构的设计，在实际的网页制作中是非常重要的一环，采用什么样的链接结构将直接影响到版面的布局。,首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。,3、4 超链接的运用,第26页，共31页。,内容不多的小型网站，链接结构比较简单，如左图所示。这种链接结构，可以称为树状结构。,内容比较丰富的中型网站，链接结构稍为复杂一点，它的链接关系往往采用星形结构。,第27页，共31页。,二、超链接定义,1.超链接的分类,根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。,2.路径,(1)绝对路径,绝对路径是包括服务器规范在内的完全路径（网页一般使用http:/）。,(3)根目录相对路径,根目录相对路径是指从站点根文件夹到被链接文档经过的路径。,(3)文档目录相对路径,文档目录相对路径是指以当前文档所在位置为起点到被链接文档经过的路径，这种方式适合于创建本地链接。,第28页，共31页。,三、设置超链接,1）页面之间的超链接,在网页中选中要做超级链接的文字或图片，单击“属性”面板中链接栏右侧的“单击寻找链接网页”文件夹图
展开阅读全文