《网页制作论文75407》由会员分享，可在线阅读，更多相关《网页制作论文75407（8页珍藏版）》请在金锄头文库上搜索。
1、网页制作论文论文题目： 个人主页设计 专 业： 学生姓名： 学号 ： 2011年 12 月 16 日目录第一章 引言5第二章 网页制作概述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 简
2、历页面的设计及内容113.3 相册页面的设计及内容113.4 日志页面的设计及内容123.5 联系我页面的设计及内容13结 论14参考文献15第一章 引言在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我利用Dreamweaver软件制作了我的个
3、人主页。下面我将从所运用的技术和包含的内容两方面向大家全面的介绍其制作过程。 第二章 网页制作概述2.1 网页的基础知识2.1.1 Internet简介Internet是一个全球性的计算机互联网络，中文名称为“国际互联网”或“因特网”，它集现代通信技术和计算机技术与一体，是计算机之间进行国际信息交流和实现资源共享的良好手段。Internet是全球最大的信息资源库，几乎包括了人类生活的方方面面的信息，如政府部门、教育、科研、商业、工业、文化艺术、娱乐等。经过多年的发展，互联网已经在社会的各个层面为全人类提供便利。1.1.2 站点与网页的建立在制作网页之前，首先要创建和设置本地站点。首先要创建本地
4、站点的文件夹，命名为MY PW.然后分别建立“首页”、“简历”、“相册”、“日志”、“联系我”等主要网页。然后在“日志”中有设分页，将内容进一步扩展。编辑网页时，直接点击右侧文件中的相应网页即可。2.2 Dreamweaver的运用2.2.1 背景的设置网页的背景颜色决定了网页的风格，合理的设计和搭配是网页成功的关键，由于是个人主页，所以背景颜色没有特殊的要求，全凭个人喜好，我比较喜欢夜晚的星空，所以用星空作为背景，并保持整个网站的主色调为黑色，看起来眼睛也会觉得很舒服。对于原有图形利用Photoshop进行处理，调整好大小和颜色在页面属性中插入预先设计好的图片。2.2.2 表格的使用表格是网
5、页设计的精华，它使信息更加简洁和条理化。表格是网页排版布局不可缺少的工具，合理利用表格，可以使网页结构清晰有层次，而且便于管理和修改。在设计过程中，我在布局页面通过设定表格区域，插入表格，对网页进行布局，使结构看起来整洁有序。2.2.3 插入图像及调整图像大小一个纯文本的网页会让人感到索然无味，所以适当的图片是必须的，但是要保证不能太多，不但会喧宾夺主，而且还影响网页的下载速度，让用户因为受不了焦急的等待而离开页面。通过网络我搜索了与网站内容相关，颜色搭配的一些素材，力在突出我的专业特色，在网页里插入了一些与电子方面相关的图片。2.2.4文本段落的编辑文本的编辑是网页设计中比较容易实现的功能，
6、但也是一个网站的主要内容所在，不管网页做的有多么花哨，内容一定要充实，这样才能吸引别人光顾。在需要输入文字的表格中单击之后即可输入文字。利用“属性”命令，可以更改输入文字的字体及大小。在输入文字过程中，若想连续输入空格，则需要单击“编辑首选参数允许连续输入多个空格”选中该框即可，也可以按住shift+ctrl+任意次空格。其中如果想让各个网页的文字有统一的格式，可以用CSS来对文本进行设置，具体CSS的用法在下面详细介绍。2.3 应用多媒体2.3.1 在页面中插入背景音乐除了静态的图片，越来越多的动态效果被应用到网页的设计和制作过程中。多媒体技术使网页变得更加生动、有趣、绚丽多彩。在制作时，可
7、以在网页中插入背景音乐，增加意境。首先是鼠标放在需要插入音乐的地方，单击插入插件，打开“选择文件”对话框，选择站点文件夹中的声音文件，并单击确定。在“属性”检查其中“参数”按钮中输入“hidden”，”autostart”,在列中均输入”true”,则播放器被隐藏且无限期重复。但是考虑到插入背景音乐会很大程度上影响网页的下载速度，并且有很多用户不喜欢背景音乐，甚至刚一开网页突然的很大声的音乐会给访问者带来不好的印象，所以我没有在我的个人主页里插入背景音乐。2.3.2 添加Flash影片Flash是一种交互式动画，在网页中插入Flash影片，增添了动态效果，使网页看起来更加富有动感。它是网页的亮
8、点，它能给网页带来新鲜与活力。好的flash能让网页添色很多，但是如果flash总不停的闪烁，影响访问者的阅读，让访问者的眼睛感到不适，那样的flash就很失败了。经过我的精心挑选，几乎在每个网页中我都插入了flash动画。Flash图像浏览器可以通过自定义参数实现图像的切换特效。将光标放置于要插入图像浏览器的位置，执行菜单栏上“插入-媒体-图像查看器命令”打开“保存Flash元素”的对话框，将其保存在指定的站点目录下，将文件名输入browse.swf并保存。设置Flash元素面板，即可完成操作。2.4模板的制作与应用如果网页中的布局格式基本相同，可以采用创建模板，不但可以节省大量时间，也便于
9、网站的维护管理。创建模板通常有两种方式，一是先创建文档，再把文档转化成模板；另一种方法是直接创建。在此次网页制作过程中，创建模板的方法为首先创建网页中所有子页相同的部分，然后在模板窗口中插入表格作为可编辑区。最后保存模板。应用模板时，单击右侧的“文件”窗格，选择“资源”面板，单击“应用”按钮即可应用。在编辑区编辑子页，最后进行保存。2.5 应用HTML语言HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本
10、或图形方便地联系在一起，形成有机的整体，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。2.5.1制作跑马灯效果在网页的下面，我利用HTML提供的marquee命令,即：欢迎光临我的主页，希望这里可以给你带来轻松与欢笑！ 完成了滚动公告板的制作。具体过程不用记住代码，可以用Dreamweaver自带的“标签检查器”设置标签的属性值，它的功能类似于属性面板，但是比属性面板更强大。步骤如下：1.把光标插入点放在需要插入滚动字幕的地方。2.点击插入面板的“标签选择器 ”3.选择 marquee标签，点击“插入”按钮。4.转换到代码视图。把光标插
11、入点放在 marquee标签内。5. 选择“窗口”-“标签检查器”。然后选择属性，单击未分类前面的，可以在“标签检查器”中设置标签的各种用法。6.点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。7.direction属性设置字幕内容的滚动方向。8.scrollamount属性设置字幕滚动的速度。9.scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。实例中设置为1毫秒。如果要有步进的感觉，就设置时间长一点。10.width属性设置滚动字幕的宽度。11.style属性设置字幕内容的样式。实例中设置字幕文字大小，输入了“
12、font:12px;”。12.loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。第三章 网页内容介绍本网站制作的主要关于我生活学习中的一些事情，主要分为“首页”“简历”“相册”“日志”“联系我”五个板块，从不同方面展示我自己。同时还链接了简历下载，供用人单位下载。我将在下面进行详细介绍。3.1 首页的设计及目的首页是一个网站的主索引页，是令访客了解网站概貌并引导其调阅重点内容的向导。首页是一个网站的第一页，也是最重要的一页。首页是体现个人主页的主人性格的的重中之重，也是网站所有信息的归类目录或分类缩影。首页设计要求在保障整体感的前提下，根据大多数人的阅读习惯以色彩、线条、图片等
13、要素将导航条、各功能区以及内容区进行分隔。以营造高易用性与视觉舒适性的人机交互界面为终极目标。最上面为通过CSS修饰了的“刘栋的个人主页”，下面是导航条，包括了网站里的所有主要的网页，清晰明了。左边以flash按钮的方式列出了一些常用的网站链接，以方便平时上网。按钮下面是我的英文个性签名，使得网页更加突出个人性格色彩。中间是对网站三大部分的阐述和简介，以一个指南针和一个flash时钟修饰，右下角是一个世界时间的flash，可以用来查看各个时区的时间，左上角用一个flash作为banner条，具有动态效果，又不显得凌乱。页面最下方用滚动条的形式显示了欢迎语。整个页面简洁大方，富有个性，动静结合，
14、达到了我努力营造的比较和谐的效果。具体布局如下图。首页3.2 简历页面的设计简历页面是从方便老师查看的角度来进行设计的，为了方便用人单位进行查看，我对简历的每一个部分都同多锚记进行了链接，可以方便快捷的查看每个部分，并且由于网页比较长，我在最后也通过锚记链接到了页首，使界面友好。并且可以通过点击简历下载来下载我的正式版的个人简历，以供用人单位参考和保存。网页通过导航条跟各个页面连接。文字通过CSS进行修饰，整体采用绿色和白色两种色调，主要还是起到即明显又不累眼睛的作用。文字右上方用Dreamweaver自带的相册生成工具制作，具体方法为插入媒体图像查看器，然后按向导进行各个设置，最后就自动生成了一个简介的相册，用来动态的展示我的奖励与证书。结 论在整个网站的设计制作过程中，我运用了CSS，表格布局网页，并添加了图像、Flash动画、按钮、动态图片等，力求使网页更加美观，引人入胜。但由于本人专业水平有限，虽力求完美，却仍有很大的不足亟待改正。在以后的学习中，我将会不断努力，提高自己的专业水平，设计制作出更加完美的网页。
