《教学单元设计（项目需求分析）教学课件.ppt》由会员分享，可在线阅读，更多相关《教学单元设计（项目需求分析）教学课件.ppt（56页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1-11-1科创资讯网站首页设计科创资讯网站首页设计项目需求分析项目需求分析地 点： 网影科技有限公司网站开发部时 间： 上午8：20主 持： 网站开发部项目总监参加人员：网页设计部各项目组组长及设计师会议议题：科创资讯网站建设项目中项目需求分析创建情境创建情境网页设计部每周例会工作任务流程：需求了解需求了解方案形成方案形成岗位分工岗位分工任务安排任务安排资料收集资料收集理解用户需求、网站建设方案确定网站风格、布局、结构怎么来分析科创资讯网站建设这个项目怎么来分析科创资讯网站建设这个项目?风格风格(style)：是抽象的，是抽象的，是指站点的整体形象给浏览者是指站点的整体形象给浏览者的综合感受
2、的综合感受网站的风格网站的风格网页页面风格网页页面风格我们的工作我们的工作设计设计影响影响 一个网站中的页面如果拥有别一个网站中的页面如果拥有别的网站所没有的风格，这个网站就的网站所没有的风格，这个网站就会让浏览者愿意多停留些时间，并会让浏览者愿意多停留些时间，并细细的品尝这个站的内容，同时留细细的品尝这个站的内容，同时留下深刻映像。下深刻映像。 影响网页风格的项目有哪些呢？影响网页风格的项目有哪些呢？ 目录规划目录规划 内容主题内容主题 页面框架页面框架 颜色搭配颜色搭配 功能需求功能需求 表现形式表现形式 特效应用特效应用 未来走向未来走向 导航菜单导航菜单冷冷 暖暖内容主题内容主题 表现
3、形式表现形式性能介绍性能介绍1 网页(Web page)与网站的区别:网页是通过浏览器在WWW上所看到的每一个画面网站是网页的集合网页与网站都是以文件的形式存在的1.网页分析1.网页分析网站的网页上可以有各种媒体元素，包括文本、声音、图像、动画和数字视频等。在这个网页中，包含了多种网页媒体元素。(1) 文本文本一直是网页内容最常用的表达手段。用户可以按照自己的需求设置文本的字体、字号、颜色、底纹和边框等属性，通过不同的设置，突出显示重要的内容，并克服文字固有的缺点。1.网页分析(2) 图像图像常用作网页中的题图、插图、背景图、图标和按钮。这些图像在网页中具有提供信息、展示作品、装饰网页、表达个
4、人情调和风格的作用。在网页中经常使用GIF、JPEG(JPG)、PNG这3种图像文件格式。 1.网页分析(3)动画动画可以增加网页的动态效果，使网站更为生动有趣。动画可以表现事物的运动过程，在商业网站上也常用它来做广告看板。很多娱乐网站中都使用Flash动画来表现网页的内容，使网站内容更富有动感和情趣。在网页中经常使用的动画格式包括GIF动画和Flash动画等。1.网页分析(4) 表单在网站浏览中，很多交互行为是通过超链接来实现的，但是这种交互行为只是一个简单的方式，表单的出现使用户与网站的交互上升到一个新的高度。表单是网页中站点服务器处理的一组数据输入域，当用户单击按钮或图形提交表单后，数据
5、就会传送到服务器。1.网页分析图 .【表单咨询】表单 (5) 导航栏导航栏的作用是要让用户在浏览网站时，不会因为“迷路”而终止对网站的访问。导航栏就是一组超链接，这组超链接可链接到本站点的主页及其他主要网页。1.网页分析（6）表格表格是网页上的一行或多行单元格，用来组织网页的布局或有系统地布置数据。用户可以在表格的单元格中放置任何东西，包括文本、图形和表单，也可以是表格。1.网页分析（7）框架框架是网页制作的另外一个布局工具，利用框架布局的网页将显示窗口划分成多个独立的区域。（8） 其他网页元素网页中除了集中以上基本元素之外，还可以加入声音和数字电视等多媒体元素。声音可以用作网页背景音乐、网页
6、操作时的音效、供用户欣赏的歌曲和数字视频伴音等。数字视频可以用于点播新闻节目和教学节目。1.网页分析在网页中可以添加多种多样的元素，但如何制作网站独特的图片和动画，并把网页中各种内容合理地联系起来制作出具有个人风格的网页呢？首先，要选择一个方便、易学、易用的工具。u网页制作软件：Dreamweaver u网络图像处理软件：Photoshop、Fireworks u网络动画制作软件：Flash 1 可视化工具2.网站制作工具2 HTML语言文本、表格、样式、层、框架等元素的建立都是以HTML语言为基础的。HTML（hyper text markup language）语言是超文本标记语言，用来描
7、述WWW上的超文本文件。2.网站制作工具网站可以看作是一系列文档的组合，这些文档通过各种链接关联起来，可能拥有相似的属性，如描述的主体具有相关性，采用的设计彼此相似或实现相同的目的等；也可能只是关系的链接，利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。不论是正规的商业网站还是个人网站，要想把网页制作得丰富多彩，吸引大量用户前来访问，网站规划设计都是至关重要的。除非只设计一两个网页，否则网页制作应该按网站来考虑，首先对网站内容进行规划设计。在站点规划中主要做的工作是网站内容的设计，也就是对网站主题、具体内容及表达内容所用的媒体的设计。1、T字型布局（二分栏布局）字型布局（二
8、分栏布局）2、同字型布局（三分栏布局）、同字型布局（三分栏布局）3、拐角型布局、拐角型布局4、圆形布局、圆形布局5、不规则布局、不规则布局6、“口口”型布型布局局3.几种常用的布局1、T字型布局（二分栏布局）字型布局（二分栏布局）2、同字型布局（三分栏布局）、同字型布局（三分栏布局）3、拐角型布局、拐角型布局4、圆形布局、圆形布局5、不规则布局、不规则布局6、“口口”型布型布局局3.几种常用的布局对称对比布局 3.几种常用的布局1、T字型布局（二分栏布局）字型布局（二分栏布局）2、同字型布局（三分栏布局）、同字型布局（三分栏布局）3、拐角型布局、拐角型布局4、圆形布局、圆形布局5、不规则布局、
9、不规则布局6、“口口”型布型布局局3.几种常用的布局1、T字型布局（二分栏布局）字型布局（二分栏布局）2、同字型布局（三分栏布局）、同字型布局（三分栏布局）3、拐角型布局、拐角型布局4、圆形布局、圆形布局5、不规则布局、不规则布局6、“口口”型布型布局局3.几种常用的布局3.几种常用的布局1、T字型布局（二分栏布局）字型布局（二分栏布局）2、同字型布局（三分栏布局）、同字型布局（三分栏布局）3、拐角型布局、拐角型布局4、圆形布局、圆形布局5、不规则布局、不规则布局6、“口口”型布型布局局3.几种常用的布局1、T字型布局（二分栏布局）字型布局（二分栏布局）2、同字型布局（三分栏布局）、同字型布局
10、（三分栏布局）3、拐角型布局、拐角型布局4、圆形布局、圆形布局5、不规则布局、不规则布局6、“口口”型布型布局局3.几种常用的布局POP布局（自由布局）3.几种常用的布局1、T字型布局（二分栏布局）字型布局（二分栏布局）2、同字型布局（三分栏布局）、同字型布局（三分栏布局）3、拐角型布局、拐角型布局4、圆形布局、圆形布局5、不规则布局、不规则布局6、“口口”型布型布局局3.几种常用的布局“口”型布局3.几种常用的布局色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、
11、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。 4.网页色彩的搭配网页色彩搭配的原则1.使用单色 2.使用邻近色4.网页色彩的搭配3.使用对比色4.背景色的使用4.网页色彩的搭配一、红色1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。5.色彩的心理感受二、黄色1、 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平
12、和、潮润的感觉。2、 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。3、 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。4、 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。5.色彩的心理感受5.色彩的心理感受三、蓝色的色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果
13、在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。 5.色彩的心理感受5.色彩的心理感受四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。1、 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。2、 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。3、 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。5.色彩的心理感受五、 白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它
14、任何色，都会影响其纯洁性，使其性格变的含蓄。1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。2、 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。3、 在白色中混入少量的蓝，给人感觉清冷、洁净。4、 在白色中混入少量的橙，有一种干燥的气氛。5、 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉6、 在白色中混入少量的紫，可诱导人联想到淡淡的芳香5.色彩的心理感受5.色彩的心理感受5.色彩的心理感受6.科创资讯网该如何设计呢？ 建议大家从建议大家从logo样式、样式、banner样式及位置、导航条形式、布样式及位置、导航条形式、布局方式、颜色体系等等几方面考虑。局方式、颜
15、色体系等等几方面考虑。页面宽度的指定也有一定的原则：页面宽度的指定也有一定的原则： 800*600下，网页宽度保下，网页宽度保持在持在778以内，就不会出现水平滚动条；以内，就不会出现水平滚动条；1024*768下，网页宽下，网页宽度保持在度保持在1002以内以内 现在很多电脑都是宽屏的，分辨率又是不一样，所以一般情现在很多电脑都是宽屏的，分辨率又是不一样，所以一般情况下，我们要况下，我们要为大多数用户考虑为大多数用户考虑。6.科创资讯网该如何设计呢？6.网站分类1按网站主体性质分类政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构网站以及其它类型等。2按网站提供的服务分
16、类资讯类网站：新浪：交易类网站：卓越亚马逊： 当当： 淘宝：互动游戏类网站有偿服务类网站：101网校: 功能型网站：Google、baidu、3721综合类网站：yahoo、sina、sohu 办公类网站7.科创资讯网该如何设计呢？科创资讯网科创资讯网数码世界评论、专题、国内业界、国外业界、新闻周刊、发布会手机、数码相机、数码摄像机、MP3/MP4、数码家庭房产新闻、新盘、楼市聚焦、二手房市、租房流行前线、时尚饰品、T台秀、消费指南、网上拍卖求职、招聘、猎头、评测、培训产业资讯时尚购物房产频道求职招聘8.网站目录结构1、确定网站的目录结构（1）不要将所有文件都存放在根目录下，主页：index.
17、htm（2）按栏目内容建立子目录网页教程类站点可以根据技术类别分别建立相应的目录，象Flash、Dhtml、Javascript等；企业站点可以按公司简介、产品介绍、价格、在线定单、反馈联系等建立相应目录。 所有程序一般都存放在特定目录。例如：CGI程序放在cgi-bin目录。便于维护管理。所有需要下载的内容也最好放在一个目录下。 （3）在每个主目录下都建立独立的images目录（4）目录的层次不要太深 ：目录的层次建议不要超过3层。（5）不要使用中文目录（6）不要使用过长的目录（7）尽量使用意义明确的目录8.网站目录结构2、文件夹文件名命名规范（1）文件夹命名一般采用英文，长度一般不超过20
18、个字符，命名采用小写字母。除特殊情况才使用中文拼音，一些常见的文件夹命名如：images(存放图形文件)，flash（存放Flash文件），style(存放CSS文件)，scripts（存放Javascript脚本），inc(存放include文件)，link（存放友情链接），media(存放多媒体文件)等。 （2）文件名称统一用小写的英文字母、数字和下划线的组合。1）图片的命名原则名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名：banner标志性的图片取名为：logo在页面上位置不固定并且带有链接的
19、小图片我们取名为button在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu装饰用的照片我们取名：pic不带链接表示标题的图片我们取名：title下面是几个范例： banner_sohu.gif 、banner_sina.gif、 menu_aboutus.gif 、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg 。 2）动态语言文件命名规则性质_描述，描述可以有多个单词，用”_”隔开，性质一般是该页面得概要。 范例：register_form.asp，register_post.asp,topic_lock.asp