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