本科毕业设计---web个人网站设计.doc

《本科毕业设计---web个人网站设计.doc》由会员分享，可在线阅读，更多相关《本科毕业设计---web个人网站设计.doc（21页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、Web个人网站设计姓 名： 班 级： 学 号： 专 业： 计算机与通信工程学院【摘要】随着国际互联网的普及，很多人已经不满足仅仅在Internet上的浏览信息，而是希望更深入的参与其中，拥有自己的Web网站，这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚，那么企业建立网站就是必然的选择了。同样出自Macromedia公司的Flash, Fireworks在制作网站的过程中起到了锦上添花的作用，是个人网站实现的好帮手，在制作网站的时候经常会用到这些软件。对于个人来说，建设好时间的个性化网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作

2、做好充分的准备，通过自己建设的网站，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。在我的这个个人网站的制作过程中，我选择了以图片作为卖点来吸引读者的眼球。我喜爱摄影，喜爱旅行。我想有很多像我这样的人，在走出去的同时，也希望把自己的所见所闻分享给同道中人，让更多的人来感受自己的快乐，去体验旅行意义。于是我就想做出这样的一个以分享图片和心情为主要目的的网站。下面就来介绍一下我设计网站的主要经过。【关键字】网站 设计 图片 旅行一、 需求分析 现代社会是一个信息化的社会，人们对信息的需求越来越大，对信息的传递速度要求越来越快，在Internet飞速发展的今天,互联网成为人们快速获取、发

3、布和传递信息的重要渠道,它及时.迅捷的给人们提供了所需要的信息，各种网站便是这信息传播的枢纽，大量的信息，大批量的访客对网站的管理都是一种挑战，而实现这一管理的就是数据库的操作，由此可见数据库的完善与否直接影响着网站的稳定性。随着科技的进步，时代的发展，计算机信息行业的逐步壮大，人们也越来越离不开各种各样的信息了，人们对信息的追求也越来越迫切了。互联网作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Internet上表现出其及其重要的地位，并发挥着其及其重要的作用。Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使

4、得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题。目前，我国已成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用文本、图像、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，无可置疑，网站已成为最吸引人的也最有效的信息传递手段和方式。随着网络技术的发展，各类网站纷纷出现。个人网站也成为了一种时尚。越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格。“个人网站要发展，要么是从我的需求出发，

5、要么是从我周围人的需求出发。”国内著名个人网站站长、手机之家站长高春辉说。网页设计是一门新兴的设计类和网络的交叉学科，近几年随着网络的发展而逐渐收到人们的重视，它本身以网络为载体,把各种信息以最快捷、方便的方式传达给大众。一个网站项目的确立是建立在各种各样的需求上面的，这是个人网站，所以这种需求往往来自于个人的实际需求，其中每个人的实际需求占了绝大部分。因此如何更好地的了解、分析、明确需求，并且能够准确、清晰以文档的形式表达出来，保证开发过程按照个人需求为目的正确项目开发方向进行。鉴于此平台，我就想到了设计让更多的朋友可以分享交流的地方。网络博客是一种好的形式，我所学的东西也许不能够做一个大型

6、的网站，但我可以模仿博客的形式做一个分享平台。现在的年轻人都喜欢在网上各种“晒”，晒食物，晒游玩，晒shopping等等。对于热爱旅行的人来说，我们也希望有一个可以专门晒心情的地方。为了见识到更多的美景，更多的文化背景，或者说认识更多的驴友。能够提供一个较好的平台给这些驴友们，我想是一个不错的方案。于是我的设计就这么开始了。二、 总体设计21设计前瞻在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为个人、政府、企事业单位信息化建设中的重要组成部分，从

7、而倍受人们的重视。越来越多的人希望能真正参预到互联网上，这就出现了越来越多的个人网站的设计以及推广的工作和任务。一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。就我个人而言，我也想拥有自己的个人网站，在互联网上拥有自己的一席之地，从而真正的参与到网络中去，做网络新时代的主人，同时也希望自己

8、喜欢和收藏的一些东西能够和网络一起分享，和互联网上的你一起分享。22设计步骤确定网站主题：网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。搜集材料：明确了网站的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。规划网站：一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在

9、制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。选择合适的制作工具：尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。制作网页：材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板

10、，这样可以大大提高制作效率。23网页要素网页的整体布局设计网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏

11、览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。网页设计中色彩的运用色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色

12、，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。在设计中要考虑众多因素。网页形式与内容相统一要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平

13、衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。24主要功能：搜索引擎：根据浏览者的要求，使用主页上的搜索引擎链接到百度，在整个Internet上进行搜索，完成信息的优化与提取。论坛：主要功能是网友和网站之间的交流平

14、台，也是网友给版主提出意见的主要渠道。在论坛中用户可以发表意见，这些意见可以让所有人看到，也可以只让版主看到，版主和其他人可以针对留言的内容进行回复，只留给版主的留言只有版主能够回复，并且版主可以登录后台对留言进行管理，是否发表或删除。发送电子邮件：网友可以通过“联系我”利用outlook向版主或其他人发送电子邮件。精品收藏：在其中展示我喜爱的东西，包括图片、歌曲和一些优美的文章。奇文共欣赏，疑义相与析。我只想起到抛砖引玉的作用，让大家从中认识我和了解我，让一些美好的东西我们大家共同来欣赏。但我增加了管理权限，我以管理员的身份可以对加入的新内容进行管理，即允许加入和对其进行删除。留言板：是一个

15、我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。在明确了我的个人网站的风格和定位后，就是网站的材料组织以及网站的页面设计和数据库设计。网站最后完成发不到网上后，能够充分吸引浏览者的目光，利用搜索引擎，浏览者可以在网站内搜索自己喜欢的资料，并且可以在留言板和大家交流，在后台管理页面中，通过身份认证，管理员可以对网站信息进行管理。站内的其它页面均是我自己的精心收藏，与大家一起分享。三、 详细设计31开发工具介绍及选择梦幻网页的编织者-Dreamweaver8.0Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dream

16、weaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。

17、常用的Dreamweaver工作区组件有以下若干种：文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。装载器中包含一些打开和关闭常用检查器和模板的按钮。对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。属性检查器显示选定对象的属性。快捷菜单可以使用户对当前选择或区域快速执行某些命令。可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。网页动画的制作软件-Micro mediaFlash8.0Micro mediaFlash8.0用于web站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，

18、创建出生动的富于表现力的网页。Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。Flash的交互性的大部分设置就在Action和FsCommand里，通过对Action和FsCommand的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置。JavaScriptJavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序

19、等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。影像与动画的制作软件AdobePhotoshop8.0Photoshop8.0是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。文字处理更加方便增加的图层集使图层管理更有序。新增图像功能：图像的剪切和剪裁更加方便。将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢

20、量绘图功能得到了加强。动态网站的脚本语言-ASPActiveServerPages：“动态服务器网页”，一般简称为“ASP”，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE或Netscape）都可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”，不像VBScript或JavaScript是在客户端（Client）的浏览器上执行，若使用VBScript来设计程序，客户端（lient）在浏览器中可以显示程序执行的结果，可是，客户端（lient）若使用Netscape

21、浏览器就无法显示VBScript的执行结果。的特点：、任何开发工具皆可发展只要使用一般的文书编辑程序，如Windows记事本，就可以编辑。当然，其他网页发展工具，例如，FrontPageExpress、rontPage等也都可以；不过还是建议你用记事本来写，既省钱又方便，若是使用那些所见即所得的网页编辑来写，可能会发生一些意想不到的离奇状态。通过各家浏览由于ASP程序是在网络服务器端中执行，执行结果所产生的HTML文件适用于不同的浏览器。、语言相容性高ASP与所有的ActiveXScript语言都相容，除了可结合HTML，VBScript、JavaScriptActiveX服务器组件来设计外，

22、并可经由“plug-In（外挂组件模组）的方式，使用其他厂商（ThirdParty）所提供的语言。、隐密安全性高如果我们在浏览器中直接查看网页的原始代码，就只能看到文件，原始的程序代码是看不到的！这是因杰程序先于网站服务（ebServer）端执行后，将结果转换成标准文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的程序并不会轻易地被看见进而被盗用。、易于操控数据库可以轻易地通过DBC(OpenDatabaseConnectivity)驱动程序连接各种不同的数据库，例如：Acess、Foxpro、dBase、Oracle等等，另外，亦可将“文本文件”或是”Excel”文件当成

23、数据库用。、面向对象学习容易具备有面向对象（bject-Oriented）功能，学习容易，提供了五种方便能力强大的内建对象：Request、Response、Sever、Application以及Session，同时，若使用内建的“Application”对象或”Session”对象所撰写出来的程序可以在多个网页之间暂时保存必要的信息。、ASP的六大内部对象Request Response Server Session Application Object Context从客户端取得信息将信息送给客户端提供一些Web服务器工具储存在一个Session内的用户信息，该信息仅可被该用户访问在一个A

24、SP-Application中让不同的客户端共享信息可以用来配合MicrosoftTransaction服务器进行分布式事务处理所以我选择了ASP结合Dreamweaver架构个人站点。32 Access数据库的创建数据库Access的简要介绍Access数据库是集成在Microsoft公司开发的产品更新换代Office系统中的集成软件。Access是一个数据库管理系统，它之所以被集成到Office中而不是VisualStudio中，是因为它与其它的数据库管理系统（如VisualFoxPro）相比更加简单易学，一个普通的计算机用户即可掌握并使用它。而且最重要的一点是，Access的功能足够强大

25、，足以应付一般的数据管理及处理需要。ODBC（OpenDatabaseConnectivity开放式数据库互联）是微软推出的一种工业标准，一种开放的独立于厂商的API应用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统。ODBC作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ODBC接口或提供了ODBC支持，这其中就包括常用的SQLSERVER、ORACAL、INFORMIX等，当然也包括了Access。ASP访问数据库的几种方式：在ASP脚本中可以通过三种方式访问数据库：IDC（InternetDatabaseConnector）方式；ADO（

26、ActiveXDataObjects）方式；RDS（RemoteDataService）方式；这三种访问方式对数据库的访问是由InternetInformationServer来完成的。Web浏览器用HTTP协议向Internet信息服务器（IIS）递交请求。Internet信息服务器执行访问数据库的操作，并以一个HTML格式的文档作为回答。Access的组件介绍我们在Web服务器运用Web应用程序进行的最常见和最实用的任务就是访问服务器端的数据库。而ASP内建的DatabaseAccess组件使得我们能够轻而易举地通过ActiveDataObjects(ADO)访问存储在服务器端的数据库或其

27、他表格化数据结构中的信息。ADO是对当前微软所支持的数据库进行操作的最有效和最简单直接的方法，它是一种功能强大的数据访问编程模式，从而使得大部分数据源可编程的属性得以直接扩展到ActiveServer页面上。可以使用ADO去编写紧凑简明的脚本便连接到OpenDataseConnetivity(ODBC)兼容的数据库和OLEDB兼容的数据源，这样ASP程序员就 可以访问任何与ODBC兼容的数据库，包括MSSQLSERVERAvccess,Ovracle等。如果您是一个对数据库连接有一定了解的脚本编写人员，那将发现ADO命令语句并不复杂而且容易掌握，同样地，如果您是一个经验丰富的数据库编程人员，将

28、会正确认识ADO的先进的与语言无关性和查询处理功能。熟悉VB数据库编程的朋友会发现ADO与RDO有某中类似的地方。但是据说ADO的访问的速度更快,内存需要更小。创建Access数据库介绍用MicrosoftAccess来创建数据库，最简单的是通过它提供的的一个“向导”，在启动这个软件以后，建立数据库文件的操作。下面是我利用“向导”来创建一份数据库文件的具体操作步骤：选择“Access数据库向导、数据页和项目”单选按扭，然后单击“确定”按钮，若选择MicrosoftAccess对话框中的“空Access数据库”单选项按钮，就会建立一个空的数据库了，数据库里面的信息需要手工来添加，若选择“打开已有

29、文件”单选按钮则可以从下方的列表中选择打开已经存在的数据库。在弹出的“新建”对话框中，我们可以选择一个模板来快速建立数据库，我们就先选择个“定单管理”看看，然后单击“确定”按扭。“文件新建数据库”对话框的功能是，指定数据文件名，以及保存它的文件夹。我们就以它的初始文件名“定单入口1”吧，单击“创建”安扭后，新建的数据库文件就将被指定保存到MicrosoftAccess默认的文件夹下了，或我们给它指定一个新的也行，这样一来，一份新的数据库就建立好了，屏幕上也将显示“数据库向导”对话框。“下一步”按钮。以上“数据库向导”对话框分为左右两部分，左边的窗口是用来选择“数据库中的表”，右边的窗口是用来选

30、择“表中的字段”。选择好所需要的数据库中的表和表中的字段之后，就单击下一步按钮。以上“数据库向导”对话框是用来确定屏幕的显示样式，我们就采用标准样式吧单击下一步按钮。以上“数据库向导”对话框是用来确定打印报表的样式的，我们可以选择如“组织”样式，然后单击下一步按钮。以上“数据库向导”对话框的作用是确定数据库的标题和是否在所有报表上加一幅图片，我们就先设定数据库的标题为“定单入口”，并不在所有报表上加图片，然后单击下一步按钮。单击以上“数据库向导”对话框的“完成”按钮，就完成了创建数据库的工作了。象这个数据库在使用之前还会弹出“我的公司信息”对话框，当然，不同的模板是不相同的，象这个就是要求输入

31、公司的名称和地址信息，如下图所示，关闭这个对话框，系统将自动保存信息。关闭“我的公司信息”对话框后，会弹出“主切换面板”对话框。位于“主切换面板”对话框后面的是“定单入口1”窗体，通过这两个窗体即可对新创建的数据库进行各种操作了。无论什么时候使用“数据库向导”新建数据库，MicrosoftAccess都将自动新建一个切换面板，这个面板对浏览数据库都是很有帮助的，“切换面板”中有一些按钮，单击它们可以打开相应的窗体和报表，或打开其他窗体和报表的切换面板、退出MicrosoftAccess或自定义切换面。33 ASP访问数据库的原理ASP是服务器端的脚本执行环境，可用来产生和执行动态的高性能的WE

32、B服务器程序。当用户使用浏览器请求ASP主页时，WEB服务器响应，调用ASP引擎来执行ASP文件，并解释其中的脚本语言（JavaScript或vbscript），通过ODBC连接数据库，由数据库访问组件ADO（activedataobjects）完成数据库操作，最后ASP生成包含有数据查询结果的HTML主页返回用户端显示。四、 实现41 网站登录（1）数据库连接本网站的数据库软件使用的MicrosoftAccess数据库，利用该软件建立了存储用户信息的注册表users，然后登陆是可以从此表中查询信息与使用者的录入信息相比对，通过比对的结果判断是否能够进入我网站的主页。其次是用另一个表MESS来

33、存储用户的留言信息。（2）注册验证与登录如果用户未输入用户名与密码而想登录而单击了用户登录界面的确定按钮，就会弹出“用户名不能为空！”消息是用以下代码现实的。（3）后台连接我把动态相关信息全部储存在数据库中,要想在网页中显示数据库中的相关动态内容必须先对数据库进行链接与打开，要想链接数据库必须使用前文所提到的ADO接口提供的基本对象中的Connection对象；而要想打开数据库则必须使用ADO接口提供的基本对象中的Recordset对象；所以，我采用了调用odbc_connection.asp文件的方法进行连接，将打开与链接的代码写入了文件中，其方法如下：以下为数据库连接代码：42站点创建站点

34、要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“在路上”。填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。”单击“下一步”，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其

35、中储存站点文件的本地副本。单击该文本框后面的文件夹图标，新建并指定一个空的文件夹“E:/ding”。之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。而后“下一步”再“完成”，即可。创建站点内容站点创建完成后，就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“文件/文件”面板，此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。在弹出的菜单中选择“新建文件”，新建一个文件后将其命名为“index.htm(或index.html),它就是未来的首页。由于“在路上”网站分为“我的旅行”、“沿途美景”、“人儿事儿”、“

36、地理导航”、“与我联系“这五个大栏目，所以继续用鼠标右击右侧，在弹出的菜单中选择第二项“NewFolder（新建文件夹）”。执行五次操作，新建五个文件夹，并把它们重命名为a、b、c、e、f分别对应上面的五个大栏目。存放它们各自的内容。之后再次新建1个文件夹，命名为images,用来存放“所有的图象文件”的内容。之后在个栏目的文件夹里还要建立想相应的栏目网页。键字和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需的，例如，可以仅为主页提供关键字。下面就以首页为例，说明怎样插入较常用的头（head）内容。单击“菜单拦”下面“插入快捷”的下拉列表，选择其中的HTML类，此时右侧将会显示该

37、类中可以插入的对象快捷按钮，再次单击第2个按钮“文件头”旁边的下拉箭头，会弹出菜单，该项列出的便是即将插入的头内容。插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。另一方面，网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制，导致了下载的速度不可能太快，因此，网页的大小就不能太大，其中关键就在于图像的大小了，否则浏览者会失去等待的耐心，无论你的网站多么精彩也无济于事了。所以，在网面容量大小的问题上一定要重视。下面就来详细介绍对网页图像进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的

38、基础上，图片文件能够变的更小。1、 首先将光标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。2、 随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件，或在URL编辑框中输入图像的路径和名称。下面的“相对于”下拉表框中，可选择文件URL地址的类型，如果选择“文档”选项，表示图像地址相对于当前文档；如果选择“站点根目录”选项，表示地址相对于根目录。在这里我要插入的是网站标志logo，插入logo图象，最后单击“确定

39、”按钮，即可完成插入图像的操作。插入多媒体在Dreamweaver8，除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频等媒体元素，如Flash,Shockwave,Applets,ActieX及格Midi声音文件等，并且还可以在Dreamweaver自身内插入MacromediaFlashMX2004按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。在DreamweaverMX2004文档中，可以插入媒体文件包括FlashShockwave影片、QuickTime、AVIjava、appletActiveX控件以及各种格式的音频文件。要在浏览器中播放放Flash动画，必须在

40、浏览器中集成“Flash播放器（FlashPlayer）”。其中，InternetExplorer通过ActiveX控制来实现，NetscapeNavigator则是通过相应的插件来实现的。在最新的NetscapeNavigator和InternetExplorer浏览器中，均已集成了Flash动画播放功能。操作步骤：步骤1将光标停留在要插入Flash的位置，然后单击菜单栏下面“插入快捷栏”的下拉列表，选择其中的“常用”分类，右侧将会显示该类中可以插入的对象快捷按钮。左起第6个即为“媒体”按钮，单击它右侧的下拉列表，选择第1项Flash图标。步骤2在弹出的对话框中选择扩展名为swf的Flash

41、文件，即可将其插入到Dreamweaver的“网页编辑窗口”中，可以看到，在这个窗口中Flash文件的大小。在这里我的主页插入的一个动画，如图所示：插入文本文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，一个网站成功与否，它是最关键的因素。在这最关键的因素。可丰富网站的文字内容，并以最最美观、最整齐的方式放入到网页中。插入文本的两种方式网页中需要大量的文本，我们或以通过以下两种方式插入它们。一种是在网页编辑窗口中直接用键盘敲入文本。这可以算是最基本的输入方式了，和一些文本编辑软件（如MicrosoftWord）的使用方法一样，选择好习惯的输入法，就可以了。另一种是复

42、制文本的方式。有些读者可能不喜欢使用Dreamweaver8进行打字的工作，而更习惯在专门的文本编辑软件中快速打字，如MicrosoftWord和Windows自带的记事本等，又或者读者已经准备好了要放入网页的文本的电子版本，那么我们就可以直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下。打开文本编辑软件（如MicrosoftWord），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将光标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键C

43、trl+v,即可将大段的文本快速粘贴到网页中。这在我的“人儿事儿”中用到很多，全部是在word软件中排好ctrl+c,然后点击要粘贴的位置，crtl+v到Dreamweaver即可。43创建其他网页还有其它的几个网站与主页的制作相同，一个网页是图象和文字的组合。“沿途美景”中的图象插入和前面的介绍相似，并可以在属性拦中调节图象的大小。在Dreamwerver中常常会用到Firework、Flash，它们是相辅相成，在主页中的主体部分就是用Firework,如图所示：在“与我联系”中也用到这点，首先定好需要尺寸，在属性中设好背景，颜色等等，插入图象，输入文字，也word里的操作雷同。44建立网页

44、链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是网页的“链接”。“链接”，又称“超链接（Hyperlink）,它作为网页的桥梁，起着相当重要的作用。网页中的很多对象都可以加入“链接”属性。在Dreamweaver8，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。文字连接“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字

45、建立“链接”。具体操作步骤如下所述。操作步骤：步骤1准备好已经制作完成的首页的各个栏目页面（假设除了“链接”，其他内容都已经制作完成了），该网站包含6个栏目，这里的5个栏目-“我的旅行”、“沿途美景”和“人儿事儿”、“地理导航”、“与我联系”为例来进行讲解。步骤2在Dreamweaver中打开首页，之后反白选取作为“链接”的文字。实例中要做到单击不同的栏目的网页。因此为第1个栏目“平面设计”设置链接，首先要反白选中“平面设计”4个文字。步骤3观察“属性面板”，其中包括一个“链接”文本框。步骤4接下来需要把链接的地址加入到文本框中，方法有3种。这里我用到的是直接点击文件夹图标，在文件夹中找到要链接的对象a.htm。这