网站设计基础知识讲座.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区代码规范,版权注释 网页显示字符集 网页制作者信息 网站简介 搜索关键字 网页标题 ,网站建设尺寸规范,页面标准按照800600分辨率制作,实际尺寸为778*434,页面长度原则上不超过3屏,宽度不超过1屏. 每个标准页面为A4幅面大小,即8.5*11英寸. 全尺寸Banner为468*60像素，半尺寸Banner为234*60像素，小Banner为88*31像素，另外120*90、120*60也是小图标的标准尺寸。 每个非首页静态页面含图片字节不超过60K，全尺寸Banner不超过14k,