任务1项目基础与流程设计

《任务1项目基础与流程设计》由会员分享，可在线阅读，更多相关《任务1项目基础与流程设计（17页珍藏版）》请在金锄头文库上搜索。

1、地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 网页制作与网站设计教程网页制作与网站设计教程主编：张洪斌主编：张洪斌 刘万辉刘万辉北京交通大学出版社 地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 1. 1. 任务解析与项目目标任务解析与项目目标 2. 2. 核心技能与概念核心技能与概念 3. 3. 任务计划与决策任务计划与决策 4. 4. 任务实施任务实施 5. 5. 项目检查与评估项目检查与评估 6. 6. 项目策略与经验项目策略与经验任务1：项目基础与流程设计网页制作与网站设计网

2、页制作与网站设计教程教程情境1：教学成果申报网网站建设地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 1. 1. 网站需求分析网站需求分析 2. 2. 网站风格定位网站风格定位 任务1：项目基础与流程设计情境1：教学成果申报网网站建设分项任务1项目基础与流程设计 分项任务2教学成果申报网站效果图设计与切片 分项任务3网站的后期编辑分项任务4网站的发布与测试地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 1互联网 网页的基本概念 互联网是由多个计算机网络

3、相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。 图 1-11 Internet示意图 地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 2万维网网页的基本概念 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是：1.协议协议是一组标准的规则，用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错误检测，访问Web上的资源都需要遵循这些规则。万维网使用的是HTTP协议（Hyper Text Transfer Protocol,超文本传输协议）。地址：北京市海淀区高

4、梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 2万维网网页的基本概念 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是：2.地址地址：万维网采用统一的命名方案来访问Web上的资源。URL（Uniform Resource Locations,统一资源定位符，网页的网址）用于标识Web上的页面和资源。每个URL均由3部分组成，如下所示。用于通讯的协议与之通信的主机（服务器）服务器上资源的路径（例如文件名）http:/ / index.htm协 议主 机路 径 index.htm 地址：北京市海淀区高梁桥斜街44号

5、 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 2万维网网页的基本概念 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是：3.HTML（Hyper Text Markup Language，超文本标记语言）HTML用于创建网页文档。HTML文档是使用HTML标记和元素 创建的，此文件以扩展名.htm或.html保存在Web服务器上。请 求响 应客户浏览器客户浏览器/服务器工作的过程 地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 3Web浏览器 网页的基本概

6、念 Web浏览器的中文名称：网络浏览器或网页浏览器，简称浏览器；英文名称：Web Browser。浏览器是用于观看网页的工具，是一个显示网页伺服器或档案系统内的HTML文件，并让用户与这些文件进行互动的一种软件。个人电脑上常见的网页浏览器包括微软的Internet Explorer、Mozilla的Firefox、Opera和Safari。浏览器是最经常使用到的客户端程序。 地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 4网页与网站网页的基本概念 网站：网站是万维网上相关网页的集合。网页：网页是万维网上的页面，其文件后缀

7、名通常为.html或.htm。HTML：HTML是超文本标记语言（Hyper Text Markup Language）的简称。HTML编辑器：也称网页编辑器，一般是指用于开发网页的工具软件，目前比较流行的HTML编辑器是Macromedia Dreamweaver和Microsoft FrontPage。 地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 5超级链接 网页的基本概念 用户在浏览网页时，但鼠标移动到网页中的某一元素时，鼠标光标变成形状，则表示该元素连接了其他的页面或者元素，也就是网页中的超级链接。它他的作用和

8、Windows操作系统中的快捷方式图表一样，通过它可以在网站内部页面和对象之间建立链接，也可以在与其他网站的页面和对象之间建立连接。通过单击网页中的超级链接就可以转到相应的页面上进行浏览。 地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 网站需求分析网站需求分析 情境1：教学成果申报网网站建设网页设计是一个感性思考与理性分析相结合的复杂过程。它的方向取决于设计的任务，它的实现依赖于网页的制作。网页站点的设计是展示企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此必须明确设计站点的目的和用户的需求，以消费者为中心，根

9、据市场的状况、企业自身的情况等进行综合分析，从而做出切实可行的设计计划。总体设计方案要主题鲜明。在目标明确的基础上，完成网站的构思创意。对网站的整体风格和特色做出定位，规划网站的组织结构。一件完美的网站设计作品是设计师与客户不断进行沟通而设计出的结果。网站开始构思的时候需要充分的了解客户需求，要达到什么目的、效果。因此前期的投入是很有必要的，以便准确、完善地满足客户的预期要求。 地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 网站需求分析网站需求分析 情境1：教学成果申报网网站建设通过对“教学成果申报网”的基本需求了解，经

10、过分析网站需求模块如图所示： 成果推荐书成果总结成果视频介绍电子信息工程实训基地成果展示名录教学成果申报网需求模块示意图地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 1.网站的分类风格定位 1资讯类网站如新浪、网易、搜狐等门户网站。这类站点一般会为访问者提供大量的信息，而且访问量较大。因此，应对这些信息进行合理的分类，将页面划分为多个栏目，页面机构要合理、美观，便于浏览者浏览。 2形象类网站如一些中小型公司或单位的网站。这类网站一般较小，有的只有几页，需要实现的功能也比较简单，网页设计的主要任务是宣传企业形象。对于这类网

11、站来说，版式、色彩、动画设计等是项目重点，一般对美工的要求较高。 3资讯与形象相结合的网站如大型公司或高校的网站。这类网站在设计上要求较高，既要考虑到资讯类网站的各项指标，同时又要突出企业、单位的形象。地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 2.网站的赏析-门户类网站 网站的分类与赏析 YAHOO是互联网上最知名的公司，一直高居访问流量之首，是互联网上最大的门户，也是一个垂直网站总汇。YAHOO致力于做成互联网上最大的媒体，涉及的领域包括网络门户、电子商务、网络通信等，提供的服务还包括拍卖、购物、开设网上商店、聊天

12、等。YAHOO公司是一家全球性的互联网通信、商贸及媒体公司，是全球第一家提供互联网导航服务、主要以广告为支撑的网站，广告收入占公司收入的60%。YAHOO网站如图1-13所示。 地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社 http:/ 2.网站的赏析-门户类网站 1.3 网站的分类与赏析 YAHOOYAHOO的网站以浅蓝、紫色系为主要色调的网站以浅蓝、紫色系为主要色调，右上新业务栏会不时变化相应的主题，根据，右上新业务栏会不时变化相应的主题，根据相应的主题来定制不同的颜色，使用户总有即相应的主题来定制不同的颜色，使用户总有即时、新鲜

13、的感觉。时、新鲜的感觉。 （1 1）框架结构）框架结构- -首页首页上左中右下结构是框架上左中右下结构是框架, ,确切地说是左中右结构确切地说是左中右结构。整个网站的主要内容主要集中在中和右的信。整个网站的主要内容主要集中在中和右的信息内容上。息内容上。 （2 2）色彩）色彩与某些门户网站相比较，与某些门户网站相比较，YAHOOYAHOO网站的用色比较清爽、干净。网站的用色比较清爽、干净。整体看来，整体看来，YAHOOYAHOO使用了蓝色、紫色两套邻近色，辅助以灰色，使使用了蓝色、紫色两套邻近色，辅助以灰色，使色彩过渡和谐。点睛色无疑为顶部左侧醒目突出网站的标志色彩过渡和谐。点睛色无疑为顶部左

14、侧醒目突出网站的标志“ “YAHOOYAHOO！” ”，这也是网站中纯度最高的颜色。，这也是网站中纯度最高的颜色。YAHOOYAHOO网站不仅对色相的微妙区别把握得很好，而且对色彩的纯度网站不仅对色相的微妙区别把握得很好，而且对色彩的纯度主次的把握也值得称赞。主次的把握也值得称赞。 （3 3）文字颜色）文字颜色使用了低纯度的普蓝和黑色，其中普蓝色的文字是网站的超级链接形使用了低纯度的普蓝和黑色，其中普蓝色的文字是网站的超级链接形式，鼠标放上去后会有微妙的明度变化以及下划线的出现。式，鼠标放上去后会有微妙的明度变化以及下划线的出现。说明性文字用的是黑色。说明性文字用的是黑色。信息内容框里的标题，

15、主次关系排视觉第一位，内容框里的主要内容信息内容框里的标题，主次关系排视觉第一位，内容框里的主要内容缩小字号，都做了粗细的变化。缩小字号，都做了粗细的变化。从文字上看，又一次体会到了门户网站对细节的推敲的严谨性。从文字上看，又一次体会到了门户网站对细节的推敲的严谨性。 （4 4）图形）图形第一屏上最大的图片为右方的第一屏上最大的图片为右方的YAHOOYAHOO！TravelTravel，它能够直接体现出，它能够直接体现出YAHOOYAHOO收益的新业务。其次为屏幕中央的新闻照片，其它则为左侧收益的新业务。其次为屏幕中央的新闻照片，其它则为左侧的导航图片（个服务）。的导航图片（个服务）。在整个网站里，破除单调呆板印象，使整个版面生动的点睛之笔是左在整个网站里，破除单调呆板印象，使整个版面生动的点睛之笔是左侧的侧的8 8个图标，也是网站为用户订制的特色服务。个图标，也是网站为用户订制的特色服务。地址：北京市海淀区高梁桥斜街44号 邮编：100044电话：010-51686049 北京交通大学出版社