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

1、项目一:网页基础1 了解网站类型2 了解网页的组成与结构3 了解网站建设流程学习内容4 了解网页制作的基本原则5 了解网页编辑工具6 了解常见网站建设术语学习目标知识目标： 通过系统学习使学生了解网页设计的基本原则和技巧，分析优秀网页的布局结构、颜色搭配、视觉效果，基本掌握网页设计与制作的基本知识，为学习制作网页奠定基础。技能目标： 通过讲解辅导与作业练习，要使学生能熟练掌握网站建设的流程及网页制作的内容，培养对优秀网站和网页的鉴赏能力。素质目标：1. 具有勤奋学习的态度，严谨求实、创新的工作作风；2. 具有良好的心理素质和职业道德素质；3. 具有高度责任心和良好的团队合作精神；4. 具有一定

2、的科学思维方式和判断分析问题的能力；5. 具有较强的网页设计创意思维、艺术设计素质。任务：了解网页设计与制作基础知识任务描述打开导航类型的网站，通过其分类总结网站的类型，并通过该网站打开其他不同类型的网站，分析不同类型网站的布局结构，认识网站的组成元素。分别浏览“汇源果汁”集团、浏览“凤凰古城” “中国儿童资源网 ” 网站等优秀网站，观赏其页面布局、导航设计、色彩搭配、动感效果等，给出鉴赏报告。图1.1网站任务实施1. 分析hao123网站hao123网址之家及时收录包括综合资讯、购物、音乐、视频、小说、游戏等热门网站，与搜索完美结合，提供最简单便捷的网上导航服务，是数千万网民的上网主页。它从

3、用户的角度对网站进行归类，以网站热门程度进行排列。其内容组成如图1.2分析所示：内容分析搜索区域最新热门及推广类网址根据用户的使用需要进行类型划分。展示各类型的优秀网站或者热门内容的网址。图1.2 hao123网站内容1.分析hao123网站Hao123网站的整体布局为“匡”字型布局，整体看起来如一个“匡”字，此布局突出内容，使主内容有更大的视觉空间。如图1.3所示。布局分析图1.3 hao123网站的布局结构1.分析hao123网站Hao123网站为导航型网站，主要内容由导航网址组成，除此之外，页面上还有网站站标（logo）、网站广告(banner)、邮箱登录入口及搜索框、网站备案号等。如图

4、1.4所示。元素组成分析网站站标（logo）邮箱登录入口（表单）网站广告(banner)网站备案号等网站站标（logo）邮箱登录入口（表单）网站广告(banner)网站备案号等图1.4 hao123网站的组成元素任务实施2分析“汇源果汁”网站（1）打开IE浏览器，在地址栏输入网站地址（），访问效果如图所示。任务实施2分析“汇源果汁”网站（2）鉴赏分析。汇源果汁网站的首页整体以橙色为基调，网站的界面清新活泼，其左上角是企业的标志，中上方是其网站栏目导航，清晰地展示整个网站的所有功能及服务项目。在网站的颜色处理上，以产品色为基调，加深人们对企业产品的认知度。在设计的过程中，充分运用视觉形象系统，让

5、人觉得网站内容丰富而又不混乱。同时在制作上充分运用一些动态效果，渲染页面的设计表现力，简洁清晰，展示出良好的企业生命力和创造力。整个首页洁净、自然，静中有动，动静相宜，让人赏心悦目，给网页的设计也增添了浓厚的艺术氛围。任务实施3分析“凤凰古城” 网站（1）打开IE浏览器，在地址栏输入网站地址（http:/ 。访问效果如图所示。任务实施3分析“凤凰古城” 网站（2）鉴赏分析该首页给人的视觉效果是一种古朴的气息迎面扑来 整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。 主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。 导航栏的文字颇具特色。 首页的布局结构合理,内容

6、划分清晰。任务实施4分析“中国儿童资源网 ” 网站，体验经典的色彩搭配。（1）打开IE浏览器，在地址栏输入网站地址（ ），访问效果如图所示。任务实施4分析“中国儿童资源网 ” 网站，体验经典的色彩搭配。（2）鉴赏分析。首页主要列出了导航菜单，简洁明了、排列整齐。颜色的选择上虽然运用了多种明亮的色调，但搭配却非常和谐。该网页给人的视觉感受是和谐美观，在模块的划分上比较明显每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。1Internet与WWWInternet一词来源于英文Interconnect networks，即“相互联系的各个网络”，简称“互联网”，中文

7、译名为“因特网”。Internet是专指全球范围内最大的、由众多网络相互连接而成的、基于TCP/IP协议的计算机网络。WWW是World Wide Web（世界范围蜘蛛网）的简称，也称Web网，中文译名为“万维网”。WWW是Internet提供的应用最普及、功能最丰富、使用最方便的信息服务系统。WWW是由遍布在Internet上的无数称之为Web服务器的计算机组成，它将不同信息资源以网页的形式，通过超链接（Hyperlink）有机地联系在一起，由Web浏览器软件进行浏览。知识链接:基本概念2网站与网址一般来说，网站是一个相互链接的网页的集合。严格来讲，网站是有独立地址和独立空间的内容集合，这些

8、内容可能是网页文件，也可能是其他文件。如“新浪”和“百度”就是两种服务内容不同的网站。网址是网络资源地址的简称，也称URL（Uniform Resource Locator，统一资源定位器）。URL是用来统一标识Internet各种资源的位置，其格式为：协议名:/主机名:端口号/文件路径/文件名例如，其中，http是超文本传输协议（Hypertext Transfer Protocol），是网页文件在Internet中传输的标准。主机名可以是域名，也可以是IP地址。域名其实是IP地址的字符表示。知识链接:基本概念3网页与主页网页是由HTML（超级文本标识语言）或者其他语言编写的，通过Web浏览

9、器（如IE）编译后供用户获取信息的页面，也称为Web页，其中可包含文字、图像、声音、动画和超链接等各种网页元素。网页是WWW的基本信息单位，每个网页以独立文件形式存放，其扩展名有.htm、.html、.asp、.jsp等。主页是网站中的一个特殊网页，它是进入网站的第一个页面，其中包含指向其他网页的超链接。主页是网站的“门面”，其作用远比其他网页更重要，设计时必须精心考虑。主页的名称一般是固定的，通常为index.html或 index.asp等。知识链接:基本概念4静态网页与动态网页静态网页与动态网页网站中的网页一般包括静态网页和动态网页两种形式。静态网页是纯粹的HTML格式的网页，内容相对固

10、定，当需要改变其信息内容时，必须重新使用网页制作工具来对其进行修改，修改后的网页还要重新上传到服务器上覆盖原来的页面。静态网页文件一般以.htm、.html、.shtml、.xml为扩展名。在静态网页上，可以出现各种动态的效果，如GIF动画、Flash、滚动字幕等，这些动态效果只是视觉上的，与动态网页是不同的概念。静态网页的执行流程如图所示。知识链接:基本概念4静态网页与动态网页动态网页通常是需要在线获取、修改或更新数据的网页，一般由数据库和相应的应用程序构成。动态网页也可以是纯文本的内容，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要采用动态网站技

11、术生成的网页都称为动态网页。动态网页文件一般以.asp、.jsp、.php、.perl为扩展名。动态网页的执行流程如图所示。知识链接:基本概念5浏览器与服务器浏览器（Browse）是用于阅读网页中信息的一种软件工具，它安装在用户计算机上，如Internet Explorer（IE）等。浏览器的作用是“翻译”HTML标记语言，并按规定格式把内容显示出来。服务器（Server）是提供网络服务与管理的计算机。例如，提供网页服务和管理的计算机就称作Web服务器。Web采用浏览器/服务器(B/S)工作模式，工作原理如图所示。知识链接:基本概念一网站类型1. 资讯门户类网站2. 企业品牌展示类网站3. 电

12、子商务类网站4. 社区网站5. 办公及政府机构网站6. 功能性网站知识链接:网站类型门户网站门户（portal）。原意是指正门、入口，现多用于互联网的门户网站和企业应用系统的门户系统。 所谓门户网站，是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。比较知名的中文门户网站有：搜狐 ()、中文雅虎 ()、新浪() 等知识链接:网站类型电子商务型网站如B2B、B2C网站按照交易过程可分为商品检索、商品采购、订单支付三个阶段电子商务通常是指使用计算机技术、网络技术和远程通信技术，实现整个商务过程的电子化、数字化和网络化知识链接:网站类型二.网页的基本元素不同性质的网站，其页面元素可能有所

13、不同。一般构成网页的元素包括Logo、Banner、导航栏、文本、图像、声音、视频、动画、特效、表格、框架、超链接、表单等，如图所示。知识链接:网页元素二网页的组成元素1. 标题2. 网站LOGO知识链接:网页元素3. 页眉4. 主体内容知识链接:网页元素5. 页脚6. 功能区知识链接:网页元素7. 导航区知识链接:网页元素8. 广告区广告区知识链接:网页元素三.网页布局结构网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。知识链接:网页布局 1. “国”字型知识链接:网页布局2. 拐角型知识链接:网页布局3. 标题正文型知识

14、链接:网页布局 4. 左右框架型知识链接:网页布局5. 上下框架型知识链接:网页布局6. 综合框架型知识链接:网页布局 7. 封面型知识链接:网页布局8. Flash型知识链接:网页布局9. 变化型知识链接:网页布局四网站建设流程知识链接：开发流程第一步：企业网站提出需求第二步：设计建站方案第三步：查询申办域名第四步：网站系统规划第五步：确定合作第六步：网站内容整理第七步：网页设计、制作、修改第八步：网站提交企业网站审核并发布第九步：网站网站推广及后期维护知识链接：开发流程人员分工知识链接：开发流程五网页制作内容网页制作包括网站的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页

15、的色调等。知识链接六网页编辑工具1、FrontPage2、Dreamweaver3、Fireworks4、Photoshop5、Flash6、CuteFTP 7、FlashFXP知识链接七常见网站建设术语1、静态网页2、动态网页3、域名4、IP地址5、域名解析服务(DNS) 6、虚拟主机 7、租赁服务器8、主机托管9、ASP10、ASP.NET11、PHP12、CGI 知识链接网站标志Logo设计标志的设计创意来自网站的名称和内容，可以分为三个方面：网站有代表性的人物、动物、花草，可以用它们作为设计蓝本，加以卡通化和艺术化。网站有代表性的物品，可以用物品作为标志。用自己网站的名称作标志，采用不

16、同的字体、字母的变形制作标志。知识链接:网页的设计原理与技巧页面色彩的搭配技巧特色鲜明搭配合理讲究艺术性合理使用邻近色合理使用对比色巧妙使用背景色严格控制色彩的数量知识链接:网页的设计原理与技巧页面中图像应用网页中图像在信息传达上应用具备以下功能：要有良好的视觉吸引力，能吸引浏览者的注意力。要简洁明确地传达网站信息，能使人们一目了然地抓住网站信息的重点。要有强而有力的诱导作用，造成鲜明的视觉感受效果，从观看过程中产生愿望和欲求。知识链接:网页的设计原理与技巧网页页面内容的编排 主次分明、中心突出大小搭配、相互呼应图文并茂、相得益彰适当留空、清晰易读知识链接:网页的设计原理与技巧网页页面内容的分块 利用留空和划线进行分块利用色块进行分块利用线框分块知识链接:网页的设计原理与技巧网页文字的处理 标题大小、粗细要合适标题使用突出的色彩利用空间突出标题网页中正文文本，其字号一般设置为1012磅知识链接:网页的设计原理与技巧网页设计原则1）主题鲜明2）形式与内容统一 网页设计所追求的形式美必须符合主题的需要；同时，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀使用冗余的技术。3）强调整体风格统一导航方便、明了布局设计统一、合理知识链接:网页的设计原理与技巧巩固练习在搜索引擎中搜索“网络公司”，查看不同的网络公司的网站，了解建设流程与企业建设要求。浏览以