网络技术毕业设计论文个人主页设计.doc

《网络技术毕业设计论文个人主页设计.doc》由会员分享，可在线阅读，更多相关《网络技术毕业设计论文个人主页设计.doc（16页珍藏版）》请在三一办公上搜索。

1、网络技术毕业论文论文题目： 个人主页设计 专 业： 计算机网络 学生姓名： 准考证号： 060510100 指导教师： 2010年 1 月 1 日摘要随着现代计算机科学的发展，网络已经越来越普及，如今网络已经成为每个人生活的一部分，同时网络也提供了一种很好的信息交换平台，而个人主页是一个可以在网络上展示个人信息的方便手段。本文介绍了如何开发个人网站。首先介绍开发工具Dreamweaver以及HTML等技术，然后详细讲解了个人主页的结构与开发。关键词：Dreamweaver 个人主页 HTML 简历ABSTRACTAlong with the modern computer science de

2、velopment, the network already more and more popularized, now the network already became a part each person life, at the same time the network has also provided one kind of very good exchange of information platform, but individual main page was may demonstrate individual information in the network

3、the convenient method. This article introduced how to develop individual website. First introduced development kit Dreamweaver and HTML technology, then in detail explained the structure of the individual page and how to develop.Keywords: Dreamweaver; Individual website; HTML; resume目录第一章 引言5第二章 网页制

4、作概述62.1 网页的基础知识62.1.1 Internet简介61.1.2 站点与网页的建立62.2 Dreamweaver的运用62.2.1 背景的设置62.2.2 表格的使用62.2.3 插入图像及调整图像大小72.2.4文本段落的编辑72.3 应用多媒体72.3.1 在页面中插入背景音乐72.3.2 添加Flash影片72.4模板的制作与应用82.5 应用HTML语言82.5.1制作跑马灯效果8第三章 网页内容介绍103.1 首页的设计及目的103.2 简历页面的设计及内容113.3 相册页面的设计及内容113.4 日志页面的设计及内容123.5 联系我页面的设计及内容13结 论14参

5、考文献15第一章 引言在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我利用Dreamweaver软件制作了我的个人主页。下面我将从所运用的技术和包含的内容两方面向大家全面的介绍其制作过程。第二章 网页制作概述2.1 网页的基础知识2.1.1 I

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

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

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

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

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

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

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

13、、链接等。2.5.1制作跑马灯效果在网页的下面，我利用HTML提供的marquee命令,即：欢迎光临我的主页，希望这里可以给你带来轻松与欢笑！ 完成了滚动公告板的制作。具体过程不用记住代码，可以用Dreamweaver自带的“标签检查器”设置标签的属性值，它的功能类似于属性面板，但是比属性面板更强大。步骤如下：1.把光标插入点放在需要插入滚动字幕的地方。2.点击插入面板的“标签选择器 ”3.选择 marquee标签，点击“插入”按钮。4.转换到代码视图。把光标插入点放在 marquee标签内。5. 选择“窗口”-“标签检查器”。然后选择属性，单击未分类前面的，可以在“标签检查器”中设置标签的各

14、种用法。6.点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。7.direction属性设置字幕内容的滚动方向。8.scrollamount属性设置字幕滚动的速度。9.scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。实例中设置为1毫秒。如果要有步进的感觉，就设置时间长一点。10.width属性设置滚动字幕的宽度。11.style属性设置字幕内容的样式。实例中设置字幕文字大小，输入了“font:12px;”。12.loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。第三章 网页内容介绍本网站制作的主要关

15、于我生活学习中的一些事情，主要分为“首页”“简历”“相册”“日志”“联系我”五个板块，从不同方面展示我自己。同时还链接了简历下载，供用人单位下载。我将在下面进行详细介绍。3.1 首页的设计及目的首页是一个网站的主索引页，是令访客了解网站概貌并引导其调阅重点内容的向导。首页是一个网站的第一页，也是最重要的一页。首页是体现个人主页的主人性格的的重中之重，也是网站所有信息的归类目录或分类缩影。首页设计要求在保障整体感的前提下，根据大多数人的阅读习惯以色彩、线条、图片等要素将导航条、各功能区以及内容区进行分隔。以营造高易用性与视觉舒适性的人机交互界面为终极目标。最上面为通过CSS修饰了的“于鹏的个人主

16、页”，下面是导航条，包括了网站里的所有主要的网页，清晰明了。左边以flash按钮的方式列出了一些常用的网站链接，以方便平时上网。按钮下面是我的英文个性签名，使得网页更加突出个人性格色彩。中间是对网站三大部分的阐述和简介，以一个指南针和一个flash时钟修饰，右下角是一个世界时间的flash，可以用来查看各个时区的时间，左上角用一个flash作为banner条，具有动态效果，又不显得凌乱。页面最下方用滚动条的形式显示了欢迎语。整个页面简洁大方，富有个性，动静结合，达到了我努力营造的比较和谐的效果。具体布局如下图。首页3.2 简历页面的设计及内容简历页面是从方便招聘公司的角度来进行设计的。首先一个

17、黑色的页面里有一棵大树，后面是蓝天和白云，让人的眼睛感到很舒服，心情很平静愉快，黑色不刺激眼睛，而蓝色则能让人的眼睛放松。为了方便用人单位进行查看，我对简历的每一个部分都同多锚记进行了链接，可以方便快捷的查看每个部分，并且由于网页比较长，我在最后也通过锚记链接到了页首，使界面友好。并且可以通过点击简历下载来下载我的正式版的个人简历，以供用人单位参考和保存。网页通过导航条跟各个页面连接。文字通过CSS进行修饰，整体采用绿色和白色两种色调，主要还是起到即明显又不累眼睛的作用。文字右上方用Dreamweaver自带的相册生成工具制作，具体方法为插入媒体图像查看器，然后按向导进行各个设置，最后就自动生

18、成了一个简介的相册，用来动态的展示我的奖励与证书。3.3 相册页面的设计及内容相册页面大体布局跟首页相似，只是中间内容区显示的是我通过Flash软件制作的个人相册，里面有我去沈阳，北京的照片以及我自己的影的作品和收藏的图片。Flash相册功能强大，左下角的图像用来选择背景音乐，右边显示图片的预览，并且可以直接点进任何一个照片，下面的按钮用来一个一个的查看以及幻灯片效果播放。右上角的蝴蝶可以拖到相册的任何位置，并不时的扇动翅膀，增加相册的动感。3.4 日志页面的设计及内容日志模块里存放了我原创的和搜集日志，里面有我大学一直在做的智能车相关的日志以及各种生活感悟，各种有教育意义的内容。日志首页通过

19、一个“鼠标经过图像”来装饰，让页面生动有趣。左边有各个日志的链接，可以方便快捷的查看各个日志。3.5 联系我页面的设计及内容最后是能跟我进行交互的联系我页面，上面的表单可以方便浏览者留下个人信息并跟我进行交流，不过数据库方面没有做，所以只是一个形式，具体内容有待添加。下面是我的个人信息，其中电子邮件通过在链接里输入mailto:yup775可以直接打开用户电脑里的邮件软件给我发送邮件，方便读者。结 论在整个网站的设计制作过程中，我运用了CSS，表格布局网页，并添加了图像、Flash动画、按钮、动态图片等，力求使网页更加美观，引人入胜。但由于本人专业水平有限，虽力求完美，却仍有很大的不足亟待改正

20、。在以后的学习中，我将会不断努力，提高自己的专业水平，设计制作出更加完美的网页。参考文献1 刘霆雨 编著DreamweaverMX2004人民邮电出版社20062 林毅编著精通Dreamweaver8北京：清华大学出版社20073 汤倩 编著 Dreamweaver基础精讲与实例 人民邮电出版社 20064 彭力扬 编著 网页制作 中国青年出版社20065 王杰 周湘文 等编著 网页编程入门与应用实例 清华大学出版社 20036 张楠 刑谨 编著 网页设计基础教程 清华大学出版社 20047 李刚 编著 网页美工基础 机械工业出版社 2004.8 姜楠 编著 Dreamweaver完美网站设计与制作 中国青年出版社 20049 管建军 编著 CSS动态网页设计与制作 清华大学出版社 200610张孝文 编著 Dreamweaver设计与制作 人民邮电出版社11程佩青 编著 完美网页制作与设计实例 机械工业出版社 2003 12王学武 编著 基础网站建立与设计 中国青年出版社 2003指导教师评语 指导教师签名：毕业论文成绩指导教师签名：