网页设计实用教程第09章.ppt

《网页设计实用教程第09章.ppt》由会员分享，可在线阅读，更多相关《网页设计实用教程第09章.ppt（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、21世纪计算机系列教程世纪计算机系列教程退出退出退出退出第第9章章 Dreamweaver MX综合应用综合应用 l 学习目的：学习目的：v网站的设计构思网站的设计构思v资源面板的应用资源面板的应用v行为面板的应用行为面板的应用v站点窗口的应用站点窗口的应用v网站建设的全过程网站建设的全过程本章概述：本章概述：v 本本章章任任务务在在于于利利用用Dreamweaver MX的的综综合合知知识，设计一个关于网校的网站，识，设计一个关于网校的网站，v从从网网站站设设计计的的构构思思到到设设计计的的准准备备，从从网网站站的的制制作作到到网网站站的的上上传传，基基本本体体现现了了用用Dreamweav

2、er MX设计一个网站的全过程，设计一个网站的全过程，v通通过过这这个个网网校校网网站站制制作作的的实实例例，读读者者可可以以进进一一步步学学习习有有关关网网站站构构架架设设计计、网网站站制制作作中中资资源源面面板的使用、网站上传知识。板的使用、网站上传知识。增加部分（第九章）增加部分（第九章）一、插入一、插入-媒媒体体-flash第九章插入第九章插入-媒体媒体-flash.htm二、添加声音二、添加声音第九章添加声音第九章添加声音.htm 1、插入、插入-媒体媒体-插件插件Mp3注意：如果想隐藏播放注意：如果想隐藏播放器器设置插件的宽、高设置插件的宽、高2、直接制作链接、直接制作链接向页面添

3、加声音向页面添加声音3、用代码向页面添加背景声音、用代码向页面添加背景声音第九章用代码向页面添加背景声音第九章用代码向页面添加背景声音.htm格式：在格式：在中中例如：例如：三、滚动字幕三、滚动字幕从左往右的（默认）从左往右的（默认）添加方法：添加方法：在设计窗口中找到位置在设计窗口中找到位置代码窗口中输入代码窗口中输入Marquee 注释：注释：n.大帐篷大帐篷字幕字幕格式：格式：内容内容向右向右内容内容第九章滚动字幕.htm制作简单主页制作简单主页利用刚刚制作的网利用刚刚制作的网页页建站准备建站准备1.设置根目录设置根目录所所谓谓根根目目录录，就就是是网网站站上上所所有有文文件件放放置置的

4、的地地方方，根根目目录的建立，有利于文件的集中管理。录的建立，有利于文件的集中管理。根根目目录录的的建建立立方方法法很很简简单单，在在电电脑脑硬硬盘盘的的任任一一位位置置新新建一个文件夹即可。建一个文件夹即可。此此处处，新新建建为为网网站站根根目目录录的的文文件件夹夹取取名名为为xxwx（“小小小网校小网校”的拼音字母缩写）。的拼音字母缩写）。2.设置网站设置网站 是是用用Dreamweaver MX设设计计网网站站时时要要做做的的一一项项很很重重要要的准备工作。的准备工作。主要分为设置主要分为设置本地网站与设置远程网站本地网站与设置远程网站两步。两步。3、模拟远程站点（使用、模拟远程站点（使

5、用Win2000或或Win2003）建立具有建立具有Internet信息服务功能的服务器信息服务功能的服务器（IIS服务器）服务器）（1）FTP站点站点（2）Web站点站点（1）FTP站点站点确认确认“允许匿名访问允许匿名访问”（2）Web站站点点确认文档确认文档dreamweaver站点站点管理站点管理站点设置本地网站设置本地网站设置远程网站设置远程网站上传文件上传文件 浏览浏览Web站点站点网站风格有很多类型，网站风格有很多类型，从网页繁简的角度可以从网页繁简的角度可以分为分为复杂型与简洁型，复杂型与简洁型，所谓复杂型，就是在页所谓复杂型，就是在页面上放满了文字与图片，面上放满了文字与图片

6、，显得内容众多，面对众显得内容众多，面对众多的内容，有时让人无多的内容，有时让人无所适从，所适从，本书第六章本书第六章“一个用表格一个用表格设计网校主页的例子设计网校主页的例子”，可以说就是属于复杂性的可以说就是属于复杂性的范畴。范畴。所谓简洁型，就是在排所谓简洁型，就是在排版时，突出几项主要内版时，突出几项主要内容，并修饰以简洁明快容，并修饰以简洁明快的图案，让人感觉轻松的图案，让人感觉轻松自然，自然，如图如图9-1所示，就是一个所示，就是一个简洁型网页设计的例子。简洁型网页设计的例子。图图8-19.1 一个网站建立的实例一个网站建立的实例 本本小小节节，将将介介绍绍一一个个简简洁洁型型网网

7、站站主主页页制制作作的的实实例例，其其效效果果如如图图9-2所示。所示。该该网网站站的的内内容容同同样样是是关关于于网网校校的的介介绍绍，只只是是在在设设计计风风格格上上与与第第六六章章的内容完全不同，的内容完全不同，网网站站的的名名称称叫叫“小小小小网网校校”，内内容容主主要要有有“报报名名细细则则”、“网网校校地地址址”、“学学员员作作品品”、“初初级级培培训训班班”、“中中级级培培训训班班”、“网网上上报名报名”、“关于我们关于我们”等七个栏目，整个风格以等七个栏目，整个风格以“小小”为主。为主。图图9-2“小小网校小小网校”效果图效果图 1.设置页面属性设置页面属性2.设置网页的尺寸设

8、置网页的尺寸以下没有素材，无法实现以下没有素材，无法实现3.插入表格插入表格4.插入图片、插入图片、Flash动画、按钮动画、按钮5.绘制层并在层上插入网页元素绘制层并在层上插入网页元素6.保存文件及设为首页保存文件及设为首页7.上传文件上传文件 制作网站制作网站9.2知识要点知识要点上上一一小小节节介介绍绍了了一一个个简简洁洁性性网网校校设设计计的的例例子子，这这个个例例子子基基本上反映了制作一个网站的全过程，本上反映了制作一个网站的全过程，知知识识要要点点有有网网站站的的设设计计构构思思、资资源源面面板板的的应应用用、行行为为面面板板的应用、站点管理器的应用。的应用、站点管理器的应用。网站

9、的设计构思网站的设计构思包包括括：素素材材的的准准备备、网网站站风风格格的的选选型型、网网站站设设计计创创意意、网网站设计流程等方面，站设计流程等方面，以后，应该形成一份网站设计分析报告和网站构架蓝图。以后，应该形成一份网站设计分析报告和网站构架蓝图。如果是进行专业网页制作，这个步骤显得更为重要。如果是进行专业网页制作，这个步骤显得更为重要。资源面板的应用资源面板的应用在在专专业业网网站站设设计计过过程程中中，面面对对大大量量的的网网页页资资源源，如何行之有效地使用是一个很重要的方法。如何行之有效地使用是一个很重要的方法。Dreamweaver MX提提供供的的资资源源控控制制面面板板，能能够

10、够高高效率地帮助设计出网页。效率地帮助设计出网页。资资源源控控制制面面板板几几乎乎包包含含了了网网页页设设计计中中拥拥有有的的一一切切网网页页元元素素，这这些些网网页页元元素素可可以以很很方方便便地地在在网网站站的的任何一个网页中引用。任何一个网页中引用。1.资源控制面板中的组件资源控制面板中的组件资源控制面板包括九个资源组件：资源控制面板包括九个资源组件：颜颜色色、图图像像、链链接接（URLs）、Flash动动画画、Shockwave、影影片片、脚本、库、模板，如图脚本、库、模板，如图9-29所示。所示。图图9-29 资源控制面板包括九个资源组件资源控制面板包括九个资源组件 图像图像颜色颜色

11、链接链接Flash动画动画shockwave影片影片脚本脚本模板模板库库注意：在使用资源注意：在使用资源控制面板前，必须控制面板前，必须正确将本地网站设正确将本地网站设置好，且一定要选置好，且一定要选择择（启用缓存启用缓存 ）。）。2.显示资源控制面板显示资源控制面板 要显示资源控制面板，有两种方法：要显示资源控制面板，有两种方法：按按【F11】键。键。执行主菜单命令执行主菜单命令“窗口窗口”/“资源资源”。3.更新资源控制面板内容更新资源控制面板内容4.资源组件分类资源组件分类资资源源控控制制面面板板上上的的九九大大类类资资源源组组件件，在在实实际际运运用用中中又又可可分为三类：分为三类：嵌

12、入式资源：嵌入式资源：图像、图像、Flash动画、动画、Shockwave、影片、脚本、影片、脚本链接式资源：链接式资源：库、模板库、模板独立式资源独立式资源：颜色、链接颜色、链接5.编辑资源编辑资源 资资源源控控制制面面板板允允许许一一次次选选取取多多个个资资源源，并并可可对对它它进进行行编编辑辑。在在编编辑辑之前，首选需要选取多个资源，其操作方法如下：之前，首选需要选取多个资源，其操作方法如下：单击选取一个资源。单击选取一个资源。按住按住【Shift】键单击其他资源可连续选取多个资源。键单击其他资源可连续选取多个资源。按住按住【Ctrl】键单击其他资源可不连续选取多个资源。键单击其他资源可

13、不连续选取多个资源。行为面板的应用行为面板的应用行行为为面面板板在在网网页页设设计计中中具具有有非非常常重重要要的的作作用用，可可以以让让网网页页具具有交互功能。有交互功能。1.行行为为面面板板中中的的几几个个重重要要概念（很重要）概念（很重要）行行为为：指指通通过过访访问问者者与与网网页发生交互来改变页面。页发生交互来改变页面。事事件件：指指浏浏览览者者在在页页面面做做的动作的动作动动作作：由由预预先先写写好好的的可可以以执执 行行 指指 定定 任任 务务 的的JavaScipt代码代码。2.使用行为面板使用行为面板 按按【Shift+F3】或或执执行行主主菜菜单单上上的的“窗窗口口/行行为

14、为”可可以以打打开开行行为为面面板，如图板，如图9-30所示。所示。注注意意：（2）（显显示示事事件件）是是事事件件菜菜单单中中的的子子菜菜单单，用用于于指指定定当当前前行行为为在在哪哪些些浏浏 览览 器器 中中 起起 作作 用用图图9-30 行为面板示意行为面板示意图图 添加添加动作动作删除删除动作动作事件事件列表列表动作动作列表列表事件事件菜单菜单上下上下移动移动 v站站点点管管理理器器，也也叫叫“站站点点”窗窗口口，如图如图9-31所示。所示。v是是一一个个本本地地和和远远程程站站点点的的文文件件管管理窗口，理窗口，v通通过过它它可可以以将将本本地地站站点点结结构构复复制制到远程服务器上

15、，到远程服务器上，v可可以以将将远远程程web站站点点结结构构复复制制到到本地系统上。本地系统上。远端文远端文件件文件视文件视图图测试服务测试服务器器弹出菜弹出菜单单远程连远程连接接刷刷新新下载文下载文件件上传文上传文件件本地文本地文件件折叠按折叠按钮钮状态栏状态栏地图视地图视图图图图9-31 站点窗口示意图站点窗口示意图 站点管理器的应用站点管理器的应用注意：注意：1.以以FTP方方式式连连接接，默默认认情情况况下下，在在（30 ）分分钟钟内内没没有有与与主主机机联联系系，Dreamweaver将将从从远远程程站站点点断断开连接。开连接。2.三三角角形形按按钮钮位位于于“站站点点”窗窗口口的

16、的左左下下角角，可可以以用用它它来来折折叠叠和和展展开开“站站点点”窗窗口口，使使之之显显示示一一个个栏栏或或者者（两个栏两个栏 ）。）。3.（下下载载文文件件）是是将将远远程程站站点点中中选选定定的的文文件件复复制制到到本本地站点。地站点。4.按按下下“站站点点视视图图”这这个个按按钮钮可可以以从从弹弹出出式式菜菜单单中中选选择（择（仅地图仅地图）或（）或（地图和文件地图和文件）。）。9.3 本章小结本章小结 本本章章任任务务是是建建立立一一个个以以网网校校为为内内容容的的网网站站，重重点点介绍了网站主页制作、发布的全过程。介绍了网站主页制作、发布的全过程。通通过过这这个个过过程程，在在复复

17、习习以以前前学学习习的的表表格格应应用用、层层的的应应用用等等知知识识的的同同时时进进一一步步学学习习了了资资源源控控制制面面板板的的使使用用、行行为为控控制制面面板板的的使使用用、站站点点管管理理器器的的使使用等知识。用等知识。至至此此，基基本本完完成成了了Dreamweaver MX网网页页设设计计知识的学习。知识的学习。Dreamweaver MX是是一一个个较较为为完完备备的的网网页页制制作作系统，功能较多。系统，功能较多。习题与操作题习题与操作题 习题习题【选择题选择题】（1）以以FTP方方式式连连接接，默默认认情情况况下下，在在（）分分钟钟内内没没有有与与主主机机联联系系，Drea

18、mweaver将从远程站点断开连接。将从远程站点断开连接。A、30B、60C、10D、20（2）（）（）是事件菜单中的子菜单，用于指定当前行为在哪些浏览器中起作用）是事件菜单中的子菜单，用于指定当前行为在哪些浏览器中起作用A、显示事件、显示事件B、转向、转向URLC、改变属性、改变属性D、获取更多行为、获取更多行为（3）按（）按（）或执行主菜单上的）或执行主菜单上的“窗口窗口”/“行为行为”可以打开行为面板。可以打开行为面板。A、【F3】B、【F8】C、【F12】D、【Shift+F3】（4）（）（）是指由浏览者在页面做的动作。）是指由浏览者在页面做的动作。A、行为、行为B、动作、动作C、事件

19、、事件D、行为面板、行为面板（5）按住（）按住（）键单击其他资源可连续选取多个资源。）键单击其他资源可连续选取多个资源。A、【Shift】B、【Ctrl+Alt】C、【Ctrl】D、【Alt】【填空题填空题】（1）三三角角形形按按钮钮位位于于“站站点点”窗窗口口的的左左下下角角，可可以以用用它它来来折折叠叠和和展展开开“站站点点”窗窗口口，使使之之显显示示一一个个栏栏或或者者（）。）。（2）（）是是将将远远程程站站点点中中选选定定的的文文件件复复制制到到本本地地站站点。点。（3）按按下下这这个个“地地图图视视图图”按按钮钮可可以以从从弹弹出出式式菜菜单单中中选选择（择（）或（）或（）。）。（4

20、）在在实实际际运运用用中中，所所有有的的资资源源组组件件又又可可分分为为三三类类：（）、（）、（）、（）、（）。）。（5）资资源源控控制制面面板板包包括括九九个个资资源源组组件件：颜颜色色、（）、链链接接、Flash动动画画、Shockwave、（）、脚脚本本、（）、模板。）、模板。（6）在在使使用用资资源源控控制制面面板板前前，必必须须正正确确将将本本地地网网站站设设置置好，且一定要选择（好，且一定要选择（）。）。【简答题简答题】（1）就就你你所所看看到到过过的的网网站站，从从风风格格上上可可以以分分为为哪哪些类型？些类型？（2）在规划网站时，应如何设置好网站根目录？）在规划网站时，应如何设

21、置好网站根目录？（3）如何设置网站的本地信息与远程信息？）如何设置网站的本地信息与远程信息？（4）你对设置网页的尺寸大小有何看法？）你对设置网页的尺寸大小有何看法？（5）使使众众多多的的层层完完全全重重叠叠且且大大小小一一样样，有有何何技技巧巧？（6）如如何何用用Dreamweaver MX实实现现文文件件上上传传与与下下载？载？（7）设计一份网站制作规划的报告？）设计一份网站制作规划的报告？（8）如何将网站）如何将网站index.htm设为首页文件？设为首页文件？（9）使用资源面板编辑网页有何好处？）使用资源面板编辑网页有何好处？操作题操作题设计一个和本章实例相类似个人网站。设计一个和本章实例相类似个人网站。四、添加框架四、添加框架例如：例如：框架与综合框架与综合练习练习-2005-2005级级.htm.htm方法：方法：一、启动界面一、启动界面框框架集架集二、文件二、文件新建新建三、插入三、插入 HTML HTML 框架框架上方左侧上方左侧嵌套嵌套设置框架分割线设置框架分割线方法：按方法：按Alt后点后点框架框架选择选择frameset(框框架集架集)设置框架网页标设置框架网页标题题校园网校园网教学在线教学在线黑大主页黑大主页