《多媒体制作技术及应用》ch 网站设计_第1页
《多媒体制作技术及应用》ch 网站设计_第2页
《多媒体制作技术及应用》ch 网站设计_第3页
《多媒体制作技术及应用》ch 网站设计_第4页
《多媒体制作技术及应用》ch 网站设计_第5页
已阅读5页，还剩81页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第九章网站设计9.1网站设计基本知识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文件应应具有下面面的结构：：<HTML> HTML文件件开始<HEAD>文文件头开始始..</HEAD>文文件头结束束<BODY> 文件件体开始..</BODY>文文件体结结束</HTML>HTML文文件结束9.1网网站设计计基本知识识9.1.4HTML语言言3．基本标标签的使用用（1）HTML标签签<HTML>这个标签告告诉浏览器器在<HTML>……</HTML>之间的的文件是用用HTML编写的文文档。（2）文档档头标签<HEAD><HEAD>…</HEAD>之之间包含的的是HTML文档名名称。（3）文档档名称标签签<TITLE><TITLE>……</TITLE>之间包包含的是具具体的HTML文档档名称，字字符数通常常不超过64。（4）正文文标签<BODY><BODY>…</BODY>之之间是正文文部分，这这是HTML文档最最多的部分分，它包含含的是显示示在浏览器器文本窗口口中的文档档内容。9.1网网站设计计基本知识识9.1.4HTML语言言3．．基基本本标标签签的的使使用用（5））标标题题（（Heading））标标签签<Hn>HTML定定义义了了6个个等等级级的的标标题题标标签签，，其其中中n＝＝1，，2，，……，，6。。<Hn>……</Hn>之之间间包包含含的的是是第第n级级标标题题。。（6）段落（（Paragraph））标签<P><P>…</P>之之间包含的是是一段文本。。HTML中中没有使用硬硬换行（carriagereturn）来来分段落，也也不承认多个个连续的空格格，这是与字字处理软件不不同的。在HTML文档档中，<P>和</P>之间不论有有多少行，不不论每一行有有多长或者多多短，也不论论其间有多少少个空格，浏浏览器都把它它作为一个段段落来处理。。9.1网网站设计基本本知识9.1.4HTML语言3．基本标签签的使用（7）列表标标签<UL>、<OL>和<LI>HTML支持持无编号列表表和有编号列列表，而且还还可以在列表表中嵌套列表表。<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）标签签<BLOCKQUOTE><BLOCKQUOTE>…</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>生成一条用于于分割文档的的水平线，其其长度与浏览览器窗口等宽宽，粗细和长长短都可设置置。（14）嵌入入图像标签<IMGsrc="image-url">如<IMGsrc="image-url">或<IMGsrc="image-urd"alt="Text">，，image-url是是图像文件的的URL。目目前，大部分分浏览器支持持.GIF和.JPEG文件件。alt属属性告诉不支支持图图像的的浏览器用Text代替替该图。9.1网网站设计基本本知识9.1.4HTML语言3．基基本标标签的的使用用（15）表表格标标签<TABLE>表格的的基本本形式式：一一个表表由<TABLE>开始始，</TABLE>结结束，，表的的内容容由<TR>,<TH>和<TD>定定义。。<TR>说明明表的的一个个行，，表有有多少少行就就有多多少个个<TR>；<TH>说说明表表的列列数和和相应应栏目目的名名称，，有多多少个个栏就就有多多少个个<TH>；<TD>则则填充充由<TR>和和<TH>组成成的表表格。。是否否用表表格线线分开开为部部分内内容用用border属性性说明明。9.1网网站站设计计基本本知识识9.1.4HTML语言言4．常常用HTML标标签（1））基本本标签签（2））标题题标签签（3））文档档整体体属性性（4））文本本标签签（5））链接接（6））格式式排版版（7））图形形元素素（8））表格格（9））表格格属性性（10）框框架（11）框框架属属性（12）表表单9.1网网站站设计计基本本知识识9.1.5Dreamweaver介介绍1．Dreamweaver简介介Dreamweaver是当当前最最流行行的网网页设设计软软件。。它与与同为为Macromedia公司司出品品的Fireworks和Flash一道道，被被誉为为网页页制作作三剑剑客。。MacromediaDreamweaverMX是是一一款款专专业业的的HTML编编辑辑器器，，用用于于对对Web站站点点、、Web页页和和Web应应用用程程序序进进行行设设计计、、编编码码和和开开发发。。无无论论愿愿意意享享受受手手工工编编写写HTML代代码码时时的的驾驾驭驭感感还还是是偏偏爱爱在在可可视视化化编编辑辑环环境境中中工工作作，，Dreamweaver都都会会提提供供有有用用的的工工具具。。9.1网网站站设设计计基基本本知知识识9.1.5Dreamweaver介介绍绍1．．Dreamweaver简简介介利用Dreamweaver中的的可视化化编辑功功能，可可以快速速地创建建页面而而无须编编写任何何代码。。可以查查看所有有站点元元素或资资源并将将它们从从易于使使用的面面板直接接拖到文文档中。。可以在在MacromediaFireworks或或其他他图形应应用程序序中创建建和编辑辑图像，，然后将将它们直直接导入入Dreamweaver，，或者添添加MacromediaFlash对对象，，从而优优化开发发工作流流程。9.1网网站站设计基基本知识识9.1.5Dreamweaver介介绍2．DreamweaverMX操作界界面插入面板板文档工具箱网页设计区属性区面板组9.1网网站站设计基基本知识识9.1.5Dreamweaver介介绍2．DreamweaverMX操作界界面DreamweaverMX操作作界面主主要的构构成元素素：菜单区和其他的的软件一一样，该该软件所所有的操操作命令令都可以以从这一一个区内内找到，，例如，，选中菜菜单“编编辑”中中的“首首选参数数”，或或按快快捷键CTRL+U，，可以把把自己的的DreamweaverMX设设置为““设计者者”或““代码编编写者””工作作区布局局风格。。9.1网网站站设计基基本知识识9.1.5Dreamweaver介介绍2．DreamweaverMX操作界界面DreamweaverMX操作作界面主主要的构构成元素素：插入项目目选择工工具插入项目目选择工工具又称称“对象象面板””或“插插入面板板”，在在插入面面板选中中了某个个图标，，可在页页面中的的插入相相应项目目。点击击向下按按钮在下下拉菜单单中可选选择各类类项目图图标，若若选择““显示为为制表符符”，本本面板显显示为另另一种形形式。9.1网网站设计基本本知识9.1.5Dreamweaver介绍2．DreamweaverMX操作界面DreamweaverMX操作作界面主要的的构成元素：：文档工具栏文档工具栏可可将网页设计计区快速切换换为“代码视视图”、“设设计视图”、、“拆分视图图”。工具栏栏中还包含一一些与查看文文档、在本地地和远程站点点间传输文档档有关的常用用命令和选项项。网页设计区你所设计的网网页或代码将将出现在该区区。属性区属性区也成为为属性面板，，在该区可以以对选中的对对象进行一些些设置，选择择不同的网页页元素，属性性面板所显示示的内容也有有所不同。9.2用用DreamweaverMX2004设设计站点网页页9.2.1了了解用DreamweaverMX2004制作网页页1.设计简单单的主页通过一个实例例页面的制作作过程，我们们可以熟悉新新建文档、插插入内容、设设置页面属性性、保存、预预览等基本功功能。首先，，在硬硬盘上上建立立一个个文件件夹，，再在在其中中建立立一个个命名名为images的的子文文件夹夹，另另准备备两幅幅要置置入网网页中中的图图像文文件，，复制制到images子子文件件夹。。本例例中的的两幅幅图分分别为为Logo1_1.jpg和和Welcome.gif，，图像像大小小分别别为356×80象象素和和600××300象象素。。9.2用用DreamweaverMX2004设计计站点点网页页9.2.1了解解用DreamweaverMX2004制作作网页页1.设设计简简单的的主页页（1））启动动DreamweaverMX2004，，选择择“文文件””→““新建建”命命令，，新建建一个个文档档。出出现新新建文文档对对话框框。选择基基本页页的HTML并并单击击“创创建””按钮钮，创创建一一个默默认的的空白白页。。9.2用用DreamweaverMX2004设计计站点点网页页9.2.1了解解用DreamweaverMX2004制作作网页页1.设设计简简单的的主页页（2））选择择“文文件””→““另存存为””命令令，将将文件件路径径指定定为前前面建建立的的文件件夹，，给文文件起起一个个名字字index.htm。。在进行行具体体制作作之前前，我我们点点击文文档工工具栏栏的代代码按按钮或或拆分分按钮钮，可可以看看到Dreamweaver为这这个空空文件件生成成的HTML代代码。。9.2用用DreamweaverMX2004设计计站点点网页页9.2.1了解解用DreamweaverMX2004制作作网页页1.设设计计简简单单的的主主页页（5））点点击击属属性性面面板板下下面面的的““页页面面属属性性””按按钮钮或或选选择择““修修改改””→→““页页面面属属性性””命命令令，，打打开开““页页面面属属性性””对对话话框框。。在页页面面属属性性对对话话框框中中将将背背景景颜颜色色设设置置为为f9b779，，页页面面字字体体保保持持默默认认字字体体，，大大小小设设为为12像像素素，，左左边边距距、、右右边边距距、、上上边边距距和和下下边边距距均均设设为为0。。9.2用用DreamweaverMX2004设设计计站站点点网网页页9.2.1了了解解用用DreamweaverMX2004制制作作网网页页1.设设计计简简单单的的主主页页（6））在在““插插入入对对象象面面板板””的的常常用用类类中中单单击击图图像像图图标标，，在在““选选择择图图像像源源文文件件””对对话话框框中中选选择择images文文件件夹夹中中的的Logo1_1.jpg。。插插入入图图像像后后鼠鼠标标点点击击图图像像右右侧侧使使光光标标移移到到图图像像右右边边，，多多次次按按回回车车将将光光标标定定位位在在合合适适位位置置，，用用同同样样方方法法将将图图像像Welcome.gif插插入入到到页页面面。。（7）在编辑辑过程中可以以随时在浏览览器中预览以以确定效果，，按键盘上F12键或点点击Dreamweaver中文档档工具栏中预预览按钮之后后选“预览在在iexplore”，，可以在浏览览器中察看我我们制作的网网页结果。9.2用用DreamweaverMX2004设设计站点网页页9.2.1了了解用DreamweaverMX2004制作网页页1.设计简单单的主页9.2用用DreamweaverMX2004设设计站点网页页9.2.1了了解用DreamweaverMX2004制作网页页1.设计简单单的主页（8）回到Dreamweave，，点击选中下下面一幅图像像Welcome.gif，在下面面的“属性面面板”中可以以调整其在HTML文档档中的属性。。9.2用用DreamweaverMX2004设设计站点网页页9.2.1了了解用DreamweaverMX2004制作网页页1.设计简单单的主页（9）点击右右面的居中对对齐按钮使得得图像在显示示时处于页面面中央，设置置“边框”值值为0。（10）在设设计窗口点击击图像右边区区域并按回车车使光标移到到图像下方，，输入文字““欢迎！点击击进入...”。拖动鼠鼠标选中刚才才输入的文字字，在“属性性面板”中改改为居中对齐齐。（11）为建建立链接，新新建一个HTML文档取取名为Homepage.htm，，保存并关闭闭该文档。（12）回到到index.htm，，点击选中图图像Welcome.gif，在属属性面板中点点击“链接编编辑框”后面面的浏览文件件图标，在弹弹出的“选择择文件对话框框”中选择Homepage.htm。9.2用用DreamweaverMX2004设计站点点网页9.2.1了解用DreamweaverMX2004制作作网页1.设计简简单的主页页（13）拖拖动鼠标选选择文字““欢迎！点点击进入...”，，以同样方方法建立链链接到Homepage.htm。在在浏览器中中察看网页页的实际效效果，点击击网页中下下方的图像像或文字，，可以链接接到另一页页。9.2用用DreamweaverMX2004设计站点点网页9.2.1了解用DreamweaverMX2004制作作网页1.设计简简单的主页页（14）回回到Dreamweave，，保存刚才才设计的网网页。至此完成本本页面的制制作，点击击代码按钮钮可以看到到Dreamweaver生生成的HTML代码码。9.2用用DreamweaverMX2004设计站点点网页9.2.1了解用DreamweaverMX2004制作作网页1.设计简简单的主页页为了不影响响网页的下下载速度，，图像要用用得少而精精，使用图图像处理软软件在不失失真的情况况下尽量压压缩。浏览器能识识别的图像像有jpg（jpeg）、gif、png和bmp等，，Dreamweaver能能较好支持持的有jpg、gif和png。目前网上用用的最多的的是jpg和gif，因为这这两种格式式文件体积积较小。Gif格式式的图像用用工具处理理后能去掉掉本身的背背景，而很很好地和页页面融合，，还能做成成动画。在Dreamweaver中中选中网页页中的图像像后，可使使用“属性性面板”调调整其在网网页中的属属性。9.2用用DreamweaverMX2004设计站点点网页9.2.1了解用DreamweaverMX2004制作作网页2．站点管管理用Dreamweaver制制作网页，，为了以后后的方便，，最好首先先定义一个个本地站点点。其实，，使用网页页编辑器比比起直接手手写代码最最大的优势势就在于站站点管理。。用Dreamweaver，可以很很方便的对对站点内文文件进行改改名或删除除操作，其其站点管理理能自动修修改其他页页面指向这这个文件的的链接。使使用Dreamweaver的模版和和库，可让让站点内的的部分页面面共用相同同的部分，，还可方便便的统一更更新。Dreamweaver还自带带FTP功功能，可进进行远程管管理。9.2用用DreamweaverMX2004设计站点点网页9.2.1了解用DreamweaverMX2004制作作网页2．站点管管理（1）要新新建一个本本地站点，，需点击Dreamweaver菜单单栏的“站站点”→““管理站点点”命令，，弹出“管管理站点””对话框。。9.2用用DreamweaverMX2004设计站点点网页9.2.1了解用DreamweaverMX2004制作作网页2．站点管管理（2）单击击“新建””按钮，弹弹出“站点点定义”对对话框，在在基本页填填入你给这这个站点的的命名。在在对话框““高级”页页“本地根根文件夹””设置这个个站点在本本地所在的的文件夹，，用以模拟拟本地站点点的根目录录。9.2用用DreamweaverMX2004设计站点点网页9.2.1了解用DreamweaverMX2004制作作网页2．站点管管理（3）选中中“自动刷刷新本地文文件列表””前的选框框，则将来来当有新的的文件复制制到本地文文件夹时，，Dreamweaver将将对这个本本地站点的的目录列表表自动更新新。（4）在HTTP地地址后可以以填入这个个站点的网网址。（5）选中中“启用缓缓存”复选选框，则Dreamweaver会给给这个本地地站点设置置一个缓存存，以提高高站点管理理的速度。。（6）设设置完毕毕后，点点击“确确定”按按钮，完完成本地地站点设设置。9.2用用DreamweaverMX2004设计站站点网页页9.2.1了解解用DreamweaverMX2004制制作网页页2．站点点管理准备三幅幅图把它它们存入入images文件夹夹。Logobar.jpg图图像大大小为760××80像像素；Menubar.jpg760××20像像素9.2用用DreamweaverMX2004设计站站点网页页9.2.1了解解用DreamweaverMX2004制制作网页页2．站点点管理Left1_03.gif152×363像像素9.2用用DreamweaverMX2004设计站站点网页页9.2.1了解解用DreamweaverMX2004制制作网页页2．站点点管理在“文件件面板””文件列列表上的的上一节节建立的的空文件件Homepage.htm上点右右键，选选“打开开”，打打开Homepage.htm文档档，也可可在文件件列表双双击打开开该文件件，“文文件面板板”文件件列表上上展开images文文件夹，，拖动图图像Logobar.jpg到设计计视图，，把光标标移到图图像右侧侧再按键键盘上““Shift””+“回回车”键键，把Menubar.jpg拖过过来，再再把光标标移到右右侧按键键盘上““Shift””+“回回车”键键，用同同样方法法拖入图图像Left1_03.gif，设设置文档档的标题题为“风风筝网站站”，保保存该网网页。9.2用用DreamweaverMX2004设计站站点网页页9.2.1了解解用DreamweaverMX2004制制作网页页2．站点点管理按F12键在浏浏览器中中预览结结果9.2用用DreamweaverMX2004设计站站点网页页9.2.2文文本编编辑MacromediaDreamweaverMX2004提提供了了多种向向文档中中添加文文本和设设置文本本格式的的方法。。可以插插入文本本、设置置字体类类型、大大小、颜颜色和对对齐属性性，以及及使用层层叠样式式表（CSS））样式式创建和和应用自自己的自自定义样样式。Dreamweaver允许许通过以以下方式式在Web页页中添加加文本：：直接将将文本键键入页中中，从其其他文档档复制和和粘贴文文本，或或从其他他应用程程序拖放放文本。。Web专业业人员接接受的、、包含能能够合并并到Web页页的文本本内容的的常见文文档类型型有ASCII文本本文件、、RTF文件件和MSOffice文文档。Dreamweaver可以以从这些些文档类类型中的的任何一一种取出出文本，，然后将将文本并并入Web页页中。9.2用用DreamweaverMX2004设设计站点网页页9.2.2文文本编辑辑（1）打开前前面建好的网网页Homepage.htm。选选中图像Left1_03.gif，在“属性性面板”对齐齐下拉菜单中中选左对齐齐，光标在Left1_03.gif右侧，输输入一段文字字。（2）使用““属性面板””或“文本””菜单中的选选项可以设置置或更改所选选文本的字体体特性。可以以设置字体类类型、样式（（如粗体或斜斜体）和大小小。（3）选中要要编辑的文字字，利用“属属性面版”进进行文本属性性编辑。（4）保存设设计的网页。。9.2用用DreamweaverMX2004设设计站点网页页9.2.3页页面布局局1．使用表格格控制页面布布局页面元素的布布局和定位并并不能随心所所欲排版，借借助表格，可可实现所设想想的任何排版版效果。也可可灵活使用表表格的背景、、框线等作出出较美观的效效果。表格是用于在在HTML页页上显示表表格式数据以以及对文本和和图形进行布布局的强有力力的工具。表表格由一行或或多行组成；；每行又由一一个或多个单单元格组成。。虽然HTML代码中中通常不明确确指定列，但但Dreamweaver允许操操作列、行和和单元格。9.2用用DreamweaverMX2004设设计站点网页页9.2.3页页面布局局1．使用表格格控制页面布布局（1）打开网网页文档Homepage.htm，拖动鼠标标选中页面中中所有图像和和文字，按Delete键删除。在在“页面属性性”中设置页页面背景色为为#7799ca，页面面字体大小为为12像素。。在“文档工工具栏”中输输入页面标题题为“风筝文文化”。在““插入面版””的“通用””组中点击表表格图标，弹弹出“表格””对话框。。9.2用用DreamweaverMX2004设设计站点网页页9.2.3页页面布局局1．使用表格格控制页面布布局（2）设置““行数”：2，“列数””：1，“表表格宽度”：：760像素素，“边框宽宽度”：1像像素，“单元元格边距”：：5，“单元元格间距”：：5，确定。。（3）点击击表格第一一行单元格格定位光标标，插入图图像Logobar.jpg。（4）在第第二行单元元格中插入入图像Menubar.jpg。（5）点击击表格内上上方区域，，在工作区区下方选择择要选定的的内容，点点击<table>选定整个个表格，在在“属性面面板”中调调整表格属属性。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局2．表格的的嵌套（1）在Dreamweaver中，，选定整个个表格，选选择“编辑辑”→“剪剪贴”命令令，在“插插入面版””的“通用用”组中点点击表格图图标，再次次建立表格格，设置““行数”：：2，“列列数”：1，“表格格宽度”：：760像像素，“边边框宽度””：0像素素，“单元元格边距””：0，““单元格间间距”：0。（2）点击击表格第一一行标单元元格定位光光标，选择择“编辑””→“复复制”命令令。这个单单元格内又又套入了一一个表格。。（3）点击击外层表格格中下方的的单元格，，再插入一一个表格，，参数设置置为“行数数”：1，，“列数””：2，““表格宽度度”：760像素，，“边框宽宽度”：0像素，““单元格边边距”：0，“单元元格间距””：0。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局2．表格的的嵌套（4）点击击<table>，，选中最外外层表格。。在“属性性面板”的的设为白色色或直接输输入#FFFFFF。（5）用鼠鼠标点击内内嵌的下面面一个表格格左侧单元元格，光标标定位在这这个单元格格内，点击击<td>，选中内内层表格第第一行的第第一个单元元格，在““属性面板板”中设定定高度为152。设设置第二个个单元格的的对齐方式式为“顶端端”。（6）在内内嵌的下面面一个表格格的第一列列插入图像像Left1_03.gif，第二列列中输入文文本内容并并调整文本本格式和属属性。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局2．表格的的嵌套（4）点击击<table>，，选中最外外层表格。。在“属性性面板”的的设为白色色或直接输输入#FFFFFF。（5）用鼠鼠标点击内内嵌的下面面一个表格格左侧单元元格，光标标定位在这这个单元格格内，点击击<td>，选中内内层表格第第一行的第第一个单元元格，在““属性面板板”中设定定高度为152。设设置第二个个单元格的的对齐方式式为“顶端端”。（6）在内内嵌的下面面一个表格格的第一列列插入图像像Left1_03.gif，第二列列中输入文文本内容并并调整文本本格式和属属性。（7）保存存设计的网网页Homepage.htm。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局3．合并或或拆分表格格单元只要整个选选择部分的的单元格形形成一行或或一个矩形形，便可以以合并任意意数目的相相邻的单元元格，以生生成一个跨跨多个列或或行的单元元格。可以以将单元格格拆分成任任意数目的的行或列，，而不管之之前它是否否是合并的的。Dreamweaver可以自自动重新构构造表格以以创建指定定的排列方方式。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局4．导入导导出可以将在另另一个应用用程序（例例如MicrosoftExcel）中创建建并以分隔隔文本的格格式（其中中的项以制制表符、逗逗号、冒号号、分号或或其他分隔隔符隔开））保存的表表格式数据据导入到Dreamweaver中中并设置为为表格的格格式。也可可以将表格格数据从Dreamweaver导导出到文本本文件中，，相邻单元元格的内容容由分隔符符隔开。可可以使用逗逗号、冒号号、分号或或空格作为为分隔符。。当导出表表格时，将将导出整个个表格，不不能选择导导出部分表表格。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局5．灵活运运用表格设设计精美页页面在Dreamweaver中中，新建一一个文档，，用表格定定位的方法法，制作网网页。其其中的表格格线框是使使用了一个个“背景颜颜色”为灰灰色、“间间距”为1像素的表表格，所有有单元格的的“背景颜颜色”设为为白色。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局6．其他布布局方法（1）布局局模式MacromediaDreamweaverMX2004提供供了两种查查看和操作作表格的方方式：在““标准模式式”中，表表格显示为为行和列的的网格，而而“布局模模式”允许许在将表格格用作基础础结构的同同时在页面面上绘制、、调整方框框的大小以以及移动方方框。与一般的表表格不同，，在任何一一个位置拖拖动图标，，“布局模模式”都可可以自动生生成表格和和单元格。。另外，它它能够自由由拖动，所所以再复杂杂的页面布布局也可以以轻松地制制作出来。。在“布局模模式”中，，可以在添添加内容前前使用布局局单元格和和表格来对对页面进行行布局。例例如，可以以沿页的顶顶部绘制一一个单元格格放置标题题图形，在在页的左边边绘制另一一个单元格格放置导航航条，在右右边绘制第第三个单元元格放置内内容。添加加内容时，，您可以按按需要在四四周移动单单元格，以以调整布局局。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局6．其他布布局方法（2）层层是用于精精确定位的的页面元素素。可往层层里加入图图像、文本本等其他页页面元素，，借助层，，可对加入入的页面元元素进行精精确定位，，还可做出出重叠效果果和运动效效果。要往往网网页页中中加加入入层层，，点点击击““插插入入面面板板””上上““布布局局””组组中中的的““描描绘绘层层””图图标标，，移移动动鼠鼠标标至至Dreamweaver主主窗窗口口，，鼠鼠标标即即显显示示成成十十字字型型。。在在窗窗口口区区域域拖拖动动鼠鼠标标即即可可画画出出层层。。或或者者，，点点击击菜菜单单栏栏的的““插插入入””→→““布布局局对对像像””→→““层层””，，主主窗窗口口即即被被加加入入一一个个层层。。点击层的边线线，即选中这这个层。可用用鼠标拖动，，将层移至页页面合适的位位置。用鼠标标拖动边线上上的黑色方块块，可调节层层的大小。用用鼠标点击击层内的任意意位置，这时时可往层内加加入文本、图图像等内容。。层中可再嵌嵌套层。9.2用用DreamweaverMX2004设设计站点网页页9.2.3页页面布局局7．使用框架架框架结构提供供将一个浏览览器窗口划分分为多个区域域、每个区域域都可以显示示不同HTML文档的的方法。框架架结构将两个个或两个以上上的网页页面面组合起来，，能用同一个个浏览器窗口口打开，即多多个页面合起起来显示成一一个页面的效效果。9.2用用DreamweaverMX2004设设计站点网页页9.2.3页页面布局局7．使用框架架使用框架具有有以下优点：：（1）访问者者的浏览器不不需要为每个个页面重新加加载与导航相相关的图形。。能统一风格格、便于制作作和修改、方方便访问；（2）每个框框架都具有自自己的滚动条条（如果内容容太大，在窗窗口中显示不不下），因因此访问者可可以独立滚动动这些框架。。例如，当框框架中的内容容页面较长时时，如果导航航条位于不同同的框架中，，那么向下滚滚动到页面底底部的访问者者就不需要再再滚动回顶部部来使用导航航条。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局7．使用框框架使用框架的的缺点是：：（1）可能能难以实现现不同框架架中各元素素的精确图图形对齐；；（2）对导导航进行测测试可能很很耗时间；；（3）各个个带有框架架的页面的的URL不不显示在在浏览器中中，因此访访问者可能能难以将特特定页面设设为书签。。9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局7．使用框框架（1）在Dreamweaver中，，新建一个个基本HTML文档档，建立一一个框架结结构，在菜菜单“查看看”→“可可视化助理理”中确认认选中“框框架边框””，在菜单单“窗口””中确认选选中“框架架”以显示示“框架面面板”。框架面板9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局7．使用框框架（2）用鼠鼠标点击框框线，或在在“框架面面板”点击击最外层边边框，选择择整个框架架集在“文文档工具栏栏”的“标标题”后输输入“风筝筝会”，选选择“文件件”→“框框架集另存存为”命令令，保存这这个框架集集文件，命命名为page4.htm。。（3）在““框架面板板”中点击击左边的框框体，在““属性面板板”查看和和设置框架架属性，可可在“源文文件”后设设置将要在在本区域显显示的已经经编辑好的的HTML页面。我我们在“源源文件”后后设置为已已经编辑好好的一个网网页文档page4_l.htm9.2用用DreamweaverMX2004设计站点点网页9.2.3页面面布局7．使用框框架（4）在设计计窗口中点击击某区域编辑辑修改或直接接建立HTML页面。在右侧上边的的分栏中设计计网页，编辑辑后用菜单““文件”中的的“保存框架架”或“框架架另存为”保保存为page4_t_1.htm。同样，在在下边的分栏栏中设计网页页并用菜单““框架另存为为”保存为为page4_1_1.htm。9.2用用DreamweaverMX2004设设计站点网页页9.2.3页页面布局局7．使用框架架（5）在“框框架面板”点点击最外层边边框，选择整整个框架集，，在“属性面面板”中设设置“边框””为“否”，，意为在浏览览器中不显示示边框。设边边框宽度为““0”，意为为在浏览器中中不占用空间间。菜单“文文件”→“保保存框架页””以保存对框框架集的修改改。9.2用用DreamweaverMX2004设设计站点网页页9.2.4链链接与导导航DreamweaverMX2004提提供多种创建建超文本链接接的方法，可可创建到文档档、图像、多多媒体文件或或可下载软件件的链接。可可以建立到文文档内任意位位置的任何文文本或图像（（包括标题、、列表、表、、层或框架中中的文本或图图像）的链接接。若要直观观地查看文件件是如何链接接在一起的，，可使用站点点地图。在站站点地图中，，可以向站点点添加新文档档、创建和删删除文档链接接以及检查到到相关文件的的链接。9.2用用DreamweaverMX2004设设计站点网页页9.2.4链链接与导导航2．客户户端图像像地图可使一个个图像的的不同部部位分别别链接到到不同的的页面，，这叫作作客户端端图像映映射或客客户端图图像地图图。在图像““属性面面板”扩扩展模式式左下方方有一项项为“地地图”，，用以进进行客户户端图像像映射。。在其后后可填入入你为这这个映射射起的名名字，若若不填，，则Dreamweaver自动加加上一个个名字。。“地图图”下面面有三个个图标，，从左到到右依次次为截取取矩形、、截取圆圆形和截截取不规规则图形形。9.2用用DreamweaverMX2004设计站站点网页页9.2.4链链接与与导航2．客户户端图像像地图（1）打打开前面面建立的的网页Homepage.htm，，点击选选中最上上面的图图像，在在“属性性面板””中点击击截取矩矩形，在在图像中中右上角角环绕““关于我我们”部部分画一一矩形，，这个形形状成为为“热点点”。。（2））在“热热点”的的“属性性面板””中给““热点””设置超超级链接接，用同同样方法法给右边边“联系系留言””部分建建立热点点链接，，在“链链接”栏栏输入mailto：：，后面面输入一一个Email地址。。（3）保保存文档档。9.2用用DreamweaverMX2004设计站站点网页页9.2.4链链接与与导航3．导航航条导航条一一般由几几个图像像构成，，点击不不同的图图像，将将链接到到网站不不同的页页面。通通过统一一导航条条的方法法，我们们可以实实现网站站风格的的统一，，同时也也方便了了访问者者在不同同页面间间的跳转转。在建立导航条条之前，我们们先做一些准准备工作，使使用图像处理理软件，把前前面例子中的的菜单图像Menubar.jpg切割成多块块，并把要在在网页中建立立链接的每部部分图像的背背景和文字更更换不同颜色色另存两份9.2用用DreamweaverMX2004设设计站点网页页9.2.4链链接与导导航3．导航条（1）在Dreamweaver中中，删除图像像Menubar.jpg，加入一一个表格，在在每单元格插插入切成小块块的图像，使使其看起来就就像原来的图图像Menubar.jpg。（2）选中有有“风筝荟萃萃”字样的Menubar3_1.jpg。选选择“插入””→“图图像对象”→→“导航航条”，或在在“插入面板板”栏的“常常用”类别中中，单击“图图像”菜单并并选择“插入入导航条”按按钮，打开““插入导航条条”对话框。。9.2用用DreamweaverMX2004设设计站点网页页9.2.4链链接与导导航3．导航条导航条项目有有四种状态：：一般：用户尚尚未单击或尚尚未与此项目目交互时所显显示的图像。。设为Menubar3_1.jpg。滑过：指鼠标标指针滑过““一般”图像像时所显示的的图像。项目目的外观发生生变化，以便便让用户知道道可与这个项项目进行交互互。设为Menubar3_2.jpg。按下：指项目目被单击后所所显示的图像像。设为Menubar3_3.jpg。按下时鼠标经经过：指在项项目被单击后后，鼠标指针针滑过“按下下”图像时，，所显示的图图像。是鼠标标点击后当鼠鼠标再次移动动到这个部位位上时显示的的图像。可不不做设置。9.2用用DreamweaverMX2004设设计站点网页页9.2.4链链接与导导航3．导航条（3）在“按按下时，前往往的URL””后设置要链链接的网页。。设定完成后后确定。当鼠标移至““风筝荟萃””时变为白底底黑字当鼠标在“风风筝荟萃”上上按下时变为为橙底白字9.2用用DreamweaverMX2004设设计站点网页页9.2.5其其他设计计要素1.利用最新新多媒体技术术MacromediaDreamweaverMX2004可可以迅速、、方便地向Web站点点添加声音和和影片，可以以在Dreamweaver自身身内插入MacromediaFlashMX2004按钮钮和文本对象象等。可以在在文档中插入入：Flash和Shockwave影片片、QuickTime、AVI、、Javaapplet、ActiveX控件以及及各种格式的的音频文件等等。可以在使使用Dreamweaver时在在文档中创建建、插入和修修改Flash按钮而而无须使用MacromediaFlash。可以自定定义Flash按钮对对象，并添加加文本、背景景颜色以及指指向其他文件件的链接。Flash文文本对象允允许您创建和和插入只包含含文本的Flash影影片。9.2用用DreamweaverMX2004设设计站点网页页9.2.5其其他设计计要素2.CSS样式表CSS即CascadingStyleSheet或或样式表，是是可以定义HTML标签签所无法表现现的属性的补补充性语言。。样式表的另另外一个优点点就是，在对对很多网页文文件设置同一一种属性时，，无须对所有有文件进行反反复操作，只只要应用样式式表就可以更更加便利、快快捷地进行操操作。在Dreamweaver中中只需要单单击几次，就就可以在字体体、链接、表表格、图片、、层等构成网网页文件的所所有元素属性性中应用样式式表。9.2用用DreamweaverMX2004设设计站点网页页9.2.5其其他设计计要素3．表单表单的作用就就是能使访问问者与网站或或网站管理人人交互。利用用表单，可根根据访问者输输入的信息，，自动生成页页面反馈给访访问者；利用用表单，还可可以为网站收收集访问者输输入的信息。。表单的使用用其实可分为为两部分。一一部分是表单单本身，即怎怎样把表单作作为页面元素素加入到网页页页面。另一一部分为表单单的处理，即即调用服务器器端的脚本程程序，或是以以电子邮件的的方式发送。。在Dreamweaver中利利用“插入面面板”的“表表单”类别中中的图标建立立表单。9.2用用DreamweaverMX2004设设计站点网页页9.2.5其其他设计计要素4．行为与JavaScriptDreamweaver中行为指指的是能够简简单运用制作作动态网页的的JavaScript功能。网页页的动态效果果，要往网页页页面里插入入JavaScript小程序。Dremweaver能能自动生成一一些JavaScript代码来实实现动态效果果，使不会JavaScript的的人也能制作作出动态的网网页。利用Dreamweaver的Behavior，，能做出很有有用的页面效效果。如果想想运用行为，，首先要选择择运行行为的的对象，然后后决定要发生生的动作，还还要设置决定定实施的动作作在何种情况况下发生的事事件。即行为为由动作和事事件组成。在在Dreamweaver的“行为为面板”中，，可以选择需需要的行为。。另外也可以以在网页中插插入自己的JavaScript代代码。9.3测测试和上传9.3.1测测试可以通过运行行“站点报告告”测试整个个站点并解决决出现的问题题。确保页面在目目标浏览器中中能够如预期期的那样工作作，并确保这这些页面在其其他浏览器中中要么工作正正常，要么““明确地拒绝绝工作”。页页面在不支持持样式、层、、插件或JavaScript的的浏览器中应应清晰可读且且功能正常。。对于在较早早版本的浏览览器中根本无无法运行的页页面，应考虑虑使用“检查查浏览器”行行为，自动将将访问者重定定向到其他的的页面。应尽可能多地地在不同的浏浏览器和平台台上预览页面面。以便查看看布局、颜色色、字体大小小和默认浏览览器窗口大小小等方面的区区别，这些区区别在目标浏浏览器检查中中是无法预见见的。9.3测测试和上传9.3.1测测试检查站点是否否有断开的链链接，并修复复断开的链接接。由于其他他站点也在重重新设计、重重新组织，您您所链接的页页面可能已被被移动或删除除。可运行链链接检查报告告对链接进行行测试。监测页面的文文

人人文库> 全部分类> 专业文献 > 生活休闲

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论