网站设计基础知识讲座2222.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网站设计基础知识讲座,网页设计概述,网页基本特征,网页的基本构成元素,网页设计的基本原则,多媒体在网页设计中的应用,网页基本特征,标题,正文,网页的基本构成元素,文本,图像,超链接,表格,表单,导航栏,Gif,动画,Flash,动画,框架,网页设计的基本原则,确定内容,确定内容最好的表现形式和用户,确立一个创造性的、有效的设计方案,网页设计的标准：,不同的用户群有不同的服务方向，需要恰当的设计,没有好的或者坏的设计，只有是否合适、恰当的设计。,网页多媒体类型,1,、图像,Gif,、,JPEG,、,PNG,2,、动画,Gif,、,Flash,3,、,Java Applet,4,、音频,WAV,、,MP3,、,MIDI,、,Real Audio,、,5,、视频,Realplayer,、,mov,、,MPEG,、,AVI,网站设计制作的基本流程,前期策划和内容组织,网站需求分析,网站整体风格定位,网站内容组织,网站设计制作的基本流程,规划,设计,完善,发布,维护,网站的制作流程图,前期策划和内容组织,网站需求分析,网站整体风格定位,网站内容组织,规划草图,规划页面结构,规划站点结构,网站页面的设计制作,寻找网页的创意,利用图像软件设计效果图,利用网页编辑软件制作网页,利用网页动画软件制作动画,网站页面的技术实现,网页制作中的其他常用工具,360,度全景图片,Swish,制作,Flash,文字特效动画,使用,ftp,软件发布网站,网页特效的具体技术实现,Html,、,CSS,、,JavaScript,色彩搭配在网站中的应用,色环,在从红到紫的光谱中,等间的选择两种或两种以上的颜色,相邻的两个色相互混合又得到另外一种特殊的颜色,.,如此周而复始,从而构成一个首尾相交的环,被称为孟赛尔色相环,即色环,.,从本质上讲,色环就是色谱可以看到的颜色所形成的线性连续环,.,常见配色方案,近似色,用近似色的颜色主题可以实现色彩的融洽与融合,常见配色方案,补充色,:,补充色也叫对比色,是制在色环中的直接位置相对的颜色,.,强烈突出,富有冲击力,常见配色方案,分离补色,:,在色环上选择一种颜色，他的补色就在色环的另一面,可以使用补色旁边的一种或多种颜色,这样的一组颜色叫做分离补色,.,常见配色方案,暖色系,:,由红色调组成,赋予温暖、舒适和活力,常见配色方案,冷色系：冷色来自于兰色色调，这些颜色对色彩主题起到冷静的作用，用做页面背景较好。,色彩的,4,种功能角色,主色,支配色,融合色,强调色,如何使用色彩给网站定位,红色：热情、活力,橙色：时尚、轻快,黄色：明亮、愉快,绿色：宁静、希望,蓝色：凉爽、清新、专业,白色：洁白、纯真，多用于背景色,黑色：深沉,灰色：中庸,网站用户界面的设计,用户界面的要求,网页界面的实用性设计,网页信息的表现形式和类型,网页的版式,网页中的文字设计,网页中的图像运用,用户界面的要求,标题一目了然,表明信息,清晰的目录结构,网页界面的实用性设计,表现欢迎,传达信任感,加强说服力,网页的版式,网站广告的设计,网站广告标准尺寸,300*250,中等矩形 一般用于页面内部,250*,250,正方形 一般用于页面内部,130*300,垂直矩形 一般用于门户网站内容页面中，适合与正文的混排,360*300,大矩形 一般用于弹出窗口广告,468*60,通栏广告，,88*31,链接用,LOGO,标志,120*60,按钮样式,网站广告的设计准则,视觉要求,醒目、美观,文字使用,文字清晰、字体合适,文本与背景有较大对比,选用合适的字体,字体排列方式要符合人们阅读习惯,避免文字单一化,内容设计,广告语激发用户点击欲望,网站中表格的使用,表格的作用,表格的制作,利用表格分割网页,格子理论的介绍,格子网页的制作,网站中层的使用,层的特点,具有编号、大小、位置、背景、可见性、溢出等。,层与表格的配合,框架网站的制作,框架的特点,使用框架建设网站最大的特点就是使网站的风格能够保持统一。,模版网站的制作,模版的特点,是,Dreamweaver,中一种特殊类型的文档，用于设计“锁定的”页面布局。最大的用途在于一次更新多个页面,制作模版网站,在页面中使用库,库是一种特殊的,Dreamweaver,文件，其中包含用户已创建以便放在网页上的单独“资源”或者资源拷贝的集合，库项目是可以在多个页面中重复使用的存储页面元素。每当更改某个库项目的内容时，用户都可以更新所有使用该项目的页面。,使用行为和,JavaScript,制作特效,Dreamweaver,中的行为,行为是事件和动作的组合，浏览器响应用户的动作产生事件。,行为的使用,添加状态栏文本、,添加弹出信息、打开浏览器窗口、交换图像、拖动层特效、弹出菜单、显示隐藏层,JavaScript,介绍,使用,CSS,样式表设计网页,CSS,的介绍,是一种设计网页样式的工具。使用方式有,3,种：内部样式表文件、外部链接样式表、内部嵌入样式表。,利用,CSS,定义网页对象,定义文本,定义表格,定义背景,定义超链接,使用滤镜,建设数据库网站,创建动态页面,创建动态站点,创建,DSN,数据库连接,使用数据绑定,插入动态内容,网站开发规范,网站项目管理规范,组建开发团队规范,开发工具规范,网站开发流程规范,数据库开发规范,文件夹文件名命名规范,程序代码编程规范,网站首页,head,区代码规范,网站建设尺寸规范,网站,LOGO,设计规范,网站项目管理规范,概念,网站项目管理就是根据特定的规范、在预算范围内、按时完成网站开发任务。,需求分析,项目立项、客户的需求说明书、,系统分析,网站总体分析、建设方案、详细设计、,项目实施,整体形象设计、开发制作、调试完善、宣传推广,组建开发团队规范,六个必须角色,项目经理：总体设计，定制开发进度并监控，定制相应的开发规范，负责各个环节的评审工作，协调各个成员小组之间的开发。,策划：提供详细的策划方案和需求分析的人，还包括后期网站推广方面的策划。,美工：根据策划和需求设计网站界面,程序员：根据项目总体设计来设计数据库和功能模块的实现。,代码整合员：负责将程序员的代码和界面融合到一起，代码整合员可以制作网站相关页面。,测试员：负责测试程序。,开发工具规范,前台开发工具,Photoshop/,Dreamweaver,/Flash,等,后台开发环境,PowerDesigner,(,数据库建模)/Rational Rose(,程序建模,),。,项目管理和辅助软件,Miicrosoft,Project(,开发进度,)/Visual SourceSafe(,代码版本控制,),/,VS.net,附带工具,Microsoft Application Center Test,/Word(,编写程序文档,),网站开发流程规范,Web,策划,评审,设计效果图,评审,页面制作,测试,Y,N,Y,N,N,Y,需求分析,评审,总体设计,评审,数据库设计功能设计,评审,Y,N,Y,N,N,Y,代码整合,测试,发布,实现功能模块,测试,N,Y,Y,N,数据库开发规范,数据库表命名规范,数据库字段命名规范文件夹文件名命名规范,命名采用英文小写,images(,存放图形文件,),flash(,存放,Flash,文件,),style(,存放样式表文件,),scripts(,存放,javascript,脚本,),inc(,存放,include,文件,),link(,存放友情链接,),media(,存放多媒体文件,),程序代码编写规范,略,网站首页,head,区代码规范,版权注释,网页显示字符集,网页制作者信息,网站简介,搜索关键字,网页标题,网站建设尺寸规范,页面标准按照,800,600,分辨率制作,实际尺寸为,778*434,页面长度原则上不超过,3,屏,宽度不超过,1,屏,.,每个标准页面为,A4,幅面大小,即,8.5*11,英寸,.,全尺寸,Banner,为,468*60,像素，半尺寸,Banner,为,234*60,像素，小,Banner,为,88*31,像素，另外,120*90,、,120*60,也是小图标的标准尺寸。,每个非首页静态页面含图片字节不超过,60K,，全尺寸,Banner,不超过,14k,