信息工程系毕业论文毕业设计学位论文范文模板参考资料-个人网站设计

1、目录摘要 2前言 3 HYPERLINK l _Toc290370285 第一章 关于网络的知识4 HYPERLINK l _Toc290370287 1.1 Internet的简介4 HYPERLINK l _Toc290370288 1.2 WWW的简介4 HYPERLINK l _Toc290370289 1.3网页基本构成元素5 HYPERLINK l _Toc290370291 1.4 制作网页前的准备5 HYPERLINK l _Toc290370293 第二章 网站制作实战6 HYPERLINK l _Toc290370294 2.1 站点6 HYPERLINK l _Toc29

2、0370295 2.1.1 创建站点6 HYPERLINK l _Toc290370296 2.1.2 创建站点内容6 HYPERLINK l _Toc290370297 2.2 首页7 HYPERLINK l _Toc290370298 2.2.1 设置首页布局和页面属性7 HYPERLINK l _Toc290370299 2.2.2 查看和编辑头内容9 HYPERLINK l _Toc290370300 2.2.3 插入图像9 HYPERLINK l _Toc290370301 2.2.4 插入FLASH相册10 HYPERLINK l _Toc290370302 2.2.5 插入文本1

3、0 HYPERLINK l _Toc290370303 2.3 创建其它网页11 HYPERLINK l _Toc290370304 第三章 建立网页链接12 HYPERLINK l _Toc290370305 3.1 文字链接12 HYPERLINK l _Toc290370306 3.2 图像链接13 HYPERLINK l _Toc290370307 3.3在HTML语言中建立网页链接14 HYPERLINK l _Toc290370308 第四章 网站测试与维护 17 HYPERLINK l _Toc290370309 结论18 HYPERLINK l _Toc290370310 参考

4、文献 19摘 要本论文主要是对个人网站的建立进行研究和探讨。作品的主要技术指标包括：1、制作出一个具有静态技术的“个人网站”；2、在制作的过程中，加强和深化以前所学的关于网页设计的方法，同时更好的理解参考资料上的方法、理论和更好的利用Fireworks、Flash制作网站需要的一些图片和影片。本设计的主要内容包括：1、个人网站的设计思想，整体规划及相关基础知识；2、个人网站的首页设计，包括简单的HTML语言及效果图； 3、个人网站的调试。网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，也只有如此制作出来的网页才能有个性、有特色，具有吸引力。网

5、站主题就是所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像单独的网页那样做得内容少而单一。所以必须要找准一些自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给人留下深刻的印象。关键词：技术指标 基本设计内容 网站规划网站主题前言随着二十一世纪新兴科技的飞速发展，如今的交流与交往不再是那么的单调，看如今不曾再有五百里加急文件的传送，看如今已很少在出现写信、寄信。人们正在运用现世纪的高科技来增加自己的交际圈，来发展自己的人脉关系，同时，其它人也是通过高科技，悄悄的就能很容易地去了解，关注一个人。正是因为人们的这些需求，所以出现了互联网，正是因为人们的需求，所以

6、出现了如今的网络时代，网络通讯工具。来方便人们的交往，交际与沟通。也正是因为人们的需求，所以出现了个人博客，通过一人简单的网页来展现自己的独特魅力，自己的与众不同。真正的做到了“足不出户，便知天下人”。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上了信息化的道路。我觉得一个网站的开始，应该有一个大体的规划，网站的布局是最重要的，它起着一个网站成功与否的决定性作用，因为布局的好与坏，带来的是网站整体上的美观效果及应用。网站内容上也能决定着网站成功与否，一个网站上的每个字眼都可能决定着这个网站，因为你不知道哪个字就是吸引别人的内容，就是大家都追捧的话题，就是很潮的事

7、物，所以内容上一定要谨慎。再有，就是网站的图片，一定要确准好路径，以免图像的丢失而不能再网站中显示，其次就是链接，在Dreamweaver中提供了很简单的链接命令，根据其提示操作即可。我做了一个简单的个人博客的网站，通过这个网站能让大家更深的了解我，同时更重要的是锻炼自己的实践能力，巩固自己学习的知识，弥补自己学习的不足。 TOC o 1-3 h z u 第一章 关于网络的知识什么是InternetInternet是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，它是采用开放系统协议的计算机通讯网络。然而，Internet不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包

8、括科研、教育、文化娱乐、商业和信息交流等各种各样的服务，使得世界范围内的人与人之间的交流在时间和空间上变的更小了。Web页浏览：这是目前利用最广泛、最直接的互联网服务，通过浏览WWW（万维网）中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技发明，找到众多的就业信息几乎想找到什么样的信息，就有什么信息。正是有了WWW、Internet才会变得如此丰富多彩，才能走进千家万户。1.2 WWW的简介WWW的全称为World Wide Web，含义是“环球网”，又称“万维网”、3W、Web。 WWW是一个基于超文本（Hypertext）方式的信息检索服务工具。我们上网浏览到的网

9、页就是这样的超文本，也就是HTML(Hypertext Mark-up Language,超文本标记语言)文件，这些网页檔被放置到WWW服务器上，并且都有一定的地址。当我们想浏览某个网站时，首先要在计算机上安装浏览器，如 Internet Explorer或Netscape，然后在浏览器中输入网站的地址（网址），就可以进入网站进行浏览。在这些网页中，都有超连接，当将鼠标指针移动到某个地方（如文本或图像）时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间动画和声音等信息。通跳转，我们之所以能在Internet的海洋中穿梭自如，正是超连接的功劳。1.

10、3网页基本构成元素要学会制作网页，首先需要了解网页都是由什么元素构成的。 文字：文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。 图片：正是有个各种美丽的图片，网页才变得多姿多彩。动画：如今，网页上的动画越来越多，最常用的有GIF动画、Flash动画等。超连接：如上所述，超连接几乎是必不可少的。一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。其它元素：还可以在网页中添加声音、视频等元素。1.4 制作网页前的准备计算机必备：计算机速度够快，最好能够上网。操作系统：Windows 98/NT/Me/2000/XP.其它软件：看图软件ACDSee、图像处理软件P

11、hotoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。第二章 网站制作实战2.1 站点2.1.1 创建站点要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“my web”。填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。单击“下一步”，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的

12、文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点檔的本地副本。单击该文本框后面的文件夹图示，之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。而后“下一步”再“完成”，即可。2 创建站点内容站点创建完成后，就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“檔/檔”面板，在弹出的菜单中选择“新建文件”，新建一个档后将其命名为“index.htm(或index.html),它就是未来的首页。 2.2 首页2 设置首页布局和页面属性一、设置首页布局每个网站都会有一个首页，就功能上而言，它代表着一个网站的

13、风格与特色，就网站架构上而言，它代表了网站的第一层架构，首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有或等，目前主要以的居多。当然，后缀名为html也是正确的。具体设置方法是：右健单击“檔”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。操作步骤：1、在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。2、将变成“+”形状的鼠标游标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。（如果绘制的是第一个表格必须从网页的最左上角开始绘制）。“index”表格布局如下图：二、设置首页的页面属性首先双击“檔”浮动面板中的in

14、dex.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目“index”首页设置的属性如下图所示：2.2.2 查看和编辑头内容一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文檔的主要部分，也是包含文本和图像等的可见部分。头内容（head）是除文檔标题外的不可见部分，包含有文文件类型、语

15、言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键词。2.2.3 插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件，下面的“相对于”下拉表框中，可选

16、择文件URL地址的类型，插入logo图像，如图所示:最后单击“确定”按钮，即可完成插入图像的操作。2.2.4 插入FLASH相册在Dreamweaver 8中，除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频，FLASH相册等媒体元素，并且还可以在Dreamweaver自身内插入Macromedia Flash MX2004按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。在Dreamweaver 8文文件中，可以插入媒体文件包Flash 相册、QuickTime 、AVI java、 applet Active X控件以及各种格式的音频档。要在浏览器中播放放Flash 相

17、册，必须在浏览器中集成“Flash 播放器 （Flash Player）”。操场作步骤：步骤1、将游标停留在要插入Flash的位置，然后单击菜单栏下面“插入”的下拉列表，选择其中的“FLASH”分类，找到图像查看器命令，单击弹出保存对话框，选择要保存的地方和名称，点击保存。步骤2、在Dreamweaver中将会产生一个flash相册，在Dreamweaver中的最右边将会有一个flash元素，一次将flash的属性修改，既可完成一个flash相册的制作。2.2.5 插入文本文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，它是最关键的因素。插入文本的两种方式：一种是在

18、网页编辑窗口中直接用键盘敲入文本。另一种是复制文本的方式。直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下：打开文本编辑软件（如Microsoft Word），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。这在我的“闲情逸致”中用到很多。2.3 创建其它网页还有其它的几个网站与主页的制作相同，一个网页是图像和文字的组合。“相册”子页中的F

19、LASH相册的插入和前面的介绍相同。第三章 建立网页链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容-网页的“链接”。“链接”，又称“超链接（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。3.1 文字链接“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于

20、维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。操作步骤：步骤1、准备好已经制作完成的首页的各个栏目页面步骤2、在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。步骤3、观察“属性面板”，其中包括一个“链接”文本框。步骤4、接下来需要把链接的位址加入到文本框中。步骤5、在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。如图：步骤6、还可以设置一些“链接”的属性，单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”

21、颜色、“活动链接”颜色及“下划线样式”。步骤7、至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“放松心情”这4个文字上时将变成手形，并且浏览器窗口下面的状态区中会显示链接到的网页的位址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。步骤8、同理，按照以上步骤，再为“闲情逸致”和“个人主页”等其它栏制作指向对应栏目的链接。至此，整个“文字链接”的实例就全就全部完成了。3.2 图像链接“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容

22、，接下来以我的网站“my web“为例，讲解如何建立“图像链接”。操作步骤：步骤1、首先仍然要准备好已经制作完成的首页和各个栏目的页面步骤2、在Dreamweaver中打开网站的首页，之后选取要制作“链接”的图像。步骤3、观察“属性面板”，在“链接”文本框中输入链接的文字位址。步骤4、如果有需要，可以在“目标”下拉列表中选择“链接”网页显示的窗口方式，分别为-blank 、-parent 、-self或 -top。步骤5、至此，第1个栏目的图像链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，将鼠标放在“动画制作”4个文字上时将变成手形，同时浏览器窗口下面的状态区中会显示

23、出链接到的网页的地址，并且会显示出“替代”文本“动画制作”，单击文字，页面会立即跳转到第3个栏目中，这表示链接已经制作成功了。步骤6、同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。步骤7、在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页。至此，整个“图像链像”的实例就全部完成了。3.3在HTML语言中建立网页链接一、文字链接在HTML语言中用超链接标记指向一个目标。其基本格式为：a href=”URL”文本内容举个简单的“文本链接”的实例，该实例相对应的HTML代码如下所示。文字链接a href-“”target=”-blank” 平面设计（新开窗口，-blank)相

24、册（原窗口，默认为空）留言解释： href:是标记的一种属性，该属性中的URL等于链接目标文件的地址。 Target:也是标记的一种属性，相当于Dreamweaver“属性面板”中的“目标”，它的值等于-blank,效果是在新窗口中打开。除此之外还包括其它3种：-parent,-self和-top。这和Dreamweaver中“目标”下拉列表中的内容是一模一样的。 文本内容：如代码实例中的“平面设计”。这些文本将放在使用了链接属性href和目标属性target的 与标记之间，产生了链接的效果。二、图像链接举个简单的“图像链接”的实例。该实例相对应的代码所示。图像链接（新开窗口，-blank）（

25、原窗口，默认为空）a href=”解释：仔细观察代码可以发现，“图像链接”与“文本链接”惟一的差别就在于与之间的内容。“文本链接”中与之间的内容是文字内容，而“图像链接”中就肯定是图片内容了。之前讲过，插入图片使用“img src=”图像的URL“”的标记，这里当然也不会例外。而是还可以使用”img 的属性，如alt（替换文本）、width（宽）、height（高）、及border（边框）等三、E-mail链接该实例相对应的“html”代码如下所述。Email连接给我写信解释：只需使href 等于“mailto：邮件地址？subject=主题即可，其中subject为可选项，“？subject=主题”也可以不加。本次设计用Macromedia公司开发的专业HTML编辑器Dreamweaver,对Wed站点、Web页和Web应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。并且