个人博客设计.docx

1、个人博客设计个人博客设计 摘要随着现代计算机科学的发展，网络已经越来越普及，如今网络已经成为每个人生活的一部分，同时网络也提供了一种很好的信息交换平台，而个人博客是一个可以在网络上展示个人信息的方便手段。本文介绍了如何开发个人网站。首先介绍开发工具Dreamweaver以及HTML等技术，然后详细讲解了个人博客的结构与开发。关键词：Dreamweaver 个人博客 HTML 简历ABSTRACTAlong with the modern computer science development, the network already more and more popularized, no

2、w 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 the convenient method. This article introduced how to develo

3、p 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第二章 网页制作概述 62.1 网页的基础知识 62.1.1 Internet简介 62.2 Dreamweaver的运用 62.2

4、.1 背景的设置 62.2.2 表格的使用 62.2.3 插入图像及调整图像大小 72.2.4文本段落的编辑 72.3 应用多媒体 72.3.1 在页面中插入背景音乐 72.3.2 添加Flash影片 72.4模板的制作与应用 8第三章 网页内容介绍 103.1 首页的设计及目的 103.2 简历页面的设计及内容 113.3 相册页面的设计及内容 113.4 日志页面的设计及内容 12结 论 14参考文献 15第一章 引言在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网

5、站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我利用Dreamweaver软件制作了我的个人博客。下面我将从所运用的技术和包含的内容两方面向大家全面的介绍其制作过程。第二章 网页制作概述2.1 网页的基础知识2.1.1 Internet简介Internet是一个全球性的计算机互联网络，中文名称为“国际互联网”或“因特网”，它集现代通信技术和计算机技术与一体，是计算机之间进行国际信息交流和实现资源共享的良好手段。In

6、ternet是全球最大的信息资源库，几乎包括了人类生活的方方面面的信息，如政府部门、教育、科研、商业、工业、文化艺术、娱乐等。经过多年的发展，互联网已经在社会的各个层面为全人类提供便利。2.2 Dreamweaver的运用2.2.1 背景的设置网页的背景颜色决定了网页的风格，合理的设计和搭配是网页成功的关键，由于是个人博客，所以背景颜色没有特殊的要求，全凭个人喜好，我比较喜欢夜晚的星空，所以用星空作为背景，并保持整个网站的主色调为黑色，看起来眼睛也会觉得很舒服。对于原有图形利用Photoshop进行处理，调整好大小和颜色在页面属性中插入预先设计好的图片。2.2.2 表格的使用表格是网页设计的精

7、华，它使信息更加简洁和条理化。表格是网页排版布局不可缺少的工具，合理利用表格，可以使网页结构清晰有层次，而且便于管理和修改。在设计过程中，我在布局页面通过设定表格区域，插入表格，对网页进行布局，使结构看起来整洁有序。2.2.3 插入图像及调整图像大小一个纯文本的网页会让人感到索然无味，所以适当的图片是必须的，但是要保证不能太多，不但会喧宾夺主，而且还影响网页的下载速度，让用户因为受不了焦急的等待而离开页面。通过网络我搜索了与网站内容相关，颜色搭配的一些素材，力在突出我的专业特色，在网页里插入了一些与电子方面相关的图片。2.2.4文本段落的编辑文本的编辑是网页设计中比较容易实现的功能，但也是一个

8、网站的主要内容所在，不管网页做的有多么花哨，内容一定要充实，这样才能吸引别人光顾。在需要输入文字的表格中单击之后即可输入文字。利用“属性”命令，可以更改输入文字的字体及大小。在输入文字过程中，若想连续输入空格，则需要单击“编辑首选参数允许连续输入多个空格”选中该框即可，也可以按住shift+ctrl+任意次空格。其中如果想让各个网页的文字有统一的格式，可以用CSS来对文本进行设置，具体CSS的用法在下面详细介绍。2.3 应用多媒体2.3.1 在页面中插入背景音乐除了静态的图片，越来越多的动态效果被应用到网页的设计和制作过程中。多媒体技术使网页变得更加生动、有趣、绚丽多彩。在制作时，可以在网页中

9、插入背景音乐，增加意境。首先是鼠标放在需要插入音乐的地方，单击插入插件，打开“选择文件”对话框，选择站点文件夹中的声音文件，并单击确定。在“属性”检查其中“参数”按钮中输入“hidden”，”autostart”,在列中均输入”true”,则播放器被隐藏且无限期重复。但是考虑到插入背景音乐会很大程度上影响网页的下载速度，并且有很多用户不喜欢背景音乐，甚至刚一开网页突然的很大声的音乐会给访问者带来不好的印象，所以我没有在我的个人博客里插入背景音乐。2.3.2 添加Flash影片Flash是一种交互式动画，在网页中插入Flash影片，增添了动态效果，使网页看起来更加富有动感。它是网页的亮点，它能给

10、网页带来新鲜与活力。好的flash能让网页添色很多，但是如果flash总不停的闪烁，影响访问者的阅读，让访问者的眼睛感到不适，那样的flash就很失败了。经过我的精心挑选，几乎在每个网页中我都插入了flash动画。2.4模板的制作与应用如果网页中的布局格式基本相同，可以采用创建模板，不但可以节省大量时间，也便于网站的维护管理。创建模板通常有两种方式，一是先创建文档，再把文档转化成模板；另一种方法是直接创建。在此次网页制作过程中，创建模板的方法为首先创建网页中所有子页相同的部分，然后在模板窗口中插入表格作为可编辑区。最后保存模板。应用模板时，单击右侧的“文件”窗格，选择“资源”面板，单击“应用”

11、按钮即可应用。在编辑区编辑子页，最后进行保存。第三章 网页内容介绍本网站制作的主要关于我生活学习中的一些事情，主要分为“首页”“简历”“相册”“日志”四个板块，从不同方面展示我自己。我将在下面进行详细介绍。3.1 首页的设计及目的首页是一个网站的主索引页，是令访客了解网站概貌并引导其调阅重点内容的向导。首页是一个网站的第一页，也是最重要的一页。首页是体现个人博客的主人性格的的重中之重，也是网站所有信息的归类目录或分类缩影。首页设计要求在保障整体感的前提下，根据大多数人的阅读习惯以色彩、线条、图片等要素将导航条、各功能区以及内容区进行分隔。以营造高易用性与视觉舒适性的人机交互界面为终极目标。左边

12、以flash按钮的方式列出了一些常用的网站链接，以方便平时上网。按钮下面是我的英文个性签名，使得网页更加突出个人性格色彩。中间是对网站三大部分的阐述和简介，以一个指南针和一个flash时钟修饰，右下角是一个世界时间的flash，可以用来查看各个时区的时间，左上角用一个flash作为banner条，具有动态效果，又不显得凌乱。页面最下方用滚动条的形式显示了欢迎语。整个页面简洁大方，富有个性，动静结合。3.2 简历页面的设计及内容简历页面是从方便招聘公司的角度来进行设计的。首先一个黑色的页面里有一棵大树，后面是蓝天和白云，让人的眼睛感到很舒服，心情很平静愉快，黑色不刺激眼睛，而蓝色则能让人的眼睛放

13、松。为了方便用人单位进行查看，我对简历的每一个部分都同多锚记进行了链接，可以方便快捷的查看每个部分，并且由于网页比较长，我在最后也通过锚记链接到了页首，使界面友好。并且可以通过点击简历下载来下载我的正式版的个人简历，以供用人单位参考和保存。网页通过导航条跟各个页面连接。3.3 相册页面的设计及内容相册页面大体布局跟首页相似，只是中间内容区显示的是我通过Flash软件制作的个人相册，里面有我去沈阳，北京的照片以及我自己的影的作品和收藏的图片。Flash相册功能强大，左下角的图像用来选择背景音乐，右边显示图片的预览，并且可以直接点进任何一个照片，下面的按钮用来一个一个的查看以及幻灯片效果播放。右上

14、角的蝴蝶可以拖到相册的任何位置，并不时的扇动翅膀，增加相册的动感。3.4 日志页面的设计及内容日志模块里存放了我原创的和搜集日志，里面有我大学一直在做的智能车相关的日志以及各种生活感悟，各种有教育意义的内容。日志首页通过一个“鼠标经过图像”来装饰，让页面生动有趣。左边有各个日志的链接，可以方便快捷的查看各个日志。 结 论在整个网站的设计制作过程中，我运用了CSS，表格布局网页，并添加了图像、Flash动画、按钮、动态图片等，力求使网页更加美观，引人入胜。但由于本人专业水平有限，虽力求完美，却仍有很大的不足亟待改正。在以后的学习中，我将会不断努力，提高自己的专业水平，设计制作出更加完美的网页。参考文献1 管建军 编著 CSS动态网页设计与制作 清华大学出版社 20082范立峰 乔世权 等编著 JSP程序设计 人民邮电出版社 2009 3 汤倩 编著 Dreamweaver基础精讲与实例 人民邮电出版社 20064 彭力扬 编著 网页制作 中国青年出版社20065 林毅编著精通Dreamweaver8 清华大学出版社20076程佩青 编著 完美网页制作与设计实例 机械工业出版社 2003