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