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