《现代网页设计及网络建设技术 教学课件 ppt 作者 黄建华 第5章 DREAMWEAVE MX》由会员分享，可在线阅读，更多相关《现代网页设计及网络建设技术 教学课件 ppt 作者 黄建华 第5章 DREAMWEAVE MX（60页珍藏版）》请在金锄头文库上搜索。
1、第5章 DREAMWEAVE MX,5.1 Dreamweave MX简介 5.2 Dreamweave MX基本操作 5.3 图片处理 5.4 图像地图的建立 5.5 表单的应用 5.6 超级链接的应用 5.7 表格的应用 5.8 版式设计 5.9 创建模板 5.10 CSS 5.11 Dreamweave MX下CSS的应用 本章小结,兰州石化职业技术学院 黄建华,第5章 学习要求,下一页,上一页,返回目录,本章通过Dreamweave MX工作界面、基本操作和CSS的应用三个部分介绍了Dreamweave MX的使用方法。在Dreamweave MX工作界面介绍两种不同的工作界面及其相应
2、的各个区域；在Dreamweave MX基本操作部分介绍了Dreamweave MX的基本使用方法；在CSS的应用部分介绍了CSS的概念使用方法及在Dreamweave MX下的应用。 通过本章的学习，要求读者了解Dreamweave MX及CSS的相关概念，并能掌握Dreamweave MX的基本使用方法和CSS在Dreamweave MX下的应用。 对于网页制作者来说对Dreamweave MX的基本操作方法必须有个深入的了解，尤其是CSS技术，通过设置CSS属性值来获得各种不同效果。主要内容包括基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容，做到能
3、够用CSS做出比较漂亮的网页。,兰州石化职业技术学院,5.1 Dreamweave MX简介,下一页,上一页,返回目录,5.1.1 概述 Dreamweave MX是Macromedia公司推出的功能强大的网页设计软件，作为一种所见即所得的网页编辑软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，Dreamweaver自动在用户创建网页时生成底层的HTML代码，同时提供了很好的DHTML代码编辑功能，能够产生多种动态效果，对建立和管理网站有许多好的方法。 Dreamweave MX主要特点： 1）工作界面中，浮动面板和文档窗口在编辑区中可以用户自由移
4、动，方便了用户的编辑，真正实现了所见即所得。 2）在网页设计中，同时使用HTML标记、HTML样式和CSS样式来格式化所编辑的文本内容。 3）可用时间轴和行为来制作动态网页。 4）可以方便地利用已创建的模板建立统一的网页，使得网页制作更规范和内容更新更快捷。 5）支持多种浏览器工作，也支持第三方插件，具有广泛的应用价值。,兰州石化职业技术学院,5.1 Dreamweave MX简介,下一页,上一页,返回目录,5.1.2 工作区选择 Dreamweaver MX 提供了两种可供选择的工作区布局：一种将全部元素置于一个窗口中的集成布局和一种非类似于Dreamweaver 4的浮动布局。第一次运行D
5、reamweaver MX需要选择一种工作区布局，如图51所示。,图51,Dreamweaver MX工作区选择，如图52所示。,图52,兰州石化职业技术学院,5.1 Dreamweave MX简介,下一页,上一页,返回目录,两种布局的喜好因人而异，如果选择的是Dreamweaver MX工作区，想改成Dreamweaver 4工作区，可以使用“参数选择”对话框切换，如图53所示。,选择更改工作区的文档工具栏 ，如下图所示。,图53,图54,兰州石化职业技术学院,5.1 Dreamweave MX简介,下一页,上一页,返回目录,5.1.3 Dreamweaver窗口 Dreamweaver M
6、X 2004提供了一个将全部元素置于一个窗口中的集成布局，在集成的工作区中，全部窗口和面板都被集成到一个应用程序窗口中，如图55所示。,图55,兰州石化职业技术学院,5.1 Dreamweave MX简介,下一页,上一页,返回目录,（1）标题栏,（2）菜单栏,（3）插入栏,（4）工具栏,（5）“文档”窗口：显示当前创建和编辑的文档。 （6）状态栏： 显示当前网页的有关信息，提供与用户正创建的文档有关的其他信息。 （7）“属性检查器”,兰州石化职业技术学院,5.1 Dreamweave MX简介,下一页,上一页,返回目录,（8）“面板组”：如图511所示，有五个浮动面板组，是相应组在某个标题下面
7、的相关面板的集合，若要展开一个面板组，单击组名称左侧的展开箭头；若要取消停靠一个面板组，拖动该组标题条左边缘的手柄。,图511,DreamweaverMX 2004中的面板被组织到面板组中。插入面板中的工具是制作网页过程中经常使用的，一般通过“窗口”“插入”或用快捷鍵【Ctrl】【F2】来显示或隐藏插入面板。面板组中选定的面板显示为一个选项卡，每个面板组都可以展开或折叠，并且可以和其他面板组停靠在一起（或取消停靠）。面板组还可以停靠到集成的应用程序窗口中，这使得能够很容易地访问所需的面板，而不会使工作区变得混乱。,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上一页
8、,返回目录,启动中文版Dreamweaver MX 2004，窗口的中央有三项列表，如图512所示。,图512中文版Dreamweaver MX 2004窗口,（1）打开最近项目列表：此栏目中列出了最近打开的文件列表。可以双击打开此栏目中的文件，如果要打开的文件没在当前列表中，可以单击底部的“打开”进行打开文件操作。 （2）创建新项目：列出了可以创建的新文件类型。 （3）从范例创建：提供了许多网页模板，使用这些模板可以直接快捷地从模板中创建网页文件，新建的网页继承了模板网页的布局设置。,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上一页,返回目录,5.2.1 创建
9、一个新的网页 （1）创建一个新的网页，可以选择“文件”“新建”，弹出如下对话框，如图513所示。,图513,（2）从各种预先设计的页面布局中选择一种，如选择“基本页”HTML，单击创建按钮，Dreamweaver MX 2004即展开工作区界面（一个空白页），如图514所示。,图514,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上一页,返回目录,用户可以在这个空白页添加表格和输入文本进行编辑，如果要向页面添加图片或其他元素，应先保存这个空白页。选择“文件”“另存为”，在“另存为”对话框中，浏览到站点本地根文件夹下，填入文件名，保存退出。,兰州石化职业技术学院,5
10、.2 Dreamweave MX基本操作,下一页,上一页,返回目录,5.2.2 站点设置 Dreamweave MX不仅能够制作网页，另外还能进行网站管理。Web站点是一组具有如相关主题，类似的设计、链接文档和资源。Dreamweaver MX 2004是一个站点创建和管理工具，因此它不仅可以创建单独的文档，还可以创建完整的 Web站点。 使用站点定义向导定义本地文件夹，执行以下操作。 1）启动 Dreamweaver MX 2004。 2）选择“站点”“管理站点”，出现“管理站点”对话框，如图515所示。,图515,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上
11、一页,返回目录,3）在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”，出现“站点定义”对话框，如图516所示。 如果对话框显示的是“高级”选项卡，则单击“基本”，出现“站点定义向导”的第一个界面，要求用户为站点输入一个名称，如图517所示。,图516,图517,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上一页,返回目录,4）在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点，该名称可以是任何所需的名称。 5）单击“下一步”，出现向导的下一个界面，询问用户是否要使用服务器技术，如图518所示。,图518,6）选择“
12、否”选项，指示目前该站点是一个静态站点，没有动态页。 7）单击“下一步”，出现向导的下一个界面，询问用户要如何使用文件，如图519所示。,图519,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上一页,返回目录,8）选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。在站点开发过程中有多种处理文件的方式。 9）单击该文本框旁边的文件夹图标，随即会出现“选择站点的本地根文件夹”对话框。 10）单击“下一步”，询问用户如何连接到远程服务器。从弹出式菜单中选择“无”，用户可以稍后设置有关远程站点的信息。 11）单击“下一步”，该向导的下一个屏幕将出
13、现，其中显示用户的设置概要，如图520所示。,图520,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上一页,返回目录,12）单击“完成”完成设置，随即出现“管理站点”对话框，显示用户的新站点。单击“完成”，关闭“管理站点”对话框。,5.2.3 文件命名 站点定义好之后，就要开始新建网页文件和文件夹了，在站点中单击右键，选择新建文件，如图521所示。,图521,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上一页,返回目录,给新建的文件输入名称，如图522所示,图521,新建文件夹与新建文件类似，网站首页默认的文件名，取决于用户申请的主页
14、空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文。,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,上一页,返回目录,5.2.4 页面属性的设置 双击index.htm，打开一个空白的页面，从这个空白页面开始制作，了解页面属性的设置和作用。 在工作区点鼠标右键，选择页面属性，如图523所示。,图523,打开页面属性对话框，如图524所示,图524,兰州石化职业技术学院,5.2 Dreamweave
15、 MX基本操作,下一页,上一页,返回目录,5.2.5 颜色选取 网页设计中颜色是非常关键，它决定了一个网站在美工方面是否成功。Dreamweaver MX提供了强大的颜色选取功能，可以精确定义网页设计中有的颜色。 现在流行的网页设计配色，主要采用黑、白、灰等作基调，通常采用一种精确的有彩色作为主色调，其他可使用一种在Photoshop、Fireworks中处理的颜色的渐变，让人感觉只有一种有彩色。 下面将以调整页面属性的颜色为实例，选择颜色选取框，如图525所示。,图525,打开颜色选取面板，如图526所示。,图526,兰州石化职业技术学院,5.2 Dreamweave MX基本操作,下一页,
16、上一页,返回目录,5.2.6 文字编辑 在网页中有大量的文字和图像等内容的录入和编辑工作，这些工作是最为基本的工作。中西文的录入和Word等其他软件一样，要有一定的速度，尽量减少差错，注意插入空格：【Shift】【Ctrl】【Space】；换行（有空行）： 【Enter】；（没空行）：【Shift】【Enter】。输入文本后，要对文本进行各种修饰，如样式，字体、对齐方、颜色，文字列表，超级链接等。,兰州石化职业技术学院,5.3 图片处理,下一页,上一页,返回目录,Dreaweaver MX 2004中增加了图片处理功能，如图片亮度和对比度的调节、图片的锐化效果等等。在Dreamweaver MX 2004中导入一张图片，属性面板上对应的图片相关选项，多了几个图标功能。 1）首先在图片大小设置栏旁边就多了一个带箭头的圆形的按钮图标，如图527所示，这是快速使图片还原到原始大小的工具。2004同时还增加了“Crop”工具，直接在DreamWeaver中剪切图片，“ Brightness an
