《多媒体制作技术及应用》-ch9 网站设计

第九章网站设计9.1网站设计基本知识9.1.1网站设计网页是的基本文档，它是用HTML（HypertextMarkupLaguage即超文本标识语言）编写的。HTML是一种编程语言，是一些能让浏览器解释的标签（tag），当网页中包含正常文本和HTML语言标签时，浏览器会“翻译”由这些HTML语言标签提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。网页的出色之处在于能够把超链接（Hyperlink）嵌入网页中，这使用户能够从一个网页站点方便地转移到另一个相关的网页站点。它可以指向其他网页、文档、多媒体文件、图像甚至程序。进入网站首先看到的那一页称首页或主页（HomePage）。9.1网站设计基本知识9.1.1网站设计WEB网站是由HomePage和相关网页构成的超文本信息的集合，网页按一定的组织结构和顺序组合起来，使浏览者在访问该网站时能连接到各个网页来观看网页内容。用户可以使用浏览器（如微软的InternetExplorer）浏览这些页面的内容。网站设计，就是用HTML把多种媒体信息有效地组织起来，使浏览者高效、便捷地获取这些信息。网站设计包含的内容大体分两个方面：一方面是信息的处理和组织，另一方面是网站的延伸设计。9.1网站设计基本知识9.1.2网页文件的规划与创意一个网站的成功与否，很重要的一个因素在于它的构思、内容的组织、好的创意及丰富详实的内容。基本设计思路：1．网站的目标与定位2．网页的组织结构3．资料的收集与整理4．选择网页的设计方法5．网站的整体风格创意设计9.1网站设计基本知识9.1.3网页制作软件构成WEB网站页面的HTML文件是标准的ASCII文件，看起来像是加入了许多被称为标签（tag）的特殊字符串的普通文本文件，我们可以用普通的文本编辑器制作和编辑。但使用文本编辑器制做网页非常繁琐而且不易布局和定位。目前有很多专门的网页制作工具软件，各有特色。9.1网站设计基本知识9.1.3网页制作软件1．DreamWeaverDreamWeaver是一个功能强大的专业网页设计软件，包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等，还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML（DynamicHTML）的设计。同时它还提供了自动更新页面信息的功能。DreamWeaver采用了RoundtripHTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。9.1网站设计基本知识9.1.3网页制作软件2．MicrosoftFrontPage如果对Word很熟悉，那么用FrontPage进行网页设计一定会非常顺手。FrontPage功能强大，简单易用。页面制作由Frontpage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页，预览页。Frontpage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。站点管理功能强大，在更新服务器上的站点时，不需要创建更改文件的目录，FrontPage会跟踪文件并拷贝那些新版本文件。9.1网站设计基本知识9.1.3网页制作软件3．Netscape编辑器NetscapeCommunicator和NetscapeNavigatorGold版本的浏览器都带有网页编辑器。当用Netscape浏览器显示网页时，单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑。可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义锚点，插入链接，定义文档编码，插入图像，创建表格等。Netscape编辑器是网页制作初学者很好的入门工具。如果网页主要是由文本和图片组成的，Netscape编辑器将是一个轻松的选择。9.1网站设计基本知识9.1.3网页制作软件4．AdobePagemillPagemill功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂的主页。能够很方便地编辑需要很多框架、表单和ImageMap图像的网页。Pagemill创建多框架页十分方便，可以同时编辑各个框架中的内容。Pagemill在服务器端或客户端都可创建与处理ImageMap图像，也支持表单创建。Pagemill允许在HTML代码上编写和修改，支持大部分常见的HTML扩展，还提供拼写检错、搜索替换等文档处理工具。在Pagemill3.0增加了站点管理能力，但仍不支持CSS、TrueDoc和动态HTML等高级特性。Pagemill另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便。9.1网站设计基本知识9.1.3网页制作软件5．ClarisHomePage如果使用ClarisHomePage软件，可以在几分钟之内创建一个动态网页。它有一个很好的创建和编辑Frame（框架）的工具，不必花费太多的力气就可以增加新的Frame（框架）。而且ClarisHomePage3.0集成了FileMaker数据库，增强的站点管理特性还允许检测页面的合法连接。9.1网站设计基本知识9.1.3网页制作软件6．HotDogProfessionalHotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。HotDog对plugin的支持也远远超过其他产品，它提供的对话框允许以手动方式为不同格式的文件选择不同的选项。HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。9.1网站设计基本知识9.1.3网页制作软件7．HomeSiteAllaire的HomeSite是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑Perl程序。HomeSite工作界面繁简由人，根据习惯，可以将其设置成像Notepad那样简单的编辑窗口，也可以在复杂的界面下工作。HomeSite具有良好的站点管理功能，链接确认向导可以检查一个或多个文档的链接状况。HomeSite适合那些比较复杂和精彩页面的设计。9.1网站设计基本知识9.1.3网页制作软件8．HotMetalProHotMetal既提供“所见即所得”图形制作方式，又提供代码编辑方式，是个令各层次设计者都不至于失望的软件。但是初学者需要熟知HTML，才能得心应手地使用这个软件。HotMetal具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的Access、Word、Excel以及其他ODBC数据，放入页面中，而且能够把它们自动转换为HTML格式，此外它还能转换很多老格式的文档（如WordStar等），并能在转换过程中把这些文档里的图片自动转换为GIF格式。HotMetal为用户提供了很多工具，还可以用网状图或树状图表现整个站点文档的链接状况。9.1网站设计基本知识9.1.4HTML语言HTML语言是网页制作的基础。虽然现在有许多所见即所得的网页制作工具，但还是有必要了解一些HTML的语法。这样，可以更精确的控制页面的排版，可以实现更多的功能。HTML不是程序语言，它只是标识语言，格式非常简单，只是由文字及标签组合而成，可直接使用普通的文本编辑器进行编辑。9.1网站设计基本知识9.1.4HTML语言1．标签（tag）写法标签又称标识或标记，在HTML中，用来界定各种单元，如标题、段落、列表等。HTML单元由三部分组成：起始标签、单元内容、结束标签。起始标签由“”和“”来界定，结束标签由“/”和“”来界定，单元名称和属性由起始标签给出。超文本标签用尖括号“”和“”表示标签名与“”不能留有空白字符。有些标签要加上参数（或称属性）。超文本标签一般是成对出现，用带斜杠的元素表示结束，有些标签只有起始标签而没有结束标签，还有些标签可以省略。参数只可加于起始标签中。标签字母大小写皆可。一个标签元素可写在多行，参数位置不受限制。9.1网站设计基本知识9.1.4HTML语言2．HTML语言的结构一个HTML文件应具有下面的结构：HTMLHTML文件开始HEAD文件头开始../HEAD文件头结束BODY文件体开始../BODY文件体结束/HTMLHTML文件结束9.1网站设计基本知识9.1.4HTML语言3．基本标签的使用（1）HTML标签HTML这个标签告诉浏览器在HTML…/HTML之间的文件是用HTML编写的文档。（2）文档头标签HEADHEAD…/HEAD之间包含的是HTML文档名称。（3）文档名称标签TITLETITLE…/TITLE之间包含的是具体的HTML文档名称，字符数通常不超过64。（4）正文标签BODYBODY…/BODY之间是正文部分，这是HTML文档最多的部分，它包含的是显示在浏览器文本窗口中的文档内容。9.1网站设计基本知识9.1.4HTML语言3．基本标签的使用（5）标题（Heading）标签HnHTML定义了6个等级的标题标签，其中n＝1，2，…，6。Hn…/Hn之间包含的是第n级标题。（6）段落（Paragraph）标签PP…/P之间包含的是一段文本。HTML中没有使用硬换行（carriagereturn）来分段落，也不承认多个连续的空格，这是与字处理软件不同的。在HTML文档中，P和/P之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理。9.1网站设计基本知识9.1.4HTML语言3．基本标签的使用（7）列表标签UL、OL和LIHTML支持无编号列表和有编号列表，而且还可以在列表中嵌套列表。UL…/UL表示标签之间的列表项目是无编号列表（UnnumberedList）。OL…/OL表示标签之间的列表项目是有编号列表（OrderedList）。LI表示标签后面的内容是具体的列表项目（ListItem）。（8）定义列表标签DL、DT和DD定义列表有三个标签。DL表示定义列表（DefinitionLists）DT表示后面的项是定义术语（DefinitionTerm）DD表示后面的项是定义释义（DefinitionDefinition）9.1网站设计基本知识9.1.4HTML语言3．基本标签的使用（9）预格式文本（PreformattedText）标签PRE用于产生固定宽度的字符。在PRE…/PRE之间的空格、新行、空行和表格与HTML源文档中的一致。（10）扩展引用（ExtendedQuotations）标签BLOCKQUOTEBLOCKQUOTE…/BLOCKQUOTE用来包含一个比较长的引用语。（11）强制换行标签BR使用BR标签可强制文本换行，但不在行与行之间增加空白。9.1网站设计基本知识9.1.4HTML语言3．基本标签的使用（12）表单标签FORM用来收集用户的信息，它可以包含让用户输入文本和选择项目的接口构件，例如文本域、按钮、复选框（checkboxe），单选按钮（radiobutton）和选择列表。使用FORM标签时需要注意：①在表单中的每个接口构件必须和输入标签（INPUT）或者选择标签（SELECTION）一起定义；②单中的所有构件必须在FORM…/FORM之间定义。9.1网站设计基本知识9.1.4HTML语言3．基本标签的使用（13）横线（HorizontalRule）标签HR生成一条用于