网站设计与建设1.ppt

网站设计与建设Websitedesignanddevelopments,连莉Lianli笔试考核70分实验成绩20分实验考勤成绩周三晚上5：30-9：30（9-16周）上课地点：实训中心（地下）平时成绩10分,网站设计与建设,第一部分Web基础知识第二部分网站规划第三部分网站设计技术附录网页设计工具Dreamweavercs3,第一部分Web基础知识,Web设计综述,第1章,导航与web设计,第2章,图形与web设计,第3章,多媒体与Web设计,第4章,第5章,静态网站,动态网站与IP域名,第二部分网站规划,网站规划开发基本概念,第6章,网站规划设计,第7章,硬件平台规划,第8章,软件平台规划,第9章,返回,第11章,第三部分网站设计基础,第10章,第11章,第12章,第16章,第13章,第14章,第15章,HTML基础,HTML表格与网页结构,HTML框架与网页结构,Metadata、Cookies与Web设计,层叠式样式表CSS,JavaScript基础,XML技术简介,第11章,第18章,第19章,第20章,第21章,第22章,第23章,网站发布,Apache+MySQL+PHP搭建,PHP编程,MySQL数据库,PHP与MySQL数据库,PHP与ODBC数据源,网站开发设计工具,第24章,第17章,Ajax设计方法,第1章Web设计综述,第一部分Web基础知识,1.1Internet与Intranet,Internet又称为因特网，是一个全球性的计算机互联网络。它既是一个多媒体的通信媒介，又是一个无限的信息资源。它由成千上万个不同规模的网络通过自愿原则采用TCP/IP协议互相连接起来的一个巨型计算机网络。Intranet是指企业内部网，它采用Internet的协议标准，应用Internet的现有技术建设的企业内部网络。,1.2WWW简述,WWW的含义是环球信息网(WorldWideWeb)，也简称为Web网或“万维网”。网页(WebPage)网站(WebSite)也叫站点，是指在Internet上，由一组相互关联的文档和各种网页元素组成的集合。主页（HomePage）超链接（Hyperlink）超文本（Hypertext）,13Web媒体新特征,Web媒体与传统媒体,传统软件的区别:Web是丰富多彩的多媒体缺点(2)Web是非线性媒体(3)Web媒体具有交互性(4)Web媒体可以提供个性化信息Web媒体是通过主动方式获得信息Web媒体可以以平等身份获取信息和发表信息Web媒体可以即时交流信息,Web媒体有提供电子商务的能力Web媒体还有强大的信息搜索能力即时性Web站点发布与传统软件不同、采用B/S结构Web站点更易于浏览信息、不需要任何培训Web媒体还有信息变化快、易修改、传播速度快和传播成本低等特点,1.4Web技术和工具,B/（Brower/Server）又称浏览器/服务器模式常用的Web技术有HTML、DHTML、CSS、XML、Ajax、JavaScript和JavaApplets。由于HTML网页文件是一个纯ASCII文档，任何一个编辑器都可以编辑该类型文件最好的网站设计方法是手工编码加上所见即所得（WhatYouSeeIsWhatYouGet）的工具FrontPage、Dreamweaver、HotDogProfessional、NetscapeCommunicator、IBMRSA、Eclipse、WebPageMaker和BEAWebLogicWorkshop等。,1.5Web客户与Web设计,Web设计的一个最基本的原则：用户是第一位的，即用户浏览的内容是第一位的，网站的设计技术始终是第二位的站点在设计时既应该专注客户的共性，也应该兼顾个性,1.6客户资源与Web设计,最小公分母设计：使用大众客户最低的客户环境为基础设计网页，让更多的客户能顺畅浏览网站。建议考虑客户环境如下：15寸显示器分辨率是800600MODEM速率为36.6Kb/s的连接。InternetExplorer5.5以上Flash插件，极少数用户会花时间下载插件，特别是来路不明的插件。,800*600,1024*768,1280*1024,返回,确定当前网页设计客户资源环境最好的方法就是访问一些著名网站，了解这些网站的设计。网站设计还要特别考虑你的客户群，针对不同的客户群可能客户环境差别是很大的,1.7Web页面与传统软件用户界面,都依赖于图形用户界面（GUI），即含有同样的基本设计构件：窗口、图标、菜单和指针。Web页面更注重的是信息的展示，而传统软件界面更注重的是系统功能的实现Web站点比传统软件更专注于内容“Web内容永远都是第一位的”,1.8页面布局与Web设计,Web页面布局是对页面的整体规划，即对页面划分成不同的区域，用于放置不同的页面内容。页面布局通常被比做一个翻转的金字塔,12.公共布局格式：按导航元素放置的方式分类,左边空白布局上边空白布局分布式左边和上边空白布局右边空白布局上边和中部布局上下布局分布式布局艺术风格布局,左边空白布局,左边空白布局,上边空白布局,上左边空白布局,右边空白布局,上下边空白布局,分布式布局,艺术风格布局,网页布局元素,网页布局：在建立网站前应首先考虑网站的外观和结构。从视觉和技术角度审视整个页面元素以及它们之间的关系。然后在整个网站上贯彻所选择的元素：布局、字体、颜色、图像以及其它多媒体。页面布局是设计人员向用户展示信息的方式，必须规划一个结构，要具有逻辑性、易于理解，并遵守它。,网页布局元素包括页面规划布局、边界、字体、颜色、图像以及表格等：框架：规划页面布局，允许同时显示多个页面。表格：规划页面布局，在单元格上可以放置各种网页元素，容易排版。导航：控制用户在网站内的移动。段落：在页面上分组文本字符。图像：提供视觉吸引、信息和导航。列表：组织并强调某些信息条目。颜色：提供网站整体色彩感觉，增加可读性、易于分类。边距：控制显示内容距浏览器窗口边界的距离。边界：为HTML表和框架提供可见的边界。空白：减少页面元素混乱，分开页面上的元素,空白在网页设计中非常重要，它能够使网页看起来简洁、明快，阅读舒畅，是网页设计中必不可缺少的元素。切记不要将尽可能多得信息放在一个网页中，应该有合理的、简明的分类，不要强迫客户从一堆信息中艰难地挑出所需要的信息，要让客户自己选择是否进入更深的链接获得信息。也不要只为了让页面变短而分割页面，除非是在逻辑断点处。每一个页面都应该是独立完整的。,页面布局方法主要有两种：纸面布局法、软件布局法,页面布局技术,(1)层叠样式表(CSS)能完全精确的定位文本和图片浏览器是否支持CSS技术(2)表格页面布局：边界为0(3)框架页面布局(4)透明GIF页面布局占位图像(5)Flash页面布局,页面布局技术：,5页面尺寸,切记在网页设计过程中，一定不要左右拖动页面，只能上下拖动页面，而且也不能拖动过长，客户往往会忽视页面下面的内容。,1.9颜色与Web设计,当访问一个网站时，给我们的第一感觉是什么？是颜色。色彩以一种“隐蔽”的方式传达的各种信息几乎每一个成功的企业都有企业文化颜色，微软公司的颜色是天蓝色、Oracle公司的颜色是红黑色、IBM公司的颜色是蓝色等,发光物体三基色：红、绿、蓝(RGB)不发光物体的印刷四色：青、洋红、黄、黑(CMYK)青(C)、洋红(M)、黄(Y)和黑(K),色彩都具有三个要素：色调、饱和度、亮度（或明度）色调（Hue，简称：H）：指颜色的种类，它反映了颜色的基本面貌和性质。如：红、绿、蓝等各种颜色。色调H的单位是度，表示在颜色环上所处位置的角度；饱和度（Saturation，简称：S）：指颜色的深浅程度或浓淡程度。一般鲜艳的色彩其饱和度都比较高，较刺眼，故饱和度高的颜色一般不用作网页背景。饱和度S的单位是百分比。亮度（Brightness，简称：B）：指颜色的明暗程度。如白色亮度高，黑色亮度低；黄色亮度最高，紫色亮度最低。亮度B的单位是百分比。,Photoshop拾色器,颜色格式,两种数值格式：RGB值十六进制数值RGB：“0，255，0”绿十六进制数：“#00FF00”绿,颜色数为16777216种颜色(256256256，224)浏览器支持的216个颜色(另40个用于OS)抖动：浏览器将颜色近似为它所支持的最近安全颜色的过程。,颜色和Web设计,色环：将色彩按“红黄绿青蓝紫红”依次过渡渐变，就可以得到一个色环。在色环中，可以将颜色分为：暖色系、中性系和冷色系,配色方案,单色方案色调H值得到基本颜色，再通过调整亮度B以及饱和度S得到其他几种相近颜色。相似色方案色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案,配色方案,补色方案在色彩圆环上沿直径相对应的两种颜色构成一对互补色，绿色和红色为互补色，绿色旁边的深绿色和蓝绿色以及红色旁边的橙红色以及深红色就构成了一组双重互补色三合一色方案三色方案是指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。红、黄、蓝是一个三色方案，,颜色确定原则：最直接的视觉冲击,尽可能使用浏览器支持的216个颜色颜色数目不应使用过多,除了黑色和白色以外，选择三到四个颜色就足够了所有页面颜色要与主页保持一致颜色形成一种风格：图像、文字、底色网站的色系包含了网页底色、文字颜色、图片颜色、动画颜色和边框颜色等，这不单只是将颜色搭配得当就算完美，还要配合网站主题及信息内容。使用户感到简洁、新颖、舒服、大方，充分体现公司企业的形象,1.10.字体和Web设计,网页中的文本有两种：HTML文本图形文件格式的文字图像最常用的英文字体是TimesNewRoman(Macintosh为Times)Arial(Macintosh为Helvetica)，最常用的中文字体是宋体,默认基本字号是“size=3”选择少量的字体和字号会使页面看起来显得更干净。一般可选三种字号：14磅用于标题；12磅用于副标题；9磅用于正文。颜色行距至少要大于字距。加宽字距和行距有轻松、疏朗之感。行与行之间要考虑适当增加空白，以便阅读。特殊效果字体应放在图形中LOGO,字体TrueType字体：无级缩放OpenType-把PostScript字体嵌入到TrueType的软件中而不应该在网页中杂乱使用多种字体，不易阅读。网站中可能使用多种字体，但是