网页界面设计毕业设计
XXXXXXXXXX学院
毕业论文课题名称网页界面设计
学生姓名XXX
学号XXXXXXX
专业XXXXXXXXXXX
班级XXXXXXXXXX
指导教师XXX
2008年5月9日
``````````````````````````````````````````````````````````````````````````````````````````封面```````````````````` 摘要：网络教学的好处随着科技的飞速发展与进入小康社会近一步的实现，电脑，在人们
的生活中已经十分普及。于是，网络也已经成为人们生活中不可获缺的一部分。虚拟实验室是一种特别的、分布式的解决问题的环境,是提供给用户的一个基于网络的实验教学、技术交流、共同研究、协同工作的平台,是一种基于计算机虚拟原型系统的全新的科学研究与工程设计方法,是除理论与实物实验之外的第三种研究设计手段和形式。目前,虚拟实验室的指的是在计算机系统中采用虚拟现实技术实现的各种虚拟实验环境,实验者可以像在真实的环境中一样完成各种预定的实验项目,所取得的学习或训练效果等值于甚至优于在真实环境中所取得的效果.为此我们设计了这个物理实验学习网站供学生学习.采用了3DMAX技术,CULT 3DMAX技术,人机交互技术（BBS技术,聊天室技术）本人主要负责的是界面设计. 英文：The advantage of study of network, with the development at full speed and entering
realization of nearly one step of well-off societies of science and technology, the computer, has already popularized in people's life very much. Then, the network has already become a part that can't be lacked in people's life. The fictitious laboratory is a kind of special, distributed environment of solving the problem, offer an teaching of experiment, exchange of technology, platform studied together, worked in coordination based on network of users', it is a brand-new scientific research based on fictitious prototype system of the computer and design method of the project, it is the third kind of research besides theories and material object experiments that
designs means and form. At present, meaning various fictitious experiment environments of adopting virtual reality technology in the computer system of the fictitious laboratory, the experimenter can finish the experiment projects of different reservations as in the true environment, study made or train result equivalence on superior to result made among true environment even. We have designed this physical experimental learning website to support students to study for this. Have adopted 3DMAX technology, CULT 3DMAX technology, the technology of human-computer interaction (BBS technology, the technology of the chatroom). A main and responsible one of mine is that the interface is designed.
目录:
第一章物理虚拟实验制作概述
1.1 虚拟实验的优点
1.2 虚拟实验运用的技术
第二章界面设计流程
2.1 网页艺术设计的内容
2.1.1. 视听元素
2.1.2 版式设计
2.2 网页艺术设计的原则
2.2.1 .主题鲜明
2.2.2 形式与内容统一
2.2.3 强调整体
2.3 网页艺术设计的特点
2.3.1.交互性与持续性
2.3.2多维性
2.3.3 多种媒体的综合性
2.3.4 技术与艺术结合的紧密性
第三章界面具体设计
3.1 登陆页的设计
3.2 主页的设计
3.2.1 布局设计
3.2.2 导航设计
3.3 实验操作界面
3.3.1 论坛
3.3.2 聊天室
第四章总结
4.1 界面设计总结
4.2 本次网络教学研究的价值
第一章物理虚拟实验制作概述
1.1虚拟实验的优点
1. 网络是一个信息宝库，作为祖国的明天的我们，更是应该掌握网络技术，今后才能不被社会所淘汰。网络让巨大的地球变成了一个“地球村”，不管你在哪里只要你可以上网，你便可以畅游世界。网络的虚拟性为每一个人发展自己的才能提供了舞台，现在不是出现了许多网络歌手吗？对我们中学生而言，网络的虚拟性可以让我们的潜能得到发挥，我们可以在网上发表文章，参与国政商讨，但一定也要对自己的行为进行约束，不能违反网上规定的行为。网络可以让你我的心靠得更近，但对人的负面影响也是潜移默化的，要做一个合格的网民，就必须遵守规章制度愿网络可以为你，铺设一条更宽大的路。我感受到了网络学习的魅力。如果要把一个人的心灵拿来作比，那么网络正是开启你心智、启迪你思维、实现你心愿的最好"帮手"。现在，我们生活在一个日新月异的时代、一个充满想象的时代、一个令人鼓舞的时代。网络的出现和发展，正在迅速而深刻地影响着、改变着我们的生活以及其他方方面面。你对数字化（网络）生活充满着多少想象和期待，你的生活因此就会变得多么丰富多彩和与众不同。网络就是一所开放的大学。
2..虚拟现实实验室是虚拟现实技术应用研究的重要载体。
随着虚拟实验技术的成熟，人们开始认识到虚拟实验室在教育领域的应用价值，它除了可以辅助高校的科研工作,在实验教学方面也具有如利用率高,易维护等诸多优点.近年来,国内的许多高校都根据自身科研和教学的需求建立了一些虚拟实验室。网络虚拟实验室是一个无墙的中心,通过计算机网络系统,研究人员或学生将不受时空的限制,随时随地与同行协作,共享仪器设备,共享数据和计算资源,得到教师的远程指导及与同行相互研讨。由于通过网络虚拟
实验室能够实现跨时空跨学科的仪器设备远程共享,甚至远程控制,虚拟实验作为现代远程教育的重要组成部分在保障教学效果方面起着不可替代的作用,已经获得了越来越多人的青睐。但是由于它的发展起步较晚,技术上还很不成熟。由于受市场竞争的影响，新一代的设计和制造技术正在向全球化、网络化、虚拟化的方向发展，基于网络的虚拟三维环境的构建是支持这一发展的技术之一。互联网技术和计算机技术的发展使3D图形在网络上的传输与PC机上的显示功能越来越完善。VRML（Virtual RealityModelinLanguage）正是被Web3D 协会（Web3D Consortium）设计出来作为网络3D图形文件的格式标准。今年Web3D协会（Web3D Consortium）又颁布了新一代VRML标准——X3D，它的含义是Extensible 3D。它是下一代的，可扩展的，互联网上的3D图形规范。虚拟实验室是一种特别的、分布式的解决问题的环境,是提供给用户的一个基于网络的实验教学、技术交流、共同研究、协同工作的平台,是一种基于计算机虚拟原型系统的全新的科学研究与工程设计方法,是除理论与实物实验之外的第三种研究设计手段和形式。说明虚拟实验室不仅是远程教育所必需的,对于全日制普通高校也是非常重要的,具有十分广阔的应用前景。
1.2 虚拟实验运用的技术
1.2.1 技术综述
1. 多媒体计算机技术与仪器技术的结合构成了网络虚拟实验室实现的基础,使人们拥有自己实验室的幻想与愿望可以在计算机屏幕上通过场景式图形界面而得以“实现”。无论是学生还是教师,无论是在近处还是远方,大家都可以自由地、无顾虑地随时进入网络虚拟实验室操作仪器,进行各种实验。这不但为实验类课程的教学改革及远程教育提供了条件和技术支持,还可以随时为学生提供更多、更新、更好的仪器。1构建基于虚拟仪器的网络实验室[1~3]1.1实验室的实现原理网络虚拟实验室的构建多使用BSDA(browser/server/data-base/app lication)结构,即客户端/…
近年来,虚拟现实技术的出现为虚拟实验的发展带来了新的生机。由于它采用了3D 数字化技术、多传感交互技术以及高分辨显示的科学可视化技术,能够生成三维逼真的虚拟场景,并能使用户与场景进行实时交互,感知和操作虚拟对象,因而能够提供比现有虚拟实验更佳的性能和更好的教学效果。论文对虚拟实验和虚拟现实技术进行了分析,深入研究了如何利用虚拟现实技术及Web 技术来架构新型的网络虚拟实验系统。在系统设计与实现过程中,针对当前远程教学系统的特点采用桌面型虚拟现实系统,使用户只需通过鼠标和键盘就能够与虚拟场景进行交互。
Cult 3D是一种强有力的3D渲染技术，它采用先进的压缩技术，并支持多重阴影效果、贴图和双线性滤镜，这样制做出来的物体模型具有极度逼真的画质，使浏览者可以得到近乎完美的视觉效果。而且Cult 3D可以实现复杂的动画，这就为物体添加交互性创造了众多的机会。
我们的出发点处于人机工程学这个大背景，遵循人机工程学的基本观点，在“以人为中心”前提下强调人机配合。
1.2.2 技术具体介绍
1. 3DMAX的优点：3DMAX是一个功能很强的随意性很高的制图软件，它的目标是生成漂亮逼真的图片，而这些图片中的元素基本上都是由操作都手工制作出来的，而不是现场的照片。城市街头会有很多大幅的图片，其中很多都是这么做出来的，尤其是一些建筑的效果图，您想想，建筑还没建好呢，那它的图片是怎么做出来的呢。3DMAX为了达到这个
效果，提供了大量的而且是很随意的三维造形功能，让操作者几乎无所不能（不过我觉得还是有缺欠，用起来不方便，不直观），然后再利用它很强的渲染功能生成图片。象上面所说的，它的另一个功能是可以制出动画片的。
2 .cult3DMAX优点：模型质量高，交互性能好。不管是二维还是三维，良好的图像质量都是非常重要的。Cult 3D是一种强有力的3D渲染技术，它采用先进的压缩技术，并支持多重阴影效果、贴图和双线性滤镜，这样制做出来的物体模型具有极度逼真的画质，使浏览者可以得到近乎完美的视觉效果。而且Cult 3D可以实现复杂的动画，这就为物体添加交互性创造了众多的机会。Cult 3D的开发过程也比较简单。首先，您必须使用一个三维模型制作软件（3DMAX或MAYA），制做物体的三维模型。制做前您必须先下载插件Cult 3D Exporter for 3DMAX或Cult 3D Exporter for MAYA。只有装好输出插件，3DMAX或MAYA 才可以将3D模型输出成Cult 3D Design的C3D格式。
3．论坛又名BBS，全称为Bulletin Board System(电子公告板）或者Bulletin Board Service（公告板服务）。是Internet上的一种电子信息服务系统。它提供一块公共电子白板，每个用户都可以在上面书写，可发布信息或提出看法。它是一种交互性强，内容丰富而即使的Internet电子信息服务系统。用户在BBS站点上可以获得各种信息服务，发布信息，进行讨论，聊天等等。像日常生活中的黑板报一样，论坛按不同的主题分为许多版块，版面的设立依据是大多数拥护的要求和喜好，用户可以阅读别人关于某个主题的看法，也可以将自己的想法毫无保留地帖到论坛中。一般来说，论坛也提供邮件功能，如果需要私下的交流，也可以将想说的话直接发到某个人的电子信箱中。在论坛里，人们之间的交流打破了空间，时间的限制。在与别人进行交往时，无须考虑自身的年龄，学历，知识，社会地位，财富，外貌，健康状况，也无从知道交谈的对方的真实社会身份。这样，参与讨论的人可以处于一个平等的位置与其他人进行任何问题的探讨。论坛往往是由一些有志于此道的爱好者建立，对所有人都免费开放。而且，由于BBS的参与人众多，因此各方面的话题都不乏热心者。我们当然可以利用它来解决学习中的一些疑惑，也可以把自己的心事吐露出来。
4．聊天室可以建立在即时通讯软件（如MSN Messenger、QQ）、P2P软件、万维网等基础上，万维网方式更为普通和种类繁多，交谈的手段不局限于文本，更包括语音、视频。通常聊天室是按照房间或频道为单位的，由一个或者多个管理员管理，在同一房间或频道的网人可以实时地广播和阅读公开消息。一般情况下，与其它网络论坛、即时通讯不同的是，聊天室不保存聊天记录。随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下，作者将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功能”都是为了更好地表达网站主题这一观点。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。
第二章界面设计流程
2.1 网页艺术设计的内容
2.1.1. 视听元素
设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。
这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文
字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页艺术设计的表现力。
2.1.2 版式设计
网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。
但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。
2.2 网页艺术设计的原则
网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，内容与形式的统一。它要求设计者必须掌握以下三个主要原则：
2.2.1 .主题鲜明
视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给观赏者。诉求的目的，是使主题在适当的环境里被人们即时地理解和接受，以满足人们的实用和需求，这就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。
作为视觉设计范畴一种的网页艺术设计，其最终目的是达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。只有两个方面有机地统一，才能实现最佳的主题诉求效果。
2.2.2.形式与内容统一
任何设计都有一定的内容和形式。内容是构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂”；形式是构成内容诸要素的内部结构或内容的外部表现方式。
设计的内容就是指它的主题、形象、题材等要素的总和，形式就是它的结构、风格或设计语言等表现方式。内容决定形式，形式反作用于内容。一个优秀的设计必定是形式对内容的完美表现。
一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能体现出网页设计独具的分量和特有的价值。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。
只有通过认真设计和充分的考虑来实现全面的功能并体现美感才能实现形式与内容的统一。
网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变化以达到多变性处理效果，丰富整个网页的形式美。这就要求设计者在注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页的形式与整体内容的统一。
因此，在网页设计中必须注意形式与内容的高度统一。
2.2.3 .强调整体
网页的整体性包括内容和形式上的整体性，这里主要讨论设计形式上的整体性。
网页是传播信息的载体，它要表达的是一定的内容、主题和意念，在适当的时间和空间环境里为人们所理解和接受，它以满足人们的实用和需求为目标。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。
网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。例如：在版式上，将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反”就是这个道理。因此，在强调网页整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”基础上的整体。
2.3 网页艺术设计的特点
2.3.1.交互性与持续性
网页不同于传统媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是Web 成为热点的主要原因，也是网页设计时必须考虑的问题。传统媒体（如广播、电视节目、报刊杂志等）都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式来传播。而在Web环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份加入到信息的加工处理和发布之中。这种持续的交互，使网页艺术设计不像印刷品
设计那样，发表之后就意味着设计的结束。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常地对网页进行调整和修改。
例如，为了保持浏览者对网站的新鲜感，很多大型网站总是定期或不定期的进行改版，这就需要设计者在保持网站视觉形象一贯性的基础上，不断创作出新的网页设计作品。
2.3.2. 多维性
多维性源于超级链接，主要体现在网页设计中对导航的设计上。由于超级链接的出现，网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅使浏览者检索和查找信息增加了难度，也给设计者带来了更大的困难。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而完善的导航设计。
印刷品中导航问题不是那么突出，如果一个句子在页尾突然终止，读者会很自然地翻到下一页查找剩余部分，为了帮助读者找到他们要找的信息，出版者提供了目录、索引或脚注。如果文章从期刊中的一页跳到后面的非顺序页时，读者会看到类似于“续68页”这样的指引语句。然而，作为一名网页设计者，你以前所学的导航技术没有一种完全适合于网页导航。在替浏览者考虑得很周到的网页中，导航提供了足够的、不同角度的链接，帮助读者在网页的各个部分之间跳转，并告知浏览者现在所在的位置、当前页面和其他页面之间的关系等。而且，每页都有一个返回主页的按钮或链接，如果页面是按层次结构组织的，通常还有一个返回上级页面的链接。对于网页设计者来说，面对的不是按顺序排列的印刷页面，而是自由分散的网页，因此必须考虑更多的问题。如：怎样构建合理的页面组织结构，让浏览者对你提供的巨量信息感到条理？怎样建立包括站点索引、帮助页面、查询功能在内的导航系统？这一切从哪儿开始，到哪儿结束？
2.3.3 技术与艺术结合的紧密性
设计是主观和客观共同作用的结果，是在自由和不自由之间进行的，设计者不能超越自身已有经验和所处环境提供的客观条件限制，优秀设计者正是在掌握客观规律基础上得到了完全的自由，一种想象和创造的自由。网络技术主要表现为客观因素，艺术创意主要表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律，注重技术和艺术紧密结合，这样才能穷尽技术之长，实现艺术想象，满足浏览者对网页信息的高质量需求。技术与艺术的紧密结合，把浏览者带入一个真正现实中的虚拟世界。
第三章界面具体设计
3.1登陆页设计
在登陆页中设置了一下窗体的颜色，不至于使的看起来太单调，在顶部添加了一张天空的图片，使人感觉像是进入了物理的世界，在图中中间那行字是左右滚动的，使得页面有些动态的效果，在往下是登陆和注册，下面一些简要的介绍。
3.2 主页的设计
3.2.1 主页的布局
主页不但起到对本网站的一些说明，而且要有充实的内容，首页是吸引读者眼球的地方，要尽棵能的华丽一点，我们的网站首页上部是用PHOTOSHAO制作的一张图片，只所以制作这一张图片是为了和本网站的主题相一致，也是为了美观。中间是一行能左右晃动的文字，是为了增加网页的动态感，但不要弄的太多，太多了就有点使人的头脑眩晕。接着往下是一些图片以及导航，之所以选择这四副图片是因为为了让文字和图片做到统一，比如，力学实验，其上面的图片是一个很形象的天平，在往下是对本网站的一些介绍，虽然只是一些文字，但是对于一个网站是必不可少的，少了这些会使人对本网站的一些操作不熟悉，以至使人不会在你的网站停留太长时间，在往下是低层的介绍，是让人们熟悉一下其他的内容，背景色对于一些网站也是很有用的，不会使人感到太单调。
3.2.2主页的导航设计
导航的设计对于一个网站是之关重要的，导航让你的网站成为一个统一的整体，一个浏览者通过导航能找到他要找的网页，找到他所需要的东西，所以，导航设计的好坏直接影响这个网站的整体性以及对用户提供的方便性。导航很重要，但是，是很容易实现的，导航一般都是通过超联接来实现的，比如说，以上两个界面，第一个为首页，上面我们也说了，首页很重要，为了节省浏览者的时间，首页要有足够的导航，让浏览者很容易的找到要查找的下一页，这是第一级导航，是非常重要的。
下一个为实验页，因为有很多实验，但是为了网站的整体性，各个实验页是相似的，所以只拿一个页面作为讲解，在实验页中有了二级导航，导航设置在左边，之所以这样设计是为了整个网页的布局的合理性，使得的浏览者更容易一目了然，为了使浏览者精确的查找，方便浏览者能找到相应的网页。
第三副图片是为了保持网站的整体性，这张界面是做成了一个摸板，通过文件的包含，嵌入到其他页面中，所以在其他页面中也能看到这种设计，像这种文件的包含，在网页中是要大量用到的，节省了很多的空间。也许有人会有疑问，导航这么重要，为什么在我们的网站中只用到二级导航，我在这里需要说明一下，虽然导航很重要而且看起来很美观和简洁，但是不要太多的深入的导航，一般网站都是三级导航，如果用的太深入的导航会使浏览者感到乏味，不耐心寻找下去，只要不是特别大的网站，不要用太深入的导航。
3.3实验操作界面
3.4.1论坛登陆界面
这是论坛的界面，论坛界面上部使用了导航，为了不至于太单调，论坛用了和其他页面不一样的格调，比如图片，在论坛首页中使用了好多简单的图片，这个论坛拥有比较简单的功能，例如，登陆，发帖子，回复帖子。
3.3.2聊天室界面
聊天室是做了个简单的设计，使用了两个文本域，一个是要输入的话，一个是要显示的话。第四章总结
4.1 界面设计总结
下面我们将设计高效的用户界面的主要技巧小结如下：
用户界面的一致很关键，设立界面标准并遵循之，采用行业标准，也使你的应用软件看起来或视感上与其它机构开发的软件更趋一致，向用户阐明软件运行规则。有了一致性，规则只会简练，支持生手也支持熟手；文字措辞一致、正面，要用全称，对其它软件不盲从’，要知道不是每个人都懂得如何设计好的用户界面；在桌面上显示快捷方式；根据业务对象及其相应的界面对象去思考，而不是从应用软件本身去思考；界面对象在视觉上、感觉上和行为上应与其在现实世界的表现一致。
2、屏幕设计
界面间切换、界面布局都很重要；理解小部件，才能正确地加以应用；使用颜色要谨慎，以指示符补充；遵循对比原则一一在浅色背景上使用深色文字，在深色背景上使用浅色文宇；字体使用要适当和一致；项目不可用时，灰掉而不是移走，用户才有形成精确的心理模型：使用无害的缺省按钮；编辑区域左对齐，相应的标签则应右对齐，整数、浮点数右对齐，字符串左对齐；避免屏幕拥挤；用方框和间隔对屏幕上有逻辑关联的项目加以组合；在操作焦点处打开窗口；弹出菜单不应是唯一的功能来源。
3、建立原型
用户需求决定了原型的开发，原型评估的任务：发现原型的成功之处，失败之处及遗漏之处；在评估过程中只发现少量需求或不再有新的需求时，即可结束原型建立过程；寻找现
实对象，确定用户在现实世界中的使用方式；与软件开发完成之后的实际用户共同工作，设
定原型开发时间表并执行；使用原型开发工具：用户参与开发，对原型进行测试：了解根本业务；别在很可能丢弃的事情上花大时间，一旦界面对象稳定，就应文档化，为原型开发界面流程图：对组成原型的每个界面对象建立文档。
4.2 本次网络教学研究的价值
在整个教育体系中，教师、学生是其基本的构成要素，随着信息技术在教育领域的广泛应用，教育信息化的深入展开，使教师的作用、学生的能力要求等都发生了深刻的变化。
1、教师的作用
传统的教育中，教师的基本作用是向学生传递一定学科的专业知识。信息技术的广泛应用，学生可以自主地通过各种途径，以各种方式进行学习。在这种情况下，教师的作用为：学习的组织者和协调者对于给定的学科内容，学生可以通过多种途径，不仅通过老师，还可以通过因特网、光盘学习，也可以通过小组讨论、调查访问等多种途径学习。教师不再只是讲授，而应对学生的多种学习活动进行指导、计划，对各种学习活动进行组织、协调。学习网络的促进者为了对学习活动进行有效的指导和计划、组织和协调，教师必须把握对应于各种学习课题的学习途径、学习资源。为此，教师应广泛地收集各种分散的学习资源、学习信息，注意加强不同学校、不同教育部门的联系与交流，并逐渐形成一种支援学生学习的网络系统。学生信息能力的培养者学生在利用多种途径进行自主学习中，信息能力是十分重要的。教师应注重学生信息能力的培养。
2、对学生的价值
信息社会需要的是具有创新精神、创造能力和善于实践的人才。这对我们的学校教育提出了新的要求。何为素质教育?就是在学习知识的基础上，还要能够学会如何获取知识、如何运用知识、如何创新知识。以知识的传递、知识的理解为中心的接受学习中，学生是被动地接受知识，对学生的要求是理解知识、掌握知识。信息技术的广泛应用，要求学生不仅是被动地接受知识，更重要的是主动地获取知识。在这种情况下，要求学生更注重学习方法、思维方法和讨论方法的掌握，要求学生具备一定的自我学习能力。在教育信息化的环境中，学生实现知识的探索，实现发现学习、实现问题解决学习，实现创新能力的培养。在这个过程中，学生对信息的获取、处理、创造、表现的能力，即信息能力是十分重要的。在教育信息化的学习环境中，需要学生具有很好的信息能力。
网页设计与制作实例教程
网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题 略 第2章网页规划设计 一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略） 第3章初识网页制作软件 一、选择题 1．C 2．C 3．B
二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题 略 第5章设置网页超级链接 一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页 一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页 一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题
网页设计,色彩搭配分析
在网页设计中，对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的。大多数网站或多或少相同，但是颜色的设计搭配却是一个非常给力的工具。 我并不想尝试去阐述一些具有革命性的东西或者是特别的发现。但如果大部分网站都采用同样的配色方案，那对颜色意味着什么呢？实际上，远超出你的想象。幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的，但它同时也意味着千篇一律。这就像你文章中每一个段落的粗体。 因此，当配色方案比较柔和的时候，它允许有更多的机会。 关注你想要的任何东西 许多网站都有一个基本的灰度配色方案-白色的背景和黑色的字体。(网页中)想让你看到的部分会赋予颜色作为强调。这就是为什么网页不会充满颜色—它们使用在想让你看到的按钮，标题或者链接上面。 Vibrant ，当你第一次登陆它们的主页，主页的背景和图片是黑白的，网站标志，可点击的按钮和汉堡菜单是亮黄色，这些可以很快的（在灰度背景中）脱颖而出，吸引你的注意力。 另一个例子是Takeit; 当你第一次登录他们的主页就看一个大大的蓝色背景。然而，其他的都是白色的。最前面并且居中的大标题会让你的注意力集中在中间。
同时，你的眼睛在很短的时间内就能注意尺寸较小但是仍然明显的APP商城的按钮。你可以从中研究一下是颜色如何引导用户的注意力的。 创造个性 颜色是非常奇妙的，因为它可以展现一个网站或者品牌的语气和情绪。Beagle （很遗憾，译者访问的时候，网站已经不在了）提供创建项目简介的服务，他们的网站使用了较轻的茶色。当你向下滚动他们的主页时，你会看到棕色,炭色，绿色，甚至粉红色这样一些愉快的色调。世俗的色调（earthly tones）看起来专业和优雅，给人对于其所代表的公司（留下）一个非常好的印象。 An Interesting Day网站它特指“在奥斯陆峡湾（Oslofjord）的一个小岛上举办的一个不可思议的，为期一天的会议”（“a weird, one-day conference on a tiny island in the Oslofjord”）。当红色的背景和红色的字体在上面的时候，
个人网站的设计与实现_本科毕业设计(论文)
题目：个人网站的设计与实现个人网站的设计与实现
个人网站的设计与实现 前言 随着国际互联网的普及，很多人已经不满足仅仅在Internet上的浏览信息，而是希望更深入的参与其中，拥有自己的Web网站，这似乎已经成为一种潮流。如果说个人建立网站是为了追求时尚，那么企业建立网站就是必然的选择了。 无论是专业的，还是业余的，很多人对网页制作颇感兴趣。事实上制作一个简单的网页并不困难，会使用Word的人都可以胜任。但想做出超凡脱俗的网页就不那么容易了，而Dreamweaver却可以满足你的愿望，它是Macromedia 公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器。 同样出自Macromedia公司的Flash,Fireworks在制作网站的过程中起到了锦上添花的作用，是个人网站实现的好帮手，在制作网站的时候经常会用到这些软件。 本文有五章，我来由浅到深介绍个人网站的设计与实现。 摘要 在互联网走进我们的生活之前，没有人敢梦想拥有自己的报纸、杂志、电台、电视台。除了政策上的制约外，一个人也根本没有操作一份传播媒体的能力。现在不同了，互联网给我们提供了一个“表达自我”的自由天地,你可以拥有自己的新闻邮件，你可以建立自己的个人网站。只要你办得成功也可以吸引成千上
万的订户、读者,并建立自己在众多参与者中的权威地位。建立个人网站的基本过程可以分为以下七个环节 : 1 了解中国网络个人主页研究背景与发展现状 2 系统需求分析与总体设计 3 熟悉网站开发模式、工具及环境 4 把自己的作品和想要展示的内容制作成网页。 5 使用动态网页技术(ASP) ，实现动态内容更新。 6 认真地选取测试用例，进行交叉测试 7 网站的后期完善、宣传及发展方向 其中 ,网页制作和使用动态网页技术(ASP) 实现动态内容更新是网站开发的核心内容。 关键词：网页、制作、访问、链接 Abstract Enters before our life in the Internet, nobody dares to vainly h ope for has own newspaper, the magazine, the broadcasting station, th e television station. Besides the policy in restriction, a person sim ply has not also operated dissemination media the ability. Now has be en different, Internet has provided to us "the expression" free world, You may have own news mail, you may establish own individual website. So long as you also manage the success to be possible to attract the tens of thousands of subscribers, the reader,And establishes oneself
精品网页设计欣赏及评析
精品网页设计欣赏及评析 1.商业清爽型 国外现在较流行的风格，国内也有不少模范者，可是往往在色彩调配和细节方面有所欠缺。图一图二特点：利用方框构图，简介明了，图片一般大面积出现，但图片一定要结构清晰，色彩鲜明色彩方面多使用大面积浅灰度和白色，以衬托logo 和配图的色彩鲜艳，配以高明度小小色块（如导航处）。因为结构构图简单，细节方面一定要讲究，不适宜有过于复杂的logo 和点缀出现，多用简洁明快的几何图形结合。一般此类风格背景如果是彩色，都会是低纯度低亮度彩色，以反衬主题图片和logo。在大面积背景压住的情况下，图片明度越高越爽。画面应该有一个主色调。注意图二左下脚的logo，有意与背景色调相同，以免抢了视觉中心，这是很多人常犯的错误。图三注意细节图案的使用，这是大多数设计者弱点所在，细直线条与箭头、方块、园点不要乱用，每个点的存在你都要有理由。 2. 商业门户型现在的商业门户网站在几乎都是三栏，上面是logo＋banner 。其实门户网站因为信息大，更新频繁，在设计时应该充分考虑可扩展性，我认为可以充分利用下拉特性，充分考虑左上位置的设计，主体争取结构明了简洁。下面我们一起来看看几个门户网站的设计。图四所示的这个网站是卡通网站，广告栏很大，但通过精心设计使之醒目而不凌乱。图片统一使用斜角，统一又不呆板。图五所示网站使用曲线与直线的结合，蓝灰色主色，画面沉静而不脏，这里的色彩难度很高，需要细心调试，色块分割，简单明了。图六所示网站主题部分简之又简，在背景上做足了功夫，轻轻的灰度变化，是现在国际流行的风格，高雅，不花，充分烘托主体。图四图五图六 3. IT 企业实用模板图七图八图九图十 4. 时尚企业网站模板图十一图十二 5. 主题型实用网站模板图十三上图所示模板其logo 和图片以及其绿色的主色调与动物园的环境和业务非常贴切。美食业务主题网站，布局合理大方，整体设计“色香味”俱全，主题鲜明，功能齐全。 6. 学校教育型模板图十四图十五 7. 儿童主题型网站模板图十六图十七图十八图十九 8. 个人个性化网站模板 以下的10个网页设计作品是ThemeForest上最受欢迎的优秀企业网站设计模板的其中一小部分。它们风格低调沉稳，几乎只使用黑白灰三种色彩，却不雷同，并且在细节上都非常讲究。ThemeForest是非常值得网页设计师关注的高品质网站，其上的几乎每一个设计模板都称得上是杰出的设计作品，值得我们认真揣摩学习。这篇文章里我将根据自己的观点对这10个设计模板的设计思路和方法做一总结，列出其中的要点，挖掘值得我们在网页设计中值得借鉴的东西，希望能够对大家有所帮助。
Fireworks-网页设计综合实例
Fireworks-网页设计综合实例
Fireworks 网页设计综合实例 在本文中我们将帮助您亲身体验Fireworks 在网页创作中的强大功能，我们通过一个网站页面的设计过程，为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务，您将对Fireworks的主要功能有一个统一的全局性的了解，同时为您在设计中如何利用Fireworks 提供一个清晰的思路。下图是这个教程完成后的外观： 我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容： 1、导入并编辑位图图像。 2、自动任务处理
3、创造矢量图形 4、创建文字 5、创建按钮 6、创建导航条 7、设定按钮属性 8、建立切片 9、创建拖拽翻转效果 10、创建弹出菜单 11、创建变形动画 12、优化图像 13、输出HTML文件到Dreamweaver 14、在Dreamweaver中进行往返表格编辑 一、设计前准备 1、网站介绍： 在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站设计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司的基本概况和产品信息，并作为公司的
一个展示窗口，向参观者展示企业的形象及产品系列。根据业主的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网站的导航结构。 2、设计指导思想： 本网站设计的指导思想是在网络上营造一 个优雅、高贵、宁静的氛围，为了体现这一主题，设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一 主题，以穿插的直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面的坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。 3、页面结构： 整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。右边为内容区，以深色带条纹的图片作为背景。
网站设计说明书
《网站开发与网页设计》设计说明书网站名：《周杰伦资料库》 班级：BX00XX 学号：BX00XX05 姓名：某某某 201X年12月08日
目录 一、网站与网页的概述 (1) 1. 什么是网站 (1) 2. 什么是网页 (1) 3 静态网页 (2) 4 动态网页 (3) 5 动态网页与静态网页的区别 (4) 二、Dreamweaver 8 (5) 1 Dreamweaver 8的概述 (5) 2 Dreamweaver 8的功能 (5) 3 Dreamweaver 8的特点 (6) 三、网页设计标记语言—HTML (8) 1 HTML语言简介 (8) 2 HTML语言特点 (8) 四、我的网站介绍 (9) 1 网站的主题、结构介绍 (9) 2 网站的内容、形式和特点的介绍 (10) 3 网站重点页面的贴图 (10) 五、网站设计感悟 (18)
一、网站与网页的概述 1. 什么是网站 因特网上一块固定的面向全世界发布消息的地方，由域名(网站地址)和网站空间构成，通常包括主页和其他具有超链接文件的页面。 网站是由多个网页组成的，但不是网页的简单罗列组合，而是用超链接方式组成的既有鲜明风格又有完善内容的有机整体。 2. 什么是网页 网页是网站中的一「页」，通常是HTML格式（文件扩展名为：html、htm、asp、aspx、php、jsp等）。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。 网页（Web page）是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序。网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。 网页是构成网站的基本元素，是承载各种网站应用的平台。
广告设计中的色彩搭配技巧
广告设计中的色彩搭配技巧 广告设计中的色彩搭配技巧 色彩要具有强烈的吸引力和表达力 吸引力是指能以色彩吸引消费者，在不知不觉中左右人的感觉情绪、精神乃至行动。色彩并非孤立存在，它的运用同整个设计构思、构图以及图形、文字等紧密联系在一起。诸多视觉元素按照一定的 规律排列组合，形成视觉秩序美感，满足人们“人人爱美”的心理，实现色彩的装饰功能。当今世界素食业巨子麦当劳的招牌以红色做 底色，上面是代表麦当劳标志的金色“M”，红色代表“停止”，黄 色代表“注意”。街上行人走到麦当劳门前，看到广告语“请进麦 当劳休息一会吧”，便会被吸引驻足进屋。 色彩的象征性和识别性 广告色彩设计要与商品的属性配合，其色彩设计应该使顾客能联想出商品的特点、性能。也就是说，不论什么颜色，都应以配合商 品的内容为准。顾客看到广告海报上的色彩，就能联想到商品，如 绿色体现青豆罐头，桔黄色说明是橙汁。如粉紫色具有轻柔、典雅、充满女性柔润的'特点，在妇女用品、化妆品、纺织品广告设计中十 分流行。而“温暖、强烈”象征的红、橙、茶、褐、黑等色，往往 用于咖啡的广告设计。 色彩要明快、简洁、整体 由于色彩是在有限的空间内实现，就要求所设计的色彩应高度提炼与概括，通过独特的色彩来强化视觉冲击力，吸引顾客的注意力，增强识别记忆力的作用。色彩不一定要追求十分丰富、繁多或者高 级灰调子，它不仅仅要满足于人们视觉上的观感之悦，更重要的是 通过准确的色彩设计将商品推销给消费者。凡是符合明快、简洁、 整体设计原则的色彩，就较易打动消费者，引起注意，进而产生购 买欲。
设计的色彩设计应该从以下几点注意：一是色彩与商品的照应关系；二是色彩和色彩本身的对比关系。这两点是色彩运用中的关键 所在。 色彩与商品的照应 从行业上讲，如食品类正常的用色其主色调桔红、橙、黄等色彩来表述，这样使人联想到面包、橙子等食品的颜色，给人以温暖和 亲近之感。从性能特征上，单就食品而言，蛋糕点心类多用金色、 黄色、浅黄色给人以香味袭人之印象；茶、啤酒类等饮料多用红色 或绿色类，意味着茶的浓重与芳香；蕃茄汁、苹果汁多用红色，集 中表明着该物品的天然属性。 色彩与色彩的对比关系 所谓对比，一般有以下方面的对比：即色彩使用的深浅对比、色彩使用的反差对比、色彩使用的点面对比等等。 色彩使用的反差对比--即色彩属性之间形成的视觉反差：明暗反差、补色反差，如橙和蓝的对比；冷暖反差，如蓝和绿的对比；动 静反差，如宁静的人物与跳跃的文字对比；轻重反差，如深沉的背 景与轻快色彩的对比等。 色彩使用的点与面对比（或大小对比）--这种对比，即大面积色彩与小面积色彩差异的对比，大面积色彩是构成主色调的主要因素，利用小面积的对比关系衬托被强调的元素。 设计师在设计过程中只有准确的把握色彩的特点，了解照应关系以及色彩和色彩本身的对比关系，并将二者恰当的结合在设计过程中，才能设计出更能适合消费者需求以及更能体现产品特性的优秀 设计作品。
个人网站设计及实现毕业设计论文
个人网站设计及实现 作者：张铎 指导教师：刘向娇 摘要：网络发展到今天，建立网站已经成为一个很普遍的问题了。对于企业家来说，建立好的网站可以抢占新世纪发展的战略要点。建立新的企业形象，直接开拓国际市场。对于个人来说，建设好的个人网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构造的平台，可以为毕业后找工作做好充分的准备。在我的个人网站制作过程中，主要是针对我网站设计的方向和目的、网站设计的整个流程出发，然后通过自己设计的这个个人网站作品来说明并演示一个网站制作过程。这篇论文的主要内容是个人网站的设计思想，整体规化及相关的基础科知识。网站的规化又包括网页的结构、栏目的设置、网页的风格、颜色的搭配、版面的布局、文字图片的运用等。 关键词：网站设计；网站规化；网站主题 随着经济的发展，计算机以被应用到社会生活的各个领域。这给人们的生活带来很大的方便。如今，已成为人们日常生活中不可或缺少的部分。人们可以足不出户上网购物，随时查询股票信息，在自己的博客上尽情发表言论……以上这些都离不开最基本的网页设计和制作[1]。 网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在互联网上表现出及其重要的地位，并发挥着及其重要的作用，无论是在国内还是国外都得以迅速的发展和壮大，并被人们重视和关注。网站的迷人之处在于综合使用文本、图像、声音、动画视频信息和内容，具有丰富的多媒体表现与互动特点。毋庸置疑，网站已成为最吸引人的也是最有效的信息传递的手段和方式。随着网络技术的发展，各类网站纷纷出现，个人网站也成为了一种时尚，越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格[2]。 个人网站是指个人因某种兴趣、拥有某种专业技术，提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。所谓个人网站，就是指网站内容是介绍自己的或是以自己的信息为中心的网站[3]。 一网站设计规化 什么是网站 网站是因特网上的一个信息集中点，可以通过域名进行访问。网站要存储在独立服务器或者服务器的虚拟主机上才能接受访问。网站是有独立域
静态网页设计-教学大纲
《静态网页设计》教学大纲 课程类别：专业基础课 课程属性：必修课 学分/学时： 4学分/64学时 制订人：课题组 适用专业：信息技术相关专业 一、课程的性质 “静态网页设计”是信息技术类专业学生的专业基础课之一。属于必修课范畴。同时它是一门针对性、实践性较强的课程。主要是培养学生静态网页设计的基本知识和静态网页设计制作的基本技能。 二、与其它课程的关系
三、教学目标 1.知识目标 (1)网站、网页、网页设计等的基本概念； (2)理解HTML语言中的各种文本格式、段落设置、列表等标记知识； (3)理解和掌握基本的DIV＋CSS技术知识； (4)理解和掌握表格的基本知识； (5)理解和掌握数据表单的基本知识； (6)理解和掌握基本的框架网页知识； (7)理解和掌握网页图像、动画等多媒体应用知识； (8)理解和掌握网页超级链接知识； (9)掌握基本的动画制作知识； (10)了解网页美工相关知识； (11)了解网站的测试、发布与维护的基本知识； (12)掌握网站制作流程 2.能力目标 (1)能运用HTML语言设置和编辑网页元素； (2)会使用Dreamweaver等网页设计工具制作网页； (3)能使运用基本的CSS技术设置网页风格； (4)能在网页中嵌入图像、动画、视频等多媒体元素； (5)能运用表格布局并设计网页； (6)能正确运用文字超链接、图像超链接技术设计网页； (7)掌握框架制作网页的方法，会使用框架设计网页； (8)掌握制作表单的方法，会利用表单建立交互式页面； (9)能看懂基本的HTML网页源代码。
(10)会设计网页线框图，并能运用PS进行网页效果图设计 (11)掌握切片的基本原则和基本方法，综合运用网页排版技术进行切片素材排版 (12)熟悉网站项目工作流程，能独立进行中小型网站设计。 3.素质目标 (1)具有信息资料收集与整理能力； (2)具备简单的需求市场分析能力； (3)具有一定的语言表达、沟通和协调能力； (4)具有良好的心理素质和责任意识，能及时完成任务的能力； (5)具有踏实肯干的工作作风； (6)具有一定的创新意识和艺术设计素质 四、内容结构与目标任务
静态网页设计总结报告
网页设计总结报告 目录 一、设计介绍 (2) 二、制作过程 (3) 1、布局............................................................................................................................................... (3) 2、相关插入 (4) 3、相关链接 (4) 三、制作代码 (5) 四、心得体会 (7) 五、参考资料 (8)
一、网页设计介绍 从文件的角度来说，一个网页就是一个HTML文件。当浏览者输入一个网址或单击某个链接后，在浏览器中显示出来的就是一个网页。一般网页上都会有文本、图片等信息，而复杂一些的网页上还会有声音、视频、动画等多媒体内容，为网页增添了丰富的色彩和动感。静态网页是指网页文件中没有程序，只有HTML代码，一般以.html或.htm为后缀名的网页，静态网站内容不会在制作完成后发生变化，任何人访问都显示一样的内容。网站是一系列逻辑上可以视为一个整体的网页集合，是许多相关网页有机结合而组成的一个信息服务中心。对于小型网站，是指带有一定主题的多个网页集合；对于大型网站还包含数据库和服务器端应用程序等如新浪、网易、搜狐等门户网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页，即网站的第一个页面。动态网页是指网页文件不仅具有HTML标记，而且还含有程序代码，并使用数据库连接。动态网页能根据不同的时间，不同的来访者显示不同的内容，动态网站更新方便，一般在后台直接更新。 我的网站是介绍自己的个人网站，这是一个关于家乡美食的介绍，总共6 个页面，其中上有首页5个链接，包括剁椒鱼头，蚂蚁上树，浏阳蒸菜，家常酸菜鱼，长沙臭豆腐，而然后每个子页可以和上一页和下一页相连。 首页部分：介绍了湖南一些好吃的资料菜名，其中附有一张凤凰的图片，很想与老师和同学们分。 然后就是每个子页中，前四张介绍了五道菜和它们的做法，则是一道比较有名的小吃，为长沙臭豆腐，但由于其做法是秘方，只附有对其的介绍。 二、制作过程 网页布局 它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。
简单生活网上买菜系统静态网页设计与制作
四川交通职业技术学院毕业设计论文 设计（论文）题目： 简单生活网上买菜系统静态网页设计与制作 入学年月 姓名 学号 专业计算机应用技术 指导教师 完成日期 2015 年 5 月 15 日
【摘要】计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。人们在网上聊天交友，在网上请教问题，查阅资料，还在网上听音乐。除此之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如雨后春笋般的出现，这也就是我的毕业设计的实际意义。本文就个人网站的规划与建设，以软件工程的方法对过程经行了分析与研究。本文的主要工作集中在：对web页进行概述，主要是对Internet的历史和发展作了回顾，在web页的定义而后特性上进行阐述。而Web设计的健康发展依靠web标准的采用，没有web标准就不会有真正的可访问性和连贯的设计。不用web标准，就跟不上时代。在这样的标准时代，我们需要网页更加容易扩展，适合自动数据交换，并且更加规整。而css，则实现了页面内容与样式分离。鉴于web标准，本论文着重对div+css 布局静态网页进行了讨论。并对网站开发过程中使用的开发工具和技术作了简要的介绍。 对网站建设中提及到术语进行了解释，并对个人网站的由来和发展经行了讨论；对自己的个人网站从规划建设经行了详细的分析；使用Html、Css、Photoshop 等技术实现了个人网站的各种功能并且就网站建设提出了自己的观点与建议。 【关键词】网页设计div+css Photoshop 简单生活网上买菜
教你制作静态网页的方法
教您制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开与保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b、设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c、设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d、网页文本的输入与属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e、网页图片的插入与属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。
网页设计中颜色搭配的重要性常见颜色的含义
网页设计中颜色搭配的重要性,常见颜色的含义() 网页设计中颜色搭配的重要性,常见颜色的含义（1） 贝塔网络发布时间：2007-12-1916:37:29评论：0点击：23 一步、底色和图形色色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师，所能运用的色彩工具多了许多。如今，我们能运用好计算机为我们提供的丰富色彩，看来不是很简单的事情。就我个人而言，在我从事设计师工作以来，往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验，希望大家指正。配色所要注意的要素实际设计时，我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案，这个方案就是我的配色计划。在做配色计划时，我们应该考虑下述几点以突出视觉效果。1.底色和图形色在设计时我们会经常遇到用几个色做各种形的构成，作为底的色我们往往会将它推远，而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此，配
色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。 第二步、整体色调如果我们想使我们的设计能够充满生气，稳健，冷清或者温暖，寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢？只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色，并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉，反之亦然。如果用暖色和纯度高的色作为整体色调则给人以火热刺激的感觉，以冷色和纯度低的色为主色调则让人感到清冷、平静的感觉。以明度高的色为主则亮丽，而且变得轻快，以明度低的色为主则显得比较庄重、肃穆。取对比的色相和明度则活泼，取类似、同一色系则感到稳健。色相数多则会华丽，少则淡雅、清新。以上几点整体色调的选择要根据我们所要表达的内容来决定。 第三步、配色的平衡颜色的平衡就是颜色的强弱、轻重、浓淡这种关系的平衡。这些元素在感觉上会左右颜色的平衡关系。因此，即使相同的配色，也将会根据图形的形状和面积的大小来决定成为调和色
网页设计经典作品欣赏
____________________________________________________________________________________________ 网页设计经典作品欣赏 大同小异的网页设计已经让你视觉疲劳了吧，加入不规则几何形状的网页设计也许能让你的眼睛重获新鲜感。几何元素的融入不仅让网页变得高大上，也在无形中突出了网页中的某些内容，这样的突出方式并不单薄无力，反而让网页看起来更自然。一网学，致力于网页设计培训、UI设计培训、淘宝美工培训，平面设计培训，是最好的远程设计培训学校。 没有人会对沉闷的网页产生兴趣，而几何图形恰巧能在增强视觉体验的同时营造出活跃的氛围。我们为大家找到了14个融入了几何元素的网页设计，尽情享受吧！ Ondo Ondo的网站选用了较为鲜艳的色彩，再加以特别的效果，让用户在浏览时得到了一种别样的视觉感受。如果上一个案例表达了宁静的主题，那么Ondo表达的就是城市中的现代繁华。 Wildlife 这个网站中的几何元素体现在各方各面，既有设计师的设计，同时，局部也拼凑了一些包含几何元素的真实图片。我们可以看出该设计师对不规则元素十分热爱，图片本身的形状也不是传统的中规中矩，让整个页面多了一种拼贴感。
____________________________________________________________________________________________ Wixel Wixel的网站运用了几何元素，增加了现代化元素。
____________________________________________________________________________________________ Kinder Fotografie 几何元素的叠加使用使画面富有层次感，大小不一的正六边形更是增添了活力。 LIGAYA SCAFF 几何元素的作用比较多元化，随着周围坏境色彩的变化，它也能随之显现出完全不同的效果。在这个案例中，几何元素释放了它的神秘感。半透明的图片设计让网页有了重叠感，而规则的几何也不会让网页很繁复。
网页设计中颜色搭配的重要性常见颜色的含义资料
网页设计中颜色搭配的重要性, 常见颜色的含义( 网页设计中颜色搭配的重要性, 常见颜色的 含义（1） 贝塔网络 发布时间：2007-12-1916:37:29评论：0点 击：23一步、底色和图形色色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师，所能运用的色彩工具多了许多。如今，我们能运用好计算机为我们提供的丰富色彩，看来不是很简单的事情。就我个人而言，在我从事设计师工作以来，往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验，希望大家指正。配色所要注意的要素实际设计时，我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案，这个方案就是我的配色计划。在做配色计划时，我们应该考虑下述几点以突出视觉效果。1. 底色和图形色在设计时我们会经常遇到用几个色做各种形的构成，作为底的色我们往往会将它推远，而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此，配 色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。 第二步、整体色调如果我们想使我们的设计能够充满生气，稳健，冷清或者温暖，寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢？只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色，并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉，反之亦然。如果用暖色和纯度高的色
个人网站设计及实现毕业设计论文
人生最大的幸福，是发现自己爱的人正好也爱着自己。 个人网站设计及实现 作者：张铎 指导教师：刘向娇 摘要：网络发展到今天 建立网站已经成为一个很普遍的问题了 对于企业家来说 建立好的网站可以抢占新世纪发展的战略要点 建立新的企业形象 直接开拓国际市场 对于个人来说 建设好的个人网站可以更加方便的收集信息 开展更加直接的网络交流 使用自己构造的平台 可以为毕业后找工作做好充分的准备 在我的个人网站制作过程中 主要是针对我网站设计的方向和目的、网站设计的整个流程出发 然后通过自己设计的这个个人网站作品来说明并演示一个网站制作过程 这篇论文的主要内容是个人网站的设计思想 整体规化及相关的基础科知识 网站的规化又包括网页的结构、栏目的设置、网页的风格、颜色的搭配、版面的布局、文字图片的运用等 关键词：网站设计；网站规化；网站主题 随着经济的发展 计算机以被应用到社会生活的各个领域 这给人们的生活带来很大的方便 如今 已成为人们日常生活中不可或缺少的部分 人们可以足不出户上网购物 随时查询股票信息 在自己的博客上尽情发表言论......以上这些都离不开最基本的网页设计和制作[1] 网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者 在互联网上表现出及其重要的地位 并发挥着及其重要的作用 无论是在国内还是国外都得以迅速的发展和壮大 并被人们重视和关注 网站的迷人之处在于综合使用文本、图像、声音、动画视频信息和内容 具有丰富的多媒体表现与互动特点 毋庸置疑
网站已成为最吸引人的也是最有效的信息传递的手段和方式 随着网络技术的发展 各类网站纷纷出现 个人网站也成为了一种时尚 越来越多的人希望拥有自己的网站 开辟网络世界的一片天地 展示自己的才华和风格[2] 个人网站是指个人因某种兴趣、拥有某种专业技术 提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站 所谓个人网站 就是指网站内容是介绍自己的或是以自己的信息为中心的网站[3] 一网站设计规化 1.1 什么是网站 网站是因特网上的一个信息集中点 可以通过域名进行访问 网站要存储在独立服务器或者服务器的虚拟主机上才能接受访问 网站是有独立域名、独立存放空间的内容集合 这些内容可能是网页 也可能是程序或其他文件 不一定要有很多网页 只要有独立域名和空间 哪怕只有一个页面也叫网站 网站就是在互联网上的一块固定的面向全世界发布消息的地方 它由域名和网站空间构成 衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站软件配置、网站提供服务等几方面考虑 1.2 网站建设的目的 网站的建设不仅仅是制作主页的问题 还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计等等 任何网站在建设之前都必须明确文向、用途和服务群体等一系列的问题 写出详细的建站计划 可以说这是网站建设的根源和核心所在 这里我的个人网站主要是让更多的人认识到我 了解我 借助网络的这个平台来展示我自己 还有我希望能交到和我一样怀着梦想起航的朋友
精美网页设计欣赏
精美网页设计欣赏 篇一：40个精美网站设计欣赏 40个精美网站设计欣赏 这组网页设计有各种行业的，大家可以从中找下感觉，学习学习高手们是怎么构图，怎么用色的。 篇二：2015年度最受欢迎的的优秀网页设计网站! 2015 年度最受欢迎的的优秀网页设计网站！ 作者: 一网学最后更新时间：2015-12-17 10:20:27 小编：才看完2015最网页设计丑排行榜，有没有伤到各位的眼睛？在2015年快要结束的时候，我们一起来欣赏一组2015优秀的网页设计，每个网页都各具自己的独特风格。 下面，是 Designmodo 团队评选出的2015最佳网页设计作品： BBQ Cultures BBQ Cultures 的页面设计证明了关乎烧烤的餐饮业网站也可以设计得高大上。设计手法上，设计师结合流行的设计趋势，用足以取悦用户的设计手法来完成设计，包括高清而充满气质的图片，精心制作的视频，漂亮的装饰图形和微妙的交互和动效。尤其是微动效和微交互，让整个站都充满了活力。 In Pieces In Pieces 的页面展示了第一流的动态展示效果是怎样的，设计师巧妙地使用
JS和 CSS将多边形融入页面不同的元素中，让多边形元素赋予了页面全 新的生命力。 Trippeo Trippeo 展示了如何使用现代的解决方案来呈现即将到来的产品。 这个网站采用了经典的横向布局，本质上接近单页滚动式页面设计，所以页面中的滚动动效设计地非常不错，给用户深刻的印象。 Be More by Reebok Reebok 的这个网页采用了经典的单页式的设计，有效地收纳了全部 的相关信息。风格化明显的Grunge 风元素让整个页面的质感极为 突出，动态效果的执行力也极强，赋予了页面良好的用户体验。 The DNA Project The DNA Project 是一个极为创新的音乐网站项目，它为用户提供 了截然不同的音乐制作流程，时尚又不同凡响。每首歌都被划分为 关键的音乐节点、 音轨背后的故事和参与的音乐家等几个部分，这个项目让用户与音 乐人们一同制作音乐。 ACME Experience 网站以更加视觉化的方式来践行这家公司的口号“我们是未来先锋”，这个页面采用率非对称式布局，多层布局技术和微妙的动效，配合这色调活泼的背景，许多有趣的小技巧在页面中各自发挥出独 特的功用，充分展现了“先锋”这一特色。 Weltrade
Fireworks网页设计综合实例
Fireworks网页设计综合实例1 在本文中我们将帮助您亲身体验Fireworks在网页创作中的强大功能，我们通过一个网站页面的设计过程，为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务，您将对Fireworks的主要功能有一个统一的全局性的了解，同时为您在设计中如何利用Firework s提供一个清晰的思路。最终完成的实际页面请看这里。下图是这个教程完成后的外观： 我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容： 1、导入并编辑位图图像。 2、自动任务处理 3、创造矢量图形 4、创建文字 5、创建按钮 6、创建导航条 7、设定按钮属性 8、建立切片 9、创建拖拽翻转效果 10、创建弹出菜单 11、创建变形动画 12、优化图像 13、输出HTML文件到Dreamweaver 14、在Dreamweaver中进行往返表格编辑 一、设计前准备 1、网站介绍： 在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站设计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司的基本概况和产品信息，并作为公司的一个展示窗口，向参观者展示企业的形象及产品系列。根据业主的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网站的导航结构。
2、设计指导思想： 本网站设计的指导思想是在网络上营造一个优雅、高贵、宁静的氛围，为了体现这一主题，设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一主题，以穿插的直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面的坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。 3、页面结构： 整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。右边为内容区，以深色带条纹的图片作为背景。 下面我们将根据上述设计分析，分不同的部分为您介绍制作过程。在新建一个文件后，我们需要对我们的工作环境进行简单的设定，以符合我们的任务要求。首先需要设定工作区的面积及背景颜色，打开Modify>Ca nvas Size针对常见的800x600分辨率，我们设定工作区的长为776这可以根据需要设定，但最好不要超过778，高为515根据实际内容确定，再执行Modify>Canvas Color设定背景色为黑色。再打开View>Grid>Edit Grid 对话框，设定水平方向网格间距为10像素，垂直方向为5像素，并将网格颜色设为暗灰色以不影响观察页面，打开网格显示和网格捕捉。如下图所示： Fireworks网页设计综合实例2 一、导入并编辑位图图像。 Fireworks4带有完善的位图创建、修改和处理功能，我们可以导入外部位图文件并对它进行编辑，可以修改和删除位图中的颜色，可以向对矢量图一样增加效果。我们的工作将从层面板开始，新建一个文件后，默认的只有两个图层Web层和Layer1层，双击Layer1层，将层名改为“背景层”。如下图所示：
设计师最常用网站汇总
设计师最常用网站汇总（附带专业点评，设计师必备收藏，持续更 新…） 素材网站 昵图网：（种类齐全、设计师的拼图家园，你懂得） 素材中国：（免费素材网站） 三联素材网：（是一个以提供经典设计素材为主的资源网） 站长素材：（国内最大的建站素材库、互联网人必备网站） 素材库：（分类比较详细，但是数量不是很多，选择少） 素材公社：（上传原创素材可以赚人民币的网站） 图酷：(海量国外矢量素材) 佳木中国：（专注于网站模板和网页素材） 天天素材：（感觉和素材中国太像了……一般的素材还是能够找到的） 创意产业电商交易模式网站 视觉中国：(前身为视觉中国网，目前定位于图片分享及设计产品社会化电商平台) 亚洲CI：（设计公司品牌宣传、视觉设计网络互动平台） 牛社网：(致力于设计师品牌包装、宣传、作品展示与接单，用户可以为自己的网上工作室设置 个性二级域名便于对外宣传) 中国包装设计网：（过去以交流学习为主，目前倾向于包装设计电商发展模式） 插画中国：（全国最大的插画动漫征稿接稿及人才招聘的网站） 网页设计联盟：（致力于网页设计师品牌宣传包装） 哇塞网：（中国领先的手工、原创设计、艺术品、传统工艺品在线交易平台。） 欣赏交流 站酷：（国内最活跃的原创设计交流平台） 红动中国：（设计交流、作品展示平台）
视觉同盟：（专注于中国设计行业及中国设计教育的网络媒体） 中国艺术设计联盟：（拥有大量国内外最新行业资讯和设计大赛） 蓝色理想：（网站设计与开发工作者的交流平台） 中国设计网：（设计师交流学习平台，一个比较早的设计网站） 中国设计之窗：（主要是以资讯和竞赛动态为主的网站） 字体下载网站 找字网：（分类齐全、直接展示字体效果，更方便你查找字体） 字体中国：（专业字体网站） 设计无限：（可以在线预览字体网页效果，更适合网页设计的同学使用） 中国设计网.字体频道：（欣赏学习字体设计） dafont: (英文字体很多、分类详细、唯一缺点是中文字体较少) urbanfonts: (英文字体很多、分类详细) myfonts:（网站最大特色是可根据图片来判断字体，再也不用在群里喊这是什么字体了） 图片分享网站 视觉中国：(前身为视觉中国网，目前定位于图片分享及设计产品社会化电商平台) 花瓣网：（快速收集网络上的图片、视频和网页） 牛社网：(可以上传原创作品出售你的设计服务，同时具备类似花瓣网的图片网络搜藏功能)