网页课程
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
城市科技学院主页设计与制作
电气信息学院
网页制作技术 课程设计论文
(2008,2009学年第一学期)
论文题目: 城市科技学院主页设计与制作
姓 名:_____程春霖 __
专 业:_计算机网络技术_
学 号:_ 20068006 _
年级班级:__ 2006级1班_ __ 指导教师:_____王吉天_______ 完成日期:_2008年12月 26
1 / 15
城市科技学院主页设计与制作
摘要:
随着的，网站建设越来越接近于一门而不仅仅是一项技术。网页的设计， 日益被网站建设者所注重。在国内对此领域甚少的情况下，作者将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳和探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容;以主题鲜明、形式与内容相统一、强调整体为设计原则;具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功能”都是为了更好地表达网站主题这一观点.网页艺术设计是伴随着机互联的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。
关键词:网页的艺术;主题鲜明;视觉设计;技术
一、课程设计的目的,内容
(一)设计的目的:
网页是提供信息的一种方式,是学校企业开展电子商务的基础设施和信息平台。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业学校形象和文化的重要窗口。而网页的制作已经不单单是把设计者想要表达的内容摆放在网站上那么简单，当今的网页设计包含了更多的设计元素，给予浏览者更多的视觉享受。
(二)设计的内容:
1.视觉元素
这里所说的视听元素，主要包括:文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术
2 / 15
城市科技学院主页设计与制作
的运用大大丰富了网页艺术设计的表现力。
以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示GIF、JPEG图形和GIF89a动画。还有些多媒体文件(如MP3音乐)需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件(Plug-in)可以播放更多格式的多媒体文件。微软推出IE浏览器后，提供了基于OLE的ActiveX技术，用来在网页中播放多媒体。目前ActiveX已经成为热门技术。另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的于网页之中的小应用程序，相比于插件和ActiveX，JavaApplet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。
2.版式设计
网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。
但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。
二、需求
分析
定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析
(一)前言
网页设计是将技术性与艺术性融为一体的创造性活动。在网页出现的早期，
网页设计是以功能性为第一指导原则，以技术因素为主要考虑对象，以完成或
实现必要的功能为目标。近几年随着网络的发展而逐渐受到人们的重视，它本
身以网络为载体，把各种信息以最快捷、方便的方式传达给受众，在这种标准
的要求下，逐步产生了审美的需求。人们对美的追求是不断深入的，网页设计
同样如此。如何使受众能更好地和更有效率地接收网页上的信息，这就需要从
审美方面入手。网页设计的审美需求是对平面视觉设计美学的一种继承和延伸,
两者的表现形式和目的都有一定的相似性。
把传统平面设计中美的形式规律同现代的网页设计的具体问题相结合起
来，运用一些平面设计中美的基本形式到网页中去，增加网页设计的美感和大
众的视觉审美需求。例如将平面设计中的节奏与韵律和骨格的形式溶入到网页
中，这样会使内容繁多的页面更加有条理，也会使人浏览起来主次分明。当然
3 / 15
城市科技学院主页设计与制作
这种美首先要建立在内容充实且实用上。要想将网页设计得更漂亮，就要求设
计师具备较好的审美素质，同时还要有丰富的平面设计经验，这样才能在设计
时驾轻就熟。
(二)、现有网页存在着诸多的不足
由于网页从满足基本的功能需求到追求美的较为高层次的需求，这是一个循序渐进的过程。这让人不由得想起工业革命前夕，很多现代产品都没有，没有现成的模样可以参照，产品设计都是从满足基本的功能需要出发，所以做出来提示:2空白处是无
博客 用的，请跳过阅读吧-----------------It
提示:2空白处是无用的，请跳过阅读吧------------It博客
提示:2空白处是无用的，请跳过阅读吧------------It博客
4 / 15
城市科技学院主页设计与制作
5 / 15
城市科技学院主页设计与制作
文档收集整理均为itboke所贡献--要学习更多知识请到it博客学习～-------------------www.itboke.net 的产品非常粗糙，冷冰冰的，毫无生气。由于商业竞争和工业化大生产的要求，使得人们必须不断地改进产品功能，更为重要的是改进产品的外观，使产品在使用方便的基础上也能符合美的需求。从而在现今的货架上，我们看到了如此琳琅满目的漂亮商品。我想网页也同样如此。在满足了基本功能需求后，为了突显自己的特色，突出自己的优势，必须从审美入手。而目前国内网站的现状又是如何呢,常上网的网友应该深有体会。现今网页存在着诸多的不足，以下我将做一些简单分析。
第一、内容编排杂乱，缺乏规范化设计
6 / 15
城市科技学院主页设计与制作
目前很多网页具有这样的问题，文字、图片、动画等各种元素不加思索的添加到页面中，使页面浏览起来杂乱无章，主次不分，很难快速度找到自己所需要的内容。没有对页面进行规范化、条理化的设计，更谈不上网页视觉享受了。
第二、网页图片处理，缺乏美感
很多网站的图片缺乏艺术化处理。网页图片处理手法简单、缺乏设计思想，也不讲究图片与文字的互相搭配，与周围内容的统一。图片用色随意，随便找些图片经过高度和宽度的变形直接使用，而不考虑与页面颜色的协调关系等。
第三、技术性网页，缺乏合理运用。
技术性网页是指页面中使用了大量的脚本特效，如用DHTML、CSS、JAVASCRIPT等技术实现的页面效果。这些特效虽然技术含量较高，实现地某种效果会非常漂亮、逼真，但如果一个页面中穿插多个风格迥异的特效或动画，甚至与主题毫无相关，不但起不到美化网页的效果外，反而会造成页面凌乱，开启速度慢等种种影响浏览页面的质量。所以不管是从功能上还是从形式上都是不可取的。
第四，网站风格千篇一律，缺乏特色。
很多网站看起来都千篇一律，缺乏特色。特别是门户信息类网站，满页摆放的都是新闻资讯，除了内容的分类以外，风格都几乎一样。从标题的放置，背景的框架结构，页面的排版方式等都是如此。用色随心所欲，只是能区分文本内容和背景颜色而已。
第五、网页设计与配色，不够协调统一
目前国内网站设计中比较突出的问题就是设计与配色。我们经常浏览一些国内外网站，同时也细心留意其中的设计精髓。即使内容完全一样的两个网站，一个是国内网站，一个是国外网站，立即就能够看出其区别，我们不得不承认国外网站结构设计以及用色水平，国外网站很讲究用色的度，决不胡乱用，而整体配色的协调性与风格的一致性往往令人惊奇。相比之下，国内网站在设计中并不注重这些方面的表达，网站结构设计复杂混乱，条理不清晰，主次不分明等。网页颜色数量过多、互不相干的色彩穿插在一起。搭配不协调，缺乏统一的风格等。
综合以上分析，我们可以找出目前网页设计上的很多不足，特别是审美上的不足。在满足网页功能需求的前提下，更需要有针对性的采用一些美的形式，来
7 / 15
城市科技学院主页设计与制作
增添网页的生气和吸引力。
(三)、分析结论
网页作为一种新的视觉表现形式，它的发展虽然没有多长时间，但它兼容了
传统平面设计的特征，又具备其所没有的优势，成为当今信息交流的重要途径
之一。网页设计是一种综合性的设计，它所涉及的范围非常广泛，包括消费者
心理学、视觉设计美学、人机工程、哲学等诸多方面，当然也离不开一定的科
学技术发展。本文仅从视觉设计美学的角度进行了一些阐述与分析。美的网页
不仅是为了满足使用者的需求，更重要的是创造了一种愉悦的视觉环境，带给
人们以美的享受，令人百看不厌，回味无穷。
三 模块设计
3.1.
首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块:网站名称(logo+图片),广告条欢迎栏(banner), 主菜单用各个分菜单(menu),.css网页规范.公告栏滚动条,选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。
3.1.1主页模块使用技术,实现
(1)网站名称(图片)
使用技术: Macromedia Fireworks 8
实现:通过Macromedia Fireworks 8的图片处理制作如下图:
(2)欢迎栏广告条
使用技术: Macromedia Fireworks 8广告图片制作
8 / 15
城市科技学院主页设计与制作
Dreamweaver 8 的层,flash透明代码:
实现:通过Macromedia Fireworks 8广告图片制作, Dreamweaver 8 的层,flash.
透明广告条图如下:
(3)主菜单各个分菜单:
使用技术: Dreamweaver 8 表格
实现:通过DW8的表格进行主菜单,网页布局,截图如下:
主菜单:
网页布局:
9 / 15
城市科技学院主页设计与制作
(4)CCS进行网页规范
使用技术:DW8 css样式 主要css代码如下:
.zw {
FONT-SIZE: 12px; LINE-HEIGHT: 120%; FONT-FAMILY: "宋体" }
A:link {
FONT-SIZE: 12px; LINE-HEIGHT: 120%; FONT-FAMILY: "宋体" }
A {
10 / 15
城市科技学院主页设计与制作
FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; LINE-HEIGHT: 120%; FONT-FAMILY: "宋体"
}
A:hover {
FONT-SIZE: 12px; FONT-FAMILY: "宋体"; TEXT-DECORATION: underline }
.b {
FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: "宋体"; TEXT-DECORATION: underline
}
.b:visited {
FONT-SIZE: 12px; FONT-FAMILY: "宋体"
}
.b:hover {
FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: "宋体"; TEXT-DECORATION: underline
}
.line {
FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: "宋体"
………..
(5)公告栏滚动条
使用技术:javaScript 滚动代码: vAlign=bottom align=right bgColor=#ff781e
height=21>
浙公网安备 33021202002483