个人网站建设及实现

1、郑州电力职业技术学院毕业设计论文题目： 个人网站建设与实现系 别： 信息工程系 学生姓名： 王 元 专 业： 计算机应用技术 班 级： 12计算机（1）班 学 号： 12403030125 设计成绩指导教师答辩成绩主答辩教师综合成绩答辩委员会主任目录 摘要1一 引言2二 网页制作概述3（一） 网页的基础知识31. Internet简介32. 站点与网页的建立3（二）Dreamweaver的运用31. 背景的设置32. 表格的使用33. 插入图像及调整图像大小44.文本段落的编辑4（三） 应用多媒体41. 在页面中插入背景音乐42. 添加Flash影片43. 模板的制作与应用5三 网页内容介绍6

2、（一）首页的设计及目的6（二） 我的好友页面的设计及内容7（三） 我爱的书页面的设计及内容8（四） 我心中页面的设计及内容8结 论9参考文献10 摘要在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。随着现代计算机科学的发展，网络已经越来越普及，如今网络已经成为每个人生活的一部分，同时网络也提供了一种很好的信息交换平台，而个人主页是一个可以在网络上展示个人信息

3、的方便手段。本文介绍了如何开发个人网站。首先介绍开发工具Dreamweaver以及HTML等技术，然后详细讲解了个人主页的结构与开发。现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，它能够把事情的复杂化转为简单化，摆脱了时间和空间的限制。网站为很多人提供了一个网络生活空间，通过其网页展示了企业介绍、城市文化、校园文化介绍、招商信息、加盟程序、留言等一系列内容的介绍。为了更好的宣传和服务于经济发展，我通过制作一个网站来介绍宣传一下我的家乡。本文比较系统的阐述了有关网站建设方面的相关理论知识及该网站开发设计，充分体现了计算机技术服务于经济建设的重要思想。关键词：Dreamw

4、eaver 个人主页 HTML internet一 引 言在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我利用Dreamweaver软件制作了我的个人主页。我所选择的毕业设计是个人动态网站设计。我的毕业设计是从三月初开始的。通过这一个月多的我的

5、个人动态网站的设计，我学到了很多知识，这也对于我自己来说是一次很好的实践机会的。这一个月多的对于我的网站设计，我在网上查了很多关于Dreamweaver的书藉。我也重新看了以前我所学的网页制做书藉。学校之所以给我们这些毕业生按排毕业设计，是为了我们能有机会对于这们这三年的大学学习的总结机会。学校一共给我们这届毕业生按排了五个毕业设计项目。我比较对网站设计感兴趣。这一次的毕业设计对我今后的工作，是一次很好的实践的机会的。在这一个月多的毕业设计过程中我学习了很多以前所学没接触的知识，也开拓了我的视野。下面我将从所运用的技术和包含的内容两方面向大家全面的介绍其制作过程。9 二 网页制作概述（一） 网

6、页的基础知识 1.Internet简介Internet是一个全球性的计算机互联网络，中文名称为“国际互联网”或“因特网”，它集现代通信技术和计算机技术与一体，是计算机之间进行国际信息交流和实现资源共享的良好手段。Internet是全球最大的信息资源库，几乎包括了人类生活的方方面面的信息，如政府部门、教育、科研、商业、工业、文化艺术、娱乐等。经过多年的发展，互联网已经在社会的各个层面为全人类提供便利。 2.站点与网页的建立在制作网页之前，首先要创建和设置本地站点。首先要创建本地站点的文件夹，命名为MY PW.然后分别建立“首页”、“简历”、“相册”、“日志”、“联系我”等主要网页。然后在“日志”

7、中有设分页，将内容进一步扩展。编辑网页时，直接点击右侧文件中的相应网页即可。（二） Dreamweaver的运用 1.背景的设置网页的背景颜色决定了网页的风格，合理的设计和搭配是网页成功的关键，由于是个人主页，所以背景颜色没有特殊的要求，全凭个人喜好，我比较喜欢夜晚的星空，所以用星空作为背景，并保持整个网站的主色调为黑色，看起来眼睛也会觉得很舒服。对于原有图形利用Photoshop进行处理，调整好大小和颜色在页面属性中插入预先设计好的图片。 2.表格的使用表格是网页设计的精华，它使信息更加简洁和条理化。表格是网页排版布局不可缺少的工具，合理利用表格，可以使网页结构清晰有层次，而且便于管理和修改

8、。在设计过程中，我在布局页面通过设定表格区域，插入表格，对网页进行布局，使结构看起来整洁有序。 3.插入图像及调整图像大小一个纯文本的网页会让人感到索然无味，所以适当的图片是必须的，但是要保证不能太多，不但会喧宾夺主，而且还影响网页的下载速度，让用户因为受不了焦急的等待而离开页面。通过网络我搜索了与网站内容相关，颜色搭配的一些素材，力在突出我的专业特色，在网页里插入了一些与电子方面相关的图片。 4.文本段落的编辑文本的编辑是网页设计中比较容易实现的功能，但也是一个网站的主要内容所在，不管网页做的有多么花哨，内容一定要充实，这样才能吸引别人光顾。在需要输入文字的表格中单击之后即可输入文字。利用“

9、属性”命令，可以更改输入文字的字体及大小。在输入文字过程中，若想连续输入空格，则需要单击“编辑首选参数允许连续输入多个空格”选中该框即可，也可以按住shift+ctrl+任意次空格。其中如果想让各个网页的文字有统一的格式，可以用CSS来对文本进行设置，具体CSS的用法在下面详细介绍。（三） 应用多媒体 1.在页面中插入背景音乐除了静态的图片，越来越多的动态效果被应用到网页的设计和制作过程中。多媒体技术使网页变得更加生动、有趣、绚丽多彩。在制作时，可以在网页中插入背景音乐，增加意境。首先是鼠标放在需要插入音乐的地方，单击插入插件，打开“选择文件”对话框，选择站点文件夹中的声音文件，并单击确定。在

10、“属性”检查其中“参数”按钮中输入“hidden”，”autostart”,在列中均输入”true”,则播放器被隐藏且无限期重复。但是考虑到插入背景音乐会很大程度上影响网页的下载速度，并且有很多用户不喜欢背景音乐，甚至刚一开网页突然的很大声的音乐会给访问者带来不好的印象，所以我没有在我的个人主页里插入背景音乐。 2. 添加Flash影片Flash是一种交互式动画，在网页中插入Flash影片，增添了动态效果，使网页看起来更加富有动感。它是网页的亮点，它能给网页带来新鲜与活力。好的flash能让网页添色很多，但是如果flash总不停的闪烁，影响访问者的阅读，让访问者的眼睛感到不适，那样的flash

11、就很失败了。经过我的精心挑选，几乎在每个网页中我都插入了flash动画。Flash图像浏览器可以通过自定义参数实现图像的切换特效。将光标放置于要插入图像浏览器的位置，执行菜单栏上“插入-媒体-图像查看器命令”打开“保存Flash元素”的对话框，将其保存在指定的站点目录下，将文件名输入browse.swf并保存。设置Flash元素面板，即可完成操作。 3.模板的制作与应用如果网页中的布局格式基本相同，可以采用创建模板，不但可以节省大量时间，也便于网站的维护管理。创建模板通常有两种方式，一是先创建文档，再把文档转化成模板；另一种方法是直接创建。在此次网页制作过程中，创建模板的方法为首先创建网页中所

12、有子页相同的部分，然后在模板窗口中插入表格作为可编辑区。最后保存模板。应用模板时，单击右侧的“文件”窗格，选择“资源”面板，单击“应用”按钮即可应用。在编辑区编辑子页，最后进行保存。 4. 应用HTML语言HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。三 网页

13、内容介绍本网站制作的主要关于我生活学习中的一些事情，主要分为“首页”“我爱的书”“我的好友”“我的大学生活”“我爱的小吃”“我爱的歌”“在心中”七个板块，从不同方面展示我自己。我将在下面进行详细介绍。（一） 首页的设计及目的首页是体现个人主页的主人性格的的重中之重，也是网站所有信息的归类目录或分类缩影。首页设计要求在保障整体感的前提下，根据大多数人的阅读习惯以色彩、线条、图片等要素将导航条、各功能区以及内容区进行分隔。以营造高易用性与视觉舒适性的人机交互界面为终极目标。整个页面简洁大方，富有个性，动静结合，达到了我努力营造的比较和谐的效果。具体布局如下图。首页 （二） 我的好友页面设计及内容我

14、的好友页面大体布局跟首页相似，只是中间内容区显示的是我通过photoshop软件制作的长图，里面有我去上海打工回来的聚餐，我的好朋友开学刚相识的聚会以及我自己参加的舞蹈表演等一系列的活动的图片还包括我系党总支书记冯慧蕾书记在某活动现场的照片。（三）我爱的书页面设计内容 我爱的书大体布局跟我的好友页面一致，也是用Photoshop处理了几张图片拼接在一起，是我在大学里甚至人生路上最喜欢的书。（四）在心中页面设计内容 由于有几个页面的设计风格类似，不做过多阐释，在心中这个页面同样插入了一系列找到的素材，找了一个小的视频短片，添加了几句关于大学，关于人生的名言，一些诗歌包括我自己最喜欢的一首歌。结

15、论在整个网站的设计制作过程中，我运用了Photoshop，表格布局网页，并添加了图像、Flash动画、按钮、动态图片等，力求使网页更加美观，引人入胜。但由于本人专业水平有限，虽力求完美，却仍有很大的不足亟待改正。在以后的学习中，我将会不断努力，提高自己的专业水平，设计制作出更加完美的网页。 通过这一次的毕业设计我学到了很多的关于编程的知识和关于网站设计的知识。毕业设计让我对于网站设计有了一个全新认识。网站设计这一模块通过让我们自己实践制作个人网站，学会规划、设计、发布、管理简单的网站。在实际的学习中存在我们对网站主题、内容选择的困惑；对网站设计的布局、色彩搭配等审美评价的差异。我也在网上搜了很

16、多有关个人网站设计的资料。通过做这一次的毕业设计，我积累了很多有关网站设计的经验，也让我对于动态网站有了真正的认识：动态网页与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。参考文献1 刘霆雨 编著Dreamweaver MX 2004人民邮电出版社20062 林毅编著精通Dreamweaver8北京：清华大学出版社20073 汤倩 编著 Dreamweaver基础精讲与实例 人民邮电出版社 20064 彭力扬 编著 网页制作 中国青年出版社20065 王杰 周湘文 等编著