关于静态网页论文

郑州电力职业技术学院

毕业设计

题目：美食网站论文

系别：信息工程系

专业：计算机应用

班级：计算机应用一班

学号: 1240303030303

姓名：韩x x

摘要

在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。本文从网页设计的角度出发，介绍一些设计中要素和技巧，例如框架、CSS 样式的使用等等。

关键词：网页设计要素框架 CSS

目录

前言 (4)

一、网页的要素 ...................................................................... 错误！未定义书签。

（一）图片要素 ................................................................ 错误！未定义书签。

（二）排列方法要素......................................................... 错误！未定义书签。

(三) 色彩要素..................................................................... 错误！未定义书签。

二、网页设计技巧 (5)

（一）框架的使用............................................................. 错误！未定义书签。

（二）样式的使用............................................................. 错误！未定义书签。

三、涉及软件 (6)

（一）DreamWeaVer CS3介绍 (6)

（二）DreamWeaVer CS3操作界面 (6)

四、制作前期工作 (7)

（一）歌曲类型选取 (7)

（二）歌曲选择 (7)

五、作品制作过程 (8)

（一）利用Photoshop切割网页图画 (9)

（二）利用Flash制作动画 ................................................ 错误！未定义书签。

六、网页设计经验................................................................... 错误！未定义书签。

参考文献 (9)

前言

互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。

一、网页设计的要素

在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。

（一）图片要素

要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学者花上一年半载的时间。图片的要求与页面的内容有关，一些较随意的主页像股票、医药站点等，来访者并不在乎你能否做出精彩的图片，有些时候他们反而觉得放置图象后影响了访问速度，他们关心的只是页面内容；相反像一些需要靠图象来吸引访客的主页，如游戏介绍、影视介绍、风光名胜等站点，图象是一个极为重要的要素，在这里缺少了恰当的图象，整个页面就会黯然失色、就是一个不完整的主页。这需要去学习像photoshop这样的图形图像处理软件，还要有一定的美术基础，如审美观、创意技巧等，

（二）排列方法要素

主页的第二个要素是排列方法，即网页布局。网页作为一种版面，既有文字，又有图片；文字有大有小，还有标题和正文之分；图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。关于具体的网页布局，常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，关于它们，在网页设计的相关书籍中或者在网络上都可以看到详细的叙述。比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，只有不断的变化才会提高，才会不断丰富我们的网页。

F、基于屏幕的可视开发环境；

G、可视编程环境；

H、高级可控制外观组件支持；

I、数据绑定；

J、Web 服务和 XML 的预建数据连接器；

K、项目管理功能；

L、源代码控制系统；

M、其它

（三）色彩要素

色彩在网页所占比重很大。有了合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。

二、网页设计技巧

一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。

（一）框架的使用

FRAME（框架）是Web上经常会看到的页面结构。框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相关的图形；每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。

使用框架具有以下缺点：可能难以实现不同框架中各元素的精确图形对齐；对导航进行测试可能很耗时间。

许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态)，则这些框架对于某些站点可能非常有用。

（二） CSS样式的使用

CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。CSS是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。

三涉及软件

（一） DreamWeaVer cs3介绍

Dreamweaver CS3是Adobe(奥多比)公司收购Macromedia公司后最新推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。Dreamweaver，Fireworks，Flash 被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档之一。

（二） DreamWeaVer cs3操作界面

DreamWeaVer cs3界面设计友好，空间广阔，操作精微细致,是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。如图3.1所示

4．制作前期工作

（一）歌曲类型选取

在确定了设计主题为FLASH MTV后，下一个步骤，就是歌曲类型的选取。歌曲的分类颇为广泛，要选择一个适合自己的类型进行制作，考虑了下面几个问题。该类型是否具有一定意义，是否能让作品做到不俗套，更容易让人接受。

在经过慎重考虑只后，我选择了流行歌曲的MTV制作，流行歌曲是目前少男少女们最喜爱的音乐类型，为了使MTV做起来比较顺利，我首先听了不同风格的歌曲，在其中找自己最喜欢，最有MTV画面的音乐。通过以上因素，所以毕业作品歌曲的类型就定为了抒情类情歌。

（二）歌曲选择

歌曲类型确定后，要选择一首怎样的歌曲进行制作，考虑到为了使观众从我的作品中感受到喜悦，我决定采用久别重逢为主题，通过反复的听

取不同的歌曲，最后我决定用许绍洋唱的“身边”作为本次毕业设计MTV 的歌曲。如图：

如图二：

五、作品制作过程

（一）利用CorelDRAW绘制图画

利用CorelDRAW矩形工具、钢笔工具绘制出厨房，并通过CorelDRAW 自带的色彩填充工具填充上相应的色彩。

（二）利用Flash制作动画

动画效果是页面生动、活泼，可以吸引、刺激网站浏览着点击动画页面，强烈的视觉冲击力给读者留下深刻的印象

六、网页设计经验

一般的来说，绝大多数普通受众图形，插件，applets和其它有关的高级Web 浏览器特性。对我们来说，页面的实用可能比漂亮更重要，对于用户来说，没有什么比页面能够快速下载更重要了，简而言之，精简你的站点，这是一条最佳的捷径。

另外还要注意，不要依赖图形。就站点设计而言，的确能够通过成功的图形设计招徕或者丢失访问者。并非所有的访问者可以完全看到图片，某些人为了加快存取网络的速度已经关闭了浏览器端的图形。简而言之，图形并不能正确的在客户端加载。然而，图形经常被用来作为导航按钮。

第三要注意，仅仅在需要的时候使用帧(FRAME)。使用帧可以把一个浏览器分成几个不同的窗口，对于站点的结构的把握是一个不错的方法。但是，你还是必须知道，还是有人在使用不支持帧的浏览器。在你开始打算设计一个帧的时候，你该仔细的考虑考虑你是否的确真的需要。经常，你这样的需求可以通过表格来组织站点的结构。

网页设计涉及到对多种软件、多种知识的学习和应用，以及个人的审美观等等。所以要想制作出漂亮的网页，需要一个逐步学习和经验积累的过程。网页设计还有更多的技巧，有待于我们去挖掘和研究。

结论

经过一个月的努力，我的这个个人小型网站终于做好了！在整个网站的设计开发过程中，我虚心的向同学请教，听取他们的意见和建议，然后把他们的这些好的合理的建议和意见都在我的个人网站中体现出来。例如，在网站的服务对象这个问题上，我就参考了同寝室的同学的意见，从而使我确定了我的这个网站的基调。当然，在整个网站的设计过程中，困难才是我最头疼的事。以前虽然也动手做过小型网站，但动手的次数并不多，这样就造成了我现在真的动起手来却感到陌生的原因之一。不过还好，在我遇到困难的时候，我就向同学请教，去图书馆查资料，也拿过来别人的作品做为自己的参考，当然，最重要的是有老师的指导，在许多数据库的问题上，如果不是老师的指导，我想我是不会那么轻易做好我的这个个人网站的后台管理的，所以，我是真的非常感谢老师的。

致谢

在本次毕业设计过程中，指导老师给予了极大的帮助。老师认真负责的工作态度和丰富的理论和实际操作能力都使我收益匪浅。无论在理论上还是在实践中，他都给与我很大的帮助，在他的帮助下使得整个网站能及时的设计完成，并从中学到了很多以前没有学到的知识，所以，非常感谢他耐心的指导。还有，在我设计整个网站的过程中，许多同学也给了我很大的帮助，特别是在论文的排版方面，我请教了多位同学，同学们都乐意指导，在这里我一起表示感谢。

最后要感谢在这四年的学习和生活中给予我关怀和照顾的每一位可敬的系领导和老师，感谢你们的无私奉献！感谢你们的悉心教导！感谢你们的点点滴滴！感谢母校对我们的培养！是你们，教会了我为人民服务的本领，是你们，让我懂得了做人的道理，无论以后我走到那里，我都会记得你们给予我的关怀和帮助。无论何时，我都会以我曾经是你们的学生而感到骄傲，我在这即将毕业离校的时候，我衷心的祝愿各位老师工作顺利，一生幸福。同时，我也祝愿我的同学到可以找的一份好的工作，都有一个好的前程。

参考文献

[1]纪晓亮、金超、詹强、刘玉鹏.《FLASH精彩动画设计》.清华大学出版社.2006年7月

[2]甘登岱.《FLASH8创意与设计百例》.航空工业出版社.2007年10月