主章节教师张丹.ppt

《主章节教师张丹.ppt》由会员分享，可在线阅读，更多相关《主章节教师张丹.ppt（77页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹主章节教师张丹 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹3.1 Dreamweaver MX概述 Dreamweaver MX是一个专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。n采用一系列面板帮助用户完成复杂的工作，为用户提供行为、时间轴等增加

2、网页采用一系列面板帮助用户完成复杂的工作，为用户提供行为、时间轴等增加网页效果的工具。效果的工具。n提供浏览器检查功能。提供浏览器检查功能。n可以编辑可以编辑JavaScriptJavaScript和和XMLXML等程序代码。等程序代码。n提供一整套开发流程，支持引入提供一整套开发流程，支持引入wordword和和FrontPageFrontPage生成的页面，可以引入生成的页面，可以引入FireworksFireworks制作的图片文件和制作的图片文件和FlashFlash制作的动画格式文件。制作的动画格式文件。n允许用户自己定制界面。允许用户自己定制界面。n提供了基于提供了基于ASPASP

3、、JSPJSP、PHPPHP、ASP.NETASP.NET等动态网页技术的等动态网页技术的WebWeb应用程序开发功能。应用程序开发功能。1.Dreamweaver MX概述第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 要想在Windows环境中流畅的运行Dreamweaver MX，建议的系统配置为：2.安装Dreamweaver MXnIntel PentiumIII 600MHz或更快的处理器或等效处理器nWindows2000、Windows XP或Windows.NET Server 2003n256MB的可用内存，至少275MB可用磁盘空

4、间nIE5.0或者更高版本的浏览器n能达到1024*768像素分辨率的16位或更高分辨率的显示器 在安装过程时。会打开安装向导，逐步提示安装过程在安装过程时。会打开安装向导，逐步提示安装过程的各个步骤，根据向导的要求设置相应的项目。的各个步骤，根据向导的要求设置相应的项目。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹3.2 Dreamweaver MX的工作环境 在Windows中首次启动Dreamweaver MX时，会出现一个工作区布局设置对话框，提供选择界面风格。1.Dreamweaver MX的工作区布局 如果以后希望改变工作风格，可以执行菜

5、单命令“编辑首选参数”打开参数选择对话框，在对话框左侧的“分类”列表中选择“常规”类别，单击“更改工作区”按钮，打开工作区设置对话框来选择其他风格的工作区。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹图3-1 Dreamweaver MX工作区风格的设定第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 设计人员工作区是一个使用MDI(多文档界面)的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。设计者工作区 编码人员工作区是同样的集成工作区，但是将面板组停靠在左侧，

6、“文档”窗口在默认情况下显示“代码”视图。建议需要使用熟悉的工作区布局的手工编码人员使用此布局。代码编写者工作区第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 显示当前创建和编辑页面的窗口。2.文档窗口 可以同时打开多个编辑页面，在层叠多窗口最大化时出现。(1)多页标签行代码视图：用于编写和编辑HTML、JavaScript、服务器语言代码(如ASP)以及任何其他类型代码的手工编码环境。(2)文档栏 有3个按钮分别控制页面编辑的显示方式 在代码视图中编写HTML标签

7、，或者在动态网页中编写服务器端脚本时，会根据当前输入的标签名或对象，自动弹出列表框提示可用的标签属性、对象属性和方法，只要简单的用鼠标点击列表中的项目，或者移动上下方向键选中相应的项目后按Enter键，就将选中项目输入到光标位置，提高了编程效率。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹设计视图：用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在设计视图中DW显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。拆分视图：提供在单个窗口中同时看到同一文档的代码视图和设计视图的功能。当在设计视图窗口中插入或编辑页面元

8、素时，在代码视图窗口中立即发生相应的改变；而在代码视图窗口手工编辑代码时，单击文档工具栏中的“刷新设计视图”按钮，则在设计视图中立即显示相应的变化。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 用来显示当前的HTML源代码，并按照颜色设置来显示各种HTML语言标记；界面设计区用来显示实际输出效果。它们是主操作区，显示当前页面的可视化结果。(3)代码编辑区 显示的页面状态信息，分成3个部分。(4)状态栏标记选择器：选定文本或对象的标记将出现在文档窗口底部左边的标记选择器中。单击某一标记，可在文档窗口高亮度显示它的内容。单击标记可选择文档的全部正文。窗口

9、大小文件大小/下载时间第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹(5)文档工具栏文档标题：用于输入文档的标题。包含按钮和弹出式菜单，它们提供各种“文档”窗口视图、各种查看选项和一些常用操作(如在浏览器中预览)。文件管理：上传当前文档或从远端取回文档等。在浏览器中预览/调试：用于打开浏览器预览或调试当前文档。刷新设计视图：当在代码视图中更改代码后，单击该按钮可刷新对应的视图。视图选项：用于为代码视图和设计视图设置选项，例如设置是否显示代码行数、网格等。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 通过插入面

10、板，可以快速的在网页中插入任何对象，如图片、表格、层、特殊字符等。3.插入面板常用：包含主页中最常用的一些对象，图片、表格、超链接等。布局：包含常用的框架结构，左右分帧、上下分帧等。表单：包含表单及所涉及的所有元素，文本框、按钮、复选框、单选框、列表框等。文本：包含一些特殊字符，版权符号、注册商标符号等。HTML：添加一些Script脚本等。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 用来显示文档窗口中选定对象的各种属性。当单击页面中不同的对象时，自动出现的相对应的属性面板也有所不同。在属性面板中可以直接对各项属性值进行编辑和修改。4.属性面板 在

11、属性面板对文字、图片或表格等页面元素所作的修改会立即显示在DW的文档窗口中，用户能够即使看到修改后的效果。包括当前网页或网站中已经用到的各种资源，如图像、颜色、影片(视频)、Flash、脚本、模板和库等，设计者可以直接从中调用。5.资源面板第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 在设计面板组中包括CSS样式面板、层面板。CSS样式面板为网页定义CSS样式，它提供CSS样式表功能。层面板是用来控制层对象的，包括为层命名、设置层的显示或隐藏、为层设置覆盖方式等。6.设计面板 应用程序面板中集成了数据库面板、绑定面板、服务器行为面板和组件面板，用于快

12、速开发Web应用程序。当前文档为动态网页时应用程序面板中的各面板才有效。7.应用程序面板第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹数据库面板：用于定义和管理数据库连接对象。绑定面板：用于定义将记录集和各服务器对象变量等数据源数据绑定或插入到页面上。服务器行为面板：对于开发Web应用程序，服务器行为面板提供了通过页面显示和操作数据库数据的命令，功能最为强大。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 选择“窗口历史记录”可打开历史记录面板。它记录用户当前页中的每一个操作步骤，其中的滑块会自动指向上一步操作

13、。如果出现误操作，可以向上拖动滑块，恢复到前面任何一步。8.历史记录面板 在默认状态下，系统自动记录用户最近50步的操作。可以通过单击右键，选择“清除历史记录”命令，清除历史面板中的所有记录。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 选择“窗口历史记录”可打开时间轴面板。该面板位于属性面板的下部。利用时间轴面板可以对对象进行类似Flash、Director中的动画设计。9.时间轴面板 选择“窗口代码检查器”可打开代码检查器面板。该面板是一个独立的窗口，其中列出当前网页文件的全部HTML源代码。设计者可以在其中查看、编辑和修改代码。也可以通过DW工

14、具栏中的三个视图按钮打开HTML源代码编辑器，切换到代码编辑方式。10.代码检查器面板第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 执行菜单命令“帮助入门和教程”时，就会启动联机帮助窗口，可以通过以下四种方式中的任一种查找信息：11.使用联机帮助n目录：用于查看按主题组织的所有信息，单击顶级条目可查看子标题。n索引：与传统的打印索引相似，用于查找特定术语或概念n搜索：用于查找位于帮助系统文本中任意位置的任意字符串。n主题：提供了一种从各个对话框、面板和检查器中打开相关帮助主题的方法。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计

15、主讲：张丹主讲：张丹3.3 构建Dreamweaver MX开发环境 一组位于服务器上的页，使用Web浏览器访问该站点的访问者可以对其进行浏览。Web站点 服务器上组成Web站点的文件。远程站点 与远程站点上的文件对应的本地磁盘上的文件。在最常见的DW工作流程中，你在本地磁盘上编辑文件，然后将它们上传到远程站点。本地站点 本地站点的一组定义特性以及有关本地站点和远程站点对应方式的信息。DW站点第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 使用DW进行网站设计和网页制作的第一步是创建一个本地站点。建立本地站点的目的是在本机磁盘上创建一个与远程站点对应的

16、本地文件夹，利用DW的管理功能来进行文件的创建、编辑和管理，最后将它们上传到远程站点。1.创建本地站点n启动DW，执行“站点管理站点”命令，点击“新建”按钮，新建站点。n在高级选项中选择左边分类列表中的“本地信息”进行本地站点的设置。n在“站点名称”栏中输入站点的名称“MyWeb”。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n在“本地根文件夹”栏中输入用于存储站点文件、模板和库项目的根文件夹“E:MyLocalSite”，也可以单击右边的文件夹图标打开选择站点MyWeb的本地根文件夹对话框来选择根文件夹。如果本地根文件夹尚不存在，可以在对话框中新建

17、目标文件夹。n如果选中“自动刷新本地文件夹列表”复选框，则每当在本地文件夹中增加文件或删除文件时，就会刷新文件面板中本地站点文件夹列表。n“默认图像文件夹”栏用来在站点中设置一个文件夹来存放图像文件。在站点根目录下建立了一个文件夹images来管理本站点的图像文件，当向页面上插入一个图像时，如果该图像文件原来不在当前站点的文件夹中，DW会自动提示将其复制到该图像文件夹里。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n在“HTTP地址”文本框中，输入已完成的MyWeb站点的URL，以使DW能够验证站点中使用绝对URL的链接。n对于“启用缓存”选项，指定

18、是否创建本地缓存以提高链接和站点管理任务的速度。如果不选择此选项，DW在创建站点前将再次询问你是否希望创建缓存。至此，本地站点设置完毕，单击窗体底部的至此，本地站点设置完毕，单击窗体底部的“确定确定”按钮按钮即完成了本地站点的创建。即完成了本地站点的创建。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹 当完成站点的创建后，就在DW的文件面板中建立了指定磁盘文件夹的映像。站点的名称出现在文件面板的“文件”下拉列表框中。如果该文件夹中已经包含文件夹和文件，这些文件夹和文件就显示在文件面板窗格站点目录下。2.站点文件管理n“新建”：用于在DW中创建一个新站点

19、。(1)管理站点 在在“文件文件”下拉列表框中，选择下拉列表框中，选择“管理站点管理站点”选项，选项，打开管理站点对话框。右边常用的命令按钮：打开管理站点对话框。右边常用的命令按钮：第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n“编辑”：用于对窗口中选定的站点进行编辑，可以对所有项目进行重新设置，包括站点名称。n“删除”：如果窗口中选定站点不再使用，单击“删除”按钮即可将其从DW中删除。注：删除站点只是删除DW与本地文件夹之间的映像关系，即在文件面板中不再显示该站点名，但并不会 删除硬盘中相应的文件夹和其中的任何文件。第三讲 Dreamweaver

20、MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹(2)管理站点文件 在在MyWebMyWeb站点中创建文件夹：站点中创建文件夹：n在文件面板中用鼠标右键单击新建立的站点MyWeb，打开快捷菜单。n单击快捷菜单中的“新建文件夹”命令，则在站点根目录中新建一个文件夹，默认名为“untitled”，将其重新命名为“chapter2”。n用鼠标右键单击chapter2文件夹，再单击快捷菜单中的“复制”命令，则在根目录下增加一个名为“拷贝于chapter2”的文件夹。重复执行该操作，则又增加一个名为“拷贝2于chapter2”的文件夹。第三讲 Dreamweaver MX开发环境动态网页设计动态

21、网页设计主讲：张丹主讲：张丹n对拷贝文件夹进行重命名，chapter3、chapter4n用鼠标右键单击文件夹chapter2，在快捷菜单中执行命令“新建文件”，则在文件夹chapter2中新建一个名为“untitled.htm”的文件，将其重命名为“sample2-1.htm”双击该文件，则其成为文档窗口中的当前活动页面。n利用快捷菜单中的“剪切”、“拷贝”、“粘贴”、“删除”等 命令来对文件和文件夹进行操作，也可以像在我得电脑窗口中那样对文件和文件夹进行操作，从而灵活的进行文件管理。注：与站点管理不同，在文件面板窗口中操作文件时如同在我的电注：与站点管理不同，在文件面板窗口中操作文件时如同

22、在我的电脑窗口中管理文件一样，相应的会在物理上改变文件和文件夹，极大的脑窗口中管理文件一样，相应的会在物理上改变文件和文件夹，极大的方便了在方便了在DW中进行站点设计工作。中进行站点设计工作。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹创建创建WebWeb站点第一步：定义站点第一步：定义DWDW站点。站点。创建创建Web站点是从对其进行规划开始的：决定要创建多少页，每页站点是从对其进行规划开始的：决定要创建多少页，每页显示什么内容，页面布局的外观以及页是如何相互连接起来的。显示什么内容，页面布局的外观以及页是如何相互连接起来的。n复制文件、文件夹：创

23、建本地站点时，可以将所有现有资源创建本地站点时，可以将所有现有资源(图像或其他内容图像或其他内容)放在本地站点根文件夹的某个文件夹中。放在本地站点根文件夹的某个文件夹中。之后要向页中添加内容时，这些资源将随时可用。之后要向页中添加内容时，这些资源将随时可用。n使用站点定义向导定义本地文件夹：使用使用“站点定义站点定义”对话对话框创建站点定义并定义本地文件夹。可以使用两种视图中的框创建站点定义并定义本地文件夹。可以使用两种视图中的任意一种任意一种“基本基本”和和“高级高级”。1.选择“站点管理站点”，单击“新建”，从弹出式菜单中选择“站点”，出现“站点定义”对话框。第三讲 Dreamweaver

24、 MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹2.选择“基本”选项卡，输入一个站点的名称MySite。3.单击“下一步”，选择“否”选项指示目前站点是一个静态站点，没有动态页。4.单击“下一步”，询问如何使用你的文件。选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器(推荐)”的选项。5.单击文本框旁边的文件夹图标。该文本框使你可以在本地磁盘上指定文件夹，让DW存储站点文件的本地版本。6.单击“下一步”从弹出式菜单中选择“无”，稍后可以设置关于远程站点的信息，目前本地站点信息对于开市创建网页已足够。7.单击“完成”完成设置。随即出现“管理站点”对话框，显示你的新站点。“文件

25、文件”面板显示当前站点的新本地根文件夹，文件列表面板显示当前站点的新本地根文件夹，文件列表充当文件管理器，允许你复制、粘贴、移动和打开文件。充当文件管理器，允许你复制、粘贴、移动和打开文件。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n定义远程文件夹：创建本地站点后，下一步通过将文件上传到创建本地站点后，下一步通过将文件上传到远程远程WebWeb服务器来发布该站点。在继续之前你须具有对远程服务器来发布该站点。在继续之前你须具有对远程WebWeb服务器的访问权。服务器的访问权。你也可以在本地计算机上运行一个你也可以在本地计算机上运行一个WebWeb服务

26、器，如服务器，如IISIIS。你的远程根文件夹为空时最适合以下过程的进行。如远程你的远程根文件夹为空时最适合以下过程的进行。如远程站点已经包含文件，则在远程站点站点已经包含文件，则在远程站点(在服务器上在服务器上)创建一个空文创建一个空文件夹，然后将该空文件夹用作你的远程根文件夹。件夹，然后将该空文件夹用作你的远程根文件夹。1.在你的远程站点(位于服务器)中，在服务器的Web根文件夹中创建一个空文件夹。将这个新空文件夹的名称指定为你的本地根文件夹的名称。2.在DW中选择“站点管理站点”，然后单击“编辑”。3.单击对话框顶部的“基本”选项卡。第三讲 Dreamweaver MX开发环境动态网页设

27、计动态网页设计主讲：张丹主讲：张丹4.当设置本地站点时，你已填写了“基本”选项卡中的前几个步骤，单击几次“下一步”直到向导顶部高亮显示“正在共享文件”步骤。5.在标有“你如何连接到远程服务器？”的弹出式菜单中，选择一种连接到远程站点的方法。连接到连接到InternetInternet上的服务器的常见方法是上的服务器的常见方法是FTPFTP和和SFTPSFTP；连接你的；连接你的IntranetIntranet上的服务器的常见方法，或者如果你使用本地计算机作为上的服务器的常见方法，或者如果你使用本地计算机作为WebWeb服务器，连接到本地计算机的常见方法是服务器，连接到本地计算机的常见方法是“本

28、地本地/网络网络”。6.如果选择“FTP”，输入以下选项：a.输入服务器的主机名(例如ftp:/)b.在询问哪个文件夹包含你的文件的文本框中，输入服务器上从FTP根文件夹到远程站点的根文件夹的路径。在许多情况下此文本框留空。c.在相应的文本框中输入你的用户名和密码。d.如果你的服务器支持SFTP，选择“使用安全FTP(SFTP)”选项。e.单击“测试连接”。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹7.如果选择“本地/网络”，请单击文本框旁边的文件夹图标，然后浏览到远程站点的根文件夹。选中“自动刷新远端文件列表”可以提高速度。8.在输入相应的信息后

29、，单击“下一步”。9.不要为“MySite”站点启用文件存回和取出。10.单击“下一步”，单击“完成”以完成远程站点的设置。n上传本地文件：在设置了本地文件夹和远程文件夹之后，可在设置了本地文件夹和远程文件夹之后，可以将文件从本地文件夹上传到以将文件从本地文件夹上传到WebWeb服务器。要使公众可以访问服务器。要使公众可以访问你的网页，必须将它们上传，即使你的网页，必须将它们上传，即使WebWeb服务器运行在你的本地服务器运行在你的本地计算机上也必须上传。计算机上也必须上传。1.在文件面板中选择站点的本地根文件夹。2.单击文件面板工具栏的“上传文件”蓝色箭头图标。DW将所有文件复制到前面定义的

30、远程文件夹。3.在浏览器中打开你的远程站点以确保正确上传了所有内容。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹3.4 Dreamweaver MX设计基础1.页面尺寸页面尺寸和显示器大小及分辨率有关。网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。显示器的分辨率页面的显示尺寸800 x600 780 x428640 x480620X3111024X7681007x600第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n浏览器的工具栏也是影响页面尺寸的原

31、因。n在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好在适当位置加上页面内部连接，方便访问者浏览。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹关于第一屏所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800*600的屏幕显示模式下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px，通常我们会以这个大小为标准 第三讲 Dreamwea

32、ver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹2.整体造型 造型 造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹对于不同的形状，它们所代表的意义是不同的。n矩形代表着正式，规则矩形代表着正式，规则，很多ICP和政府网页都是以矩形为整体造型；n圆形带表着柔和，团结，温暖，安全等圆形带表着柔和，团结，温暖，安全

33、等，许多时尚站点喜欢以圆形为页面整体造型；n三角形代表着力量，权威，牢固，侵略等三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；n菱形代表着平衡，协调，公平菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。n目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页

34、设计主讲：张丹主讲：张丹3.页头n页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。n页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。n页头常放置站点名字的图片和公司标志以及旗帜广告页头常放置站点名字的图片和公司标志以及旗帜广告。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹4.文本 文本在页面中出现都是以行或者块以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。5.页脚 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者

35、公司信息的地方。你能看到，许多制作信息都是放置在页脚的。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹6.图片 图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。7.多媒体 除了文本和图片，还有声音、动画、视频等等其它媒体。随着动态网页的兴起，它们在网页布局上也变得更加重要。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹8.网页的色彩n网页的色彩是树立网站形象的关键因素之一。网页的色彩是树立网站形象的关键因素之一。在色彩搭配中，黑白是最基本和最简单的搭配；彩色在色彩搭配

36、中，黑白是最基本和最简单的搭配；彩色的搭配是颜色搭配的重点和难点。的搭配是颜色搭配的重点和难点。在搭配色彩时，要注意色彩的鲜明性、独特性、合适在搭配色彩时，要注意色彩的鲜明性、独特性、合适性和联想性。性和联想性。n在网页中，主要内容文字用非彩色（黑色），边框、背景在网页中，主要内容文字用非彩色（黑色），边框、背景和图像用彩色。这样使得页面整体不单调，看主要内容时和图像用彩色。这样使得页面整体不单调，看主要内容时也不会感到眼花。也不会感到眼花。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹9.网页的文字n在浏览器中，默认标准字体是中文宋体和英文Times

37、 New Roman字体。n在网页中设置字体时可以参照以下基本原则：v不使用超过三种以上的字体；v不用太大的字体；v不使用闪烁不停的文字；v标题的字体比正文要稍大，颜色也应有所区别。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹10.网页的表格应用n在网页中通常使用表格布置网页的版面。通常将整个页面套在一个表格中，以便对页面的各个部分进行合理的划分。v注意：单一表格的结构要尽量整齐，同时表格的嵌套层次要尽可能少。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹布局的方式1.纸上布局法许多初学者直接在网页设计器里边

38、设计布局边加内容，这样很难设计出优秀的网页来。应该先在纸上画出页面的布局草图来。准备若干张白纸和一只铅笔，然后 第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹2.软件布局法 如果你不喜欢用纸来画出你的布局示意图，那么你还可以利用图像处理软件利用图像处理软件来完成这些工作。不像用纸来设计布局，利用图像处理软件可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局效果。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹网页布局类型 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下

39、框架型、综合框架型、封面型、Flash型、变化型。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹1、“国”字型也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张

40、丹2、拐角型这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹3、标题正文型 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张

41、丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹4、左右框架型 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹5、上下框架型 与上面类似，区别仅仅在于是一种上下分为两页的框架。第三讲 Dreamweaver MX开发环境动态网页

42、设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹6、综合框架型 上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹7、封面型这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种

43、类型大部分出现在企业网站和个人主页。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹8、Flash型 其实这与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash动画。与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹9、变化型 即上面几种类型的结合与变化，比如本站在

44、视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹有关导航栏的位置 导航栏能让我们在浏览时容易到达不同的页面，是网页元素中非常重要的部分，所以导航栏一定要清晰、醒目。一般来讲，导航栏要在“第一屏”能显示出来。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹网页布局n使用布局视图n使用框架第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n能否对各种文本控制手段运用自如，可以说是决定着网能否对各种文本控制

45、手段运用自如，可以说是决定着网页设计是否美观、是否富有创意及能否提高工作效率的页设计是否美观、是否富有创意及能否提高工作效率的关键。关键。n输入文字 与Word操作极其相似。文本编辑第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n编辑文字（1）换行 自动换行：自动换行：若某一行的长度超过了窗口的显示范围，文字将自动换到下一行。利利用用“EnterEnter”键键换换行行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。用用“Shift+EnterShift+Enter”键键换换行行：如果想要将文字手动换行，中间又不能出现空白行，可以按“S

46、hift+Enter”键。利用利用“插入插入”面板的特殊字符换行：面板的特殊字符换行：“插入”菜单“HTML”“特殊字符”第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹（2）加入注释文字v“插入”“常用”选项卡中“插入注释文字”在“注释文本框中输入注释的内容（3）查找和替换文本 “编辑”“查找和替换”n设置文本属性 在Dreamweaver 中设置文本格式可以通过属性面板，类似Word中对文本的属性设置。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹设置超链接n文字链接n图像链接n电子邮件链接第三讲 Dream

47、weaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹编辑图像n在网页中插入图像插入图像方法：1.菜单：插入图像2.插入面板：常用图像按钮图像格式n1、GIF：图形交换格式n2、JPEG：联合图像专家组n3、PNG：便携网络图像第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n创建图像地图图像地图是指在一幅图像上创建多个链接区域（又称为热区），通过单击不同的链接区域链接到不同的URL地址。制作图像地图的操作步骤：1、在网页中插入图像2、选中图像3、利用图像属性面板左下角的按钮创建热区4、选择热区在属性面板中设置超级链接。第三讲 Dream

48、weaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹使用表格n插入表格插入步骤：1、切换到“标准视图”2、光标定位到需插入表格的位置3、菜单“插入”“表格”或插入面板“常用”“插入表格”按钮第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n改变表格的外观和结构1.插入行或列操作步骤：光标定位到某一单元格内执行菜单“修改”“表格”“插入行”或“插入列”，可以行的上方增加一行或在列的左侧增加一列。2.删除行或列的步骤：光标定位到某一单元格内执行菜单“修改”“表格”“删除行”或“删除列”。第三讲 Dreamweaver MX开发环境动态网页设

49、计动态网页设计主讲：张丹主讲：张丹3.拆分单元格的步骤：选择需拆分的单元格 单击属性面板上的拆分单元格按钮。4.合并单元格的步骤：选择需合并的单元格，单元格必须是连续的且组成矩形形状 单击属性面板上的合并单元格按钮。第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹n改变单元格的属性n使用预置表格 Dreamweaver中预置了多种表格设计，使用这些预先设计好的表格样式格式化表格，可以大大提高表格的设计效率。使用预置表格的方法如下：1、创建并选中表格2、执行菜单“命令”“格式化表格”第三讲 Dreamweaver MX开发环境动态网页设计动态网页设计主讲：张丹主讲：张丹设置网页属性设置网页的属性包括网页标题、背景图像、背景颜色、链接文字颜色等内容。设置方法：可在文档窗口单击鼠标右键选择“页面属性”或在属性检查器中单击“页面属性”按钮。