个人网站设计论文[共18页]

《个人网站设计论文[共18页]》由会员分享，可在线阅读，更多相关《个人网站设计论文[共18页]（18页珍藏版）》请在金锄头文库上搜索。

1、合肥经济技术职业学院毕业设计论文（ 2011 2012 学年）论文（设计）题目_院 系 名 称_专 业 班 级_学 生 姓 名_学 号_指 导 教 师_ 日期 2012年 月 日目 录摘 要3引 言4第一章 网站制作的基础知识51.1建站工具51.2网站建设的三个阶段51.3网站设计步骤5第二章 制作网页72.1 建立站点72.2 制作首页72.2.1 页面设置72.2.2 网页布局82.2.3 插入图像92.2.4 插入多媒体92.2.5插入文本102.3 建立子网页10第三章 网页链接113.1文本链接113.2图像链接123.3邮件链接123.4锚点链接12第四章 HTML语言144.1

2、HTML语言结构144.2 网页的基本代码144.3表格的基本语法154.4超链接代码15第五章 网站维护和测试16总 结17参考文献18摘 要随着经济社会的发展，计算机已被应用到社会生活的各个领域。与此同时，互联网作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Internet上表现出其及其重要的地位，并发挥着其及其重要的作用。无论是在国内还是国外都得以迅速的发展和壮大，并被人们重视和关注。互联网已经彻底的改变了世界，互联网的世界里蕴藏着无限的可能，在这种情况下，各行各业及其个人、单位、工厂、企事业等等在网上构筑属于自己的网络信息平

3、台，保护自己的网络资源并在互联网上开辟自己的市场和消费群体，以及构造自己的数字化世界和加强全球范围内不同地域的人们联系交流等等活动也就显的日益重要。于是各种各样的网站便如雨后春笋般地出现鱼龙混杂且良莠不齐。Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题。基于如今社会的需要，本论文主要介绍怎样制作一个静态的个人网站。并且在建立个人网站的过程中逐渐理解和加强大学这几年所学习的关于制作网站的各种知识点。

4、在我个人的理解中，制作一个具有特色的个人网站，能够有自己的个性和特点。这样才能吸引人。只有一个目标，那就是做好自己。关键词： 个人 设计 网站引 言人类已进入21世纪,科学技术突飞猛进,经济知识和信息产业初见端倪,特别是信息技术和网络技术的讯速发展和广泛应用,对社会的政治,经济,军事,文化等领域产生越来越深刻的影响,也正在改变人们的工作,生活学习,交流方式。信息的获取,处理,交流和应用能力,已经成为人们最重要的能力之一。在不久的将来知识经济将占世界经济发展的主导地位,国家综合国力和国际竞争能力越来越取决于教育发展,科学技术和知识创新的水平,教育在经济和社会发展过程中将呈现出越来越突出的重要作用

5、。随着Internet的出现，网络正在改变整个世界，由于Internet具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发展成为新的传播媒体，而将教育和网络相结合，将会更好的推动教育的发展。现在不仅很多大学和众多企业部门都已经建立了自己的网站，而且个人网站也如雨后春笋般大量的出现，通过计算机网络实现宣传、交流及资源的整合第一章 网站制作的基础知识1.1建站工具编辑网页的工具有很多，但是我们一般用的是Macromedia公司的网页制作三剑客来制作网页。三剑客分别为Dreamweaver CS3、fireworks、flash。1.2网站建设的三个阶段（1）、网站的定位

6、即网站设计的最终目标及指导方针。确立网站的主题，解决为谁设计、吸引谁，交流什么。（2）、制作网页 通过网页设计体现网站整体协调一致的风格。网站的色彩基调、配色方案、页面色彩的格调、页面构图及图片、动画的处理等都要反复研究。方便的导航设计使用户易于访问站点中的资源。（3）、网站的发布与维护 完成对网站所有文件的测试并上传到服务器，进行网站的推广和宣传，建立信息的收集反馈系统，及时更新网页。1.3网站设计步骤（1）、设定网站主题并搜集资料 分析网站的访问对象是什么样的群体，确定网站要为访问者提供什么样的服务。围绕网站设计要达到的目标，进一步决定网站展示的内容和网站要实现的功能。（2）、建立站点的目

7、录结构 用来分类保存网站中的不同的资源，精心设计的网站目录结构有利于网站类容的扩充和移植需要。很多初学者往往不注意建立站点的目录结构，所有的文件都保存在一个目录中，这给今后的网站维护和扩充带来了很大的困难。例如，files保存非index之外是文件，images保存图片文件，sounds保存声音文件等等。（3）、建立网页的链接关系 网页的链接结构要层次清晰、访问方便快捷，就要设计网站中网页的链接关系。用最少的点击打开网站内的任何一个网页，为用户提供最便捷的服务。（4）、页面设计与网页制作 网站图标、网页标题、导航栏设计、各页风格、页面规划、便捷的链接、合理使用框架、巧用背景色、合适的图片、网页

8、空白。（5）、网站测试 已经建好的一个设计精美的网站在发布之前要进行严格的测试。如果在测试过程中发现了错误，就要及时修改，在准确无误后，可正式在Internet上发布。（6）、网站发布 把制作好的网站发布到自己的服务器系统上，也可以使用上传工具把网站发布到ISP提供的虚拟主机上。在国外或国内网站提供免费的主页空间和域名，上传后就可以使用浏览器访问自己的网站了（7）、推广宣传与后期维护 网页上传后，及时更新网站内容，为浏览者提供丰富、及时的信息。网页的更新速度是衡量一个网站的主要目标。同时为了增加网站的访问量，要采用各种方法加以推广。例如在搜索引擎上注册，发布网络广告提供免费服务或者使用传统的促

9、销媒介等等方式来推广网站。第二章 制作网页2.1 建立站点 选择“站点”，单击“管理站点”，单击“新建”，选择站点。如图（21）： 图21 在按上图完成所填部分，在面板组就会出现站点等文件夹了。在右边的面板组中选择“站点”文件名，右击“新建文件”，命名为“index”，完成首页的命名。2.2 制作首页2.2.1 页面设置首先双击“index.html”,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编

10、码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。首页设置的属性如图（22）所示：图222.2.2 网页布局在网页布局中一般采用表格来进行布局。下面简单介绍下表格的布局方式。通过单击“插入”面板中的“常用”选项中的“表格”来打开“表格”对话框，对话框可分为“表格大小”、“页眉”、“辅助功能”三部分。对表格的各项属性设置如图（23）所示：图232.2.3 插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。首先将游标停留在要插入图像的位置，通过单击“常用”栏中的“图像”的下拉按钮，单击第一个“图像”按钮，

11、随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件。如图（24）所示：图242.2.4 插入多媒体将光标移到要插入Flash动画的位置，选择“插入”面板中的“常用”选项卡单击“媒体”右侧的命令，再单击第一个“Flash”选项。再从打开选择文件对话框中选择你所需要的Flash动画（*.swf），调整Flash 动画的大小，既可以手动调整，也可以在下面的属性里添上我自己事先设置好的大小，如图（25）所示,在浏览器中，Flash动画才可以被看到，要想看看效果的话，只有按F12预览下。图252.2.5插入文本文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分

12、，它是最关键的因素。插入文本的两种方式：一种是在网页编辑窗口中直接用键盘敲入文本；另一种是复制文本的方式。直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下：打开文本编辑软件（如Microsoft Word），选中要复制的文本，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。2.3 建立子网页制作子网页的一般步骤和首页的步骤差不多。如果说你的首页中有标题的话，那么在子网页中也

13、一定要和首页的位置是一样的。在子网页中一般需要大量的文字叙述或者图片，这就需要做好细节工作了。第三章 网页链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容-网页的“链接”。“链接”，又称“超链接,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文本链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“锚记链接”、“文件下载链接”和“跳转菜单”，共8种。下面我所介绍将是在本网站中所能用到的链接方式。3.1文本链接“文字链接”即以文字作为媒

14、介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。将已经制作完成的首页的各个子网页准备好。在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。观察“属性面板”，其中包括一个“链接”文本框和“目标”文本框。接下来需要把链接的位址加入到文本框中。 在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。（“目标”文本框有四个选项。分别为-blank 、-parent 、-self或 top。）点击“blank”表示链接目标出现在新打开的窗口。还可以设置一些“链接”的属性，单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当