DreamweaverMX讲义

1DreamweaverMX讲义网页的实质是什么？是图形？是文本？网网页页实实际际上是HHTTMMLL标标记记语语言言程序，网页上要显示的文本是各程序保存在一起的，而图像、声音、动画对象都是以文件的形式保存在站点文件夹内的独立文件，程序中只有相应的语句指向这些文件，由浏览器对HTML语言程序进行解释，才能找到这些网页要素并显示在屏幕上。过去创建和管理网页是由训练有素的专业人员采用HTML语言手工编写程序来实现的。而现在有多种可视化程度很高的网页制作工具，无需掌握专业的网页制作技术就能够创作出富有特色、动感十足的网页来。Dreamweaver就是众多网页编辑软件中的姣姣者。我们平时上网看到的各个网站的网页都是用Dreamweaver或其他网页制作工具编辑的，然后再加入一些动态语句。这些网页都是由Html语言编写生成，而我们在使用Dreamweaver编辑网页的同时，这个软件就已经自自动动生生成成这种语言了。网页制作的三大利器是指哪些软件?网页编辑Dreamweaver、网页动画制作Flash和网页图形编辑Fireworks。一、DreamweaverMX概述（一）Dreamweaver的特点及运行环境11、、关关于于DDrreeaammwweeaavveerrDreamweaver是Macromedia公司推出的可视化网页编辑软件和可视化网站的管理工具。无论你喜欢亲自书写HTML代码还是喜欢在可视化编辑环境中工作（用鼠标单击的方式插入图像、表格等），Dreamweaver都能让您很快上手并且为你提供有用的工具来增加您的网页设计经验。一般来说，网页可以按内容划分为“信息展示页面”和“功能实现页面”（电子信箱、网上购物），Dreamweaver的编辑和设计功能主要是为创建“信息展示页面”服务的。22、、功功能能特特点点：：Dreamweaver与Frontpage不同，Deamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。但当你习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的。Dreamweaver对于DHTML（动态网页）的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver与Flash、Fireworks并称为Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。因此，说Dreamweaver是高级网页制作的首选并不为过。（1）可视化的编辑器与HTML检视器同步演示：“代码查看”和“设计查看”切换。同时讲述网页的本质是HTML标记语言程序。（2）简便易行的对象插入功能演示：删除页面上的一个图像，再使用“对象”面板插入该图像。再插入一个电子邮件链接。（3）跨浏览器的支持功能演示：使用“编辑浏览器列表”命令（4）可制定工作环境演示：使用“编辑”菜单打开“首选参数”对话框，粗略介绍制定工作环境。（5）强大的网站管理功能演示：进入站点窗口，切换站点文件和站点地图显示模式。定义站点功能。上传网页功能。33、、运运行行环环境境：：硬件：PIII以上CPU，64M以上内存，VGA显卡。软件：Windows98以上操作系统2安装：运行系统光盘的安装向导，在向导的提示下完成。或（1）在教师机上下载安装程序。找到“dreamweaver安装文件”这一文件夹，将整个文件夹复制到自己的硬盘上。（2）安装ＤＷ。44、、建建站站前前的的准准备备工工作作（（11））了了解解建建站站的的整整个个过过程程在动手建立网站之前，让我们先来了解一下建站的整个过程：1）注册域名、租用磁盘空间：域名就是网站的网址，有国内域名和国际域名两种，国内域名由中国互联网络信息中心审批并维护；国际域名由Internic审批并维护。磁盘空间是指Web服务器的硬盘空间。WWEEBB（（WWeebb））：：(WorldWideWeb)简称万维网。是世界上最大的电子信息仓库，由众多的Web站点组成。每个Web站点都包含一些特定的资源，这些资源存放于一台或多台被称为Web服务器的计算机上。正是由于大量的Web站点提供了丰富多彩的资源，才使得用户能够通过网络快速、高效地获得他们需要的信息。（客户机/服务器）工作模式。任何WebServer都支持静态网页，其执行过程如下：客客户户端端：：用户首先在浏览器的地址栏中键入要访问的网页地址（即URL：UniformResourceLocator，统一资源定位符）并回车触发这个请求。浏览器将请求发送到指定的Web服务器上。服服务务器器端端：：Web服务器接收这些请求并根据.htm或.html的后缀名判断请求的是HTML文件。Web服务器从当前硬盘或内存中读取正确的HTML文件，然后将它送回用户浏览器。动动态态网网页页的执行过程与静静态态网网页页有所不同：用户在浏览器的地址栏中键入动态网页文件，并回车触发这个动态网页的请求。浏览器将这个动态网页的请求发送到Web服务器。Web服务器接收这些请求并根据扩展名（例如.asp）判断请求的是动态网页，Web服务器从硬盘或内存中读取正确的动态网页文件。Web服务器将这个动态网页文件从头至尾执行，并根据执行结果生成相应的HTML文件（静态网页）。HTML文件被送回浏览器。用户的浏览器解释这些HTML文件并将结果显示出来。2）规划网站、制作网页：确定网站的主题、包含的内容、整体结构并使用相关软件制作网站中包含的各个页面。3）网站上传：网站建好后，还需要将整个网站中包含的所有文件上传到Web服务器，以便其他用户能够欣赏到你的作品。我们只要将编辑好的站点上传到WEB服务器上，别人就可以通过URL地址访问这个站点了。BrowserServer请求响应图1-1B/S模型3上传方法：①服务器提供的文件管理器上传②通过CuteFtp上传4）网站推广：网站上传到Web服务器后，还需要推广你的网站，使更多的人了解你的网站，使用你所提供的网上资源。（（22））建建立立网网站站要要明明确确的的问问题题在建立网站之前，我们还需要明明确确如下的一些问问题题：：11））建建立立网网站站的的目目的的：：我们需要花费一定的时间来思考这个问题，明确网站建立的目的，确定网站所面向的对象（即你希望什么样的人来浏览你的网站），然后我们就能够确定该网站所使用的风格。22））网网站站结结构构的的总总体体设设计计：：确定了网站的风格之后，我们还需要明确该网站中需要包含哪些内容，网站的整体结构，同时将网站内容分类、确定各页的主题、各页包含的内容，以及各页之间的层次结构和逻辑关系。33））网网页页的的整整体体规规划划：：确定每幅网页的布局，包括每幅网页中图片和文字的排列、它们之间的相互关系、在页面中各部分的颜色如何选取，如果是框架页面，还要设计页面框架的分布，页面中在什么位置放置链接点，页面中包含哪些信息内容等等。44））准准备备素素材材：：明确了建站的目的，确定了网站的总体结构以及各个页面的布局之后，我们还需要为网站准备所需要的素材，如文字、图片、背景音乐、声音、动画等等。需要明确的几个基基本本概概念念：：1)、网站、网页与主页网网站站：：是用于存储提供给用户浏览的网页文件。它也是一种文档的磁盘组织形式，由文档和若干文件夹组成，文档经过组织分类分别放在不同的文件夹中。网网页页：：即HTML文件，是纯文本格式的，用任何文本编辑器都可以打开编辑，而且它也是一种可以在网上传输，并被浏览器认识和翻译成页面显示出来的文件。多个相互之间具有一定联系的网页就构成了一个网站。主主页页：：网站的第一页，即是一个网站的封面，也是该网站的目录。2)、本地计算机和Internet服务器本本地地计计算算机机：：浏览网页的客户所用的计算机称为本地机，本地计算机与服务器之间通过各种线路（光缆、网线、电话线）和各种中间环节进行连接，实现相互通信。IInntteerrnneett服服务务器器：：我们浏览的网页都是放在Internet服务器上的。Internet服务器就是提供Internet服务（如、FTP、e-mail等）的计算机，当用户浏览网页时，实际上是由自己的计算机向Internet服务器发出一个请求，对方的计算机在收到请求后，将所需内容发送给发出请求的计算机。对于浏览服务来说，Internet服务器主要用于存储所浏览的站点以及网站资源。IInntteerrnneett服服务务程程序序：：有些情况下（例如站点中包含ASP程序），仅在本地机上是无法对站点进行完整测试的。此时需要依赖Internet服务程序。只有在本地机上安装了Internet服务程序，才能将本地机建成一台真正的Internet服务器。(例如：在本地机上安装PWS或IIS，即可将本地机建成一个Internet服务器)。3)、本地站点和远程站点本本地地站站点点：：存储在本地计算机上的站点是本地站点远远程程站站点点：：Internet服务器上的相关文档和资源。将本地站点上传到Web服务器上，本地站点就成了远程站点；将远程站点下载到本地计算机上，就成了本地站点。4)、资源的上传和下载4资资源源的的下下载载：：将资源从Internet服务器传向本地计算机；资资源源的的上上传传：：将资源从本地计算机传向Internet服务器。例如：当用户浏览网站，打开一个新的页面时，浏览器会从Internet服务器上下载相应的网页到本地计算机；当用户发送电子邮件或提交一个购书的表单时，浏览器会将用户的信息上传到Internet服务器上。55、、制制作作网网页页的的一一般般步步骤骤创建网站（先建目录，在目录下建站点）→建立主页（设计各多媒体元素的位置，安排导航条）→建立子页→测试→发布→维护（二）Dreamweaver的启动和工作界面11、、启启动动：：单击任务栏“开始”按钮，选择“程序”选项，单击“MacromediaDreamweaverMX”选项就可以了。演示：建立站点的操作过程。建立一个站点和一个网页，并进入网页编辑状态。22、、工工作作界界面面：：选择DreamweaverMX工作区后，将看到下面的画面：Dreamweaver的主编辑窗口是由以下部分组成：标题栏、菜单栏、工具栏、状态栏、编辑区。这里是一些最常用到的组件：见下图（（11））标标题题栏栏和和菜菜单单栏栏★标题栏：标题条显示页面标题，并在括号中显示文件的路径和文件名。如果做了更改但仍未保存，则在文件名后显示一个星号。5观察：对网页进行编辑后，标题栏有何变化？观察：使用“文件”菜单中的“保存”命令保存文件，标题栏有何变化？归纳：如果对当前网页进行了编辑但未存盘，则在文件名右侧出现“*”号标记，保存后“*”号消失。★为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,实例：演示使用“查看”菜单中的标尺和网格命令进行工作环境的设置。（（22））工工具具栏栏演示：输入文字，插入图像，使用工具按钮切换视图、预览。“工具条”的显示与隐藏。★“文本”工具栏“查看”→“工具栏”→“文本”详解如下图：在上图中，点击带有向下小箭头的工具，会弹出更多选择。若要显示或隐藏工具条，选择“查看”＞“工具栏”＞“文档”。若要在“网页文档”窗口中只显示代码，点击[显示代码视图]按钮若要显示包括[代码]和[设计]的视图，点击[显示代码和设计视图]按钮。若要只显示[设计]视图，点击[显示设计视图]按钮。若要为文档输入一个标题，使用[标题]域。如果文档已经有了标题，它将出现在该域中。若要显示[文件状态]弹出式菜单，点击[文件状态]菜单按钮。若要在浏览器中预览或者调试文档，点击[在浏览器中预览/调试]按钮，在弹出的菜单中选择一种浏览器。若要添加或改变菜单中列出的浏览器，选择[编辑浏览器列表]。若要刷新的[设计]视图，请点击[刷新设计视图]按钮。若要访问[参考]面板，点击[参考]按钮。[参考]面板包括关于HTML，CSS和JavaScr