网页设计与制作讲义.doc

1、苏州工艺美术职业技术学院授 课 讲 义 课程名称 网页设计 授课班级 12 平面 a 任课教师 徐凯 系 、 部 视觉传达 讲 义 标 题网页制作部分教学目的：互联网是继传统媒体出现后又一个新的媒体，网页作为互联网技术表现形式。通过对特定技术的掌握，使学生学会如何在互联网上表现自己的设计思想。教学着眼于技术层面上的学习，为今后的网页设计作一个技术铺垫。第一单元：知识目标在 Internet 和 Web 迅猛发展的今天，数字设计技术对 21 世纪的平面设计家提出了许多挑战，在因特网的世界里，地域的概念消失了，人与人之间的距离，由天涯变成近在咫尺，由于因特网商业化的最大化引用，使得整个世界都在因特

2、网上，它深刻的影响了人们原有的价值观念、思维方式、知识结构等，它是继印刷、广播、电视等传统媒介后的第四媒体，面对新时代的到来，人们无不感受到社会经济和文化所经历的快速而深刻的变化。网络的世界已经无处不在，对于传统的平面设计师来说，这是一个不得不面临的一个新的、前景无限的设计领域。网页不但拥有传统媒体的优点，并且使得传播变得更加直接、省力、有效，然而在网页设计领域中，没有网页技术这个技术的平台，根本就无从谈起网页设计，设计根据需要不断的向技术提出新的要求，促进技术的进步，而真正有魅力的设计是设计者的思想、素养，对设计的理解和表现技术的综合体现。因此，要以掌握网页设计与多媒体技术为前提，更有效的发

3、挥网页设计的表现性和可操作性，完成新概念的构想。传统媒体平面设计与网页的平面设计网络已经越来越多的进入了平面设计领域，我们没有任何理由忽视平面设计的存在。网络对平面设计行业造成的威胁和机遇是并存的，这种趋势越来越显著，网络意味着机遇，对于传统媒体的平面设计而言，网络具有丰富的信息资源、图文的互、高速高效的特点。网络产生的这些变化不仅逐步加剧，并且掀起对技术的热潮，不仅影响着设计的创造过程，同时还影响到作品及交流的形式过程。所以设计者要具备设计交叉应用的综合能力，不断适应时代的变化。印刷品和观者的交流是拿在手中的翻阅，不仅有视觉设计，还有触觉设计等，网页设计则在具备视觉效果外还要兼顾网页的交互性

4、与整体性、音效性、把握整体的节奏感、整体风格等多重因素。网页本身具有比传统媒体（印刷、报纸、杂志、电视等）更大的传播覆盖面，网络所有的信息都是面向全世界，这是其他任何媒体所无法与之相提并论，同时，网页的时效性强，可以迅速了解最新的信息，网页的信息发布比其他媒体大大节省成本、时间，更新和修正也更为快捷和方便，不受时间和地域的限制。在这个新的媒体中技术是先导，但最终目的交流则是由设计来实现的，所以设计的重要性会由于技术的掌握而进一步强化。新概念的品面设计每屏要求结构合理、制作精美、创意独特、风格鲜明的网页，传递最丰富的信息，同时还能给人以美的艺术享受，树立公司企业、服务机构等的良好社会形象，获取最

5、大的经济效益。特点：网络传播具有声、像、图、文、视觉、听觉、互动，通过视觉传达全球化的交互信息。它不同于传统的平面设计，它是集艺术创意与多媒体技术于一体的过程。设计人员不仅要具有良好的设计素养、文化底蕴，而且应随时注意网页设计技术的发展，使网页在风格上新颖、独特，在内容上丰富、详实，井然有序。网页设计风格总体上分为两大类： 内容型：结构严谨、内容规范，便于大信息量的传递，多为公司企业、服务机构等网络应用； 风格型：网页构思新颖别致，色彩丰富，平面感觉强，多为个人网站，相关行业网站所用；优秀网页鉴赏（提高学习兴趣、提高鉴赏能力、最直接的感性认识，分解在各单元欣赏）VERIO 公司网站，该网站设计

6、上平中求奇。在整体结构严谨的基础上 ，有一些趣味的处理，例如图像和导航的设计，可以让你在浏览网页中兴趣盎然。LIBRARY OF CONGRESS 网站。该网站就好像巨大的图书馆，具体介绍了 LIBRARY OF CONGRESS 的地理环境以及各类资料。浏览网站便可查阅各类所需信息。网站设计简洁明了，体现了庄重的风格。APPLE 网站，该网站具体介绍了 APPLE 品牌的产品与服务，网页设计精美，尤其是导航的设计，好似 APPLE 的电脑按键，与 APPLE 品牌切实有效的结合，极具视觉上的吸引力。AGFA 网站，该网站具体介绍了 AGFA 品牌的数码相机、扫描仪、胶卷、软件产品。网页设计严

7、谨，图文结合，结构紧凑，统一之中有变化，信息量较大。图像虽然多，但是经过压缩后，并不影响网页的浏览速度。LACOUNTYARTS 是洛杉矶乡村艺术讯息网站，该网站以鲜明的色块展现浓郁的艺术信息，导航也结合在色块中，非常的简洁明快，给人一种新鲜的感受，留下深刻的印象。KODAK 公司的网站是以黑色底衬托公司的标准色及其图片资料，和 KODAK 形象很吻合，网站设计机构严谨，内容规范，有大量的信息传递。JOOZE 网站是介绍 JOOZE 创意设计公司的网站。网站为客户提供创意与设计，并介绍了公司的组成与作品。FOCUS 2 是一个设计工作室。网站在设计上展示了自己独特的风格，以新颖的手法介绍了公司

8、的组成成员、公司的作品等，突破了语言的障碍，使图形设计成为一种无国籍障碍的视觉传达，体现了数码的时代感。DISAPPEAR 网站以单纯的形式展现网站统一性，网站没有使用公司介绍之类的繁复文字，而是使用图形化的处理，以求网页浏览中信息传递的快捷。EPSON 公司的网站，网站设计的结构严谨，内容规范，信息量传递上非常的详细，图文结合，浏览轻松。CW 公司 ，美国著名的 CW 公司网站，网站基本上应用了单纯的蓝色系列，明晰体现了企业的形象。BIANCA.ORG 网站是以手绘的图形，提供您所需要的目标，寻找自己感兴趣的内容。因为图形本身就是一种无国籍的语言。PLUS 网站是 Paul Lee 最新设计

9、的网络作品选集，Paul Lee 是耶鲁大学的 MFA 学生。SUCTION 网站是现在相当著名的网站，在许多专业杂志上都有介绍，网站设计上以其独特的风格，展现了数码设计与 3D 语言的混合使用，此网站可以边欣赏音乐，边欣赏作品，每一幅作品都给人新颖的感受。SEGURA 网站是视觉传达设计公司的网站，此网站主要介绍了公司的组成，标志、企业形象识别、印刷、摄影等设计作品。CHASE 设计群体网站是原来 MARGO CHASE DESIGN 的扩大，网站主要介绍了公司的标志、字体、广告、包装、网页等设计方面的作品，使浏览者可以从中对设计群体有一个全面的了解，达到宣传该群体的目的。GR8 网站是设计

10、公司的网站，网站设计的非常有意境，进入该网站便以神秘的音乐伴奏，再加以图像动态的浮动，给人以舒适的感受，在这里你可以边听音乐，边欣赏该公司的印刷、企业形象、网页设计等作品，而忘却了时间的流逝。DESIGNERSREPUBLIC 是设计公司的网站，该公司只有七个小组成员，网站的设计风格以创新与简洁的图形为主，结合一小部分的耗散形式，对于现代图形设计造成强烈的影响，声音效果结合，具有较强的时代感，将会带动新世纪的设计风格。DESIGNGRASPHIK 是专门的平面设计网站。展示其平面设计作品并提供平面设计服务。网站以图像为主，充满强烈的视觉冲击，导航以简洁的 GO 文字引导，清晰易辨。IDN 是香

11、港的数码设计专业杂志，专业介绍优秀的网站设计情报与信息，该网站同样延续着这一原则，网站设计的较为平面化，色彩鲜明的图标激发了孩童般的奇思异想，使站点形象鲜明。DESIGNSHOCK 是德国的网络职业介绍所，虽然在柏林成立，但是组成这个国际性组织的设计师和设计员都是来自于世界各地，先创办杂志，后才建立相应的网站，主要目的是介绍“我们喜欢的人的精彩和有趣的意念”，该网站设计的较为卡通性和前卫性，导航以鲜明的色块引人注目，并且声效合一，让人非常感兴趣。ARCHETYPE 是香港的字体设计及设计公司，这个网站的主要目的就是介绍设计的字体并且在网上销售，也介绍他们设计的卡通人物等，该网站的设计感强，浏览

12、页面像做游戏一样，先从建筑的门进入，然后再菱形的方体中选择感兴趣的内容。ARTSEENSOHO 是位于美国纽约的艺术家之城，有来自于世界各地的年轻的艺术家、经纪人以及大大小小的画廊，这个网站的主要目的是介绍这个艺术城，网站设计简洁、有清晰别致的地图式的导航地图，每个地图页面的长度与实际街道长度比例一致，对于展览信息的介绍如作者、作品较为详细，色彩鲜明，极富艺术气息。SWATCH 手表是较为时尚的定位，因此这个网站的设计也体现了时尚感，网站里具体介绍了手表的款式、价格等，它主要是以年轻男女为消费对象，展示了青春的活力和跃动的生气，各式时尚的手表与相应人物形象的巧妙结合，把 SWATCH 品牌的个

13、性表现的恰到好处。LONGINESS 手表是较为优雅的定位，因此网站的设计也体现了精致典雅。网站具体介绍了手表的历史，世界各地的销售服务连锁、各国各时期的形象代言人等。它主要以“优雅态度、真我个性”为企业的宣传口号，网页以书籍翻阅的形式，展示了各式典雅的手表与相应的形象代言人。WRANGLE 的牛仔品牌网站，以简练单纯的手法、鲜明的色彩突出品牌形象。服装界是非常注重企业形象的，网站往往具有鲜明的个性，处处体现企业形象。LEE 也是著名的牛仔品牌网站，网站以明确的绿色区别与其他牛仔品牌形象，在服装的介绍方面较为细致，包含服装的尺寸、裤长、腰围、臀围等，服装的分类也含有男装、女装、童装等，非常明确

14、清晰。NIKE 网站，由于 NIKE 在世界各地都有分销机构，因此网站也具体介绍了欧、亚，美国、英国、韩国、日本、香港等世界各地的销售网络，从各连锁网站可以获取信息。网站设计风格新颖时尚，充分体现 NIKE 的运动系列产品的特征。ESPRIT 服装品牌网站，展示了轻松活泼的生命形象，体现了品牌的定位。LOUIS YUITTON 是著名的品牌，网站具体介绍了 LOUIS YUITTON 的历史、世界各地的销售服务连锁以及 2001 年最新的服装样式。它主要以淡绿色为主调，登载的情报信息量，比市面上的时装杂志由过之而无不及。STILA 化妆品牌网站的设计更是各具特色，STILA 以可人的女性绘画形

15、象出现，打破以往的照片形式，同时与清丽的色彩结合，随意之间体现了网站设计上的考究。BENEFIT 化妆品网站，网站则以腊人的女性形象出现。网站具体介绍了产品的特色和价格，便于网上购物。LORAC 化妆品网站，网站设计的独具特色，以圆形为主要的构成元素，平面的设计感强。GIVENCHY 化妆品网站，网站的清丽淡雅，充分体现了 GIVENCHY 品牌的网页设计美感。CLUD MONACO 化妆品网站，网站设计中把具体的产品排列的非常的构成性、色调高雅、交织以动感的 FLASH 处理，代表了当今世界高水准的网页设计水平。CHANEL 众所周知的 CHANEL 网站，网站设计的简洁高雅，网站设计结合了

16、动态的处理，虚实相间，充分体现了 CHANEL 品牌的高贵与神秘。CD 化妆品牌网站，网站采用整合式设计，风格统一。BOURJOIS 网站设计独具匠心。网页采用长形的下拉式，具体介绍了品牌的口红、面部护理等各类产品以及最新的情报，网页色彩鲜明，辅以手绘式的女性情节形象，浏览者好似在欣赏 BOURJOIS 的故事。第二单元：技能目标Dreamweaver 教学选择工作区布局（仅适用于 Windows） 在 Windows 中首次启动 Dreamweaver 时，会出现一个对话框让您选择一种工作区布局。如果您以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。选择工作区布局： 选择下

17、列布局之一： Dreamweaver MX 工作区这是一个使用 MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。建议大多数用户使用它。 备注： 本帮助系统的大部分内容假定您使用的是集成 Dreamweaver MX 工作区。HomeSite/代码编写者样式的 Dreamweaver MX 工作区这是同样的集成工作区，但是将面板组停靠在左侧，布局类似于 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所用的布局，而且“文档”窗口在默认情况下显示“代码”视图。建议 HomeSi

18、te 或 ColdFusion Studio 用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。若要选择这种布局，请选择“Dreamweaver MX 工作区”选项，然后选择“HomeSite/代码编写者样式”选项。 备注： 在这两种集成工作区布局的任何一种布局中，您都可以在工作区的任何一侧停靠面板组。Dreamweaver 4 工作区这是一种与 Dreamweaver 4 中所用布局相类似的工作区布局，其中每个文档都位于自己的独立浮动窗口中。面板组停靠在一起，但并不是停靠在一个更大的应用程序窗口中。仅建议喜欢使用更熟悉的工作区的 Dreamweaver 4 用户使用这种布局。

19、在选择一种工作区后切换到另一种工作区： 1. 选择“编辑”“参数选择”。2. 在左侧的“分类”列表中选择“常规”类别（如果仍未选定）。3. 单击“更改工作区”按钮。4. 选择一种工作区布局，然后单击“确定”。出现一条警告信息，通知您重新启动 Dreamweaver 后将出现新的布局。 5. 单击“确定”退出该警告信息。6. 再次单击“确定”以退出“参数选择”对话框。7. 退出 Dreamweaver 并重新启动它。关于浮动工作区布局（Windows 和 Macintosh） 在 Dreamweaver 4 样式工作区布局中，每个文档都位于自己的单独窗口中。面板组最初停靠在一起，但是可以将它们取

20、消停靠使其位于自己的窗口中。 在浮动工作区中，当您拖动窗口或调整它们的大小时，窗口将自动彼此对齐或者与屏幕的边沿、“文档”窗口对齐。这使得在 Dreamweaver 中移动和排列不同的浮动面板和窗口更加容易。 关于站点规划和设计 在 Dreamweaver 中， 站点 这个术语可以指 Web 站点，也可以指属于 Web 站点的文档的本地存储位置。当开始考虑创建 Web 站点时，为了确保站点成功，应该按照一系列的规划步骤进行。即使创建的仅是个人主页，只有朋友和家人会看到，仔细规划站点也是有益的，它可以确保每个人都能够成功地使用站点。 选择目标用户 确定了要使用 Web 站点实现的目标之后，需要确

21、定希望谁访问站点。这看起来可能是一个愚蠢的问题，因为大多数人希望每个人都访问他们的 Web 站点。但是，创建世界上每个人都能使用的 Web 站点是很困难的。人们使用不同的浏览器，以不同的速度连接，并且可能有也可能没有媒体插件。所有这些因素都会影响站点的使用。这就是需要确定目标用户的原因。 考虑一下谁将被您的 Web 站点吸引或者您希望吸引谁。您认为他们将使用何种计算机？哪种平台可能占主导地位（Macintosh、Windows、Linux 等）？平均连接速度是多少（33.6 Kbps 调制解调器还是 DSL）？他们将使用何种浏览器和何种显示器尺寸？您要创建的是每个人都使用同样的操作系统和浏览器

22、的内部网站点吗？所有这些因素会极大地影响您的网页对访问者显示的方式。 选择了用户并确定他们将使用何种计算机、连接速度和浏览器后，就可以确定设计目标了。 例如，假设您的目标用户主要由使用 17 英寸显示器的 Windows 用户组成，这些用户使用 Microsoft Internet Explorer 3.0 或更高版本的浏览器。在设计网页时，应该测试您的站点在屏幕大小为 800 x 600 像素的 Windows 计算机上使用 Internet Explorer 的效果是否最好。在 Macintosh 平台上使用 Netscape Navigator 的查看者可能较少，但您仍然应该确保站点在这

23、些计算机上能够工作，虽然它的显示可能不象对目标用户那样精确。创建具有浏览器兼容性的站点 创建站点时，应该明白访问者可能使用各种 Web 浏览器。在已知的其他设计限制下，尽可能将站点设计为具有最大的浏览器兼容性。 目前使用的 Web 浏览器有二十多种，大多数已发行了多个版本。即使您只针对使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多数 Web 用户，但您应明确并不是每个人都在使用这两种浏览器的最新版本。如果您的站点放在 Web 上，那么迟早会有人使用 Netscape Navigator 2.0 或是 AOL 向其客户提供的浏览器以

24、及 Lynx 一类的纯文本浏览器来访问它。 在有些情况下，不需要创建具有跨浏览器兼容性的站点。例如，如果站点仅在公司的内部网上可用，而您知道公司的所有雇员都使用相同的浏览器，则可以根据浏览器的功能优化站点。同样，如果是创建在 CD-ROM 中分发的 HTML 内容，同时在该 CD 上分发某种浏览器，则可以假定所有客户都可以使用那种浏览器。 大多数情况下，对于设计用于公共查看的 Web 站点，最好使您的站点可以在尽可能多的浏览器中查看。选择一种或两种浏览器作为目标浏览器，并针对这些浏览器设计站点，但是请不时地在其他浏览器中尝试浏览本站点，以避免包括太多不兼容的内容。也可以在讨论板上贴一则消息，让

25、别人查看您的站点。这是一种获取广泛用户反馈的好方法。 您的站点越复杂（在布局、动画、多媒体内容和交互方面），跨浏览器兼容的可能性就越小。例如，并非所有的浏览器都可以运行 JavaScript。不使用特殊字符的纯文本页面或许能够在任何浏览器中正确显示，但比起有效地使用图形、布局和交互的页面，这样的页面在美感上可能要差得多。所以，应尽量在最佳效果设计和最大浏览器兼容性设计之间取得平衡。 一个有用的方法是提供某些重要页面（如站点的主页）的多个版本。例如，可为此类页面设计一个有框架的版本和一个无框架的版本。然后可在网页中包括一个行为，将浏览器不具备框架功能的访问者自动切换到无框架版本。组织站点结构 从

26、一开始就认真组织站点可以减少失误并节省时间。如果没有考虑文档在文件夹层次结构中的位置就开始创建文档，最终可能会导致一个充满了文件的大而笨重的文件夹，或导致相关的文件散布在许多名称类似的文件夹中。 设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些文件拷贝到 Web 服务器上。这种方法要比在实时公共 Web 站点上创建和编辑文件好，因为它允许您在公开各种更改之前，在本地站点先测试这些更改，然后在完成后立即上传本地站点文件并更新整个公共站点。 将站点分成类别 将相关的页面放在同一文件夹中。例如

27、，公司的通讯稿、联系信息、工作告示等可以全部放在一个文件夹中，而在线目录页可以放在另一个文件夹中。必要时可以使用子文件夹。这种组织类型使站点更容易维护和导航。 确定将图像和声音文件等项目放在何处 例如，将所有图像放在一个位置很方便，这样，当您要将图像插入页面时，就知道在何处可以找到它。设计人员有时把将在站点上使用的所有非 HTML 项目放在一个名为 Assets 的文件夹中。该文件夹中可能包含其他文件夹 如 Images 文件夹、Shockwave 文件夹和 Sound 文件夹。或者，如果站点上的每个相关页面组之间没有许多共享资源，则每组相关页面可能有单独的 Assets 文件夹。本地和远程站

28、点使用同样的结构 本地站点和远程 Web 站点应该具有完全相同的结构。如果您使用 Dreamweaver 创建本地站点，然后将全部内容上传到远程站点，则 Dreamweaver 确保在远程站点中精确拷贝本地结构。创建设计外观 如果在实际使用 Dreamweaver 开始工作之前规划了设计和布局，在以后的设计中就可以节省许多时间。方法很简单：根据所需的站点布局外观，在纸上创建一个实物模型图。还有更高级的方法，就是使用诸如 Macromedia FreeHand 或 Fireworks 等软件创建站点的合成图。重要的是要有一个布局和设计的实物模型，以便以后建立站点时可以按照它来操作。 页面布局和设

29、计保持一致非常重要。您希望用户能够顺利地单击浏览站点的页面，而不会因为所有页面具有不同外观或者每页导航位置不同而感到困惑。 设计导航方案 需要进行规划的另一方面是导航。当您设计站点时，应考虑要给访问者留下何种印象。思考一下站点的访问者如何能够从一个区域移动到另一个区域。请考虑以下几点： “您在此处”信息使访问者能够很容易地了解他们在站点中的位置以及如何返回到顶级页面。 搜索和索引使访问者可以很容易地找到任何正在查找的信息。 反馈为访问者提供了在站点有问题时与网站管理员（如果适合）联系的方法，以及与公司或站点相关的其他人员联系的方法。 设计导航的外观。导航在整个站点范围内应该一致。如果将导航条放

30、在主页的页首，请尽量在所有链接的页面上都保持这样。 规划和收集资源 知道了设计和布局的外观后，就可以创建和收集需要的资源了。资源可以是图像、文本或媒体（Flash、Shockwave 等）这样的项目。在开始开发站点前，请确保收集了所有这些项目并做好了准备。否则，您将不得不为找到一幅图像或创建一个按钮而经常中断开发过程。 如果您使用来自某个剪贴画站点的图像和图形，或者其他人正在创建它们，请确保将它们收集并放在站点的一个文件夹中。如果您自己创建资源，在开始开发之前请确保创建所有这些资源，如果使用鼠标经过图像技术，那么其中还包括需要的任何图像。然后组织资源，以便可以在使用 Dreamweaver 创

31、建站点时方便地访问它们。 Dreamweaver 使您可以更容易地通过使用模板和库，在各种文档中重用页面布局和页面元素。但是，用模板和库创建新页面比将模板和库应用于现有文档更容易。 如果许多页面将使用同样的布局，则可以使用模板。为该布局规划和设计一个模板，然后就可以基于此模板创建新的页面。如果决定更改所有页面的布局，仅需更改模板即可。备注： 对于基于模板的文档，所能做的更改有一些限制。模板最好在协作环境中使用，以确保每个人使用的是同样的页面布局。对于在协作环境之外的使用，库项目可以提供更大的灵活性。如果您知道某幅图像或其他内容将出现在整个站点中的许多页面上，则可以使用库项目；提前设计该内容并使

32、它成为库项目。这样一来，如果以后更改该项目，使用它的所有页面中显示的都将是更新的版本。设置 Dreamweaver 站点： 1. 选择“站点”“新建站点”。出现“站点定义”对话框。 2. 单击“基本” 选项卡以使用“ 站点定义向导”，或者单击“ 高级”选项卡以使用“高级”设置。3. 完成 Dreamweaver 站点设置过程：o 对于“站点定义向导” ，请回答问题并单击“ 前进”在设置过程中前进。o 对于“高级” 设置，根据需要完成“ 本地信息”类别， “远程信息”类别和“测试服务器”类别。备注： 鼓励不熟悉 Dreamweaver 的用户使用“站点定义向导”；有经验的 Dreamweaver

33、 用户可能更喜欢使用“高级”设置。设置本地文件夹 本地文件夹是 Dreamweaver 站点的工作目录。此文件夹可以位于本地计算机上，也可以位于网络服务器上。它是您为 Dreamweaver 站点存储“过程”文件的位置。 当您设置本地文件夹后，您就建立了一个 Dreamweaver 站点。您可能还要添加远程文件夹和测试文件夹，但开始使用 Dreamweaver 进行开发前至少需要设置一个本地文件夹。 设置本地文件夹： 1. 选择“站点”“新建站点”。出现“站点定义”对话框。 2. 如果未显示“高级” 设置，请单击 “高级”按钮。“站点定义”对话框的“高级”选项卡显示“本地信息”类别选项。3.

34、输入“本地信息” 选项。4. 单击“确定” 。Dreamweaver 创建初始站点缓存，新的 Dreamweaver 站点显示在“站点”面板中。 以后，当您准备在远程服务器上发布站点时，需要添加有关该站点的其它信息。编辑 Dreamweaver 站点 使用“站点定义”对话框的“高级”设置编辑 Dreamweaver 站点。 若要编辑 Dreamweaver 站点，请执行以下操作之一： 选择“站点”“编辑站点”，选择一个站点，然后单击“编辑”。 选择“站点”“打开站点”，然后选择一个站点。使用 Dreamweaver 编辑现有 Web 站点 即使创建原始站点时没有使用 Dreamweaver，仍

35、可以使用 Dreamweaver 编辑现有站点。可以编辑本地系统上的现有站点或远程系统上的站点。 使用 Dreamweaver 编辑现有本地 Web 站点 即使创建原始站点时没有使用 Dreamweaver，仍可以使用 Dreamweaver 编辑本地磁盘中的现有 Web 站点。 编辑现有本地 Web 站点： 1. 执行以下操作之一打开“站点定义” 对话框： o 选择“站点”“编辑站点”，然后单击“ 新建”。o 选择“站点”“打开站点”“定义站点”。“站点定义”对话框显示“本地信息”选项。 2. 完成对话框。3. 单击“确定” 。设置编码环境 可以在 Macromedia Dreamweave

36、r MX 中修改编码环境使之适合您的工作方式。例如，您可以更改查看代码的方式、设置不同的键盘快捷方式、或导入并使用您喜欢的标签库。Dreamweaver 中的编码 Macromedia Dreamweaver MX 提供功能全面的编码环境，这一编码环境是为各种 Web 开发类型（范围从编写简单的 HTML 页面到设计、测试和部署复杂的 Web 应用程序）而专门设计的。Dreamweaver 中的编码环境使您具有对页面中代码的完全访问权限。支持的文件类型 对于客户端编码，您可以在 Dreamweaver 中处理多种文件类型，包括 HTML、XML、层叠样式表 (CSS)、JavaScript、V

37、BScript、无线标记语言 (WML)、扩展数据标记语言 (EDML)、Dreamweaver 模板 (.dwt) 和文本。 对于服务器端编码，您可以处理以下文件类型：ColdFusion、ColdFusion 组件 (.cfc)、ASP.NET Visual Basic、ASP.NET C#、ASP VBScript、ASP JavaScript、JSP 和 PHP。您还可以创建独立的 C#、Visual Basic 和 Java 文件。Dreamweaver 提供若干种功能，可帮助您高效率地编写和编辑代码。设计页面布局 使用 Dreamweaver 中的可视化设计工具创建复杂的页面布局。

38、使用表格显示内容 表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。虽然 HTML 代码中通常不明确指定列，但 Dreamweaver 允许您像操作行和单元格那样来操作列。 在创建表格之后，就可以方便地修改其外观和结构。您可以执行以下任意操作： 添加内容 添加、删除、拆分及合并行和列 修改表格、行或单元格属性以添加颜色和对齐 拷贝和粘贴单元格备注： 许多设计人员使用表格对 Web 页进行布局。Dreamweaver 提供两种方式来查看和操作表格：标准视图和布局视图。在标准视图中，表格显示为行和列的网格，而布局视

39、图允许您在将表格用作基础结构的同时在网页上绘制、移动方框以及调整方框的大小在布局视图中对页进行布局 Dreamweaver 为您提供了对 Web 页进行布局的多种不同的方法。 创建页布局的一种常用的方法是使用 HTML 表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对 Web 页进行布局。为了简化使用表格进行页布局的过程，Dreamweaver 提供了布局视图。在布局视图中，您可以使用表格作为基础结构来设计您的页，但是却避免了使用传统的方法创建基于表格的设计时经常出现的一些问题。例如，在布局视图中您可以在页上方便地绘制布局单元格，然后将这些单

40、元格移动到所需的位置。您还可以方便地创建固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局。 您仍可以以传统方式使用表格对页进行布局，或使用层对页进行布局然后将它们转换为表格。但是，布局视图是设置页布局的最简单的方法。 备注： 在布局视图中，您不能使用在“标准”视图中可以使用的“插入表格”和“绘制层”工具。若要使用这些工具，您必须先切换到“标准”视图。使用框架 框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 文档的方法。使用框架的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。 例如，您的框架布局可能由 3 个框架组成：一个较窄的框架

41、位于侧面，其中包含导航条；一个框架横放在顶部，其中包含 Web 站点的徽标和标题；一个大框架占据了页面的其余部分，其中包含主要内容。这些框架中的每一个都显示单独的 HTML 文档。在此示例中，当访问者浏览站点时，在顶部框架中显示的文档永远不更改。侧面框架导航条包含链接；单击其中某一链接会更改主要内容框架的内容，但侧面框架本身的内容保持静态。无论访问者在左侧单击了哪一个链接，右侧主要内容框架都会显示适当的文档。有关设计和使用框架的所有方式的详细论述以及对它们进行硬编码所需的代码，并不在本章论述的范围之内。如果您需要有关在高级框架布局中使用的代码的详细信息，请参见有关框架和框架集的手册。添加内容

42、使用 Dreamweaver 中的可视化工具向 Web 页添加各种内容。添加元素并设置元素的格式，这些元素包括文本、图像、颜色、影片、声音和其他媒体形式等，以确保有障碍的访问者也能够访问您的页面。插入文本和设置文本格式 Macromedia Dreamweaver MX 提供了多种向文档中添加文本和设置文本格式的方法。本章描述如何插入文本、设置字体类型、大小、颜色和对齐属性，以及如何使用 HTML 样式和层叠样式表 (CSS) 样式创建和应用您自己的自定义样式。 插入图像 图像通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如照片）或交互式设计元素（例如鼠标经过图像或图像地图）。

43、 在 Macromedia Dreamweaver MX 中，您可以在“设计”视图或“代码”视图中将图像插入文档。在 Dreamweaver 文档中添加图像时，可以设置或修改图像属性并直接在“文档”窗口中查看所做的更改。 若要建立一个高效的 Web 设计工作流程，您可以选择图像编辑器参数选择，然后当您在 Dreamweaver 中工作时自动启动它来编辑图像。 Dreamweaver 与其他应用程序的集成 Macromedia Fireworks MX 和 Macromedia Flash MX 是强大的 Web 开发工具，它们用于创建可在 Web 页中查看的图形和 SWF 影片。Macrome

44、dia Dreamweaver MX 与这些工具紧密集成，使您能够简化 Web 设计工作流程。 若要建立 Dreamweaver 与 Flash 或 Fireworks 之间的顺利集成，请确保在定义 Dreamweaver 站点时启用“设计备注”。默认情况下，此选项将在站点定义设置中预先选定。有关启用“设计备注”的信息。 当您将文件从 Fireworks 或 Flash 直接导入到 Dreamweaver 定义站点时，包含对 PNG 或 Flash 创作文件 (FLA) 的引用的“设计备注”将自动随可在 Web 上发布的文件（GIF、JPEG 或 SWF）导出至该站点。 您可以在 Dreamw

45、eaver 文档中方便地插入 Fireworks 图像或表和 Flash 影片。在 Dreamweaver 文档中进行插入后，还可以利用 Dreamweaver 与 Fireworks 或 Flash 之间的集成功能对图像或影片进行更改。 在 Dreamweaver 中工作时，您也可以通过插入图像占位符图形而后对其进行更新来开始图形制作过程。有关图像占位符的信息，当您在 Dreamweaver 中插入图像占位符后，就可以启动 Fireworks MX 来创建新的图形。在 Fireworks 中，您可以设计图形，添加热点或行为（或者您需要的任意元素）。然后，可以将图形另存为 PNG 并将其导出为

46、可在 Web 上发布的图形文件（如 GIF 或 JPEG）;如果是切片表，则将其导出为 HTML 和图像。 当您返回到 Dreamweaver 时，替换图像或 Fireworks 表会在文档中更新。插入媒体 Macromedia Dreamweaver 使您可以迅速、方便地向您的 Web 站点添加声音和影片。您可以并入和编辑多媒体文件和对象，例如 Macromedia Flash 和 Shockwave 影片、Java applets、QuickTime、Active X 和音频文件。您可以将“设计备注”附加到这些对象上，以便于您和您的小组成员之间的交流。您还可以在 Dreamweaver 自

47、身内插入 Flash 按钮和文本对象。 使用行为和动画 许多 Web 页只包含文本和图像，没有任何交互式元素。在 Dreamweaver 中使用 JavaScript 行为和分层动画时间轴，提供互动功能和动画以使访问者更感兴趣。 使用 JavaScript 行为 Dreamweaver 行为将 JavaScript 代码放置在文档中以允许访问者与 Web 页进行交互，从而以多种方式更改页或引起某些任务的执行。行为是事件和由该事件触发的动作的组合。在“行为”面板中，通过指定一个动作然后指定触发该动作的事件，可将行为添加到页中。备注： 行为代码是客户端 JavaScript 代码；即它运行于浏览器

48、中，而不是服务器上。实际上，事件是浏览器生成的消息，指示页的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个 onMouseOver 事件；然后浏览器查看是否存在当为该链接生成该事件时浏览器应该调用的 JavaScript 代码（这些代码是在被查看的页中指定的）。为不同的页元素定义不同的事件；例如，在大多数浏览器中，onMouseOver 和 onClick 是与链接关联的事件，而 onLoad 是与图像和文档的 body 部分关联的事件。 动作是由预先编写的 JavaScript 代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播

49、放声音或停止 Shockwave 影片。随 Macromedia Dreamweaver MX 提供的动作是由 Dreamweaver 工程师精心编写的，以提供最大的跨浏览器兼容性。 在将行为附加到页元素之后，只要对该元素发生了您所指定的事件，浏览器就会调用与该事件关联的动作（JavaScript 代码）。（可以用来触发给定动作的事件随浏览器的不同而有所不同。）例如，如果将弹出消息动作附加到某个链接并指定它将由 onMouseOver 事件触发，那么只要某人在浏览器中用鼠标指针指向该链接，就将在对话框中弹出您的消息。 单个事件可以触发多个不同的动作，您可以指定这些动作发生的顺序。 Dreamweaver MX 提供大约二十多个行为动作；您可以在 Macromedia Exchange Web 站点以及第三方开发人员站点上找到更多的动作。如果精通 JavaScript，您可以编写自己的行为动作。备注： 行为 和 动作 这两个术语是 Dreamweaver 术语，而不是 HTML 术语。从浏览器的角度看，动作与任何其他一块 JavaScript 代码完全相同。使用 Dreamweaver 自带的行为