《网页制作webpage.ppt》由会员分享，可在线阅读，更多相关《网页制作webpage.ppt（340页珍藏版）》请在三一办公上搜索。
1、,Dreamweaver,建立网页像册,动态按钮的制作,超级链接,Fireworks,Flash,网页制作,制作人 欧光南,网络已经来到了我们的身边，互联网向人们前面展示了一个丰富多彩的空间，网页在其中起着举足轻重的作用。网页设计不仅需要有很好的技术，还需要有良好的平面设计能力。成功的网页应该是一件艺术作品。,Macomedia公司的产品做到了在网站的整体设计上的宏观控制，Dreamweaver、Fireworks和Flash的紧密结合可以让我们很容易地实现网页上的各种效果。,网页制作,Dreamweaver既是针对专业网页设计者而特别开发的可视化网页设计工具，作为一个所见即所得的网页编辑器，
2、Dreamweaver为用户提供了方便快捷的属性工具条、对象工具条、站点管理窗口及快速工具条等工具，不仅使得制作过程更加直观，同时也大大简化了网页制作的步骤。,Dreamweaver,Fireworks集合了矢量、位图绘图工具的优点，具有强大的web绘图功能。从扫描图片到绘制矢量图，从修饰位图到输出风格各异的按钮和Banner，从选择安全的调色板到优化图形，从分割图片到制作Image Map，从制作特殊文字效果到创建复杂、鲜活的动画以往需要多个软件才能完成的工作，Fireworks统统都给解决了。,Fireworks,Flash是专门用来开发网络动画的，它在制作网络动画方面确实有许多独到之处。
3、用它做的动画非常小，这是其它格式的动画制作软件所不能比拟的。,Flash,课程体系结构,以网页制作为中心的多元化授课体系,网页制作,HTML语言基础,网页制作工具,网页美化工具,网络新领域、新技巧,网站建设,网页制作基础-HTML语言,HTML语言的一些基本概念；HTML语言的语法；HTML文本的基本结构；HTML语言的标记及其用法；HTML实例；,HTML语言的基本概念,1.什么是HTML？HTML：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，
4、WINDOWS等）。超文本：因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。2.HTML语言的构成HTML文件由标记、代码和注释组成。标记：HTML中用来控制文字、图形等显示方式的符号。如 网页上面的标记里面包含了属性和值注释：,HTML语言的语法规则,扩展名为：*.htm或*.html。HTML不区分大小写。多数HTML标记可以嵌套，但不可以交叉。HTML文件一行可以写多个标记，一个标记可分多行书写，不用任何续行符。HTML文件中换行、回车和空格的表示方法分别是,和 .,HTML文件的结构,一个HTML文件大体分为以下几部分
5、：网页标题网页的内容,HTML文件的结构,和：超文本的开始和结束。和：超文本标题的开始和结束。和：超文本窗口标题的开始和结束，它被显示在浏览器顶端的标题栏中。：是用来描述HTML文档的元信息，即文档文档自身的信息。和：正文的开始和结束，它被显示在浏览器中。其中可以包含许多元素，是HTML语言的核心部分。,页面文字格式列表表格图象和多媒体超级链接表单,HTML命令,HTML语言的标记及其用法,1.页面标记显示在标题栏中。仅有一个。中间可以嵌套多个标记，添置多种属性，来设置主体内容的背景，外观等。显示文本或图像.该标记建立超链接，标记中间可以嵌套其他标记，如图像标记Image、文本格式标记font
6、等。例如：href:链接目标的地址；target:链接目标的窗口名；若windowname不存在，则打开一个新窗口。,HTML语言的标记及其用法,标尺线标记；属性有：width(绝对、相对）size、align（left、right、center)、color.2.文字格式标记标题设置标记：.n：标题字号（1，2，3，4，5，6）数字越小，字号越大。属性有：face(字体）,size(字号，1-7，值越大，字越大）,HTML语言的标记及其用法,字型设置标记,HTML语言的标记及其用法,段落标记强制换行标记.预排格式标记.文本对齐方式标记属性有：align、style等。:之间加入的文本将会在浏
7、览器中按两边缩进的方式显示出来。3.列表标记无序列表:用来创建一个标有圆点的列表；有序列表:它是用来创建一个标有数字的列表；,HTML语言的标记及其用法,4.表格标记建立表格；其间可以通过加入多个标记和属性来建立表格。有关表格的标记有：表格的说明；开辟一行；开辟一列；,HTML语言的标记及其用法,5.图像和多媒体标记6.超级链接标记7.表单标记,HTML语言的标记及其用法,背景色彩和文字色彩属性bgcolor-背景色彩 text-非可链接文字的色彩 link-可链接文字的色彩 alink-正被点击的可链接文字的色彩 vlink-已经点击(访问)过的可链接文字的色彩#=rrggbb色彩是用 16
8、 进制的 红绿蓝(red-green-blue,RGB)值来表示。,HTML语言的标记及其用法,背景图像绝对地址和相对地址当前目录使背景不滚动,HTML语言的标记及其用法,页面空白（Magin):页面左边的空白 页面上方的空白(天头)页面右边的空白页面下方的空白#=是数字,Dreamweaver界面,标题栏：显示当前正在编辑的文件的标题。括号中显示文件名；菜单栏：Dreamweaver所有的功能都可以在菜单中找到；工具栏：一些常用的操作图标。包括视图工具、页面标题工具、文件管理工具等。文档窗口：其内容根据所选视图的不同而不同；状态栏：显示当前文档的信息或一些编辑状态。包括 以下几种：标签选择器
9、:页面信息；微型发射台：各种工具面板。,工具栏,状态栏,标签选择器可以用来显示光标所在位置或所选对象的层次结构，在页面中选定某个对象后，标签选择器中会将选择的标签加粗显示。页面信息第一项，用于显示和控制文档窗口的大小，单击旁边的小箭头，可以从列表中选择窗口的尺寸。第二项，用于显示和估计文档的大小及下载这个页面所需时间，包括所有与其相链接的图片及Shockware电影。微型发射台：即常用窗口快捷工具栏，如Site（站点管理器）、Library（库管理）、CSS Styles（样式编辑器）、Html Source（源代码编辑器）等窗口。点击windows-launcher.可以看到迷你发射器放大的
10、样子（如下图所示），叫做“Launcher”面板，点击这里弹出相应的窗口。,Launcher面板,即微型发射台。通过Window-launcher命令调出该面板；该面板提供了快速显示其他面板的功能；用户可以定制符合自己风格的Launcher面板。Editpreferences命令，选择Panels.可以添加、删除或对元件进行排序。演示定制面板；,对象（Objects）面板,可以按下Ctrl+F2键（或window-object菜单）将其调出。该面板集成了“Insert”主菜单中的命令，用于在网页中插入图形、表格等内容。单击面板上部的小三角，可以在多个功能面板之间切换。,面板中各图标功能介绍,C
11、haracter选卡：Command选卡：Form选卡：Frames选卡：Head选卡：Invisibles选卡：Special选卡：,可以按下Ctrl+F3键（或window-properties菜单）将其调出。属性面板主要用来设定元素的属性。该面板随着我们选择对象的不同而不同。面板中有一个向下的小三角图标，单击后将出现更多的扩展属性。再次单击小三角图标，将关闭扩展属性，恢复到最初状态。下面给出的分别是选中窗口时（上）和选中图像时（下）的属性窗口：,属性面板,代码面板,打开代码面板：Window-Code Inspector;键盘上的F10键；单击文件工作窗口右下方的按钮；设置代码面板：设置
12、代码形式：设置系统、面板上以及固定字体的大小、样式等。设置代码面板的背景、文字和标记的顔色：均在EditPreferences命令打开的对话框中进行（如下图）,可停靠浮动面板,可以通过WindowHistory显示历史面板；默认情况下历史面板中最多可记录前面50步操作；可在Edit|Preferences命令下的General选卡中设置。历史面板的具体应用（演示）：撤销改变；清空历史面板；自动完成任务；History面板如下图所示：,Dreamweaver的菜单,1.FILE菜单：New:新建一个文件；New from Template:利用已经存在的模板来新建文件；Open:打开一个已经存在
13、的文件；Open in Frame:在框架中打开文件；Close:关掉目前所有的窗口；Save:保存对当前文件的修改；Save as:将当前文件改名另存；Save as Template:将当前文件存为模板；Save All Frames:保存当前所有框架的文件；Revert:将当前文件恢复至上一次存盘时的状态；Import:导入各种格式的文件；Export:导出各种形式的文件；Convert:转换浏览器方式；Preview in Browser:指定浏览器或编辑浏览器列表；Debug in Browser:在浏览器中进行调试；Check Links:检查链接是否正确；Check Target
14、 Browsers:用不同的浏览器浏览当前页面；Design Note:设计节点；Exit:退出UltraDev4程序。,2.Edit菜单：Undo:取消上一步操作；Redo:重新执行被撤消的操作；Cut:剪切所选择区域并将内容复制到剪贴板上；Copy:将所选择内容复制到剪贴板中；Paste:将剪贴板上的内容放入到当前位置；Clear:清除所选区域的内容；Copy HTML:只将所选区域的HTML代码拷贝到剪贴板上；Paste HTML:将剪贴板中内容的HTML代码复制到当前位置；Save All:保存窗口中的所有文件；Select Parent Tag:选择当前标签的父标签；Select C
15、hild:选择当前标签的子标签；Find and Replace:查找与替换功能；Find Next:查找满足条件的下一个元素；Indent Code:代码缩进；Outdent Code:代码突出，不缩进；Balance Braces:匹配括号；Set Breakpoint:在当前位置设置断点；Remove All Breakpoint:删除所有断点；Edit With External Editor:启动外部编辑器进行编辑；Preference:UltraDev4的工作参数；Keyboard Shortcuts:设置菜单项和工具等的快捷键。,3.View菜单：Code:只显示代码；Desig
16、n:只显示页面设计情况；Code and Design:同时显示代码和页面设置情况；Refresh Design View:刷新页面设计窗口；Design View to Top:,定义一个本地站点,在开始用Dreamweaver制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片，甚至Flash动画等，如果不进行管理归档，分散在硬盘的各个地方就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。单击“Site”菜单下的“New Site”命令，弹出“Site Definition”（定义站点）对话
17、框。在“Category”列表中的第一项“Local Info”被选中，用来定义一些本地信息。,1“所见即所得”的编辑方式,2便捷的插入操作,3可扩充性,4方便的恢复功能,5支持CSS样式表的编辑,6完善的动态网页支持,7为网页的发布提供方便,10 页面排版技巧,8 插入图片,9 网页定位技术,Dreamweaver功能,以前，要借助计算机编辑一篇文章，必须使用控制字号的代码、控制字体颜色的代码以及繁多的版面编辑代码来完成编辑工作。编辑完成后，还必须借助模拟显示才能看到最后的编辑结果。比如，曾经一统中文编辑软件江山的WPS就是这种模式的代表。这种编辑模式不方便内容的即时修改，妨碍了使用者对版面
18、的控制，如今已渐渐被淘汰。取而代之的就是“所见即所得”的编辑方式。,1“所见即所得”的编辑方式,“所见即所得”(What You See Is What You Get)是一种先进的编辑方式。这种编辑方式可以让使用者只须将文字和其他内容按照自己的意愿进行排布，无须接触控制代码就可完成编辑工作。屏幕上显示的结果，就是得到的编辑结果，方便了使用者对版面的即时掌握和控制。微软公司的字处理软件WORD就是一个杰出的代表。如果你曾经接触过Windows下使用的文字处理软件，你会发现Dreamweaver的编辑方式与它们极其相似。,想为你的主页插入漂亮的图片或者其他的一些东西吗?在Dreamweaver中
19、，可以很方便地插入图片、特殊符号、表格、电子邮件链接，甚至动态效果等网页组成元素。“物件(Objects)”窗口为填加这些网页元素提供了极大的方便。,2便捷的插入操作,Dreamweaver中的物件和行为特效并不是永远固定不变的，用户可以通过从Internet上下载最新的插件来扩充它的功能。比如：有一种让网页中的文字自动向上滚动的特效。它其实是由一段JavaScript编写而成的。以往，要将这种特效用在自己的网页上，制作者必须将JavaScript源代码复制出来，然后粘贴到自己的网页文件中，再做一些改动，才能为己所用。如果碰上复杂一点的代码，要将其应用到自己的网页上还确实比较费劲。,3可扩充性
20、,要制作一个好的网页，必定需要进行反复多次地修改。在以往的网页编写软件中，只提供了一对“撤消”和“恢复”命令来协助完成修改操作。这种方式缺乏直观性，使用者经常会在选择这两个命令的过程中“迷路”。Dreamweaver 中加入了一个全新的面板History。它会自动将编辑网页中的操作全部记录下来，通过选择该面板上的步骤，可以迅速地回到文件以前的状态，也可以迅速地从以前的状态中回到当前状态。而且每个步骤都配有文字说明，使你不至于在复杂的操作中“迷路”。,4方便的恢复功能,“History(历史)”面板除了方便修改外，还有一个重要的功能，可以使操作者从重复劳动中解脱出来。如果用鼠标拖拽的方式选择多个
21、步骤，并点击右下角的磁盘标志将其存储成一个菜单命令。那么以后就可以通过选择“Commands”菜单下新生成的菜单命令，重现那些操作。通过交换Commands文件的方式，也可以将自己的操作步骤与其他的Dreamweaver 用户共享。,CSS层叠样式表是为修补HTML的一些不足而指定的一个规范。目前主流的WWW浏览器都已经支持或大部分支持该规范。利用CSS，制作者制作网页时可以突破HTML标难的一些束缚，实现对网页文件的全面掌握。比如，使用CSS可以定义文字的字间距、行间距、精细的字体大小，图片的透明程度，不重复出现的背景图片等标准HTML所不支持的排版方式。,5支持CSS样式表的编辑,Drea
22、mweaver对CSS的编辑支持是相当完善的。比如创建自定义样式、重定义样式、使用CS；选择、链接外部样式表文件等，这些CSS特有的编辑方式都可以在Dreamweaver中找到。并且在样式的定义内容上，Dreamweaver也是现在网页编辑软件中最完善的。网页制作者不需要接触到CSS的编写规范，就能通过选择项目和输人必要的参数完成CSS样式的定义,网页从诞生之初就是相对静止的。之后，少量的GIF动画和JAVA小程序给网页加上了一点活跃的色彩，但网页的基本标准HTML本身并没有增加什么动态的内容。随着新的HTML 4.0版本的推出，网页的规范中终于有了关于网页动态化的标准。很多网页制作人员转向选
23、择Dreamweaver作为编辑网页的工具，除了其良好的使用界面外，更重要的是看中了它强大的动态网页编辑功能。Dreamweaver独创性地在网页编辑软件中加入了时间轴(Timelines)和行为(Behaviors)功能,6完善的动态网页支持,在访问网站的时候，经常会看到在页面上出现移动的文字，这种效果是通过Marquee标签实现的，其基本格式如下：Marquee/Marquee 移动文字还可以设定属性：Marquee directionleft,rightMarquee“direction”属性用于设置文字移动的方向。,移动文字标签,表1 移动文字的常用属性,网页制作完成后，最终是要发布到
24、Internet上去。只存在于计算机硬盘上，满足“自我欣赏”要求的网页是没有什么实际意义的。而要将页面发布到Internet上去，接受来自世界各地的浏览者的检阅，一些细节上的“小事”就必须考虑清楚。比如：单个网页的内容是否太多，使等待下载的时间太长?在不同的屏幕分辨率下，网页是否能显示正常?在不同的浏览器中，网页是否存在兼容性问题?对网页内容进行更新时，是否会太麻烦?诸如此类的问题。Dreamweaver为制作者尽量避免这些“小问题”提供了尽可能的方便。试举几例如下：,7为网页的发布提供方便,例1：网页体积和显示时间 单个网页的体积和其全部显示出来所需等待的时间，是评价一个网页是否成功的一个十
25、分重要的因素。过大的网页体积，将需要浏览者长时间地等待，甚至导致放弃浏览该网页。所以，一个成功的网页必须在页面的美化和页面元素总体积之间找到一个平衡点。Dreamweaver为制作者随时掌握当前页面文件的体积和下载时间提供了方便。,在程序窗口的右下方有一个小框，这就是网页和所使用的网页元素的总体积以及所需的预计下载时间。这里的两个数字是随网页的编辑而不断变换的。斜杠的左边是当前的总体积，右边是该网页在288K调制解调器下预估下载时间。利用这个即时变换的状态栏，制作者就可以在制作的同时，对网页画面的效果和所需下载的时间有个直观的了解，从而做出自己的判断。,例2：目标浏览器检查 WWW浏览器软件市
26、场的激烈竞争，造成了不同公司浏览器之间存在部分互不兼容的情况。而且由于不断的升级换代，造成了同一公司中新版本浏览器和老版本浏览器之间也存在互不兼容的情况。在这种情况下，制作者就需要对自己制作的网页的兼容性有一个了解。但是各种版本的浏览器之间的兼容性差异很复杂，要靠人工去查找网页中究竟存在哪些兼容性问题，好比“大海捞针”。,Dreamweaver在File菜单中提供了一个Check Target Browsers命令来解决这个问题。这个命令可以将当前网页文件进行指定浏览器版本的兼容性检查。在检查之后，Dreamweaver会生成一个详细的检查报告，其中会列出兼容性问题。,图片的类型很多，比如说J
27、PEG、GIF、BMP、TIF、TGA等都是常用的图片类型，但是在主页中，或者说在浏览器中，一般只支持JPEG、GIF两种类型的图片。Microsoft Internet Explorer 4o及其更高版本和Net3cape Navigator 404还支持PNG图像。,8.插入图片,JPEG是一种具有较高压缩比的图片压缩算法，这种类型的图片往往用于存储照片或颜色连续变化的图像。GIF只支持256色，所以常用来存储颜色数比较少且非连续变化的图像。与JPEG相比，GIF最大的优点在于GIF可以制成透明图像和动画。PNG是Macromedia公司的网页图像编辑软件Fireworks本身采用的图像格
28、式。PNG拥有GIF的全部特性(如透明图、GIF动画等)，且比GIF有更好的压缩比，但是现在只有高版本的浏览器才支持PNG的图片。,不同类型的图片插入方法都是一样的，下面就来看看在Dreamweaver中是如何插入图片的。1）插入图片 与其他一些可插入图片的编辑软件(如多媒体编辑软件Authorware)不大一样，在主页中并不是把图片整个嵌人到主页中，而只是保留对图片的一个引用，也就是说，只是指明图片的位置。浏览器在显示这个图片的时候，就是根据这个位置信息，找到相应的图片，然后再显示出来。,其实，主页对除文本之外的所有对象(如图片、Flash动画、ActiveX控件、Java Applet等)
29、都是只保留对其中一个的引用。正是这个原因，一个主页往往不仅只有一个HTML文件，还包括这个HTML文件中所引用的所有图片及其他对象的文件。比如oho的主页就包括1个HTML文件、6个图片、2个Fireworks特效和2个Flash动画。,为了更好地插入图片和更好地进行主页管理，在插入图片之前，我们建议做两件事情：如果是新建的主页文件，请先保存该主页；在该主页所在的目录下，建立一个新的子目录(如果没有的话)，比如images子目录，把所要插入的图片先拷贝到该子目录下。,网页设计其实就是版面的设计，网页上诸多元素，如文字、图片等的合理放置其实也就是个定位的问题。所谓网页定位技术就是指如何把各种各样
30、的网页元素，如文字或图片等等放置在网页的指定位置，通常有3种技术可以实现网页定位：表格、框架和图层，本章将分别介绍如何使用这三种技术进行网页定位。最后介绍模板的功能和使用方法。,9.网页定位技术,使用表格(Table)可以清晰地显示列成表的数据，例如显示股票行情的数据。实际上表格的作用远远不止显示数据，它在网页定位上一直起着重要的作用，虽然图层(Layer)技术具有更强大、灵活的功能，但并不是所有人都使用4.0版的浏览器，因此使用表格的网页比使用图层的网页更适用于众多的访问者。,a.表格,表格是一种非常强大的Web页面设计工具，可以在HTML页面上对数据及图像进行更为合理的布局和安排。表格包含
31、有三个基本要素：行(rows)：水平空间列(columns)：垂直空间单元格(cells)：行和列交叉得到的单位空间,使用表格一方面可以排列表格数据，另一方面还可灵活设置页面上文字及图形的位置。一旦你建立了表格你就可以很容易地修改它的外观及结构。你可以增加内容，也可以删除、拆分、合并行和列，来修改表格、行列或单元格属性以调整其颜色、外观或其他特性，并且也可以拷贝、粘贴单元格。如果你的页面布局较为复杂，你甚至可以在表格内再插入表格，总之，你可以根据自己的设计灵活自由地插人多个表格。,用表格来对页面进行排版非常方便，但有时需要在文字上放一些图片之类的应用，则表格就不能胜任了，这时就需要用图层来排版
32、。使用Dreamweaver，你可以容易地在表格式页面布局和层页面布局之间转化。无论表格或是层，都允许你灵活控制页面元素的位置，但是在3.0及以前的浏览器版本中不支持层。如果你想快速地对内容进行定位，你可以在用层来实现页面的理想布局。,层是Dreamweaver 4中最有价值的对象之一，它是由层叠样式表发展过来的，它提供了一种对网页的对象进行有效控制的手段。层可以包含文本、图像、表单、插件，甚至层内还可以包含其他层。也就是说，在HTML文档的正文部分可以放置的元素都可以放入层中。由于图层可以放置在网页中的任何位置，从而使我们能有效地控制网页中的对象。图层是在制作网页时经常用到的技巧，元素的定位
33、是一个最简单也是大多数人都掌握的应用方法。,b.层,在Dreamweaver 4中图层还可以转换成表格，这也是很方便的。有时比较大的图片需分割后再插入网页，这时用到Dreamweaver 4的图层转换功能来排版就事半功倍。首先，要把图片用图层在页面中放好(想放哪就放哪)。然后，点击菜单ModifyLayout ModeConvert Layers to Table后就出来一个菜单，设好参数，点击确定，即可得到想要的效果。Dreamweaver 4中的层几乎完全可以代替表格，并有如下优点：,插入一个层后，可以很方便地在属性栏中确定出他的大小及在页面中的绝对坐标，并且层与层之间的定位也相当精确，几
34、乎可以不通过属性栏，直接用眼观看就可以了。,a)精确定位,想在页面的某处插入一段话或一幅图片，如果用表格来实现的话，则可能会将表格拆分得乱七八糟，最后还可能因定位不好，在浏览器中预览还不尽如人意；如果用层的话就方便多了，随便画一个层，插入喜欢的东西，然后拖到想安放的地方，绝对精确!,b)插入自如,在网页制作的过程中，为了完成图片、文字之间的精确定位，往往将表格制得很大，然后拆成各个单元格或将表格进行嵌套，在各个单元中插入图片或文字来实现。然而在IE浏览器中，一个表格只有完全被下载完后，才能显示其内容，如果这个表格很大的话，则往往让浏览者等上半天，然后显示出一大屏内容来。用表格制作网页时可能遇到
35、这样的问题，在IE4.0中浏览是好好的，可是到了IE5.0中版面就一团糟：要么在IE5.0中浏览很好，在IE4.0中就变味了。然而用图层来做，定位又精确，别人浏览您的网页内容时就没有这类缺点。,c)加速浏览,我们都知道表格是不能叠加的，而层就不同了，可以一层层地堆起来，并且后建的层会覆盖先建的层。利用这一特性，我们可以达到各种微妙的效果，例如各个层中插入不同的图片，然后叠起来，层中还可以插入表格，将层和表格综合利用起来，以便更好地实现图文混排。,d)可叠加性,在许多网页中我们可以发现，浏览器窗口被分隔成了几个不同的区域，每个区域中显示不同的文档内容。一部分窗口区域设置为目录区域，用于实现网页的
36、导航或超级链接；一部分窗口区域设置为主体区域，其中显示网页主体内容。在浏览网页的同时，目录索引或导航条始终显示于页面的目录区域中，这样便于用户继续浏览其它的网页。这其实是利用了框架技术。利用框架技术，可以将不同的文档显示在同一个浏览器窗口中。,c.框架,表格、框架和图层都是HTML中的标准内容，是实实在在的HTML标记，而模板是Dreamweaver中提供的一种机制，能够帮助网页设计师快速制作大量布局相似的网页。,d.模板,通常在一个网站中，可能有几十甚至几百个页面，然而并非每个页面的布局都各不相同，一般来说页面被分为若干级，首页是第一级，它是网站的门户，因此一般是独一无二的，由首页进入后就是
37、二级页面，一个网站一般分为若干个栏目，每一个栏目进去就是三级页面，当然还可以有更多层次，这样内容相似的页面往往使用相同的布局，各页面不同的只是具体内容。,Dreamweaver的模板提供了这样的功能，把网页的布局与内容分离，布局设计好之后，存储为模板，相同布局的页面通过模板创建，Dreamweaver同时提供对布局的保护功能以及对所有页面的快速更新能力。,制作模板与制作普通页面完全相同，只是通常并不把页面所有部分都完成，而只是制作导航板、标题栏等各个页面的公有部分，这些部分一般在网页的四周，而把中间留给每页的具体内容。,制作好页面后，依次选择菜单FileSave as Template，然后在
38、弹出的对话框中输入模板名称，例如Template2，表示2级页面的模板。,a)制作模板,下面要设定可编辑区域，模板中的内容默认为不可编辑，只有把某个区域或某段文本设定为可编辑区域之后，这个区域在由该模板创建的文档中才能改变。首先在中间的大单元格里面单击一下鼠标，然后依次选择菜单ModifyTemplatesNew Editable Region，在弹出的对话框中输入一个表示这个区域的名称，例如Detail，这时在单相同的方法把上面放置栏目名称图片的单元格也设为可编辑区域，命名为Title。,依次选择FileNew From Template，在弹出的对话框中选择刚刚做好的模板，这时打开一个新的
39、文档窗口。可以看到，除了两个单元格是可以修改的以外，其他区域无法选取和修改，并且锁定区域以高亮显示，图中有的位置是锁定区域，却不是高亮显示，是因为图片盖住了背景的颜色，否则也是高亮颜色。接着只需在可编辑区域中添加内容，就可以非常方便地制作很多布局相同的二级页面。,b)使用模板,上面我们已经对如何初步地设计一个网页有了一个大概的了解，下面介绍一些设计网页时常用到的技巧。1)如何在网页中加入空格 也许你在设计网页时注意到了，当你按下空格键时，光标并不随之移动，也就是说无法用通常的办法加入空格。其实有一个办法解决这个问题，就是将你的输入法设置成全角状态，这样按空格键时就可以输入空格了。,10.页面排
40、版技巧,2)如何是文字实现环绕图片 当你设置文字的对齐状态时，无论你怎样设置页都无法做到文字环绕图片，其实这要用表格来处理。,3)当粘贴文本时，它变成了一个很长的字符串，怎样才能避免这种现象?因为Dreamweaver看待文本的方式与浏览器一样，都会忽略所有没有标识符指定的行分隔符。为避免这一现象，请在粘贴带回车的文本时用“EditCopy text only(编辑作为文字粘贴)”选项，而不要直接用粘贴。,4)如何缩短每段之间的间隔 当我们每按一次回车时，Dreamweaver都会跳一行。这样段与段之间就有了一行空行，怎样才能不要这一空行呢?其实只要我们在按回车时，用Shift+Enter代替
41、回车就可以了。,5)如何去掉图像超级链接周围的蓝框?只要将“图像属性”对话框中的“边框”的值设置为0即可。6)怎样去掉表格的边际线 选中表格，在表格属性中，将“边框”的值设置为0即可。,7)上标和下标 输入上标和下标也是我们经常要用到的操作。在Dreamweaver中，没有办法直接输入上标和下标，如水的分子式(H2O)，2的三次方(23)等。其实在HTML中有这一对标记的，就是subsub和supsup。我们可以直接在HTML代码中添加。如果不想打开HTML面板，也可以直接在编辑区中用“quick tag editor”按钮来添加。方法如下：选中“H20”的2，然后单击巡视员面板中的“quic
42、k tag editor”按钮，在出现的面板中的尖括号内输入sub即可。,8)制作移动的文字 移动的文字是许多刚做网页的朋友比较喜欢用的小东西，其实就是加入一个marquee标记。在FrontPage里，可以通过插入活动元素的方法方便地制作；在Dreamweaver 中现在还是不能直接插入。我们可以通过上面讲的，选中一行文字后，用“quick tag editor”加入marquee标记。,9)一些特殊字符的输入 Dreamweaver 虽然在Object面板中增加了许多特殊字符的输入，但我们可能还是有很多特殊字符没有办法输入。例如：等。这时我们可以利用Word来输入这些文字，然后用拷贝粘贴的
43、方法输入到Dreamweaver 中来。,Dreamweaver特效,自做拼图游戏,弹出消息,状态栏消息,跳转页面,在浏览别人网页的时候，你也许经常发现网页上的某些图片(或文字)可以用鼠标随意拖动。如果把此效果运用到网页中，似乎可以为网页增添一点灵性。你或许会觉得制作起来比较麻烦，其实恰恰相反，用Dreamweaver 做此种效果特别简单。相信看了下面的制过程你也会发出这样的感叹。,Dreamweaver 特效自做拼图游戏,1 背景知识 一般情况下，要固定住图的一部分，在此基础上再用图的其他部分(可以被拖动的)进行组合拼装，当然也可以让图全部都可以被拖动。2 操作要点 在IE 4.0，Nets
44、cape Communicator4.61中适用Layer(层)面板的使用技巧Behavior(Actions事件)面板的使用技巧,3 制作步骤 下面是具体的制作步骤。准备好要进行拼装的图形，然后用Fireworks将其分割。提示：在Fireworks里面作切割图片的时候已经生成了HTML格式，现在直接拿来在Dreamweaver里面打开就可以了。,选择Modify菜单的Page Properties命令，在弹出的菜单中将网页的背景设为黑色，选择View菜单的Gird级联菜单的show选项，这样可以方便定位。提示：Gird一格的大小为5050。选择Modify菜单的Layout Mode级联菜
45、单的Convert Table To Layers命令，将原在表格中的各个分割图转化为图层。,有时希望访问者一进入首页就看到一些最新消息，就可以弹出一个消息框，显示一些文本。打开网站的首页，单击文档窗口左下角的“body”字样，然后选择菜单WindowBehaviors，打开行为面板，单击+按钮，在拉开的列表中选择Popup Message，在弹出对话框的Message输入框中输入一些文字，然后单击OK按钮。,Dreamweaver特效弹出消息,实际上行为是由事件和动作两部分组成的，在行为面板中分别列于左右两边。其中动作就是一段Javascscript程序，Dreanweaver可以自动生成，
46、当然用户需要设定一些参数，例如本例中弹出消息框的功能就需要Javascript来实现，用户需要设定的参数就是要显示的文本内容，当然并非所有动作的参数都这么简单，后面我们会看到一些比较复杂的动作；,而事件是系统定义好的，例如当鼠标移到某个链接上时会发生onMouseover事件，事件起到通知作用，用户先设定好动作，然后指定当何种事件发生时执行该动作就可以了。在本例中，onLoad就是一个事件，即页面装载完成后执行Popup Message动作。,可是刚才我们并没有选择事件，这是因为Dreamweaver 把此事件作为了Popup Message动作的默认事件，如果你希望在其他情况下弹出消息，可以
47、单击一下on Load这一行，使之高亮显示，然后单击on Load旁边的三角形图标，拉开事件选择下拉框，从中选择你所希望的事件。,这个动作与上面的在消息框中显示文本很类似，不同的是如果用消息框显示文本，访问者必须单击一下消息框中的按钮，才能继续浏览，而在状态栏显示文本不会影响访问者的浏览，因此通常用onMouseover 事件与此动作配合，因为在制作网页时为了简洁，有时链接文字或图片非常简练，如果当访问者的鼠标移到某个链接上，浏览器的状态栏中就显示出关于这个链接的详细一些的介绍，不是很好吗?,Dreamweaver特效状态栏消息,操作过程与上面很类似，只是应该先选中一个文字或图片的链接，在文本
48、窗口的左下角单击“”图标，然后选择菜单WindowBehaviors，打开行为面板，单击+按钮，在拉开的列表中选择Display Status Message，在弹出对话框的Message输入框中输入一些文字，然后单击OK按钮。,这时可以看到，默认的触发事件是onClick，即用鼠标单击链接时才在状态栏显示消息，因此按下三角形图标的按钮，在下拉框中选择onMouseOver 项。,这个动作可以使浏览器装载新页面，而不必非要等访问者单击了链接时才跳转，例如当你的网站搬家了，你就可以把原地址的首页加一说明，然后当访问者浏览此页时就会看到这个页面一闪而过，页面立即跳转到了你的新地址.如果访问者用的浏
49、览器不支持这项功能，他可以根据你的提示，单击链接，手动进入你的新地址，目前绝大多数人都是用4.0以上版本的浏览器，都可以实现自动跳转。,Dreamweaver特效跳转页面,操作方法是先制做好原址页面，单击文档窗口左下角的“body”图标，进入行为面板，增加一个“Go To URL”动作，在弹出的转到URL对话框中输入要跳转到的新地址，然后单击OK按钮，不要更改默认事件(onLoad)。,一、Fireworks的工作流程,二、创建按钮和下拉菜单,三、制作特效文字,四、热点和切片,Fireworks,一、Firework界面,工具箱,文件编辑区,各种工作面板,菜单,动画播放器,文件信息栏,启动栏,
50、一、Firework常用介面簡介,菜单文件編輯區工具箱動畫播放器文件信息列啟動列各種工作面板,以屬性做分類，放置所有 Fireworks 的工具與指令，介面類似MS編輯區，文件標籤提供四種顯示畫面，能夠清楚的比較影像的品質 各種美編工具的浮動面板，可輔助使用者使畫面更豐富、更具設計感 製作動畫時(GIF)，可在編輯狀態下立即播放輸出檔。顯示目前開啟文件的尺寸與顯示比例(比例可調整)可開啟或關閉各種工具面板 配合工具箱使用，有各種數值的設定與選項提供使用者作設定,一、Firework常用介面簡介,一、Firework常用介面簡介,Image Size:可依比例調整畫面大小,Canvas Size
