网页制作与网站设计教学课件 网页制作与网站设计课程组开发 淮安信息职业技术学院

情境1：教学成果申报网网站建设 任务1：项目基础与流程设计 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策 4. 任务实施 5. 项目检查与评估 6. 项目策略与经验 网页制作与网站设计教程

分项任务2教学成果申报网站效果图设计与切片 情境1：教学成果申报网网站建设 任务1：项目基础与流程设计 1. 网站需求分析 2. 网站风格定位 分项任务1项目基础与流程设计 分项任务2教学成果申报网站效果图设计与切片 分项任务3网站的后期编辑 分项任务4网站的发布与测试

互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。 网页的基本概念 1．互联网 互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。 图 1-11 Internet示意图

网页的基本概念 2．万维网 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是： 1.协议 协议是一组标准的规则，用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错误检测，访问Web上的资源都需要遵循这些规则。万维网使用的是HTTP协议（Hyper Text Transfer Protocol,超文本传输协议）。

网页的基本概念 2．万维网 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是： 2.地址 地址：万维网采用统一的命名方案来访问Web上的资源。URL（Uniform Resource Locations,统一资源定位符，网页的网址）用于标识Web上的页面和资源。 每个URL均由3部分组成，如下所示。 用于通讯的协议 与之通信的主机（服务器） 服务器上资源的路径（例如文件名） http:// www.hcit.edu.cn / index.htm 协 议 主 机 路 径 http www.hcit.edu.cn index.htm

3.HTML（Hyper Text Markup Language，超文本标记语言） 网页的基本概念 2．万维网 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是： 3.HTML（Hyper Text Markup Language，超文本标记语言） HTML用于创建网页文档。HTML文档是使用HTML标记和元素创建的，此文件以扩展名.htm或.html保存在Web服务器上。 请 求 响 应 客户浏览器 客户浏览器/服务器工作的过程

网页的基本概念 3．Web浏览器 Web浏览器的中文名称：网络浏览器或网页浏览器，简称浏览器；英文名称：Web Browser。浏览器是用于观看网页的工具，是一个显示网页伺服器或档案系统内的HTML文件，并让用户与这些文件进行互动的一种软件。个人电脑上常见的网页浏览器包括微软的Internet Explorer、Mozilla的Firefox、Opera和Safari。浏览器是最经常使用到的客户端程序。

网页的基本概念 4．网页与网站 网站：网站是万维网上相关网页的集合。 网页：网页是万维网上的页面，其文件后缀名通常为.html或.htm。HTML：HTML是超文本标记语言（Hyper Text Markup Language）的简称。 HTML编辑器：也称网页编辑器，一般是指用于开发网页的工具软件，目前比较流行的HTML编辑器是Macromedia Dreamweaver和Microsoft FrontPage。

网页的基本概念 5．超级链接 用户在浏览网页时，但鼠标移动到网页中的某一元素时，鼠标光标变成形状，则表示该元素连接了其他的页面或者元素，也就是网页中的超级链接。它他的作用和Windows操作系统中的快捷方式图表一样，通过它可以在网站内部页面和对象之间建立链接，也可以在与其他网站的页面和对象之间建立连接。通过单击网页中的超级链接就可以转到相应的页面上进行浏览。

情境1：教学成果申报网网站建设 网站需求分析 网页设计是一个感性思考与理性分析相结合的复杂过程。它的方向取决于设计的任务，它的实现依赖于网页的制作。 网页站点的设计是展示企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此必须明确设计站点的目的和用户的需求，以消费者为中心，根据市场的状况、企业自身的情况等进行综合分析，从而做出切实可行的设计计划。 总体设计方案要主题鲜明。在目标明确的基础上，完成网站的构思创意。对网站的整体风格和特色做出定位，规划网站的组织结构。一件完美的网站设计作品是设计师与客户不断进行沟通而设计出的结果。 网站开始构思的时候需要充分的了解客户需求，要达到什么目的、效果。因此前期的投入是很有必要的，以便准确、完善地满足客户的预期要求。

情境1：教学成果申报网网站建设 网站需求分析 通过对“教学成果申报网”的基本需求了解，经过分析网站需求模块如图所示： 成果推荐书 成果总结 成果视频介绍 电子信息工程实训基地 成果展示名录 教学成果申报网需求模块示意图

风格定位 1.网站的分类 1．资讯类网站 如新浪、网易、搜狐等门户网站。这类站点一般会为访问者提供大量的信息，而且访问量较大。因此，应对这些信息进行合理的分类，将页面划分为多个栏目，页面机构要合理、美观，便于浏览者浏览。 2．形象类网站 如一些中小型公司或单位的网站。这类网站一般较小，有的只有几页，需要实现的功能也比较简单，网页设计的主要任务是宣传企业形象。对于这类网站来说，版式、色彩、动画设计等是项目重点，一般对美工的要求较高。 3．资讯与形象相结合的网站 如大型公司或高校的网站。这类网站在设计上要求较高，既要考虑到资讯类网站的各项指标，同时又要突出企业、单位的形象。

网站的分类与赏析 2.网站的赏析-门户类网站 YAHOO是互联网上最知名的公司，一直高居访问流量之首，是互联网上最大的门户，也是一个垂直网站总汇。YAHOO致力于做成互联网上最大的媒体，涉及的领域包括网络门户、电子商务、网络通信等，提供的服务还包括拍卖、购物、开设网上商店、聊天等。YAHOO公司是一家全球性的互联网通信、商贸及媒体公司，是全球第一家提供互联网导航服务、主要以广告为支撑的网站，广告收入占公司收入的60%。YAHOO网站如图1-13所示。

（3）文字颜色 使用了低纯度的普蓝和黑色，其中普蓝色的文字是网站的超级链接形式，鼠标放上去后会有微妙的明度变化以及下划线的出现。 说明性文字用的是黑色。 信息内容框里的标题，主次关系排视觉第一位，内容框里的主要内容缩小字号，都做了粗细的变化。 从文字上看，又一次体会到了门户网站对细节的推敲的严谨性。 1.3 网站的分类与赏析 YAHOO的网站以浅蓝、紫色系为主要色调，右上新业务栏会不时变化相应的主题，根据相应的主题来定制不同的颜色，使用户总有即时、新鲜的感觉。 2.网站的赏析-门户类网站 （4）图形 第一屏上最大的图片为右方的YAHOO！Travel，它能够直接体现出YAHOO收益的新业务。其次为屏幕中央的新闻照片，其它则为左侧的导航图片（个性服务）。 在整个网站里，破除单调呆板印象，使整个版面生动的点睛之笔是左侧的8个图标，也是网站为用户订制的特色服务。 （2）色彩 与某些门户网站相比较，YAHOO网站的用色比较清爽、干净。 整体看来，YAHOO使用了蓝色、紫色两套邻近色，辅助以灰色，使色彩过渡和谐。点睛色无疑为顶部左侧醒目突出网站的标志“YAHOO！”，这也是网站中纯度最高的颜色。 YAHOO网站不仅对色相的微妙区别把握得很好，而且对色彩的纯度主次的把握也值得称赞。 （1）框架结构-首页 上左中右下结构是框架,确切地说是左中右结构。整个网站的主要内容主要集中在中和右的信息内容上。

情境1：教学成果申报网网站建设 草图规划与设计 网站标志与名称 图片 成果推荐书 展示图片与视频 成果总结 成果视频介绍 成果展示名录 电子信息工程实训基地 版权信息

谢谢大家