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