资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第九章 网站设计,9.1 网站设计基本知识,9.1.1 网站设计,网页是WWW的基本文档，它是用HTML（Hypertext Markup Laguage即超文本标识语言）编写的。HTML是一种编程语言，是一些能让浏览器解释的标签（tag），当网页中包含正常文本和HTML语言标签时，浏览器会“翻译”由这些HTML语言标签提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。网页的出色之处在于能够把超链接（Hyperlink）嵌入网页中，这使用户能够从一个网页站点方便地转移到另一个相关的网页站点。它可以指向其他网页、文档、多媒体文件、图像甚至程序。进入网站首先看到的那一页称首页或主页（HomePage）。,9.1 网站设计基本知识,9.1.1 网站设计,WEB网站是由Home Page和相关网页构成的超文本信息的集合，网页按一定的组织结构和顺序组合起来，使浏览者在访问该网站时能连接到各个网页来观看网页内容。用户可以使用浏览器（如微软的Internet Explorer）浏览这些页面的内容。,网站设计，就是用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 网页制作软件,1DreamWeaver,DreamWeaver是一个功能强大的专业网页设计软件，包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等，还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML（Dynamic HTML）的设计。同时它还提供了自动更新页面信息的功能。,DreamWeaver采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。,9.1 网站设计基本知识,9.1.3 网页制作软件,2Microsoft FrontPage,如果对Word很熟悉，那么用FrontPage 进行网页设计一定会非常顺手。,FrontPage功能强大，简单易用。页面制作由Frontpage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页，预览页。Frontpage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。站点管理功能强大，在更新服务器上的站点时，不需要创建更改文件的目录，FrontPage会跟踪文件并拷贝那些新版本文件。,9.1 网站设计基本知识,9.1.3 网页制作软件,3Netscape编辑器,Netscape Communicator和Netscape Navigator Gold版本的浏览器都带有网页编辑器。,当用Netscape浏览器显示网页时，单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑。可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义锚点，插入链接，定义文档编码，插入图像，创建表格等。Netscape编辑器是网页制作初学者很好的入门工具。如果网页主要是由文本和图片组成的，Netscape 编辑器将是一个轻松的选择。,9.1 网站设计基本知识,9.1.3 网页制作软件,4Adobe Pagemill,Pagemill功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂的主页。能够很方便地编辑需要很多框架、表单和Image Map图像的网页。,Pagemill创建多框架页十分方便，可以同时编辑各个框架中的内容。Pagemill在服务器端或客户端都可创建与处理Image Map图像，也支持表单创建。Pagemill允许在HTML代码上编写和修改，支持大部分常见的HTML扩展，还提供拼写检错、搜索替换等文档处理工具。在Pagemill 3.0增加了站点管理能力，但仍不支持CSS、TrueDoc和动态HTML等高级特性。,Pagemill另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便。,9.1 网站设计基本知识,9.1.3 网页制作软件,5Claris Home Page,如果使用Claris Home Page软件，可以在几分钟之内创建一个动态网页。它有一个很好的创建和编辑Frame（框架）的工具，不必花费太多的力气就可以增加新的Frame（框架）。而且Claris Home Page 3.0集成了FileMaker数据库，增强的站点管理特性还允许检测页面的合法连接。,9.1 网站设计基本知识,9.1.3 网页制作软件,6HotDog Professional,HotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。HotDog对plugin的支持也远远超过其他产品，它提供的对话框允许以手动方式为不同格式的文件选择不同的选项。,HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。,9.1 网站设计基本知识,9.1.3 网页制作软件,7HomeSite,Allaire的HomeSite是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑Perl程序。 HomeSite工作界面繁简由人，根据习惯，可以将其设置成像Notepad那样简单的编辑窗口，也可以在复杂的界面下工作。,HomeSite具有良好的站点管理功能，链接确认向导可以检查一个或多个文档的链接状况。HomeSite适合那些比较复杂和精彩页面的设计。,9.1 网站设计基本知识,9.1.3 网页制作软件,8HotMetal Pro,HotMetal既提供“所见即所得”图形制作方式，又提供代码编辑方式，是个令各层次设计者都不至于失望的软件。但是初学者需要熟知HTML，才能得心应手地使用这个软件。,HotMetal具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的Access、Word、Excel以及其他ODBC数据，放入页面中，而且能够把它们自动转换为HTML格式，此外它还能转换很多老格式的文档（如WordStar等），并能在转换过程中把这些文档里的图片自动转换为GIF格式。HotMetal为用户提供了很多工具，还可以用网状图或树状图表现整个站点文档的链接状况。,9.1 网站设计基本知识,9.1.4 HTML语言,HTML语言是网页制作的基础。虽然现在有许多所见即所得的网页制作工具，但还是有必要了解一些HTML的语法。这样，可以更精确的控制页面的排版，可以实现更多的功能。HTML不是程序语言，它只是标识语言，格式非常简单，只是由文字及标签组合而成，可直接使用普通的文本编辑器进行编辑。,9.1 网站设计基本知识,9.1.4 HTML语言,1标签（tag）写法,标签又称标识或标记，在HTML中，用来界定各种单元，如标题、段落、列表等。HTML单元由三部分组成：起始标签、单元内容、结束标签。起始标签由“”来界定，结束标签由“”来界定，单元名称和属性由起始标签给出。,超文本标签用尖括号“”表示,标签名与“”不能留有空白字符。,有些标签要加上参数（或称属性）。,超文本标签一般是成对出现，用带斜杠的元素表示结束，有些标签只有起始标签而没有结束标签，还有些标签可以省略。参数只可加于起始标签中。,标签字母大小写皆可。,一个标签元素可写在多行，参数位置不受限制。,9.1 网站设计基本知识,9.1.4 HTML语言,2HTML 语言的结构,一个HTML文件应具有下面的结构：,HTML文件开始, 文件头开始,.,.,文件头结束,文件体开始,.,., 文件体结束,HTML文件结束,9.1 网站设计基本知识,9.1.4 HTML语言,3基本标签的使用,（1）HTML标签,这个标签告诉浏览器在 之间的文件是用HTML编写的文档。,（2）文档头标签, 之间包含的是HTML文档名称。,（3）文档名称标签, 之间包含的是具体的HTML文档名称，字符数通常不超过64。,（4）正文标签, 之间是正文部分，这是HTML文档最多的部分，它包含的是显示在浏览器文本窗口中的文档内容。,9.1 网站设计基本知识,9.1.4 HTML语言,3基本标签的使用,（5）标题（Heading）标签,HTML定义了6个等级的标题标签，其中n1，2，6。 之间包含的是第n级标题。,（6）段落（Paragraph）标签, 之间包含的是一段文本。HTML中没有使用硬换行（carriage return）来分段落，也不承认多个连续的空格，这是与字处理软件不同的。在HTML文档中，和之间不论有多少行，不论每一行有多长或者多短，也不论其间有多少个空格，浏览器都把它作为一个段落来处理。,9.1 网站设计基本知识,9.1.4 HTML语言,3基本标签的使用,（7）列表标签、和,HTML支持无编号列表和有编号列表，而且还可以在列表中嵌套列表。, 表示标签之间的列表项目是无编号列表（Unnumbered List）。, 表示标签之间的列表项目是有编号列表（Ordered List）。,表示标签后面的内容是具体的列表项目（List Item）。,（8）定义列表标签、和,定义列表有三个标签。,表示定义列表（Definition Lists）,表示后面的项是定义术语（Definition Term）,表示后面的项是定义释义（Definition Definition）,9.1 网站设计基本知识,9.1.4 HTML语言,3基本标签的使用,（9）预格式文本（Preformatted Text）标签,用于产生固定宽度的字符。在 之间的空格、新行、空行和表格与HTML源文档中的一致。,（10）扩展引用（Extended Quotations）标签, 用来包含一个比较长的引用语。,（11）强制换行标签,使用标签可强制文本换行，但不在行与行之间增加空白。,9.1 网站设计基本知识,9.1.4 HTML语言,3基本标签的使用,（12）表单标签,用来收集用户的信息，它可以包含让用户输入文本和选择项目的接口构件，例如文本域、按钮、复选框（checkboxe），单选按钮（radio button）和选择列表。,使用标签时需要注意：,在表单中的每个接口构件必须和输入标签（）或者选择标签（）一起定义；,单中的所有构件必须在之间定义。,9.1 网站设计基本知识,9.1.4 HTML语言,3基本标签的使用,（13）横线（Horizontal Rule）标签,生成一条用于分割文档的水平线，其长度与浏览器窗口等宽，粗细和长短都可设置。,（14）嵌入图像标签,如或，image-url是图像文件的URL。目前，大部分浏览器支持 .GIF 和 .JPEG文件。alt属性告诉不支持图图像的浏览器用Text代替该图。,9.1 网站设计基本知识,9.1.4 HTML语言,3基本标签的使用,（15）表格标签,表格的基本形式：一个表由开始，结束，表的内容由,和定义。说明表的一个行，表有多少行就有多少个；说明表的列数和相应栏目的名称，有多少个栏就有多少个；则填充由和组成的表格。是否用表格线分开为部分内容用border属性说明。,9.1 网站设计基本知识,9.1.4 HTML语言,4常用HTML标签,（1）基本标签,（2）标题标签,（3）文档整体属性,（4）文本标签,（5）链接,（6）格式排版,（7）图形元素,（8）表格,（9）表格属性,（10）框架,（11）框架属性,（12）表单,9.1 网站设计基本知识,9.1.5 Dreamweaver介绍,1Dreamweaver简介,Dreamweaver是当前最流行的网页设计软件。它与同为Macromedia公司出品的Fireworks和Flash一道，被誉为网页制作三剑客。,Macromedia Dreamweaver MX 是一款专业的HTML 编辑器，用于对Web 站点、Web 页和Web 应用程序进行设计、编码和开发。无论愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 都会提供有用的工具。,9.1 网站设计基本知识,9.1.5 Dreamweaver介绍,1Dreamweaver简介,利用Dreamweaver 中的可视化编辑功能，可以快速地创建页面而无须编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在Macromedia Fireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver，或者添加Macromedia Flash 对象，从而优化开发工作流程。,9.1 网站设计基本知识,9.1.5 Dreamweaver介绍,2Dreamweaver MX操作界面,插入面板,文档,工具箱,网页,设计区,属性区,面板组,9.1 网站设计基本知识,9.1.5 Dreamweaver介绍,2Dreamweaver MX操作界面,Dreamweaver MX操作界面主要的构成元素：,菜单区,和其他的软件一样，该软件所有的操作命令都可以从这一个区内找到，例如，选中菜单“编辑”中的“首选参数”， 或按快捷键CTRL+U，可以把自己的Dreamweaver MX设置为“设计者”或“代码编写者” 工作区布局风格。,9.1 网站设计基本知识,9.1.5 Dreamweaver介绍,2Dreamweaver MX操作界面,Dreamweaver MX操作界面主要的构成元素：,插入项目选择工具,插入项目选择工具又称“对象面板”或“插入面板”，在插入面板选中了某个图标，可在页面中的插入相应项目。点击向下按钮在下拉菜单中可选择各类项目图标，若选择“显示为制表符”，本面板显示为另一种形式。,9.1 网站设计基本知识,9.1.5 Dreamweaver介绍,2Dreamweaver MX操作界面,Dreamweaver MX操作界面主要的构成元素：,文档工具栏,文档工具栏可将网页设计区快速切换为“代码视图”、“设计视图”、“拆分视图”。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。,网页设计区,你所设计的网页或代码将出现在该区。,属性区,属性区也成为属性面板，在该区可以对选中的对象进行一些设置，选择不同的网页元素，属性面板所显示的内容也有所不同。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,通过一个实例页面的制作过程，我们可以熟悉新建文档、插入内容、设置页面属性、保存、预览等基本功能。,首先，在硬盘上建立一个文件夹，再在其中建立一个命名为images的子文件夹，另准备两幅要置入网页中的图像文件，复制到images子文件夹。本例中的两幅图分别为Logo1_1.jpg和Welcome.gif，图像大小分别为35680象素和600300象素。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,（1）启动Dreamweaver MX 2004，选择“文件”“新建”命令，新建一个文档。出现新建文档对话框。,选择基本页的HTML并单击“创建”按钮，创建一个默认的空白页。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,（2）选择“文件”“另存为”命令，将文件路径指定为前面建立的文件夹，给文件起一个名字index.htm。,在进行具体制作之前，我们点击文档工具栏的代码按钮或拆分按钮，可以看到Dreamweaver为这个空文件生成的HTML代码。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,（5）点击属性面板下面的“页面属性”按钮或选择“修改”“页面属性”命令，打开“页面属性”对话框。,在页面属性对话框中将背景颜色设置为f9b779，页面字体保持默认字体，大小设为12像素，左边距、右边距、上边距和下边距均设为0。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,（6）在“插入对象面板”的常用类中单击图像图标，在“选择图像源文件”对话框中选择images文件夹中的Logo1_1.jpg。插入图像后鼠标点击图像右侧使光标移到图像右边，多次按回车将光标定位在合适位置，用同样方法将图像Welcome.gif插入到页面。,（7）在编辑过程中可以随时在浏览器中预览以确定效果，按键盘上F12键或点击Dreamweaver中文档工具栏中预览按钮之后选“预览在iexplore”，可以在浏览器中察看我们制作的网页结果。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,（8）回到Dreamweave，点击选中下面一幅图像Welcome.gif，在下面的“属性面板”中可以调整其在HTML文档中的属性。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,（9）点击右面的居中对齐按钮使得图像在显示时处于页面中央，设置“边框”值为0。,（10）在设计窗口点击图像右边区域并按回车使光标移到图像下方，输入文字“欢迎！点击进入.”。拖动鼠标选中刚才输入的文字，在“属性面板”中改为居中对齐。,（11）为建立链接，新建一个HTML文档取名为Homepage.htm，保存并关闭该文档。,（12）回到index.htm，点击选中图像Welcome.gif，在属性面板中点击“链接编辑框”后面的浏览文件图标，在弹出的“选择文件对话框”中选择Homepage.htm。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,（13）拖动鼠标选择文字“欢迎！点击进入.”，以同样方法建立链接到Homepage.htm。在浏览器中察看网页的实际效果，点击网页中下方的图像或文字，可以链接到另一页。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,（14）回到Dreamweave，保存刚才设计的网页。,至此完成本页面的制作，点击代码按钮可以看到Dreamweaver生成的HTML代码 。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,1.设计简单的主页,为了不影响网页的下载速度，图像要用得少而精，使用图像处理软件在不失真的情况下尽量压缩。,浏览器能识别的图像有jpg（jpeg）、gif、png和bmp等，Dreamweaver能较好支持的有jpg、gif和png。,目前网上用的最多的是jpg和gif，因为这两种格式文件体积较小。Gif格式的图像用工具处理后能去掉本身的背景，而很好地和页面融合，还能做成动画。,在Dreamweaver中选中网页中的图像后，可使用“属性面板”调整其在网页中的属性。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,2站点管理,用Dreamweaver制作网页，为了以后的方便，最好首先定义一个本地站点。其实，使用网页编辑器比起直接手写代码最大的优势就在于站点管理。用Dreamweaver，可以很方便的对站点内文件进行改名或删除操作，其站点管理能自动修改其他页面指向这个文件的链接。使用Dreamweaver的模版和库，可让站点内的部分页面共用相同的部分，还可方便的统一更新。Dreamweaver还自带FTP功能，可进行远程管理。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,2站点管理,（1）要新建一个本地站点，需点击Dreamweaver菜单栏的“站点”“管理站点”命令，弹出“管理站点”对话框。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,2站点管理,（2）单击“新建”按钮，弹出“站点定义”对话框，在基本页填入你给这个站点的命名。在对话框“高级”页“本地根文件夹”设置这个站点在本地所在的文件夹，用以模拟本地站点的根目录。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,2站点管理,（3）选中“自动刷新本地文件列表”前的选框，则将来当有新的文件复制到本地文件夹时，Dreamweaver将对这个本地站点的目录列表自动更新。,（4）在HTTP地址后可以填入这个站点的网址。,（5）选中“启用缓存”复选框，则Dreamweaver会给这个本地站点设置一个缓存，以提高站点管理的速度。,（6）设置完毕后，点击“确定”按钮，完成本地站点设置。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,2站点管理,准备三幅图把它们存入images文件夹。,Logobar.jpg 图像大小为76080像素；,Menubar.jpg 76020像素,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,2站点管理,Left1_03.gif 152363 像素,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,2站点管理,在“文件面板”文件列表上的上一节建立的空文件Homepage.htm上点右键，选“打开”，打开Homepage.htm文档，也可在文件列表双击打开该文件，“文件面板”文件列表上展开images文件夹，拖动图像Logobar.jpg到设计视图，把光标移到图像右侧再按键盘上“Shift”+“回车”键，把Menubar.jpg拖过来，再把光标移到右侧按键盘上“Shift”+“回车”键，用同样方法拖入图像Left1_03.gif，设置文档的标题为“风筝网站”，保存该网页。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.1了解用Dreamweaver MX 2004制作网页,2站点管理,按F12键在浏览器中预览结果,9.2 用Dreamweaver MX 2004设计站点网页,9.2.2 文本编辑,Macromedia Dreamweaver MX 2004 提供了多种向文档中添加文本和设置文本格式的方法。可以插入文本、设置字体类型、大小、颜色和对齐属性，以及使用层叠样式表（CSS） 样式创建和应用自己的自定义样式。,Dreamweaver允许通过以下方式在Web 页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。Web 专业人员接受的、包含能够合并到Web 页的文本内容的常见文档类型有ASCII 文本文件、RTF 文件和MS Office 文档。Dreamweaver可以从这些文档类型中的任何一种取出文本，然后将文本并入Web 页中。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.2 文本编辑,（1）打开前面建好的网页Homepage.htm。选中图像Left1_03.gif，在“属性面板”对齐下拉菜单 中选左对齐，光标在Left1_03.gif右侧，输入一段文字 。,（2）使用“属性面板”或“文本”菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体类型、样式（如粗体或斜体）和大小。,（3）选中要编辑的文字，利用“属性面版”进行文本属性编辑。,（4）保存设计的网页。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,1使用表格控制页面布局,页面元素的布局和定位并不能随心所欲排版，借助表格，可实现所设想的任何排版效果。也可灵活使用表格的背景、框线等作出较美观的效果。,表格是用于在HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。虽然HTML 代码中通常不明确指定列，但Dreamweaver 允许操作列、行和单元格。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,1使用表格控制页面布局,（1）打开网页文档Homepage.htm，拖动鼠标选中页面中所有图像和文字，按Delete键删除。在“页面属性”中设置页面背景色为#7799ca，页面字体大小为12像素。在“文档工具栏”中输入页面标题为“风筝文化”。在“插入面版”的“通用”组中点击表格图标，弹出“表格”对话框 。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,1使用表格控制页面布局,（2）设置“行数”：2，“列数”：1，“表格宽度”：760像素，“边框宽度”：1像素，“单元格边距”：5，“单元格间距”：5，确定。,（3）点击表格第一行单元格定位光标，插入图像Logobar.jpg。,（4）在第二行单元格中插入图像Menubar.jpg。,（5）点击表格内上方区域，在工作区下方选择要选定的内容，点击选定整个表格，在“属性面板”中调整表格属性。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,2表格的嵌套,（1）在Dreamweaver中，选定整个表格，选择“编辑”“剪贴”命令，在“插入面版”的“通用”组中点击表格图标，再次建立表格，设置“行数”：2，“列数”：1，“表格宽度”：760像素，“边框宽度”：0像素，“单元格边距”：0，“单元格间距”：0。,（2）点击表格第一行标单元格定位光标，选择“编辑” “复制”命令。这个单元格内又套入了一个表格。,（3）点击外层表格中下方的单元格，再插入一个表格，参数设置为“行数”：1，“列数”：2，“表格宽度”：760像素，“边框宽度”：0像素，“单元格边距”：0，“单元格间距”：0。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,2表格的嵌套,（4）点击，选中最外层表格。在“属性面板”的设为白色或直接输入#FFFFFF。,（5）用鼠标点击内嵌的下面一个表格左侧单元格，光标定位在这个单元格内，点击，选中内层表格第一行的第一个单元格，在“属性面板”中设定高度为152。设置第二个单元格的对齐方式为“顶端”。,（6）在内嵌的下面一个表格的第一列插入图像Left1_03.gif，第二列中输入文本内容并调整文本格式和属性。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,2表格的嵌套,（4）点击，选中最外层表格。在“属性面板”的设为白色或直接输入#FFFFFF。,（5）用鼠标点击内嵌的下面一个表格左侧单元格，光标定位在这个单元格内，点击，选中内层表格第一行的第一个单元格，在“属性面板”中设定高度为152。设置第二个单元格的对齐方式为“顶端”。,（6）在内嵌的下面一个表格的第一列插入图像Left1_03.gif，第二列中输入文本内容并调整文本格式和属性。,（7）保存设计的网页Homepage.htm。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,3合并或拆分表格单元,只要整个选择部分的单元格形成一行或一个矩形，便可以合并任意数目的相邻的单元格，以生成一个跨多个列或行的单元格。可以将单元格拆分成任意数目的行或列，而不管之前它是否是合并的。Dreamweaver 可以自动重新构造表格以创建指定的排列方式。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,4导入导出,可以将在另一个应用程序（例如Microsoft Excel）中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开）保存的表格式数据导入到Dreamweaver 中并设置为表格的格式。也可以将表格数据从Dreamweaver 导出到文本文件中，相邻单元格的内容由分隔符隔开。可以使用逗号、冒号、分号或空格作为分隔符。当导出表格时，将导出整个表格，不能选择导出部分表格。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,5灵活运用表格设计精美页面,在Dreamweaver中，新建一个文档，用表格定位的方法，制作网页 。其中的表格线框是使用了一个“背景颜色”为灰色、“间距”为1像素的表格，所有单元格的“背景颜色”设为白色。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,6其他布局方法,（1）布局模式,Macromedia Dreamweaver MX 2004 提供了两种查看和操作表格的方式：在“标准模式”中，表格显示为行和列的网格，而“布局模式”允许在将表格用作基础结构的同时在页面上绘制、调整方框的大小以及移动方框。,与一般的表格不同，在任何一个位置拖动图标，“布局模式”都可以自动生成表格和单元格。另外，它能够自由拖动，所以再复杂的页面布局也可以轻松地制作出来。,在“布局模式”中，可以在添加内容前使用布局单元格和表格来对页面进行布局。例如，可以沿页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放置导航条，在右边绘制第三个单元格放置内容。添加内容时，您可以按需要在四周移动单元格，以调整布局。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,6其他布局方法,（2）层,层是用于精确定位的页面元素。可往层里加入图像、文本等其他页面元素，借助层，可对加入的页面元素进行精确定位，还可做出重叠效果和运动效果。,要往网页中加入层，点击“插入面板”上“布局”组中的“描绘层”图标，移动鼠标至Dreamweaver主窗口，鼠标即显示成十字型。在窗口区域拖动鼠标即可画出层。或者，点击菜单栏的“插入”“布局对像”“层”，主窗口即被加入一个层。,点击层的边线，即选中这个层。可用鼠标拖动，将层移至页面合适的位置。用鼠标拖动边线上的黑色方块，可调节层的大小。 用鼠标点击层内的任意位置，这时可往层内加入文本、图像等内容。层中可再嵌套层。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,7使用框架,框架结构提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML 文档的方法。框架结构将两个或两个以上的网页页面组合起来，能用同一个浏览器窗口打开，即多个页面合起来显示成一个页面的效果。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,7使用框架,使用框架具有以下优点：,（1）访问者的浏览器不需要为每个页面重新加载与导航相关的图形。能统一风格、便于制作和修改、方便访问；,（2）每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下） ，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,7使用框架,使用框架的缺点是：,（1）可能难以实现不同框架中各元素的精确图形对齐；,（2）对导航进行测试可能很耗时间；,（3）各个带有框架的页面的URL 不显示在浏览器中，因此访问者可能难以将特定页面设为书签。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,7使用框架,（1）在Dreamweaver中，新建一个基本HTML文档，建立一个框架结构，在菜单“查看”“可视化助理”中确认选中“框架边框”，在菜单“窗口”中确认选中“框架”以显示“框架面板”。,框架面板,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,7使用框架,（2）用鼠标点击框线，或在“框架面板”点击最外层边框，选择整个框架集在“文档工具栏”的“标题”后输入“风筝会”，选择“文件”“框架集另存为”命令，保存这个框架集文件，命名为page4.htm。,（3）在“框架面板”中点击左边的框体，在“属性面板”查看和设置框架属性，可在“源文件”后设置将要在本区域显示的已经编辑好的HTML页面。我们在“源文件”后设置为已经编辑好的一个网页文档page4_l.htm,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,7使用框架,（4）在设计窗口中点击某区域编辑修改或直接建立HTML页面。,在右侧上边的分栏中设计网页，编辑后用菜单“文件”中的“保存框架”或“框架另存为”保存为page4_t_1.htm。同样，在下边的分栏中设计网页并用菜单“框架另存为” 保存为page4_1_1.htm。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.3 页面布局,7使用框架,（5）在“框架面板”点击最外层边框，选择整个框架集，在“属性面板” 中设置“边框”为“否”，意为在浏览器中不显示边框。设边框宽度为“0”，意为在浏览器中不占用空间。菜单“文件”“保存框架页”以保存对框架集的修改 。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.4 链接与导航,Dreamweaver MX 2004 提供多种创建超文本链接的方法，可创建到文档、图像、多媒体文件或可下载软件的链接。可以建立到文档内任意位置的任何文本或图像（包括标题、列表、表、层或框架中的文本或图像）的链接。若要直观地查看文件是如何链接在一起的，可使用站点地图。在站点地图中，可以向站点添加新文档、创建和删除文档链接以及检查到相关文件的链接。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.4 链接与导航,2客户端图像地图,可使一个图像的不同部位分别链接到不同的页面，这叫作客户端图像映射或客户端图像地图。,在图像“属性面板”扩展模式左下方有一项为“地图”，用以进行客户端图像映射。在其后可填入你为这个映射起的名字，若不填，则Dreamweaver自动加上一个名字。“地图”下面有三个图标，从左到右依次为截取矩形、截取圆形和截取不规则图形。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.4 链接与导航,2客户端图像地图,（1）打开前面建立的网页Homepage.htm，点击选中最上面的图像，在“属性面板”中点击截取矩形，在图像中右上角环绕“关于我们”部分画一矩形，这个形状成为“热点” 。,（ 2）在“热点”的“属性面板”中给“热点”设置超级链接，用同样方法给右边“联系留言”部分建立热点链接，在“链接”栏输入mailto：，后面输入一个Email地址。,（3）保存文档。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.4 链接与导航,3导航条,导航条一般由几个图像构成，点击不同的图像，将链接到网站不同的页面。通过统一导航条的方法，我们可以实现网站风格的统一，同时也方便了访问者在不同页面间的跳转。,在建立导航条之前，我们先做一些准备工作，使用图像处理软件，把前面例子中的菜单图像Menubar.jpg切割成多块，并把要在网页中建立链接的每部分图像的背景和文字更换不同颜色另存两份,9.2 用Dreamweaver MX 2004设计站点网页,9.2.4 链接与导航,3导航条,（1）在Dreamweaver中，删除图像Menubar.jpg，加入一个表格，在每单元格插入切成小块的图像，使其看起来就像原来的图像Menubar.jpg。,（2）选中有“风筝荟萃”字样的Menubar3_1.jpg。选择“插入” “图像对象” “导航条”，或在“插入面板”栏的“常用”类别中，单击“图像”菜单并选择“插入导航条”按钮，打开“插入导航条”对话框。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.4 链接与导航,3导航条,导航条项目有四种状态：,一般：用户尚未单击或尚未与此项目交互时所显示的图像。设为Menubar3_1.jpg。,滑过：指鼠标指针滑过“一般”图像时所显示的图像。项目的外观发生变化，以便让用户知道可与这个项目进行交互。设为Menubar3_2.jpg。,按下：指项目被单击后所显示的图像。设为Menubar3_3.jpg。,按下时鼠标经过：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。可不做设置。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.4 链接与导航,3导航条,（3）在“按下时，前往的URL”后设置要链接的网页。设定完成后确定。,当鼠标移至“风筝荟萃”时变为白底黑字,当鼠标在“风筝荟萃”上按下时变为橙底白字,9.2 用Dreamweaver MX 2004设计站点网页,9.2.5 其他设计要素,1.利用最新多媒体技术,Macromedia Dreamweaver MX 2004 可以迅速、方便地向Web 站点添加声音和影片，可以在Dreamweaver 自身内插入Macromedia Flash MX 2004 按钮和文本对象等。可以在文档中插入：Flash 和Shockwave 影片、QuickTime、AVI、Java applet、Active X 控件以及各种格式的音频文件等。可以在使用Dreamweaver 时在文档中创建、插入和修改Flash 按钮而无须使用Macromedia Flash。可以自定义Flash 按钮对象，并添加文本、背景颜色以及指向其他文件的链接。Flash 文本对象允许您创建和插入只包含文本的Flash 影片。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.5 其他设计要素,2. CSS样式表,CSS即Cascading Style Sheet或样式表，是可以定义HTML标签所无法表现的属性的补充性语言。样式表的另外一个优点就是，在对很多网页文件设置同一种属性时，无须对所有文件进行反复操作，只要应用样式表就可以更加便利、快捷地进行操作。在Dreamweaver 中只需要单击几次，就可以在字体、链接、表格、图片、层等构成网页文件的所有元素属性中应用样式表。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.5 其他设计要素,3表单,表单的作用就是能使访问者与网站或网站管理人交互。利用表单，可根据访问者输入的信息，自动生成页面反馈给访问者；利用表单，还可以为网站收集访问者输入的信息。表单的使用其实可分为两部分。一部分是表单本身，即怎样把表单作为页面元素加入到网页页面。另一部分为表单的处理，即调用服务器端的脚本程序，或是以电子邮件的方式发送。在Dreamweaver 中利用“插入面板”的“表单”类别中的图标建立表单。,9.2 用Dreamweaver MX 2004设计站点网页,9.2.5 其他设计要素,4行为与JavaScript,Dreamweaver 中行为指的是能够简单运用制作动态网页的JavaScript功能。网页的动态效果，要往网页页面里插入JavaScript小程序。Dremweaver能自动生成一些JavaScript代码来实现动态效果，使不会JavaScript的人也能制作出动态的网页。利用Dreamweaver的Behavior，能做出很有用的页面效果。如果想运用行为，首先要选择运行行为的对象，然后决定要发生的动作，还要设置决定实施的动作在何种情况下发生的事件。即行为由动作和事件组成。在Dreamweaver的“行为面板”中，可以选择需要的行为。另外也可以在网页中插入自己的JavaScript代码。,9.3 测试和上传,9.3.1 测试,可以通过运行“站点报告”测试整个站点并解决出现的问题。,确保页面在目标浏览器中能够如预期的那样工作，并确保这些页面在其他浏览器中要么工作正常，要么“明确地拒绝工作”。页面在不支持样式、层、插件或JavaScript 的浏览器中应清晰可读且功能正常。对于在较早版本的浏览器中根本无法运行的页面，应考虑使用“检查浏览器”行为，自动将访问者重定向到其他的页面。,应尽可能多地在不同的浏览器和平台上预览页面。以便查看布局、颜色、字体大小和默认浏览器窗口大小等方面的区别，这些区别在目标浏览器检查中是无法预见的。,9.3 测试和上传,9.3.1 测试,检查站点是否有断开的链接，并修复断开的链接。由于其他站点也在重新设计、重新组织，您所链接的页面可能已被移动或删除。可运行链接检查报告对链接进行测试。,监测页面的文件大小以及下载这些页面所占用的时间。对于由大型表格组成的页面，在某些浏览器中，在整张表完全载入之前，访问者将什么也看不到。应考虑将大型表格分为几部分；如果不可能这样做，考虑将少量内容放在表以外的页面顶部，这样在下载表的同时，用户可以查看这些内容。,运行一些站点报告来测试并解决整个站点的问题。可以检查整个站点是否存在问题，例如无标题文档、空标签以及冗余的嵌套标签等。,9.3 测试和上传,9.3.1 测试,检查代码中是否存在标签或语法错误。,在完成对大部分站点的大部分发布以后，应继续对站点进行更新和维护。站点的发布（即激活站点）可以通过多种方式完成，而且是一个持续的过程。这一过程的一个重要部分是定义并实现一个版本控制系统，既可以使用Dreamweaver 中所包含的工具，也可以使用外部的版本控制应用程序。,9.3 测试和上传,9.3.2 上传,上传网页的方法有，在Dreamweaver的“文件面板”中上传、用FTP软件上传、上传到账户提供商网站上等方法。,（1）点击菜单“站点” “管理站点”编辑站点属性，在高级页中，设置远程信息。,访问：FTP。,FTP主机：FTP地址。,主机目录：如果没有特别规定，为空。,登陆：你的用户名。,密码：密码。,9.3 测试和上传,9.3.2 上传,（2）点“防火墙设置”按钮，在参数选择窗口，防火墙主机里输入FTP地址，防火墙端口中输入端口值，常见的是21，这要看空间服务商的规定。,（3）点击“测试”按钮完成测试。然后点“测试服务器”。正确后确认退出。,在“文件面板”，点击连接到远端主机按钮 ，连接成功后，点上传文件按钮，完成文件的上传。,
展开阅读全文