参考dreamweaver网站设计

Dreamweaver网站设计【训练目的】 通过这个技能，引导学生逐步学习创建网站站点、建立站点首页、使用表格与层、添加超链接、使用框架与表单、加入动态特效和多媒体组件、制作下拉式菜单、建立层叠样式表、测试网站和上传发布等知识。通过这部分的学习，使学生掌握运用 Dreamweaver 8制作教学网站的基本方法和流程。【训练步骤】 1网站的总体设计在创建站点之前，要明确站点的定位、栏目、结构、布局和风格。 （1）网站的创意一个好的同站一定会有一个好的创意，创意（idea）是网站生存的关键。（2）网站的定位（即主题） 网站主题应具有以下特点。 主题小而精。 题材最好是自己擅长或者喜爱的内容。题材不要太滥或者目标太高。（3）网站栏目网站栏目起导航作用，好的栏目分类可以迅速且明确地将网站的主体显示出来。应根据网站定位并结合网络教育资源的特点设置网站主栏目，再按主栏目的要求设计二级栏目、三级栏目等。（3）网站的风格 风格（style）是独特的，是站点与其他同站不同的地方。风格是抽象的，是指站点的整体形象给测览者的综合感受。网站风格主要通过网站标志（Logo）、网站宣传标语（banner）、标准色彩等展现。通常网站的标准色彩不宜超过三种颜色，蓝色、橙色、绿色，是教育网站的常用色彩。（4）确定网站的目录结构和链接结构 a 网站的目录结构 不要将所有文件都存放在根目录下，按栏目内容建立子目录，在每个子目录下都建立独立的images目录，目录的层次不要太深。 b 网站的链接结构 网站链接结构的目的是用最少的链接达到最有效率的浏览。一般建立网站的链接结构有两种基本方式： 树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。浏览这样的链接结构时，是一级级进入，一级级退出。优点是条理清晰，访问者明确自己的位置，不会“迷路”。缺点是浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。 星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立链接。立体结构像东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者搞不清自己的位置和看了多少内容。 这两种基本结构都只是理想方式，在实际网站设计中，总是将这两种结构混合起来使用，既希望浏览者可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。 （5）网站的布局网站布局主在是设计图片和文字在页面的位置，应将网站标志、主菜单等主要模块摆放在最突出的位置。网站首页布局有“国”字型、拐角型、标题正文型、左右框架型等。 2.创建网站站点 (1）Dreamweaver 8简介 Dreamweaver 8是 Dreamweaver的最新版本，它沿袭了以往 Dreamweaver产品的工作界面风格，增加了许多新功能。Macromedia Dreamweaver 8是建立 WEB站点及其应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能快速创建网站和应用程序。从对基于 CSS设计的支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员使用Dreamweaver及所选择的服务器技术可以创建功能强大的Internet应用程序，从而使用户能够链接到数据库和WEB服务器。 (2）打开 Dreamweaver 8 选择“开始|程序|Macromedia| Macromedia Dreamweaver8”菜单项，显示Dreamweaver程序的工作界面，作为普通用户，选择“设计器”进行工作区布局，单击“确定”按钮显示如图61所示窗口。图61运行Deamweaver8 后出现的程序操作窗口 第一次使用时，首先要创建新项目，即创建一个站点，通过单击图61中的“创建新项目”下的“Dreamweaver站点”来实现。 (3）创建一个“赵州桥”的站点 这里以中小学语文课文中赵州桥为例子，创建一个“赵州桥”的站点。下面这些步骤只在建站的第一次使用，按照图62所示文本框中的内容输入站点名称和站点的HTTP地址。 图62 站点名字及HTTP地址定义窗口依照图63所示，输人站点在计算机中的存储位置（即文件夹）。 图63 选择站点存储位置窗口依照如图64所示，在“您如何连接到远程服务器”下拉列表框中选择“无”。图6-4站点服务器选项窗口在图65所示对话框中单击“完成”按钮“赵州桥”的站点就创建好了。此时，在屏幕右方出现新创建的站点赵州桥，如图66所示，至此一个网站的站点创建完毕。图65 站点设置信息列表图6一6 当前站点操作面板（4）管理好站点 为了便于管理，Dreamweaver提供了方便的站点管理工具。 创建网站的文件夹 为了便于管理网站文件，首先应创建一些文件夹，用以存储对应的文件。在“赵州桥”这个站点中，需要创建三个文件夹：images文件夹用来存放网站所需的图片文件；medias文件夹用来存放网站所需的声音、动画、视频等多媒体文件；htmls文件夹用来存放网站的网页文件。 具体操作是：右击“站点一赵州桥，在弹出的快捷菜单中选择“新建文件夹”菜单项，在新文件夹的文本框中输入如图67所示的三个文件夹名。 图6一7 当前站点文件列表站点的管理 单击图67所示赵州桥下拉列表框，在下拉列表中选择“管理站点”，弹出“管理站点”对话框，该功能可以方便地对已创建的站点进行管理。3首页的编辑 创建“赵州桥”的首页。右击“站点-赵州桥”，在弹出的快捷菜单中选择“新建文件”菜单项，在新建文件文本框中输人indexhtml。 【注意】网站首页的文件名一般默认为：index.htm，index.html，Index.asp，default.htm，default.html，default.asp等，双击 index.html文件，可以进人网站首页的编辑状态。 （1）首页的总体设计 双击站点index.html文件，进入站点首页编辑。1）网页的属性设置 具体步骤如下。 设置网页标题。在首页上方的“标题”文本框中输人首页的标题“赵州桥”，如图68所示。图68 主窗口工具栏 设置网页背景颜色或图像。右击首页空白处，在弹出的快捷菜单中选择“页面属性”，打开如图69所示的页面属性设置窗口，单击“背景颜色”右边的颜色框，选中合适的颜色；如果要设置预先准备好的背景图像，可以单击“背景图像”右边的“浏览”按钮，选择准备好的图像文件。选择好图像文件后，可以在“重复”下拉列表框中选择背景图像的排列方式。图68 页面属性设置窗口 2）用表格给网页内容布局定位 在设计页面时，通常利用表格来定位页面元素（插入表格操作看书本p239）。首页布局由顶部的 Logo和 Banner区、导航菜单区、页面内容区、底部版权区组成，如图69所示。首页内容效果图6-10所示。图69页面面布局效果图图6-10 首页浏览效果图下面介绍用表格布局页面的具体操作方法（布局表格宜采用自上而下的方法布局，不宜采用由外到内的方法布局，此首页页面由四个表格组成）。 选择【插入】|【表格】命令。在弹出的【表格】对话框中插入1行2列的表格。在打开的【属性】面板中将该表格的宽度设置为770像素，高度为120像素，边框为1，对齐方式居中。如图611所示。 在所插入的表格中调整左右两个单元格宽度作为 Logo区和 Banner区。如图 612所示。图6-11 设置布局表格的宽度和高度 重复的方法，在所绘制的表格的下面再插入一个18列表格作为【导航区】 如图612所示。图612 按照相同的方法，在【导航区】的下面绘制一个12表格，并调整左右单元格，分别作为栏目区和【主文档区】。如图6-13所示。图6-13所示 在【栏目区】和【主文档区】的下面完成【版权区】表格的绘制。如图614所示。图614以上表格的制作也可以采用布局表格和布局单元格工具来绘制，这里不作介绍。3）用背景颜色和背景图像美化网页表格 对网页表格也可以进行背景颜色或背景图像的选择。右击要设置的表格单元格，在弹出的快捷菜单中选择“属性”菜单项，弹出属性对话框，单击“背景颜色”右边的颜色框，选择单元格的颜色，各单元格的背景颜色请按图6-15首页效果图设置；如果要设置背景图像，可以单击“背景”文本框右边的文件夹按钮，选择事先准备好的背景图像文件。 【注意】背景图像文件也要事先复制到images文件夹中。4）表格的嵌套表格的嵌套是指将一个表格插入到指定的单元格中。这里在栏目区、主文档区分别插入5行1列以及3行1列的表格。表格的宽度为100%，边框大小为0，并设置各单元格的宽、高的大小。（2）丰富网页内容1） 文字与图像的插入与设置（详细内容看书本p243）按图6-15首页效果图输入各栏目文本，并设置各单元格背景颜色和字体大小颜色等。在logo区插入图片20.jpg并设置大小为150*120，插入的图片要保存到网站的images文件夹里。（图片在素材images文件夹中）。2） 插入其它媒体元素p250插入Flash动画文件 Flash动画的文件小，不失真，可播放 mp3音效，互动效果极佳，而且 Flash动画还可以应用在网页中制作超链接、按钮菜单、窗体甚至是互动游戏，因此Flash动画广泛地应用于网页中。 打开“赵州桥”网页，在文档区第一行插入一个Flash文件，这里采用的是banner.swf的Flash文件，文件在素材文件夹中，将banner.swf保存在赵州桥网站medias中，选择“插入|媒体|Flash”菜单项，在弹出的文件选择框中选取文件赵州桥mediasbanner.swf ，再调整它的大小等格式即完成插入文件。插入视频 Dreamweaver支持多种格式的视频文件。与插入Flash文件的操作相同，将光标定位到需要插入视频文件的位置，执行主菜单“插入/媒体/插件”命令。嵌入声音文件 在Dreamweaver中可以加人不同类型的声音文件，常见的声音文件类型有：mid，wav，aif，mp3和ram等。在网页中嵌入背景音乐可使用“行为”的方法嵌入。（3）首页的整体制作效果 到此为止，可以看看首页制作的大体情形了。首先要将它保存好，可以单击“文件|保存”菜单项进行保存。现在，按快捷键F12打开一个浏览器，其预览效果如图615所示。 【注意】默认的浏览器为 Internet Explorer。图6-15 首页浏览效果图4添加超链接p245（1）添加新网页 在网页中使用超链接，能够使每个独立的网页之间产生一定的相互联系，从而使若干单独的网页形成一个有机的整体。 l）新网页的添加和编辑 具体步骤如下。 新网页的添加。右击图 67中的赵州桥htmls文件夹，在弹出的快捷菜单中选择“新建文件”，在新建文件的文件名文本框中输入jianjie.html文件名；按此方法依次创建以下几个网页：jiaoan1.html, jiaoan2.html, biaodan.html, tupianku.html。 新网页的编辑。双击新创建的的jianjie.html，打开网页，将网页的标题名修改为“赵州桥简介”。创建一个4 行1列的表格，宽度为770像素，在第一行嵌套1行2列的表格，在第2行嵌套1行5列的表格。在第二行嵌套表格的5列分别输入文本“赵州桥简介”“茅以升论赵州桥”“作者李青简介”“茅以升简介”“赵州桥建筑三绝”，并在第3行输人赵州桥简介的正文。（正文内容见素材文件夹） 2）让新网页沿袭一致的风格 网页设计中通常需要统一网页的整体风格，统一的风格大部分涉及到网页的布局形式、文字属性、网页背景色以及链接文字属性，等等，这样才能使网页的总体效果更佳，使用户在浏览该网站时有一个延续性，产生整体感。 选择网页的第1行第1列，将首页的图片插入，调整好大小；选择网页的第1行第2列，选择背景颜色，并输入文字“赵州桥简介”，调整好文字的大小。赵州桥简介浏览效果图如图6-16所示。图6-16赵州桥浏览效果图（2）添加超链接 所谓超链接是指从一个网页指向一个目标的连接关系。超链接在本质上属于网页的一部分，它是一种允许某网页同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。这个目标可以是以下几种存在形式：一段文本；一张图片；一个电子邮件地址；一个文件；一个应用程序。 在网页中常用来作为超链接的对象一般是一段文本或一幅图片。设置了超链接的对象，当光标悬停其上时会产生变化，当浏览者单击已经链接好的文字或图片时，链接目标将在浏览器中被打开。 l）文字超链接的添加和编辑 打开已创建好的主页/赵州桥index.html，选中并右击第3行的文本“赵州桥简介”，在弹出的快捷菜单中选择“创建链接”，在弹出的选择文件对话框中选择要进行链接的文件/赵州桥/htmlsjianjie.html,如图617所示。图6-17 选择超链接目标文件窗口 【注意】一般来说，打开方式有4种：-blank，-parent,self，-top。其中-self表示在本窗口中打开，为默认的打开方式：-blank表示在新窗口中打开；-parent表示在上级窗口中打开；top表示在最上层窗口中打开。用户可以根据实际情况，自己选择所需要的打开方式。 单击”属性”面板中“目标”右边的下拉列表框，可以选择以上4种打开方式之一。 2）图片超链接的添加和编辑 现在为“赵州桥简介”添加一个返回主页的超链接，这里用来作为超链接的对象是一个返回按钮的图片。打开网页Jianjie.html，选择表格的第4行，设置背景颜色，对齐方式为右对齐，再选择“插入|图像”莱单项，插入作为返回按钮的图片/ images/back04gif;（图片在素材库中，并将图片文件back04.gif拷贝到网站images文件夹中）单击返回按钮的图片，单击“属性”面板中“链接”右边的文件夹按钮，选择好超链接的目标文件赵州桥index.html即可。 为方便浏览者使用，在表格第2行也附一个返回按钮的超链接，方法如上。3）快速转移，加入锚点 作为使用者，都有这样一个经历。对于一篇长的网页，要花上一定时间才能找到所需的那一部分内容。现在使用网页的锚点（也称为书签）功能，为同一个网页添加超链接，即可快捷地跳转到指定内容上。 刚才在表格的第2行嵌套了一个表格，并输入了文本内容为“赵州桥简介”“茅以升论赵州桥”“作者李青简介”“茅以升简介”“赵州桥建筑三绝”，现在再对这5个文本进行网页内锚点的设置。 具体步骤如下。 创建锚点。为了创建锚点，将光标移动到需要加入锚点的地方，这里放在正文文本“赵州桥简介”的最前面，单击常用工具栏（见图618）中的锚点工具按钮，在打开的命名锚点的窗口中输入锚点名称为jianjie1，单击“确定”按钮，则在文本中出现一个锚点图标 。（注：锚点图标在实际浏览器中是不可见的,只是在制作网页中作为一个标志）图618常用工具栏 链接锚点。锚点创建好后，还必须链接锚点。选择表格第2行第1列中的“赵州桥简介”四个字，在属性面板上的“链接”文本框中输入符号#和锚点名称。这里输入刚才创建的锚点名称“jianjie1”。 重复上面的操作，为正文“茅以升论赵州桥”“作者李青简介”“茅以升简介”“赵州桥建筑三绝”创建好锚点，分别命名为jianjie2和jianjie3等。 4）为Email添加超链接 在网页上创建 Email（电子邮件）链接，能方便浏览者快速反馈意见。当浏览者单击Email链接时，可立即打开浏览器默认的Email处理程序，收件人邮件地址被Email超链接中指定的地址自动更新，无需浏览者输入，这里在首页中设置一个Email的超链接。打开首页赵州桥index.html，选择表格第2行最后1列中的“联系电邮”，单击常用工具栏中插入电子邮件超链接工具按钮，在弹出的“电子邮件链接”对话框中的Email文本框中输入电子邮箱的地址即可。5）制作指向Web上的网页的超链接 先选中要建立超链接的文本“参考网站”，在属性面板对话框中的URL地址栏中输入超链接的目标地址，本活动中输入的目标地址为，目标框架是“新建网页”，单击“确定”，完成超链接的设置。5框架和表单 (1)使用框架p242 框架的作用就是把浏览器窗口划分为若干个区域，每个区域分别显示不同内容。首先，框架的使用可以使网页页面变得更加漂亮，当然这主要靠自己的设计和构思，奇妙构思加上框架结构。肯定能使网页与众不同，给人留下深刻的印象；其次，框架的使用能使网页结构更加清晰，使别人来到网站上比较方便地浏览到所感兴趣的内容。1）框架页面的创建 框架由两个主要部分即框架集（frameset）和框架（frames）组成，框架集是在一个文档内定义一组框架结构的html网页。双击打开前面创建好的网页赵州桥htmlstupinkuhtml，在标题栏中输人标题“赵州桥图片库”，背景颜色同首页。将光标置于页面上，单击如图618所示“常用”右边的下三角按钮，选择“布局”选项，出现如图619所示的布局工具栏。 图619 布局工具栏 单击布局工具栏中的“框架”工具按钮 右边的下三角按钮，弹出含有很多框架样式的下拉列表，这里选择“左侧框架”，在弹出的“框架标签辅助功能属性”对话框中为第1个框架指定一个标题默认为主框架（mainframe）、左框架(leftframe),单击“确定”按钮，形成如图620所示的框架结构。图620 框架页面 2）编辑框架页面 框架页面的编辑与普通页面编辑是一样的，包括背景图像、文本的输人、图像的插入、表格的插入等，这里就不再重复。具体步骤如下。 编辑左框架页面。单击左框架，插人一张8行1列的表格，在第1行到第7行分别输入以下文本：“图1”、“图2”、“图3”、“图4” “图5”、“更多图片”、“旅游指南”；最后一行插人图片赵州桥imageshhjpg作为返回按钮。 编辑主框架页面。单击框架，输入事先准备好的1.jip图片并编辑好，单击“文件|框架另存为”菜单项，在弹出的“另存为”对话框中输人文件名 pic1html；单击主框架，清除刚输入的图片，输入事先准备好的第二个图片11.jip并编辑好，另存为 pic2html；依此方法做好另外几个框架页面 pic3html和 pic4Html等。 3）设置框架和框架的属性 选择“窗口|框架”菜单项，在打开的如图621所示的框架属性对话框及如图622所示的框架面板中，选择并设置要修改的框架，常用的属性有以下几个选项。 图621 框架属性对话框框架名称。表示当前框架的名称，作为超链接的 目标和脚本的参考，这里所用三个框架使用默认的名称进行设置，如图622所示。 图622框架面板源文件。当前所选择框架的页面文件名。滚动。在框架中是否出现滚动条。有以下几个选 项：“是”、“否”、“自动”、“默认”，一般使用自动。不能调整大小。是否允许重定义框架的尺寸。一 般在编辑时不要选择此项，以方便今后修改。 边框颜色。设置边框颜色。 4）框架中的超链接使用 现在为左边框的内容设置超链接，框架的超链接设置和一般页面的超链接设置方法基本相同。现在开始设置左边框“图片1”的超链接。首先选中左边框“图片1”文本并右击，在弹出的快捷莱单中选择“创建链接”，在打开的文件选择对话框中选择页面文件赵州桥htmlspic1html。 单击图623所示的属性对话框中的“目标”下拉列表框，选择所要打开链接目标的位置，这里选择mainframe，即前面设置的主框架名称。【注意】这个选择很重要，不然默认是在自身窗口（self）打开。图623 属性对话框如上述方法，依次设置好“图片2”、“图片3”、“图片4”等这几个超链接。 最后设置返回按钮的超链接，右击左边框中的返回按钮图片，在弹出的快捷菜单中选择“创建链接”，在打开的文件选择对话框中选择页面文件赵州桥indexhtml，在属性面板中的“目标”下拉列表框中选择所要打开链接目标的位置，这里选择Parent（表示在上级窗口中打开新的链接目标）。 5）保存所有的框架页面文件 编辑完框架及框架文件后，必须对框架及框架文件进行保存。框架文件的保存和一般页面文件的保存方法有所不同，如果按一般保存页面文件的方法，将会丢失一部分框架内容，所以掌握保存框架文件的方法很重要。 这里使用了二个框架页面（mainframe，leftframe），因此先要保存它们，然后再保存框架集文件。 单击左框架，选择“文件|保存框架”菜单项，输人框架文件名 lefthtml进行保存；主框架文件前面已经保存好了，有7个（pic1htmlpic7html），这里不再保存了；最后保存框架集，选择“文件|保存全部”菜单项，输人框架文件名allhtml进行保存。 6）超链接到主页 打开主页文件 indexhtml，选择“图片库”文本，设置超链接目标为赵州桥htmlsallhtml即可；按 F12键预览，如图 624所示。图624“图片库”页面浏览效果图（2）表单的使用p247 表单是网站设计者与使用者之间沟通的桥梁，网络使用者可以通过表单向网站发布信息，网站也可以通过表单从用户处获取信息，从而实现网站与用户，用户与用户间的沟通与交流。作业提交表单网页浏览效果图如图6-25所示，具体步骤如下。图6-25作业提交表单浏览效果图 创建一个表单。单击如图626所示“常用”右边的下三角按钮，选择“表单”选项，出现如图626所示的表单工具栏。 国626 表单工具栏 打开网页赵州桥htmlsbiaodanhtml，在页面中插入1行1列，宽度为600，水平居中的表格，将光标定位于表格内，单击表单工具栏中“表单”工具按钮，在网页中添加一个表单。 文本框的设定。单击表单的第1行第1列，输入说明文本“姓名：”，选择合适的字体和大小格式，单击表单工具栏中的“文本字段”工具按钮，在说明文本“姓名：”的后面插入文本框。按同样方法设置“密码”文本字段，在属性面板中设为密码类型。 单选按钮组的设定。在密码文本字段后面输入文本“性别：”，单击表单工具栏中的“单选按钮组”工具按钮 ，在打开的“单选按钮组”对话框中，按图627所示的参数进行设置。图627表单“单击按钮组”对话框 下拉列表框的使用。在“性别：”文本字段后面输入文本“班级：”，单击表单工具栏中的“列表”工具按钮 弹出一个下拉列表框；选中下拉列表框，单击属性面板中的“列表值”工具按钮，按图628所示参数进行设置。图628 表单下拉列表框的设置对话框复选框的使用。换行输入文本“爱好”，单击表单工具栏中的复选框按钮，添加4个复选项，分别命名为体育、音乐、美术、围棋。创建文本区域。换行输入文本“作业正文；”，单击表单工具栏中的“文本区域”工具按钮，创建一个文本区域，类型设为多行。 创建提交按钮。换行输入文本“提交：”，单击表单工具栏中的“按钮”工具按钮 创建一个“提交”按钮和“全部重写”按钮。6、层的的创建和使用p240层是网站设计者应用最为广泛的工具之一。通过层，网站设计者可以随意在层中放入文字、图片、插件及其他层，也可以移动层；这正是使用Dreamweaver的层的魅力所在。具体步骤如下。 创建新层。打开网站首页，单击“插人|布局对象|层”菜单项，插入一个新层，命名为layer1。并将层移到文档区适当的地方。 编辑层。在层中插人一张图片，单击新创建的层，选择“插入图像”菜单项，选择一张图片（图片在素材库中），并调整好图像的大小。 【注意】层的选择和移动可通过单击该层的边框来完成。层的显示与隐藏按以下步骤进行：单击CSS任务窗格左上方的CSS按钮，单击“层”标签，在其选项卡中选择一个层名称，单击 按钮，如图629所示；如果设置层为隐藏测此层将不可见。 设置层的属性。层的属性如图630所示，具体选 图6一29层选项卡属性项内容如下： 层编号。即层的名称。 左、上。显示选中层所在网页的位置。 宽、高。显示选中层的宽和高。 Z轴。显示层在层面板Z栏的顺序。 背景图像。指层的背景图像。 背景颜色。指层的背景颜色。可见性。指层的显示与隐藏，同上面所述的层的显示与隐藏。图6-一30 层的属性设置选项7、使用行为制作动态特效网页p252（1） 显示隐藏图层本例当鼠标移到导航栏的“站长介绍”项目时，便会显示layer1的内容，当鼠标移开该导航项目时，该图层1消失。 设置导航栏中项目的行为。打开首页，选中导航栏中的“站长介绍”项目，打开行为面板，单击加号按钮，选择显示隐藏层，设置其onmouseover事件的行为为显示对应层；设置其onmouseover事件的行为为隐藏对应层。 设置层的隐藏行为。选中layer1层，设置其onmouseover事件的行为为显示该层；设置其onmouseover事件的行为为隐藏该层。 设置层的可见性。在菜单上选择窗口|层，在层面板中设置层1为隐藏状态，即眼睛闭上。 效果预览。保存文档，按F12键预览制作的效果。（2）下拉列表莱单的制作下拉列表菜单是最为常见、便捷的一种信息列表方式，在Dreamweaver中也能快捷地实现。下面以一个简单的精选教案为内容进行制作。（1）制作弹出式下拉列表莱单的准备工作 打开“赵州桥”的首页indexhtml，选中表格的第2行“精选教案”文本，在“属性”面板中的“链接”下拉列表框中输人，如图638所示。图638“链接”下拉列表框【注意】这里一定要选中需要制作成下拉列表菜单的文字，并将其制作成一个链接，否则在后面的下拉列表菜单制作中无法选择所需的菜单项。（2）制作好要进行下拉列表莱单链接的网页 在制作下拉列表菜单前，首先要制作好链接到的网页，这里制作二个网页，分别为htmljiaoanlhtml，jiaoan2html，这二个网页的做法相同，因此这里只讲html/ jiaoanl html的制作，其他的可参照此法制作。 双击站点打开赵州桥htmls文件夹，在其上右击，弹出快捷菜单，选择“新建文件”创建文件jiaoanlhtml。双击新建好的文件jiaoanlhtml打开网页，插入一个3行1列的表格，在表格的第1行中输入标题、第二行插入一水平线和设置一个“返回”按钮的链接，指向主页indexHtml，在第三行输入正文及图片等，并调整好图文大小。（图文等素材在素材文件中）教案1网页浏览效果图如图6-39所示。图6-39 教案1网页浏览效果图(3)制作下拉列表莱单 打开主页 indexhtml文件，选中“精选教案”；选择“窗口/行为”菜单项，打开行为面板，单击行为面板中的按钮 ，在弹出的下拉菜单中选择“显示弹出式菜单”菜单项，打开如图640所示的窗口。 在“内容”选项卡中，按照图640中的内容依次输人。各选项的含义是：图640 显示弹出式菜单“内容”选项卡“菜单：十一”。对要制作的菜单进行增加和删除。 “文本”。每一个下拉列表菜单的名称。 “目标”。打开每一个下拉列表菜单的方式，共有4种方式（-blank，parent，-Self，top），详细情况见前面的“添加超链接”。“链接”。下拉列表菜单要指向的目标网页。 在“外观”选项卡中，按照图641所示的内容依次设定。各选项的含义是：图641 显示弹出式莱单“外观”选项卡下拉列表框。菜单的显示方式，主要有：“垂直菜单”和“水平菜单”两种，根据用户需求 选择。字体、大小等。指菜单的字体、大小、粗细、倾斜、对齐方式。一般状态。菜单在正常情况下显示的情况。滑过状态。菜单在鼠标滑过时的文本和单元格的颜色。在“高级”选项卡中，按照图642所示的内容依次设定。各选项的含义是：图642 显示弹出式莱单高级”选项卡 单元格宽度、单元格高度。可以自己设定，也可以选择由系统自动按照下拉列表菜单中字数的多少来确定的数值。 单元格边距、单元格间距、文本缩进。指菜单的外框单元格的边距、间距及下拉式文本缩进的多少。 菜单延迟。指菜单的弹出延迟时间。 弹出式菜单边框。可以选择弹出式菜单有无边框及边框的颜色、阴影、宽度、高亮颜色等属性。 在“位置”选项卡中，按照图643所示的内容依次设定。各选项的含义是：图643 显示弹出式莱单“位置”选项卡 菜单位置。指当鼠标滑过时弹出菜单的显示位置，可以通过下面的X和Y的数字大小进行调整，这里选用第三种位置方式。（X：0，Y：20） “在发生 OnMouseout事件时隐藏某单”。选中时表示当鼠标离开菜单时，菜单会自动隐藏。 至此，弹出式下拉列表菜单制作完成，单击“确定”按钮，退出菜单设置；在行为面板下面会自动出现两个行为，如图644所示；保存indexhtml，按F12键可以预览效果。 图644 行为动作面板（3）图像翻转在这个设计的例子里，把光标放在一个带链接的图像上，这张图像就会变成另一幅图，看起来动感十足。把这种功能称为图像翻转。当然实际图像并不会变，而是在页面下载时预载人了两张图像。【注意】相互替换的图片尺寸大小应一样。由于在NETSCAPE3和IE4以上的浏览器均支持这个功能，因此这个功能在网上已很常见。以前实现这个功能需要涉及 Javascript编程，实现起来非常烦琐，现在使用 Dreamweaver可以轻松实现这个功能。为了制作这样的效果，先要将图片处理好，处理图片可以用PhotoshoP或Fireworks等软件。这个例子中一共只有一个选择项，所以要先做好两个图形，即imagesl8jpg和images19jpg。这里用行为（behaviors）面板制作翻转图形。打开主页index. html，选中中间没有任何内容的大的文本表格框，插入一张备用图片images18 jpg，水平、垂直居中对齐，并在属性面板中将这张图片命名为a，如图633所示。 图633 图像命名选择“窗口|行为”菜单项，打开行为面板，在行为面板中单击目按钮，在弹出的快捷菜单中选择“交换图像”，打开图像翻转设置窗口，如图634所示，选择图像“a”，依图6- 34进行设置。图6 一34 图像翻转设置窗口【注意】图像翻转设置窗口内某些选项的含义是： 设定原始档为。通过单击其右边的“浏览”按钮选择要变换成的目标图像，这里 为images19Jpg。 预先载人图像。这里指图像的载人方式，是指网页打开时就进行加载；如果没有选中此项，则当行为开始时进行加载。 鼠标滑开时恢复图像。这里上定要选择此项，如果没有选择，当鼠标滑开后图像不会自动恢复。；至此，图像翻转制作完成，单击“确定”按钮保存。在行为面板处会自动产生两个行为，如图6- 35所示。打开IE”浏资器检验，当鼠标移入时，图像能否自动翻转、变化。 图6-35 行为动作面板 【注意】图像翻转还可以使用更为简便的方法来制作。选择“插入|图像对象！鼠标经过图像”菜单项，打开“插人鼠标经过图像”对话框，如用636所示，依次设置好各个选项，各选项的含义是：图像名称。指原始图像的名称。原始图像。指原始图像文件，可通过其右方的“浏览”按钮进行选择。鼠标经过图像。指鼠标经过原始图像后翻转的图像文件，可通过其右方的“浏览”按钮进行选择。预载鼠标经过图像。该选项一般要选中，这样在网页加载时，图像就会进行加载，使图像翻转流畅。替换文本。指鼠标移至翻转图像上的文本介绍。按下时，前往的URL。指当鼠标按下后打开的链接网页。单击“确定”按钮，打开浏览器，试一下是否同样可以实现图像翻转。图636 插入鼠标经过图像设置窗口在 Dreamweaver 8中很多效果都可以通过不同的方法灵活地实现，这需要使用者仔细认真地思考与实践。8、利用CSS样式美化网页p251下面建立一个CSS样式表。CSS的全称为 Cascading Styles Sheet，译为层叠样式表，是由 W3C（World Wide Web Consortium）组织拟定的，主要用来指定文字、段落、版面等网页素材的格式。在Dreamweaver中，不需要熟悉CSS的语法就可以轻松地设计出具有美妙效果的网页。（1）建立简单的样式表新建一个网页htmlzzjshtml，单击行为面板中“新建 CSS规则”按钮，打开“新建 CSS规则”对话框，在“名称”下拉列表框中输人要定义的CSS规则名mycss，如图645所示。图645 创建层叠样式表对话框【注意】在“选择器类型”组中，各选项的含义是：第一项表示制作一个新的样式表示符，可以任意命名。第二项表示重新定义一个html标签。第三项表示使用 CSS选择器，如 a：over，a：link等。打开“mycss的CSS规则定义”窗口，可以依次对字体（图646的“类型”对话框）、背景（图647的“背景”对话框）、文字（图648的“区块”对话框）、表格（图649的“方框”对话框）的状态进行设置。图646 层叠样式表“类型”设置图647 层叠样式表“背景”设置图6-48 层叠样式表单元格设置图6-49 层叠样式表表格设置接下来就要使用此样式。在网页中输入文本“肇庆学院”并选中，在属性面板的“样式”下拉列表框中，选择mycss，如图650所示，刚才定义好的样式就应用到所选择文本上，各种效果一步到位。图6-50对象CSS设置对话框 (2)定义链接的文字样式接下来再设计一个样式表，以控制超链接的形式和颜色变化。要达到的目标是：当未被单击时超链接文字无下划线，显示为红色；当鼠标至于链接上时有下划线，链接文字为蓝色；当单击链接后，链接无下划线，显示为紫色。新建一个CSS规则，单击CSS行为面板上的“新建CSS规则”按钮 ，打开“新建CSS规则”对话框，选择“选择器类型”选项组的第三项“高级（ID、伪类选择器等）”，在“选择器”下拉列表框中有四个选项,如图6-52所示，含义是：图4-52 创建层叠样表对话框a：link指正常的未被访问过的链接。a：active指正在单击的链接。a：hover指鼠标在链接上 。a：visited指已经访问过的链接选择a:link，打开对话框如图6-53所示，并按其上内容设置。图6-53 链接对象的链接层叠样式表设置窗口用同样方法，依次可以设计。a:hover和a:visited的形式，分别如图654和图655所示。图6-54链接对象的悬浮层层叠样式表设置窗口图6-55 链接对象的已访问层叠样式表设置窗口接下来将此样式应用到一个链接上，看看效果如何。在网页中输入文本“肇庆学院”并选中，在属性面板中的“样式下拉列表框中，将刚设计的样式链接到一个目标网页上，这里选择，则刚才定义好的样式就应用到所选择文本上，各种链接效果一步到位。9.模板的创建和应用模板一个网站在制作过程中，经常需要创作大量布局相同或相似的网页，这时候，应用模板来创建网页不失为一种很好的方法，下面简单介绍基于本站主页面为模板的网页模板的创建和应用。(1)模板的创建模板创建的大致过程是：打开一个已制作好的网页（以此网页为模板）另存为模板新建可编辑区域（可重复进行）保存。具体步骤如下。为方便操作，这里将本网站主页indexhtml作为模板，为了不破坏它作为主页，首先将其另存为别的网页名称mbhtml，并做一定的修改，将中间的图片删除。打开网页mbhtml，选择“文件|另存为模板”菜单项；在弹出如图657所示“另存为模板”对话框中选择模板存放的站点，在“另存为”文本框中为模板输入一个唯一的名称，单击“保存”按钮。这时弹出如图658所示的对话框，单击“是（Y）”按钮。这时在站点文件中自动生成一个Templates文件夹，文件夹中存放着刚才保存的模板文件templatesmbdwt，如图659所示。图657“另存为模板”对话框 图658 模板链接更新选择对话框 图659 生成的模板文件在常用工具栏中单击“模板”工具按钮 右边的下三角按钮，从弹出的如图660所示的下拉列表中选择“可编辑区域”选项。在打开的如图661所示的“新建可编辑区域”对话框中的“名称”文本框中为该区域输人一个唯一名称。单击“确定”按钮。创建的模板如图662所示，如果需要多个可编辑区域，可以重复步骤，以满足实际网页编辑的需要。保存制作好的网页模板。选择“文件|保存”菜单项。一个网页模板就制作好了。 图660 模板按钮下拉列表 图661“新建可编辑区域”对话框 图6-2 创建了可编辑区域的模板网页（2）应用网页模板下面就将网页模板应用到已经制作好的网页上。为了方便操作，一般采用先制作好网页，再应用模板的方法。具体步骤如下。制作一个需要应用模板的网页。选择“文件|新建”菜单项，创建一个基本的网页页面，如图663所示。选择“修改|模板”菜单项，在如图664所示的下拉菜单中选择“套用模板到页”菜单项。在打开的如图665所示的“选择模板”对话框中，选择需要套用的模板mb后，单击“选定”按钮。 将内容应用到模板的可编辑区域，如图666所示。 应用了模板网页的效果图。在网站需要制作大量风格一致的网页时，应用网页模板是一个非常便捷的方法，制作方法简单，而且网页页面变动也非常灵活，能取得事半功倍的效果。图663准备应用模板的网页图6-64展开的模板下拉菜单 图6-65“选择模板”对话框10网站测试和上传一个网站做好后，需要对站点进行测试和上传。（1）整理网站，清点网页为了防止同页、图片、文字、声音、影像出现链接错误，在上传同站之前一定要做好链接的检查工作，以免网站在使用时出现错误。选择“窗口|结果”菜单项，打开结果检查属性面板，如图678所示；单击“链接检查器”标签，单击左边的“链接检查”按钮 右下方的下三角按钮，在打开的菜单中选择“检查整个当前本地站点的链接”，如果没有出现错误链接的情况，则站点链接没有错误；否则就按照提示的错误信息进行修改。如