网页设计与制作项目教程 课件

项目一:网页基础任务：了解网页设计与制作基础知识项目一:网页基础任务：了解网页设计与制作基础知识1了解网站类型2了解网页的组成与结构3了解网站建设流程学习内容4了解网页制作的基本原则5了解网页编辑工具6了解常见网站建设术语1了解网站类型2了解网页的组成与结构3了解网站建设流程学习目标知识目标：

通过系统学习使学生了解网页设计的基本原则和技巧，分析优秀网页的布局结构、颜色搭配、视觉效果，基本掌握网页设计与制作的基本知识，为学习制作网页奠定基础。技能目标：通过讲解辅导与作业练习，要使学生能熟练掌握网站建设的流程及网页制作的内容，培养对优秀网站和网页的鉴赏能力。素质目标：1.具有勤奋学习的态度，严谨求实、创新的工作作风；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有一定的科学思维方式和判断分析问题的能力；5.具有较强的网页设计创意思维、艺术设计素质。学习目标知识目标：任务：了解网页设计与制作基础知识任务：了解网页设计与制作基础知识网页设计与制作项目教程课件任务实施1.分析hao123网站hao123网址之家及时收录包括综合资讯、购物、音乐、视频、小说、游戏等热门网站，与搜索完美结合，提供最简单便捷的网上导航服务，是数千万网民的上网主页。它从用户的角度对网站进行归类，以网站热门程度进行排列。其内容组成如图1.2分析所示：内容分析任务实施1.分析hao123网站内容分析搜索区域最新热门及推广类网址根据用户的使用需要进行类型划分。展示各类型的优秀网站或者热门内容的网址。图1.2hao123网站内容搜索区域最新热门及推广类网址根据用户的使用需要进行类型划分。1.分析hao123网站Hao123网站的整体布局为“匡”字型布局，整体看起来如一个“匡”字，此布局突出内容，使主内容有更大的视觉空间。如图1.3所示。布局分析1.分析hao123网站布局分析图1.3hao123网站的布局结构图1.3hao123网站的布局结构1.分析hao123网站Hao123网站为导航型网站，主要内容由导航网址组成，除此之外，页面上还有网站站标（logo）、网站广告(banner)、邮箱登录入口及搜索框、网站备案号等。如图1.4所示。元素组成分析1.分析hao123网站元素组成分析网站站标（logo）邮箱登录入口（表单）网站广告(banner)网站备案号等网站站标（logo）邮箱登录入口（表单）网站广告(banner)网站备案号等图1.4hao123网站的组成元素网站站标（logo）邮箱登录入口网站广告(banner)网站任务实施任务实施任务实施2．分析“汇源果汁”网站（2）鉴赏分析。汇源果汁网站的首页整体以橙色为基调，网站的界面清新活泼，其左上角是企业的标志，中上方是其网站栏目导航，清晰地展示整个网站的所有功能及服务项目。在网站的颜色处理上，以产品色为基调，加深人们对企业产品的认知度。在设计的过程中，充分运用视觉形象系统，让人觉得网站内容丰富而又不混乱。同时在制作上充分运用一些动态效果，渲染页面的设计表现力，简洁清晰，展示出良好的企业生命力和创造力。整个首页洁净、自然，静中有动，动静相宜，让人赏心悦目，给网页的设计也增添了浓厚的艺术氛围。任务实施2．分析“汇源果汁”网站任务实施任务实施任务实施3．分析“凤凰古城”网站（2）鉴赏分析该首页给人的视觉效果是一种古朴的气息迎面扑来整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。导航栏的文字颇具特色。首页的布局结构合理,内容划分清晰。任务实施3．分析“凤凰古城”网站任务实施任务实施任务实施4．分析“中国儿童资源网”网站，体验经典的色彩搭配。（2）鉴赏分析。首页主要列出了导航菜单，简洁明了、排列整齐。颜色的选择上虽然运用了多种明亮的色调，但搭配却非常和谐。该网页给人的视觉感受是和谐美观，在模块的划分上比较明显每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。任务实施4．分析“中国儿童资源网”网站，体验经典的色彩搭知识链接:基本概念知识链接:基本概念知识链接:基本概念知识链接:基本概念知识链接:基本概念知识链接:基本概念4．静态网页与动态网页静态网页与动态网页

网站中的网页一般包括静态网页和动态网页两种形式。

静态网页是纯粹的HTML格式的网页，内容相对固定，当需要改变其信息内容时，必须重新使用网页制作工具来对其进行修改，修改后的网页还要重新上传到服务器上覆盖原来的页面。静态网页文件一般以.htm、.html、.shtml、.xml为扩展名。

在静态网页上，可以出现各种动态的效果，如GIF动画、Flash、滚动字幕等，这些动态效果只是视觉上的，与动态网页是不同的概念。静态网页的执行流程如图所示。知识链接:基本概念4．静态网页与动态网页知识链接:基本概念4．静态网页与动态网页

动态网页通常是需要在线获取、修改或更新数据的网页，一般由数据库和相应的应用程序构成。动态网页也可以是纯文本的内容，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要采用动态网站技术生成的网页都称为动态网页。动态网页文件一般以.asp、.jsp、.php、.perl为扩展名。动态网页的执行流程如图所示。知识链接:基本概念4．静态网页与动态网页知识链接:基本概念5．浏览器与服务器

浏览器（Browse）是用于阅读网页中信息的一种软件工具，它安装在用户计算机上，如InternetExplorer（IE）等。浏览器的作用是“翻译”HTML标记语言，并按规定格式把内容显示出来。

服务器（Server）是提供网络服务与管理的计算机。例如，提供网页服务和管理的计算机就称作Web服务器。

Web采用浏览器/服务器(B/S)工作模式，工作原理如图所示。知识链接:基本概念知识链接:基本概念一．网站类型1.资讯门户类网站2.企业品牌展示类网站3.电子商务类网站4.社区网站5.办公及政府机构网站6.功能性网站知识链接:网站类型一．网站类型知识链接:网站类型知识链接:网站类型知识链接:网站类型电子商务型网站如B2B、B2C网站按照交易过程可分为商品检索、商品采购、订单支付三个阶段电子商务通常是指使用计算机技术、网络技术和远程通信技术，实现整个商务过程的电子化、数字化和网络化知识链接:网站类型电子商务型网站知识链接:网站类型二.网页的基本元素

不同性质的网站，其页面元素可能有所不同。一般构成网页的元素包括Logo、Banner、导航栏、文本、图像、声音、视频、动画、特效、表格、框架、超链接、表单等，如图所示。知识链接:网页元素二.网页的基本元素知识链接:网页元素二．网页的组成元素1.标题2.网站LOGO知识链接:网页元素二．网页的组成元素知识链接:网页元素3.页眉4.主体内容知识链接:网页元素3.页眉知识链接:网页元素5.页脚6.功能区知识链接:网页元素5.页脚知识链接:网页元素7.导航区知识链接:网页元素7.导航区知识链接:网页元素8.广告区广告区知识链接:网页元素8.广告区广告区知识链接:网页元素三.网页布局结构网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。知识链接:网页布局三.网页布局结构知识链接:网页布局1.“国”字型知识链接:网页布局1.“国”字型知识链接:网页布局2.拐角型知识链接:网页布局2.拐角型知识链接:网页布局3.标题正文型知识链接:网页布局3.标题正文型知识链接:网页布局4.左右框架型知识链接:网页布局4.左右框架型知识链接:网页布局5.上下框架型知识链接:网页布局5.上下框架型知识链接:网页布局6.综合框架型知识链接:网页布局6.综合框架型知识链接:网页布局7.封面型知识链接:网页布局7.封面型知识链接:网页布局8.Flash型知识链接:网页布局8.Flash型知识链接:网页布局9.变化型知识链接:网页布局9.变化型知识链接:网页布局四．网站建设流程知识链接：开发流程四．网站建设流程知识链接：开发流程第一步：企业网站提出需求第二步：设计建站方案第三步：查询申办域名第四步：网站系统规划第五步：确定合作第六步：网站内容整理第七步：网页设计、制作、修改第八步：网站提交企业网站审核并发布第九步：网站网站推广及后期维护知识链接：开发流程第一步：企业网站提出需求知识链接：开发流程人员分工知识链接：开发流程人员分工知识链接：开发流程五．网页制作内容网页制作包括网站的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等。知识链接五．网页制作内容知识链接六．网页编辑工具1、FrontPage2、Dreamweaver3、Fireworks4、Photoshop5、Flash6、CuteFTP7、FlashFXP知识链接六．网页编辑工具知识链接七．常见网站建设术语1、静态网页2、动态网页3、域名4、IP地址5、域名解析服务(DNS)6、虚拟主机7、租赁服务器8、主机托管9、ASP10、ASP.NET11、PHP12、CGI知识链接七．常见网站建设术语8、主机托管知识链接网站标志Logo设计标志的设计创意来自网站的名称和内容，可以分为三个方面：网站有代表性的人物、动物、花草，可以用它们作为设计蓝本，加以卡通化和艺术化。网站有代表性的物品，可以用物品作为标志。用自己网站的名称作标志，采用不同的字体、字母的变形制作标志。知识链接:网页的设计原理与技巧网站标志Logo设计知识链接:网页的设计原理与技巧页面色彩的搭配技巧特色鲜明搭配合理讲究艺术性合理使用邻近色合理使用对比色巧妙使用背景色严格控制色彩的数量知识链接:网页的设计原理与技巧页面色彩的搭配技巧知识链接:网页的设计原理与技巧页面中图像应用网页中图像在信息传达上应用具备以下功能：要有良好的视觉吸引力，能吸引浏览者的注意力。要简洁明确地传达网站信息，能使人们一目了然地抓住网站信息的重点。要有强而有力的诱导作用，造成鲜明的视觉感受效果，从观看过程中产生愿望和欲求。知识链接:网页的设计原理与技巧页面中图像应用知识链接:网页的设计原理与技巧网页页面内容的编排主次分明、中心突出大小搭配、相互呼应图文并茂、相得益彰适当留空、清晰易读知识链接:网页的设计原理与技巧网页页面内容的编排知识链接:网页的设计原理与技巧网页页面内容的分块利用留空和划线进行分块利用色块进行分块利用线框分块知识链接:网页的设计原理与技巧网页页面内容的分块知识链接:网页的设计原理与技巧网页文字的处理标题大小、粗细要合适标题使用突出的色彩利用空间突出标题网页中正文文本，其字号一般设置为10～12磅知识链接:网页的设计原理与技巧网页文字的处理知识链接:网页的设计原理与技巧网页设计原则1）主题鲜明2）形式与内容统一网页设计所追求的形式美必须符合主题的需要；同时，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀使用冗余的技术。3）强调整体风格统一导航方便、明了布局设计统一、合理知识链接:网页的设计原理与技巧网页设计原则知识链接:网页的设计原理与技巧巩固练习巩固练习考核与评价考核要点考核内容标准分计分（1）中国茶文化网30（2）伊利网站30（3）神州旅游网40小计100评价方式自我评价小组评价教师评价考核得分考核与评价考核要点考核内容标准分计分（1）中国茶文化网30（分析与思考1.什么是域名？如何申请域名？域名申请需要注意什么？2.什么是空间？如何申请空间？3.常见网站建设程序有哪些？4.企业建站需要注意什么？分析与思考1.什么是域名？如何申请域名？域名申请需要注意什任务小结通过对一些常见网站的赏析，引出网页设计与制作方法的基础知识，从而对网页设计有一个基本认识，主要包括网站的常见类型、网页的组成元素、网页制作常见术语、网页制作相关工具、网站建设的一般流程等内容。任务小结通过对一些常见网站的赏析，引出网页设计与制作方法的基ThankYou!ThankYou!项目一:网页基础任务：了解网页设计与制作基础知识项目一:网页基础任务：了解网页设计与制作基础知识1了解网站类型2了解网页的组成与结构3了解网站建设流程学习内容4了解网页制作的基本原则5了解网页编辑工具6了解常见网站建设术语1了解网站类型2了解网页的组成与结构3了解网站建设流程学习目标知识目标：

通过系统学习使学生了解网页设计的基本原则和技巧，分析优秀网页的布局结构、颜色搭配、视觉效果，基本掌握网页设计与制作的基本知识，为学习制作网页奠定基础。技能目标：通过讲解辅导与作业练习，要使学生能熟练掌握网站建设的流程及网页制作的内容，培养对优秀网站和网页的鉴赏能力。素质目标：1.具有勤奋学习的态度，严谨求实、创新的工作作风；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有一定的科学思维方式和判断分析问题的能力；5.具有较强的网页设计创意思维、艺术设计素质。学习目标知识目标：任务：了解网页设计与制作基础知识任务：了解网页设计与制作基础知识网页设计与制作项目教程课件任务实施1.分析hao123网站hao123网址之家及时收录包括综合资讯、购物、音乐、视频、小说、游戏等热门网站，与搜索完美结合，提供最简单便捷的网上导航服务，是数千万网民的上网主页。它从用户的角度对网站进行归类，以网站热门程度进行排列。其内容组成如图1.2分析所示：内容分析任务实施1.分析hao123网站内容分析搜索区域最新热门及推广类网址根据用户的使用需要进行类型划分。展示各类型的优秀网站或者热门内容的网址。图1.2hao123网站内容搜索区域最新热门及推广类网址根据用户的使用需要进行类型划分。1.分析hao123网站Hao123网站的整体布局为“匡”字型布局，整体看起来如一个“匡”字，此布局突出内容，使主内容有更大的视觉空间。如图1.3所示。布局分析1.分析hao123网站布局分析图1.3hao123网站的布局结构图1.3hao123网站的布局结构1.分析hao123网站Hao123网站为导航型网站，主要内容由导航网址组成，除此之外，页面上还有网站站标（logo）、网站广告(banner)、邮箱登录入口及搜索框、网站备案号等。如图1.4所示。元素组成分析1.分析hao123网站元素组成分析网站站标（logo）邮箱登录入口（表单）网站广告(banner)网站备案号等网站站标（logo）邮箱登录入口（表单）网站广告(banner)网站备案号等图1.4hao123网站的组成元素网站站标（logo）邮箱登录入口网站广告(banner)网站任务实施任务实施任务实施2．分析“汇源果汁”网站（2）鉴赏分析。汇源果汁网站的首页整体以橙色为基调，网站的界面清新活泼，其左上角是企业的标志，中上方是其网站栏目导航，清晰地展示整个网站的所有功能及服务项目。在网站的颜色处理上，以产品色为基调，加深人们对企业产品的认知度。在设计的过程中，充分运用视觉形象系统，让人觉得网站内容丰富而又不混乱。同时在制作上充分运用一些动态效果，渲染页面的设计表现力，简洁清晰，展示出良好的企业生命力和创造力。整个首页洁净、自然，静中有动，动静相宜，让人赏心悦目，给网页的设计也增添了浓厚的艺术氛围。任务实施2．分析“汇源果汁”网站任务实施任务实施任务实施3．分析“凤凰古城”网站（2）鉴赏分析该首页给人的视觉效果是一种古朴的气息迎面扑来整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。导航栏的文字颇具特色。首页的布局结构合理,内容划分清晰。任务实施3．分析“凤凰古城”网站任务实施任务实施任务实施4．分析“中国儿童资源网”网站，体验经典的色彩搭配。（2）鉴赏分析。首页主要列出了导航菜单，简洁明了、排列整齐。颜色的选择上虽然运用了多种明亮的色调，但搭配却非常和谐。该网页给人的视觉感受是和谐美观，在模块的划分上比较明显每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。任务实施4．分析“中国儿童资源网”网站，体验经典的色彩搭知识链接:基本概念知识链接:基本概念知识链接:基本概念知识链接:基本概念知识链接:基本概念知识链接:基本概念4．静态网页与动态网页静态网页与动态网页

网站中的网页一般包括静态网页和动态网页两种形式。

静态网页是纯粹的HTML格式的网页，内容相对固定，当需要改变其信息内容时，必须重新使用网页制作工具来对其进行修改，修改后的网页还要重新上传到服务器上覆盖原来的页面。静态网页文件一般以.htm、.html、.shtml、.xml为扩展名。

在静态网页上，可以出现各种动态的效果，如GIF动画、Flash、滚动字幕等，这些动态效果只是视觉上的，与动态网页是不同的概念。静态网页的执行流程如图所示。知识链接:基本概念4．静态网页与动态网页知识链接:基本概念4．静态网页与动态网页

动态网页通常是需要在线获取、修改或更新数据的网页，一般由数据库和相应的应用程序构成。动态网页也可以是纯文本的内容，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要采用动态网站技术生成的网页都称为动态网页。动态网页文件一般以.asp、.jsp、.php、.perl为扩展名。动态网页的执行流程如图所示。知识链接:基本概念4．静态网页与动态网页知识链接:基本概念5．浏览器与服务器

浏览器（Browse）是用于阅读网页中信息的一种软件工具，它安装在用户计算机上，如InternetExplorer（IE）等。浏览器的作用是“翻译”HTML标记语言，并按规定格式把内容显示出来。

服务器（Server）是提供网络服务与管理的计算机。例如，提供网页服务和管理的计算机就称作Web服务器。

Web采用浏览器/服务器(B/S)工作模式，工作原理如图所示。知识链接:基本概念知识链接:基本概念一．网站类型1.资讯门户类网站2.企业品牌展示类网站3.电子商务类网站4.社区网站5.办公及政府机构网站6.功能性网站知识链接:网站类型一．网站类型知识链接:网站类型知识链接:网站类型知识链接:网站类型电子商务型网站如B2B、B2C网站按照交易过程可分为商品检索、商品采购、订单支付三个阶段电子商务通常是指使用计算机技术、网络技术和远程通信技术，实现整个商务过程的电子化、数字化和网络化知识链接:网站类型电子商务型网站知识链接:网站类型二.网页的基本元素

不同性质的网站，其页面元素可能有所不同。一般构成网页的元素包括Logo、Banner、导航栏、文本、图像、声音、视频、动画、特效、表格、框架、超链接、表单等，如图所示。知识链接:网页元素二.网页的基本元素知识链接:网页元素二．网页的组成元素1.标题2.网站LOGO知识链接:网页元素二．网页的组成元素知识链接:网页元素3.页眉4.主体内容知识链接:网页元素3.页眉知识链接:网页元素5.页脚6.功能区知识链接:网页元素5.页脚知识链接:网页元素7.导航区知识链接:网页元素7.导航区知识链接:网页元素8.广告区广告区知识链接:网页元素8.广告区广告区知识链接:网页元素三.网页布局结构网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。知识链接:网页布局三.网页布局结构知识链接:网页布局1.“国”字型知识链接:网页布局1.“国”字型知识链接:网页布局2.拐角型知识链接:网页布局2.拐角型知识链接:网页布局3.标题正文型知识链接:网页布局3.标题正文型知识链接:网页布局4.左右框架型知识链接:网页布局4.左右框架型知识链接:网页布局5.上下框架型知识链接:网页布局5.上下框架型知识链接:网页布局6.综合框架型知识链接:网页布局6.综合框架型知识链接:网页布局7.封面型知识链接:网页布局7.封面型知识链接:网页布局8.Flash型知识链接:网页布局8.Flash型知识链接:网页布局9.变化型知识链接:网页布局9.变化型知识链接:网页布局四．网站建设流程知识链接：开发流程四．网站建设流程知识链接：开发流程第一步：企业网站提出需求第二步：设计建站方案第三步：查询申办域名第四步：网站系统规划第五步：确定合作第六步：网站内容整理第七步：网页设计、制作、修改第八步：网站提交企业网站审核并发布第九步：网站网站推广及后期维护知识链接：开发流程第一步：企业网站提出需求知识链接：开发流程人员分工知识链接：开发流程人员分工知识链接：开发流程五．网页制作内容网页制作包括网站的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等。知识链接五．网页制作内容知识链接六．网页编辑工具1、FrontPage2、Dreamweaver3、Fireworks4、Photoshop5、Flash6、CuteFTP7、FlashFXP知识链接六．网页编辑工具知识链接七．常见网站建设术语1、静态网页2、动态网页3、域名4、IP地址5、域名解析服务(DNS)6、虚拟主机7、租赁服务器8、主机托管9、ASP10、ASP.NET11、PHP12、CGI知识链接七．常见网站建设术语8、主机托管知识链接网站标志Logo设计标志的设计创意来自网站的名称和内容，可以分为三个方面：网站有代表性的人物、动物、花草，可以用它们作为设计蓝本，加以卡通化和艺术化。网站有代表性的物品，可以用物品作为标志。用自己网站的名称作标志，采用不同的字体、字母的变形制作标志。知识链接:网页的设计原理与技巧网站标志Logo设计知识链接:网页的设