网页设计学习PPT.ppt

网站设计基础,课程内容,Internet概述 Internet即国际计算机互联网，在中国也称“因特网”或“国际互联网。它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的服务。它缩短了人们之间的距离。通过Internet，用户可以与接入Internet的任何一台计算机进行交流，如发邮件、聊天、通话等。,Internet服务器的主要信息服务有： 万维网（WWW） 电子邮件服务（E-mail） 电子公告板服务（BBS） 网上购物 网上会议 网上聊天,什么是WWW www是一种分布式客户服务系统WWW是World Wide Web的缩写，又称3W或Web，中文译名为“万维网”。它作为Internet上的新一代用户界面，摒弃了以往纯文本方式的信息交互手段，采用超文本（Hypertext）方式工作。利用该技术可以为企业提供全球范围的多媒体信息服务，使企业获取信息的手段有了根本性的改善，与之密切相关的是浏览器（Browser）。,www制定一套标准 是用于万维网服务器传输超文本到本地浏 览的传送协议。 用于要取得的Internet资源的位置与方式。 在Internet通常使用的发布语言，能够使 大多数计算机或者浏览器能够识别的语言。,IP地址和域名 IP（Internet Protocol）地址，即用Internet协议语言表示的地址，由4组数字构成，每组8位，共32位。 在IP地址的4组数字中，包含了两部分信息，即网络代号（NetID）和主机代号（HostID）。,域名是IP地址的一种英文替代。 域名系统采用层次结构，按地理域或机构域进行分层。 域名的一般格式为： 主机名.机构名.类别名.地区名。,什么是网页 网页是网站的组成部分，是一张页面，可以看成是一个单一体，是网站的一个元素。 网页中包含的元素有：文本和图像、动画、声音和视频、超级链接、表格、表单、导航栏以及其他常见元素。,网页的分类 按照网页的表现形式不同，可将网页分为静态网页和动态网页。 按照网页在网站中所处位置不同，可将网页分为主页和内页。,静态网页 是指这个网页不论在何时何地浏览，都将显示相同的画面和内容，且用户仅能浏览，而无法提供信息给网站，让网站作出响应。 动态网页 是网页能够按照用户的需求作出动态响应，如网页上常见的留言板、论坛等。,主页 一个网站中的首页，一个特殊的单独的页面，它作为一个组织或个人在WWW上开始点的页面，整个网站的起点和汇总点。浏览者浏览网站的入口。 内页 主页中包含指向其它页面的超链接。,网页布局 三种布局 国字型布局 拐角型布局 封面型布局,什么是网站 网站是一个存放在网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的形式链接在一起，成为一个整体。 常见的网站有网易、新浪、搜狐、百度、腾讯等。,网站设计前期工作 网站项目的规模 网站的规模是不同的。有些网站的规模相当庞大，而有些网站的规模却很小。 规模庞大的网站 结构复杂，人员众多，其所涉及到的技术也很复杂，并且与网站背后的传统业务有着紧密的联系。 规模较小的网站 结构简单，参与建设、维护的设计人员较少，对维护和更新的要求不高，信息发布的平率和数量并不大。,6-25,6-26,网站项目的需求分析 需求分析工作是网站建设中重要的一步，也是决定性的一步。只有通过需求分析，才能把网站功能的总体概念描述为具体的网站功能描述书，从而奠定网站开发的基础。 需求分析的目的是完整、准确地描述用户的需求，跟踪用户需求的变化，将用户的需求准确地反映到系统的分析和设计中，并使系统的分析、设计与用户的需求保持一致。,需求所涉及的内容非常广泛，以下列出的都是网站项目的需求： (1)网站的色彩必须以红色为主； (2)网站界面设计必须简洁； (3)网站访问速度必须在全球范围内都较快； (4)网站必须能够提供在线销售、在线付款的功能； (5)网站中必须有公司总经理一家的合影。,网站功能分析 网站基本功能： （1）新的信息展示平台 （2）新的业务和交流平台 （3）新的工作平台,6-30,网站视觉形象分析 每一个政府部门、公司，甚至是个人都具有自己特定的形象。这些形象要素构成了一整套的识别体系，即CI设计体系。对于网站，最直接的设计要素应该是视觉要素VI。 VI包括：企业名称、企业标志、企业造型、标准字、标准色、象征图案、宣传口号等。,6-32,网站内容 网站所有内容由3类信息组成：,栏目 栏目的实质是一个网站的大纲索引，索引应该将网站的主体（题）明确显示出来。 一般的网站栏目安排要注意以下几个方面： （1）一定要紧扣主题 （2）设置一个最近更新或网站指南栏目 （3）设定一个可以双向交流的栏目 （4）设一个下载或常见问题回答栏目,版块 版块比栏目的概念要大一些，每个版块都有自己 的栏目。注意以下几点： （1）各版块要有相对独立性 （2）各版块要相互关联 （3）版块的内容要围绕站点主题,使用快速原形法进行网站需求分析 在软件开发过程中，最关键的步骤就是确切定义出需求，明确软件要实现的功能是什么，而这恰恰也是最困难的过程。因为许多用户在初期只有一个隐约的、大致的考虑，提不出具体明确的需求。在这种情况下，使用快速原型法进行反复交流、细化需求，就成为一种有效的方法。,与软件工程中的螺旋模型类似，一个网站项目从意向开始，到最后的规范化批量设计过程是螺旋推进的。,网站设计需要的知识 1、确定网站的主题和名称 一般来说定位网站的主题，应该从以下几方面考虑：网上求职、网上聊天/即时信息、网上社区/讨论/邮件列表、计算机技术、网页/网站开发素材、娱乐、旅行、参考/资讯、家庭/教育、生活/时尚10大类。,(1)合理选题 主题要小而精。 题材最好是自己擅长或者喜爱的内容。 题材不要太滥或者目标太高。 (2)精选网站名称 名称要正气。 名称要易记。 名称要有特点。,2、确定网站CI形象 （1）设计网站的标志 （2）选择网站的标准色彩 （3）选择网站的标准字,3、确定网站的整体风格和创意设计 风格是抽象的，是指站点的整体形象给浏览者的感受。 风格是独特的，是站点不同于其他网站的地方，或色彩，或技术，或交互方式。 风格是有人性的，通过网站的外观、内容、文字、交流，可以概括出一个站点的个性和情趣，是温文儒雅，是执着热情、是活泼易变、还是放任不羁。,树立网站风格可以分4个步骤： 风格是建立在有价值内容之上的。 需要清楚自己希望站点给人的印象是什么。 在明确自己的站点的印象以后，开始努力建立和加强这种印象。 风格的形成不是一次定位的，而是在实践中不断强化、调整和修饰的。,4、网站创意 （1）创意是传达信息的一种特别方式 创意思考的过程分5个阶段：准备期、孵化期、启示期、验证期、形成期。 （2）创意是将现有的要素重新组合,5、版面编排 （1）主次要分明，中心要突出 （2）大小要搭配，相互要呼应 （3）图文要并茂，相得要益彰 （4）动静要有度，平衡要对称,分割,分割,6、 网页风格,统一,和谐,易读,易找,清晰,7、色彩处理 色彩总的应用原则应该是“总体协调，局部对比”，也就是说，主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩对比。,确定主色 利用相近色 黑白灰运用 选择适合内容风格的颜色 页面的色彩搭配,网页制作中色彩的运用技巧：,8、网站的分类 四种分类 门户网站 职能网站 专业网站 个人网站,7-63,9 网站导航系统设计 （1）导航系统的两个作用： 指向作用 示向作用,7-64,（2）网站中常见的导航模式 集合导航模式 层次导航模式 线形导航模式 上下文导航模式 随机导航模式,7-65,7-66,7-67,7-68,7-69,网站制作步骤,明确网页制作的目的和意义。下面列出在规划站点内容阶段要做的具体事项。 描述网页的服务对象 确定制作网页的目的 具体确定网页的信息内容、浏览界面和信息设置 具体确定网页的制作时间和软硬件环境,规划站点内容,做好上面几步后,接下来