网站设计论文Word格式文档下载.docx

网站设计论文Word格式文档下载.docx

《网站设计论文Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网站设计论文Word格式文档下载.docx（26页珍藏版）》请在冰点文库上搜索。

网页的结构图

根据功能的需求进行网站结构的设计，所得结构如下：

Internet的中文名为“国际互联网”，又称“因特网”。

Internet是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，它是采用开放系统协议的计算机通讯网络。

然而，Internet不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务，使得世界范围内的人与人之间的交流在时间和空间上变的更小了。

要了解Internet，就必须先了解局域网。

我们可以将同一地点的许多计算机使用网线连接在一起，构成一个高效率的计算机网络，所有处于网络内的终端机或计算机都能享受网络内所有的资源，比如程序，图文数据等。

这种计算机网络因为一般都局限在一定区域中，我们称之为“局域网”（LocalAreaNetwork,简称LAN）,它是在日常工作中用得最多的一种小型计算机网络。

局域网所覆盖的地理范围比较小，通常不超过几十公里，甚至只在同一座建筑物内或者邻近的几座建筑内。

像常见的校园网，一座写字楼内部的网络等都属于局域网。

而Internet则不是指单个区域范围内的网络，而是指将全世界的各中不同类型的计算机网络连接起来的一个全球性的网络。

Internet上有取之不尽，用之不竭的信息资源。

对于Internet中各种各样的信息，所有的人都可以通过网络的连接来共享和使用。

1.2 

Internet有那些功能

Web页浏览：

这是目前利用最广泛、最直接的互联网服务，通过浏览WWW（万维网）中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技发明，找到众多的就业信息……几乎想找到什么样的信息，就有什么信息。

正是有了WWW、Internet才会变得如此丰富多彩，才能走进千家万户。

信息发布：

通过Internet，不仅可以浏览别人发布在Web页上的信息，也可以将自己要发布的信息制作成Web页，也即网页，然后发布到Internet上，供全世界的人浏览。

电子邮件：

不同于传统邮件，电子邮件（E-mail）通过Internet传输，写信，发信，收信都在计算机上完成，一封电子邮件最短在一秒之内就可以发送出去，其效率是传统邮件无法比拟的。

而且发送与接收电子邮件几乎是免费的，所以比传统邮件既节省时间又经济的多。

网上聊天：

通过聊天软件（如QQ、ICQ等）或不同网站的聊天室，可以和世界各地的网友聊天。

网友可能是远在天边的异国朋友，也可能是与你一起工作的饿同事，或者是一起生活的家人，在这里没有年龄、性别、身份、职业、国籍、肤色的限制，完全突破了交友的传统方式，人们可通过Internet互相了解对方，进行各种各样的交流。

电子商务：

现在网上交易已经成为现实，网上购物、网上商品销售、网上拍卖、企业级电子商务、网上货币支付等电子商务活动已经搞的有声有色，几乎所有的专家都预测，在未来的几年内，电子商务会飞速发展。

在不久的将来，您可以做在计算机前进行各种各样的商务活动。

网络游戏：

通过Internet，可以与全世界的玩家一起进行游戏对战，也可以协同作战。

网络游戏已经成为信息产业全新的经济增长点，每年都为开发商带来巨额的利润。

通过网络游戏，可以充分享受Internet给我们带来的乐趣。

网络电话：

网络电话也称IP电话。

它采用Internet技术，利用专门的网络电话软件，只需支付非常低廉的话费就可通话。

Internet在电信市场上的应用将越来越广泛。

1.3WWW的简介

WWW的全称为WorldWideWeb，含义是“环球网”，又称“万维网”、3W、Web。

WWW是一个基于超文本（Hypertext）方式的信息检索服务工具。

我们上网浏览到的网页就是这样的超文本，也就是HTML（HypertextMark-upLanguage,超文本标记语言）文件，这些网页檔被放置到WWW服务器上，并且都有一定的地址。

当我们想浏览某个网站时，首先要在计算机上安装浏览器，如Internet 

Explorer或Netscape，然后在浏览器中输入网站的地址（网址），就可以进入网站进行浏览。

在这些网页中，都有超连接，当将鼠标指针移动到某个地方（如文本或图像）时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间跳转，我们之所以能在Internet的海洋中穿梭自如，正是超连接的功劳。

WWW为我们带来的是世界范围的超级文本服务：

只须操纵鼠标，就可以通过Internet从世界各地调来你所希望的文本、图像、动画和声音等信息。

通过使用WWW，一个不熟悉网络使用的人也可以成为Internet的行家。

1.4网页基本构成元素

要学会制作网页，首先需要了解网页都是由什么元素构成的。

文字：

文本是构成网页的基本元素。

一个最简单的网页可以只有几行文本。

图片：

正是有个各种美丽的图片，网页才变得多姿多彩。

动画：

如今，网页上的动画越来越多，最常用的有GIF动画、Flash动画等。

超连接：

如上所述，超连接几乎是必不可少的。

一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。

其它元素：

还可以在网页中添加声音、视频等元素。

1.5软件的安装与启动

要使用网站设计软件，自然先要将这些软件安装到自己的计算机中。

安装完毕，还需要如何启动，如何创建快捷方式。

下面就让我们来详细地看一看具体的操作步骤。

1.5.1软件的安装

“安装之前，需要先了解软件对系统的要求。

以Windows为例，系统要求如下：

IntelPentiumII处理器或等效处理器，主频300MHz或更高。

Windows98\Windows2000\WindowsNT（具有ServicePack3或更高版本）、WindowsMe或WindowsXP.

NetscapeNavigator4.0版或更高版本或MicrosoftInternetExplorer.

96MB的可用内存（RAM），建议采用128MB内存。

分辨率可达800×

600像素的256色显示器（建议颜色为百万颜色，分辨率达到1024×

768像素）。

CD-ROM驱动器。

检查一下您的计算机，看是否具备了以上条件。

如果具备，将“MacromediaStudioMX”程序会自动运行。

如果不能自动运行，可以找到光盘放入光驱，安装程序会自动运行。

可以找到光盘中的“InstallMacromediaStudioMX”程序或Autorun”程序并双击运行。

Dreamweaver的安装比较容易，几乎可以自动完成。

下面简要说明一下安装步骤。

操作步骤：

1、将安装光盘放入光驱，安装程序自动运行，并出现安装接口。

如果单击安装接口上的“MacromediaSTUDIOMX安装”，那么将会安装其下方所列出的软件。

所有的安装会自动完成。

2、单击Dreamweaver8,开始安装过装过程.先是出现解压缩文件窗口,等待一会儿,便会出现安装向导对话框。

单击“下一步”按钮，继续安装过程。

3、出现“选择目的地位置”对话框，默认的盘是C盘，如果想安装到不同的位置，可以单击目的檔夹右边的“浏览”按钮，并在弹出的“选择文件夹”对话框选择不同的文件，如要安装在D盘则可直接将路径中的“C：

”改为“D:

”。

也可以在下面的“目录”中选择其它的活页夹，设置完后，单击“确定”，回到“选择目的地址”对话框，单击“下一步”继续。

4、而后会出现“默认编辑器”的对话框，默认为全选。

如果希望让Dreamweaver8成为下面所列檔类型的默认编辑器，那么可以在这里做选择。

选择完毕，单击“下一步”按钮。

5、出现“开始复制文件”对话框，单击“下一步”安装程序开始复制文件，过几分钟后，安装结束，单击“结束”按钮，结束安装。

1.5.2 

软件启动

软件安装完毕后，我们就可以使用它了。

安装程序已经自动在“开始”菜单中加入了快捷方式。

单击“开始”菜单，将鼠标指针依次指向“程序”|“Macromedia”|“MacromediaMX”,并在上面单击鼠标左键。

1.5.3创建快捷方式

使用“开始”菜单启动程序的过程比较烦琐。

可以在Windows桌面或快速启动栏上创建快捷方式，这样可以快速的启动程序。

具体实现方法是：

在“开始”菜单中找到相应程序的快捷方式，不过这是不要用鼠标左键单击，而是用右键按住向桌面拖动，然后松开右键，会出现一个快捷菜单，在其中可以选择不同的命令，比如选择“在当前位置创建快捷方式”或“复制到当前位置”。

这样以后在运行程序时，就方便快捷的多了。

1.6制作网页前的准备

计算机必备：

计算机速度够快，最好能够上网。

操作系统：

Windows98/NT/Me/2000/XP.

软件可选：

其它软件：

看图软件ACDSee、图像处理软件Photoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。

1.7Dreamweaver8的操作环境

我们将工作接口分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5个部分来分别介绍。

1.7.1标题栏

Dreamweaver8的“标题栏”中将显示文字“MacromediaDreamweaver8”如果打开网页的话，在后面还会显示该网页的一些信息，如网页标题、所在位置及网页名称，右边有三个钮，分别对应DreamweaverMX的最大化最小化和关闭的操作。

1.7.2菜单栏

“标题栏”下面就是“菜单栏”，栏中提供了“檔”、“编辑”、“查看”、“插入”、“修改”、“文本”、“站点”、“窗口”、“帮助”10项菜单。

单击其中任意一项菜单，随即就会出现一个下拉式指令菜单。

有些指令的右边会有键盘的代码，这是该指令的快捷键，熟练使用快捷键将会有助于提高工作效率。

有些指令的右边会有一个小黑三角的标记，它代表该指令还包含下一级的指令，鼠标停留片刻即可显示。

1.7.3快捷工具栏

“快捷工具栏”指的是“菜单栏”下边的3排按钮，选择菜单“查看/工具栏”，勾选里面的“插入”、“文檔”和“标准”3项，完整的快捷工具栏就显现出来了。

1.7.4属性面板

在网页编辑窗口的下面还有一个面板，它是有名的“属性面板”，它在这个软件中起到举足轻重的作用。

属性面板顾名思义，就是显示，调整属性的面板，根据鼠标所选中对象的不同，“属性面板”在接口上也会有所差异，用户可以分别对不同的对象进行调整。

第二章网页的结构图

第三章 

网站制作实战

3.1 

站点

3.1.1创建站点

要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。

从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“myweb”。

填好后，单击“下一步”，进入下一个步骤。

由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。

”

单击“下一步”，进入下一个步骤。

在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。

底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点檔的本地副本。

单击该文本框后面的文件夹图示，新建并指定一个空的檔夹“E:

/ding”。

之后单击“下一步“，进入下一个步骤。

这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。

而后“下一步”再“完成”，即可。

3.1.2创建站点内容

站点创建完成后，就可以创建Web页来填充站点了。

在“右侧浮动面板组”中选择“檔/檔”面板，此时整个网站中没有任何内容。

用鼠标右击面板中的本地根目录文件夹。

在弹出的菜单中选择“新建文件”，新建一个档后将其命名为“index.htm（或index.html）,它就是未来的首页。

由于“myweb”网站分为“首页”、“相册”、“留言”、“搜索”、“登陆”“注册”这六个大栏目。

之后再次新建1个檔夹，命名为images,用来存放“所有的图像文件”的内容。

之后在个栏目的檔夹里还要建立想相应的栏目网页。

3.2 

首页

3.2.1设置首页布局

每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其它Web页，原则上都必须通过首页来连接散播出去，可见首页是多么的重要。

首页是打开网站后在浏览器中显示的第一个页面。

它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。

当然，后缀名为html也是正确的。

具体设置方法是：

右健单击“檔”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。

首页的布局有很多方法，在这里我所用到的是表格的“布局模式”。

“布局”模式中的表格称为布局表格，单元格称为布局单元格。

在绘制布局表格和布局单元格时，必须从“标准”模式切换到“布局”模式。

直接单击“布局”按钮即可。

1、 

在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。

2、 

将变成“+”形状的鼠标游标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。

（如果绘制的是第一个表格必须从网页的最左上角开始绘制）。

3、 

在这里要绘制多个表格，可以再次单击“布局表格”按纽进行绘制，也可以按住Ctrl键绘制多个表格。

“”网站首页的布局如图所示：

3.2.2设置首页的页面属性

首先双击“檔”浮动面板中的index.htm,进入页面的编辑窗口。

右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。

在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。

“myweb”首页设置的属性如下图所示：

3.2.3查看和编辑头内容

一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文檔的主要部分，也是包含文本和图像等的可见部分。

头内容（head）是除文檔标题外的不可见部分，包含有文文件类型、语言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键词。

下面就以首页为例，说明怎样插入较常用的头（head）内容。

单击“菜单拦”下面“插入快捷”的下拉列表，选择其中的HTML类，此时右侧将会显示该类中可以插入的对象快捷按钮，再次单击第2个按钮“文件头”旁边的下拉箭头，会弹出菜单，该项列出的便是即将插入的头内容。

3.2.4插入图像

图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。

另一方面，网页的容量大小是网站成功与否的一大关键因素。

由于网络在传输上的限制，导致了下载的速度不可能太快，因此，网页的大小就不能太大，其中关键就在于图像的大小了，否则浏览者会失去等待的耐心，无论你的网站多么精彩也无济于事了。

所以，在网面容量大小的问题上一定要重视。

下面就来详细介绍对网页图像进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的基础上，图片文件能够变的更小。

1、首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。

左起第5个即为“图像：

图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。

2、随即弹出“选择图像源文件”对话框。

从计算机磁盘中选择想要插入的图像文件，或在URL编辑框中输入图像的路径和名称。

下面的“相对于”下拉表框中，可选择文件URL地址的类型，如果选择“文文件”选项，表示图像地址相对于当前文檔；

如果选择“站点根目录”选项，表示地址相对于根目录。

在这里我要插入的是网站标志logo，插入logo图像，如图所示:

最后单击“确定”按钮，即可完成插入图像的操作。

3.2.5插入多媒体

在Dreamweaver8中，除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频等媒体元素，如Flash,Shockwave,Applets,ActieX及格Midi声音文件等，并且还可以在Dreamweaver自身内插入MacromediaFlashMX2004按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。

在Dreamweaver8文文件中，可以插入媒体文件包括FlashShockwave影片、QuickTime、AVIjava、appletActiveX控件以及各种格式的音频檔。

要在浏览器中播放放Flash动画，必须在浏览器中集成“Flash播放器（FlashPlayer）”。

其中，InternetExplorer通过ActiveX控制来实现，NetscapeNavigator则是通过相应的插件来实现的。

在最新的NetscapeNavigator和InternetExplorer浏览器中，均已集成了Flash动画播放功能。

操场作步骤：

步骤1 

将游标停留在要插入Flash的位置，然后单击菜单栏下面“插入快捷栏”的下拉列表，选择其中的“常用”分类，右侧将会显示该类中可以插入的对象快捷按钮。

左起第6个即为“媒体”按钮，单击它右侧的下拉列表，选择第1项Flash图示。

步骤2 

在弹出的对话框中选择扩展名为swf的Flash檔，即可将其插入到Dreamweaver的“网页编辑窗口”中，可以看到，在这个窗口中Flash文件的大小。

在这里我的主页插入的一个动画，如图所示：

3.2.6插入文本

文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，一个网站成功与否，它是最关键的因素。

在这最关键的因素。

可丰富网站的文字内容，并以最最美观、最整齐的方式放入到网页中。

插入文本的两种方式

网页中需要大量的文本，我们或以通过以下两种方式插入它们。

一种是在网页编辑窗口中直接用键盘敲入文本。

这可以算是最基本的输入方式了，和一些文本编辑软件（如MicrosoftWord）的使用方法一样，选择好习惯的输入法，就可以运指如飞了。

另一种是复制文本的方式。

有些读者可能不喜欢使用Dreamweaver8来进行打字的工作，而更习惯在专门的文本编辑软件中快速打字，如MicrosoftWord和Windows自带的记事本等，又或者读者已经准备好了要放入网页的文本的电子版本，那么我们就可以直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下。

打开文本编辑软件（如MicrosoftWord），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。

这在我的“网文精品”中用到很多，全部是在word软件中排好ctrl+c,然后点击要粘贴的位置，Crtl+v到Dreamweaver即可。

3.3创建其它网页

还有其它的几个网站与主页的制作相同，一个网页是图像和文字的组合。

“留言”中的图像插入和前面的介绍相似，并可以在属性拦中调节图像的大小。

在Dreamwerver中常常会用到Firework、Flash，它们是相辅相成。

在“注册”中也用到这点，首先定好需要尺寸，在属性中设好背景，颜色等等，插入图像，输入文字，也word里的操作雷同。

第四章建立网页链接

网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？

这就是本章要讲的内容----网页的“链接”。

“链接”，又称“超链接"

（Hyperlink）,它作为网页的桥梁，起着相当重要的作用。

网页中的很多对象都可以加入“链接”属性。

在Dreamweaver84中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。

其中部分内容在之前的章节中可能接触过，这里将对其进行更深入的讲解。

4.1文字链接

“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。

接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。

具体操作步骤如下所述。

操作步骤

准备好已经制作完成的首页的各个栏目页面（假设除了“链接”，其它内容都已经制作完成了），该网站包含6个栏目，这里的5个栏目----“相册”、“留言”和“搜索”、“登陆”、“注册”为例来进行讲解。

步骤2在Dreamweaver中打开首页，之后反白选取作为“链接”的文字。

实例中要做到单击不同的栏目的网页。

因此为第1个栏目“相册”设置链接，首先要反白选中“相册”这张图片。

步骤3观察“属性面板”，其中包括一个“链接”文本框。

步骤4接下来需要把链接的位址加入到文本框中，方法有3种。

这里我用到的是直接输入链接位址，在文本框中输入相对应的链接地址