网页设计与制作项目教程(项目一 -任务01)

三个阶段
电子商务通常是指使用计算机技术、网络技术和远程 通信技术，实现整个商务过程的电子化、数字化和网 络化
知识链接:网页元素 二.网页的基本元素
不同性质的网站，其页面元素可能有所不同。一般构成网页的元素 包括Logo、Banner、导航栏、文本、图像、声音、视频、动画、特效、 表格、框架、超链接、表单等，如图所示。
所谓门户网站，是指通向某类综合性互联网信息资源
并提供有关信息服务的应用系统。 比较知名的中文门户网站有：搜狐 ()、 中文雅虎 ()、新浪() 等
知识链接:网站类型
电子商务型网站 如B2B、B2C网站 按照交易过程可分为商品检索、商品采购、订单支付
任务实施 4．分析“中国儿童资源网 ” 网站，体验经典的 色彩搭配。
（1）打开IE浏览器，在地址栏输入网站地址（ ），访问效果如图所示。
任务实施 4．分析“中国儿童资源网 ” 网站，体验经典的 色彩搭配。
（2）鉴赏分析。
• 首页主要列出了导航菜单，简洁明了、排列整齐。 • 颜色的选择上虽然运用了多种明亮的色调，但搭配 却非常和谐。 • 该网页给人的视觉感受是和谐美观，在模块的划分 上比较明显 • 每个内容板块都采用了不同颜色和形式做标题装饰 ，在视觉方面也给人以醒目和新颖的感觉。
知识链接:基本概念
2．网站与网址
一般来说，网站是一个相互链接的网页的集合。严格来讲，网站是 有独立地址和独立空间的内容集合，这些内容可能是网页络资源地址的简称，也称URL（Uniform Resource Locator，统一资源定位器）。URL是用来统一标识Internet各种资源的 位置，其格式为： 协议名://主机名:端口号/文件路径/文件名 例如，/News/200812592818.html 其中，http是超文本传输协议（Hypertext Transfer Protocol）， 是网页文件在Internet中传输的标准。主机名可以是域名，也可以是IP地 址。域名其实是IP地址的字符表示。
知识链接:网页元素 二．网页的组成元素
1. 标题
2. 网站LOGO
知识链接:网页元素
3. 页眉
4. 主体内容
知识链接:网页元素
5. 页脚
6. 功能区
知识链接:网页元素
7. 导航区
知识链接:网页元素
8. 广告区
广告区
知识链接:网页布局 三.网页布局结构
任务实施 3．分析“凤凰古城” 网站
（1）打开IE浏览器，在地址栏输入网站地址（http:// 。访问效果如图所示。
任务实施 3．分析“凤凰古城” 网站
（2）鉴赏分析 • 该首页给人的视觉效果是一种古朴的气息迎面扑来 • 整体色彩、图文搭配十分协调，咖啡色的运用和图 片的搭配十分和谐。 • 主页题头的凤凰古城图片恰到好处，突出了主题， 同时也起到了广告作用。 • 导航栏的文字颇具特色。 • 首页的布局结构合理,内容划分清晰。
6、虚拟主机
7、租赁服务器
知识链接:网页的设计原理与技巧 网站标志Logo设计
标志的设计创意来自网站的名称和内容，可以分为三个方 面： 网站有代表性的人物、动物、花草，可以用它们作为设 计蓝本， 加以卡通化和艺术化。 网站有代表性的物品，可以用物品作为标志。 用自己网站的名称作标志，采用不同的字体、字母的变 形制作标志。
知识链接:基本概念
3．网页与主页
网页是由HTML（超级文本标识语言）或者其他语言编写的，通过 Web浏览器（如IE）编译后供用户获取信息的页面，也称为Web页，其 中可包含文字、图像、声音、动画和超链接等各种网页元素。网页是 WWW的基本信息单位，每个网页以独立文件形式存放，其扩展名 有.htm、.html、.asp、.jsp等。 主页是网站中的一个特殊网页，它是进入网站的第一个页面，其中 包含指向其他网页的超链接。主页是网站的“门面”，其作用远比其他 网页更重要，设计时必须精心考虑。主页的名称一般是固定的，通常为 index.html或 index.asp等。
任务：了解网页设计与制作基础知识 任务描述
打开导航类型的网站，通过其分类总 结网站的类型，并通过该网站打开其他不同类型的网 站，分析不同类型网站的布局结构，认识网站的组成 元素。 分别浏览“汇源果汁”集团、浏览“凤凰古城” “中 国儿童资源网 ” 网站等优秀网站，观赏其页面布局、 导航设计、色彩搭配、动感效果等，给出鉴赏报告。
知识链接:网页布局 6. 综合框架型
知识链接:网页布局 7. 封面型
知识链接:网页布局 8. Flash型
知识链接:网页布局 9. 变化型
知识链接：开发流程 四．网站建设流程
知识链接：开发流程
第一步：企业网站提出需求
第二步：设计建站方案
第三步：查询申办域名
布局分析
图1.3 hao123网站的布局结构
1.分析hao123网站
Hao123网站为导航型网站，主要内容由导航网址组成， 除此之外，页面上还有网站站标（logo）、网站广告 (banner)、邮箱登录入口及搜索框、网站备案号等。 如图1.4所示。
元素组成分析
网站站标（logo）
邮箱登录入口 （表单）
知识链接:基本概念 1．Internet与WWW
Internet一词来源于英文Interconnect networks，即“相互联系的 各个网络”，简称“互联网”，中文译名为“因特网”。Internet是专指 全球范围内最大的、由众多网络相互连接而成的、基于TCP/IP协议的计 算机网络。 WWW是World Wide Web（世界范围蜘蛛网）的简称，也称Web网， 中文译名为“万维网”。WWW是Internet提供的应用最普及、功能最丰 富、使用最方便的信息服务系统。 WWW是由遍布在Internet上的无数称之为Web服务器的计算机组成， 它将不同信息资源以网页的形式，通过超链接（Hyperlink）有机地联系 在一起，由Web浏览器软件进行浏览。
网站广告(banner)
网站备案号等
图1.4 hao123网站的组成元素
任务实施 2．分析“汇源果汁”网站
（1）打开IE浏览器，在地址栏输入网站地址（ /），访问效果如图所示 。
任务实施
2．分析“汇源果汁”网站
（2）鉴赏分析。 • 汇源果汁网站的首页整体以橙色为基调，网站的界 面清新活泼，其左上角是企业的标志，中上方是其 网站栏目导航，清晰地展示整个网站的所有功能及 服务项目。 • 在网站的颜色处理上，以产品色为基调，加深人们 对企业产品的认知度。在设计的过程中，充分运用 视觉形象系统，让人觉得网站内容丰富而又不混乱 。 • 同时在制作上充分运用一些动态效果，渲染页面的 设计表现力，简洁清晰，展示出良好的企业生命力 和创造力。整个首页洁净、自然，静中有动，动静 相宜，让人赏心悦目，给网页的设计也增添了浓厚 的艺术氛围。
知识链接:基本概念 5．浏览器与服务器
浏览器（Browse）是用于阅读网页中信息的一种软件工具，它安 装在用户计算机上，如Internet Explorer（IE）等。浏览器的作用是 “翻译”HTML标记语言，并按规定格式把内容显示出来。 服务器（Server）是提供网络服务与管理的计算机。例如，提供网 页服务和管理的计算机就称作Web服务器。 Web采用浏览器/服务器(B/S)工作模式，工作原理如图所示。
其内容组成如图1.2分析所示：
广类网址
根据用户的使用需要进 行类型划分。
展示各类型的优秀网站 或者热门内容的网址。
图1.2 hao123网站内容
1.分析hao123网站
Hao123网站的整体布局为“匡”字型布局，整体看起 来如一个“匡”字，此布局突出内容，使主内容有更 大的视觉空间。 如图1.3所示。
知识链接
六．网页编辑工具
1、FrontPage 2、Dreamweaver 3、Fireworks 4、Photoshop 5、Flash
6、CuteFTP
7、FlashFXP
知识链接
七．常见网站建设术语
1、静态网页 2、动态网页 3、域名 4、IP地址 5、域名解析服务(DNS) 8、主机托管 9、ASP 10、 11、PHP 12、CGI
网页布局大致可分为“国”字型、拐角型、标题正文 型、左右框架型、上下框架型、综合框架型、封面型 、Flash型、变化型等。
知识链接:网页布局 1. “国”字型
知识链接:网页布局 2. 拐角型
知识链接:网页布局 3. 标题正文型
知识链接:网页布局 4. 左右框架型
知识链接:网页布局 5. 上下框架型
项目一:网页基础
任务：了解网页设计与制作基础知识
学习内容
1 了解网站类型 2 了解网页的组成与结构
3 了解网站建设流程
4 了解网页制作的基本原则 5 了解网页编辑工具 6 了解常见网站建设术语
学习目标
• 知识目标：
通过系统学习使学生了解网页设计的基本原则和技巧，分析 优秀网页的布局结构、颜色搭配、视觉效果，基本掌握网页设计 与制作的基本知识，为学习制作网页奠定基础。 • 技能目标：
通过讲解辅导与作业练习，要使学生能熟练掌握网站建设的 流程及网页制作的内容，培养对优秀网站和网页的鉴赏能力。
• 素质目标：
1. 具有勤奋学习的态度，严谨求实、创新的工作作风； 2. 具有良好的心理素质和职业道德素质；
3. 具有高度责任心和良好的团队合作精神；
4. 具有一定的科学思维方式和判断分析问题的能力； 5. 具有较强的网页设计创意思维、艺术设计素质。
第四步：网站系统规划
第五步：确定合作 第六步：网站内容整理 第七步：网页设计、制作、修改 第八步：网站提交企业网站审核并发布 第九步：网站网站推广及后期维护