《动态网页设计演示教学》由会员分享，可在线阅读，更多相关《动态网页设计演示教学（77页珍藏版）》请在金锄头文库上搜索。
1、,动态网页设计,3.1 Dreamweaver MX概述,Dreamweaver MX是一个专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。,采用一系列面板帮助用户完成复杂的工作，为用户提供行为、时间轴等增加网页效果的工具。 提供浏览器检查功能。 可以编辑JavaScript和XML等程序代码。 提供一整套开发流程，支持引入word和FrontPage生成的页面，可以引入Fireworks制作的图片文件和Flash制作的动画格式文件。 允许用户自己定制界面。 提供了基于ASP、JSP、PHP、ASP.NET等动态网页技术的Web应用程序开发功能。,1.Dr
2、eamweaver MX概述,要想在Windows环境中流畅的运行Dreamweaver MX，建议的系统配置为：,2.安装Dreamweaver MX,Intel PentiumIII 600MHz或更快的处理器或等效处理器 Windows2000、Windows XP或Windows .NET Server 2003 256MB的可用内存，至少275MB可用磁盘空间 IE5.0或者更高版本的浏览器 能达到1024*768像素分辨率的16位或更高分辨率的显示器,在安装过程时。会打开安装向导，逐步提示安装过程的各个步骤，根据向导的要求设置相应的项目。,3.2 Dreamweaver MX的工作
3、环境,在Windows中首次启动Dreamweaver MX时，会出现一个工作区布局设置对话框，提供选择界面风格。,1.Dreamweaver MX的工作区布局,如果以后希望改变工作风格，可以执行菜单命令“编辑首选参数”打开参数选择对话框，在对话框左侧的“分类”列表中选择“常规”类别，单击“更改工作区”按钮，打开工作区设置对话框来选择其他风格的工作区。,设计人员工作区是一个使用MDI(多文档界面)的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。,设计者工作区,编码人员工作区是同样的集成工作区，但是将面板组停靠在左侧，“文档”窗口在默认情况下显示“
4、代码”视图。建议需要使用熟悉的工作区布局的手工编码人员使用此布局。,代码编写者工作区,显示当前创建和编辑页面的窗口。,2.文档窗口,可以同时打开多个编辑页面，在层叠多窗口最大化时出现。,(1)多页标签行,代码视图：用于编写和编辑HTML、JavaScript、服务器语言代码(如ASP)以及任何其他类型代码的手工编码环境。,(2)文档栏 有3个按钮分别控制页面编辑的显示方式,在代码视图中编写HTML标签，或者在动态网页中编写服务器端脚本时，会根据当前输入的标签名或对象，自动弹出列表框提示可用的标签属性、对象属性和方法，只要简单的用鼠标点击列表中的项目，或者移动上下方向键选中相应的项目后按Ente
5、r键，就将选中项目输入到光标位置，提高了编程效率。,设计视图：用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。,在设计视图中DW显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。,拆分视图：提供在单个窗口中同时看到同一文档的代码视图和设计视图的功能。,当在设计视图窗口中插入或编辑页面元素时，在代码视图窗口中立即发生相应的改变；而在代码视图窗口手工编辑代码时，单击文档工具栏中的“刷新设计视图”按钮，则在设计视图中立即显示相应的变化。,用来显示当前的HTML源代码，并按照颜色设置来显示各种HTML语言标记；界面设计区用来显示实际输出效果。它们是主操作区，显示当
6、前页面的可视化结果。,(3)代码编辑区,显示的页面状态信息，分成3个部分。,(4)状态栏,标记选择器：选定文本或对象的标记将出现在文档窗口底部左边的标记选择器中。,单击某一标记，可在文档窗口高亮度显示它的内容。单击标记可选择文档的全部正文。,窗口大小,文件大小/下载时间,(5)文档工具栏,文档标题：用于输入文档的标题。,包含按钮和弹出式菜单，它们提供各种“文档”窗口视图、各种查看选项和一些常用操作(如在浏览器中预览)。,文件管理：上传当前文档或从远端取回文档等。,在浏览器中预览/调试：用于打开浏览器预览或调试当前文档。,刷新设计视图：当在代码视图中更改代码后，单击该按钮可刷新对应的视图。,视图
7、选项：用于为代码视图和设计视图设置选项，例如设置是否显示代码行数、网格等。,通过插入面板，可以快速的在网页中插入任何对象，如图片、表格、层、特殊字符等。,3.插入面板,常用：包含主页中最常用的一些对象，图片、表格、超链接等。,布局：包含常用的框架结构，左右分帧、上下分帧等。,表单：包含表单及所涉及的所有元素，文本框、按钮、复选框、单选框、列表框等。,文本：包含一些特殊字符，版权符号、注册商标符号等。,HTML：添加一些Script脚本等。,用来显示文档窗口中选定对象的各种属性。当单击页面中不同的对象时，自动出现的相对应的属性面板也有所不同。在属性面板中可以直接对各项属性值进行编辑和修改。,4.
8、属性面板,在属性面板对文字、图片或表格等页面元素所作的修改会立即显示在DW的文档窗口中，用户能够即使看到修改后的效果。,包括当前网页或网站中已经用到的各种资源，如图像、颜色、影片(视频)、Flash、脚本、模板和库等，设计者可以直接从中调用。,5.资源面板,在设计面板组中包括CSS样式面板、层面板。CSS样式面板为网页定义CSS样式，它提供CSS样式表功能。层面板是用来控制层对象的，包括为层命名、设置层的显示或隐藏、为层设置覆盖方式等。,6.设计面板,应用程序面板中集成了数据库面板、绑定面板、服务器行为面板和组件面板，用于快速开发Web应用程序。当前文档为动态网页时应用程序面板中的各面板才有效
9、。,7.应用程序面板,数据库面板：用于定义和管理数据库连接对象。,绑定面板：用于定义将记录集和各服务器对象变量等数据源数据绑定或插入到页面上。,服务器行为面板：对于开发Web应用程序，服务器行为面板提供了通过页面显示和操作数据库数据的命令，功能最为强大。,选择“窗口历史记录”可打开历史记录面板。它记录用户当前页中的每一个操作步骤，其中的滑块会自动指向上一步操作。如果出现误操作，可以向上拖动滑块，恢复到前面任何一步。,8.历史记录面板,在默认状态下，系统自动记录用户最近50步的操作。可以通过单击右键，选择“清除历史记录”命令，清除历史面板中的所有记录。,选择“窗口历史记录”可打开时间轴面板。该面
10、板位于属性面板的下部。利用时间轴面板可以对对象进行类似Flash、Director中的动画设计。,9.时间轴面板,选择“窗口代码检查器”可打开代码检查器面板。该面板是一个独立的窗口，其中列出当前网页文件的全部HTML源代码。设计者可以在其中查看、编辑和修改代码。也可以通过DW工具栏中的三个视图按钮打开HTML源代码编辑器，切换到代码编辑方式。,10.代码检查器面板,执行菜单命令“帮助入门和教程”时，就会启动联机帮助窗口，可以通过以下四种方式中的任一种查找信息：,11.使用联机帮助,目录：用于查看按主题组织的所有信息，单击顶级条目可查看子标题。 索引：与传统的打印索引相似，用于查找特定术语或概念
11、 搜索：用于查找位于帮助系统文本中任意位置的任意字符串。 主题：提供了一种从各个对话框、面板和检查器中打开相关帮助主题的方法。,3.3 构建Dreamweaver MX开发环境,一组位于服务器上的页，使用Web浏览器访问该站点的访问者可以对其进行浏览。,Web站点,服务器上组成Web站点的文件。,远程站点,与远程站点上的文件对应的本地磁盘上的文件。在最常见的DW工作流程中，你在本地磁盘上编辑文件，然后将它们上传到远程站点。,本地站点,本地站点的一组定义特性以及有关本地站点和远程站点对应方式的信息。,DW站点,使用DW进行网站设计和网页制作的第一步是创建一个本地站点。建立本地站点的目的是在本机磁
12、盘上创建一个与远程站点对应的本地文件夹，利用DW的管理功能来进行文件的创建、编辑和管理，最后将它们上传到远程站点。,1.创建本地站点,启动DW，执行“站点管理站点”命令，点击“新建”按钮，新建站点。 在高级选项中选择左边分类列表中的“本地信息”进行本地站点的设置。 在“站点名称”栏中输入站点的名称“MyWeb”。,在“本地根文件夹”栏中输入用于存储站点文件、模板和库项目的根文件夹“E:MyLocalSite”，也可以单击右边的文件夹图标打开选择站点MyWeb的本地根文件夹对话框来选择根文件夹。如果本地根文件夹尚不存在，可以在对话框中新建目标文件夹。 如果选中“自动刷新本地文件夹列表”复选框，则
13、每当在本地文件夹中增加文件或删除文件时，就会刷新文件面板中本地站点文件夹列表。 “默认图像文件夹”栏用来在站点中设置一个文件夹来存放图像文件。在站点根目录下建立了一个文件夹images来管理本站点的图像文件，当向页面上插入一个图像时，如果该图像文件原来不在当前站点的文件夹中，DW会自动提示将其复制到该图像文件夹里。,在“HTTP地址”文本框中，输入已完成的MyWeb站点的URL，以使DW能够验证站点中使用绝对URL的链接。 对于“启用缓存”选项，指定是否创建本地缓存以提高链接和站点管理任务的速度。如果不选择此选项，DW在创建站点前将再次询问你是否希望创建缓存。 至此，本地站点设置完毕，单击窗体
14、底部的“确定”按钮即完成了本地站点的创建。,当完成站点的创建后，就在DW的文件面板中建立了指定磁盘文件夹的映像。站点的名称出现在文件面板的“文件”下拉列表框中。如果该文件夹中已经包含文件夹和文件，这些文件夹和文件就显示在文件面板窗格站点目录下。,2. 站点文件管理,“新建”：用于在DW中创建一个新站点。,(1)管理站点,在“文件”下拉列表框中，选择“管理站点”选项，打开管理站点对话框。右边常用的命令按钮：,“编辑”：用于对窗口中选定的站点进行编辑，可以对所有项目进行重新设置，包括站点名称。 “删除”：如果窗口中选定站点不再使用，单击“删除”按钮即可将其从DW中删除。,注：删除站点只是删除DW与
15、本地文件夹之间的映像关系，即在文件面板中不再显示该站点名，但并不会 删除硬盘中相应的文件夹和其中的任何文件。,(2)管理站点文件,在MyWeb站点中创建文件夹：,在文件面板中用鼠标右键单击新建立的站点MyWeb，打开快捷菜单。 单击快捷菜单中的“新建文件夹” 命令，则在站点根目录中新建一个文件夹，默认名为“untitled”，将其重新命名为“chapter2”。 用鼠标右键单击chapter2文件夹，再单击快捷菜单中的“复制”命令，则在根目录下增加一个名为“拷贝于chapter2”的文件夹。重复执行该操作，则又增加一个名为“拷贝2于chapter2”的文件夹。,对拷贝文件夹进行重命名，chap
16、ter3、chapter4 用鼠标右键单击文件夹chapter2，在快捷菜单中执行命令“新建文件”，则在文件夹chapter2中新建一个名为“untitled.htm”的文件，将其重命名为“sample2-1.htm”双击该文件，则其成为文档窗口中的当前活动页面。 利用快捷菜单中的“剪切”、“拷贝”、“粘贴”、“删除”等 命令来对文件和文件夹进行操作，也可以像在我得电脑窗口中那样对文件和文件夹进行操作，从而灵活的进行文件管理。,注：与站点管理不同，在文件面板窗口中操作文件时如同在我的电脑窗口中管理文件一样，相应的会在物理上改变文件和文件夹，极大的方便了在DW中进行站点设计工作。,创建Web站点第一步：定义DW站点。,创建Web站点是从对其进行规划开始的：决定要创建多少页，每页显示什么内容，页面布局的外观以及页是如何相互连接起来的。,复制文件、文件夹：创建本地站点时，可以将所有现有资源(图像或其他内容)放在本地站点根文件夹的某个文件夹中。之后要向页中添加内容时，这些资源将随时可用。 使用站点定义向导定义本地文件夹：使用“站点定义”对话框创建站点定义并定义本地文件夹。可以使用两种视图
