第  1 单元            第  1  周              4  学时
单元标题 (Title) ：初识网页（任务1：优秀网站赏析）
教学地点 (Place) ：一体化教室
教学目标 (Teaching Target) ：
能力（技能）目标：(1）欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣；（2）能分析优秀网页的布局结构、颜搭配、视觉效果，为学习制作网页奠定基础；（3）能根据网站主题及内容确定网站的结构。
知识目标：（1）分析优秀网页的布局结构、颜搭配、视觉效果；（2）了解网页的组成元素；(3)分析网站主题与内容的关系。
素质目标：（1）培养学生自主学习新知识和新技术的能力。；（2）训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力；（3）培养学生的团队协作精神。
教学方法 (Teaching Approaches) ：
任务驱动式教学；案例教学
教学材料及工具 (Teaching Materials & Aids) ：
投影机、微机、电子课件、素材
考核与评价方式 (Testing & Evaluating Mode)：
考核内容包括：出勤、学习态度、学习纪律等；完成课堂任务质量 ； 完成扩展任务质量。
  评价方式：采用教师评定的方式。

主要教学内容及过程
Main Teaching Contents & Procedures
项目引导
浏览制作独特的网页是激发学习者网页制作兴趣的有效方法，分析设计优秀的网站是提高学
习者网页设计水平的有效途径。本项目从优秀网站赏析入手，让学习者从整体上直观领悟网站、网页、元素、工具的相互关系，形象化了解网页的整体布局、导航设计、彩搭配、动感效果等，在欣赏中领会Internet、WWW、URL、Browse、Server等互联网概念。
    任何网页的本质都是HTML源代码，了解一些HTML语言知识，对学习可视化网页制作工具、编辑修改网页和提高网页制作水平都极为有益。
一、知识预备：
1、网页设计的布局理念
    网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。
2、网页页面内容的编排     
（1）主次分明、中心突出
（2）大小搭配、相互呼应
（3）图文并茂、相得益彰
（4）适当留空、清晰易读
3、网页页面内容的分块     
（1）利用留空和划线进行分块
  （2）利用块进行分块
  （3）利用线框分块
二、优秀网站赏析
1．浏览“汇源果汁”网站
（1）打开IE浏览器，在地址栏输入网站地址。
2）鉴赏分析。
◆ 汇源果汁网站的首页整体以橙为基调，网站的界面清新活泼，其左上角是企业的标志，中上方是其网站栏目导航，清晰地展示整个网站的所有功能及服务项目。
◆ 在网站的颜处理上，以产品为基调，加深人们对企业产品的认知度。在设计的过程中，充分运用视觉形象系统，让人觉得网站内容丰富而又不混乱。
◆ 同时在制作上充分运用一些动态效果，渲染页面的设计表现力，简洁清晰，展示出良好的企业生命力和创造力。整个首页洁净、自然，静中有动，动静相宜，让人赏心悦目，给网页的设计也增添了浓厚的艺术氛围。
2．浏览“凤凰古城” 网站
  （1）打开IE浏览器，在地址栏输入网站地址（ www.fhvip 。访问效果如图所示。
（2）鉴赏分析
◆ 该首页给人的视觉效果是一种古朴的气息迎面扑来
◆ 整体彩、图文搭配十分协调，咖啡的运用和图片的搭配十分和谐。
◆ 主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。
◆ 导航栏的文字颇具特。
◆ 首页的布局结构合理,内容划分清晰。
3．浏览“中国儿童资源网 ” 网站，体验经典的彩搭配。
（1）打开IE浏览器，在地址栏输入网站地址（61 ）。
（2）鉴赏分析
◆ 首页主要列出了导航菜单，简洁明了、排列整齐。
◆ 颜的选择上虽然运用了多种明亮的调，但搭配却非常和谐。
◆ 该网页给人的视觉感受是和谐美观，在模块的划分上比较明显
◆ 每个内容板块都采用了不同颜和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。
知识点：浏览网站时应了解的基本概念
1．Internet与WWW
  Internet一词来源于英文Interconnect networks，即“相互联系的各个网络”，简称“互联网”，中文译名为“因特网”。Internet是专指全球范围内最大的、由众多网络相互连接而成的、基于TCP/IP协议的计算机网络。
  WWW是World Wide Web（世界范围蜘蛛网）的简称，也称Web网，中文译名为“万维网”。WWW是Internet个人网页设计模板100套提供的应用最普及、功能最丰富、使用最方便的信息服务系统。
  WWW是由遍布在Internet上的无数称之为Web服务器的计算机组成，它将不同信息资源以网页的形式，通过超链接（Hyperlink）有机地联系在一起，由Web浏览器软件进行浏览。
2．网站与网址
  网站是一个相互链接的网页的集合。严格来讲，网站是有独立地址和独立空间的内容集合，这些内容可能是网页文件，也可能是其他文件。如“新浪”和“百度”就是两种服务内容不同的网站。
  网址是网络资源地址的简称，也称URL（Uniform Resource Locator，统一资源定位器）。URL是用来统一标识Internet各种资源的位置，其格式为：
  协议名://主机名:端口号/文件路径/文件名
  例如，www.zhcpt/News/200812592818.html
  其中，http是超文本传输协议（Hypertext Transfer Protocol），是网页文件在Internet中传输的标准。主机名可以是域名，也可以是IP地址。域名其实是IP地址的字符表示。
3．网页与主页
  网页是由HTML（超级文本标识语言）或者其他语言编写的，通过Web浏览器（如IE）编译后供用户获取信息的页面，也称为Web页，其中可包含文字、图像、声音、动画和超链接等
各种网页元素。网页是WWW的基本信息单位，每个网页以独立文件形式存放，其扩展名有.htm、.html、.asp、.jsp等。
  主页是网站中的一个特殊网页，它是进入网站的第一个页面，其中包含指向其他网页的超链接。主页是网站的“门面”，其作用远比其他网页更重要，设计时必须精心考虑。主页的名称一般是固定的，通常为index.html或 index.asp等。
4．静态网页与动态网页
网站中的网页一般包括静态网页和动态网页两种形式。
（1）静态网页
  静态网页是纯粹的HTML格式的网页，内容相对固定，当需要改变其信息内容时，必须重新使用网页制作工具来对其进行修改，修改后的网页还要重新上传到服务器上覆盖原来的页面。静态网页文件一般以.htm、.html、.shtml、.xml为扩展名。
  在静态网页上，可以出现各种动态的效果，如GIF动画、Flash、滚动字幕等，这些动态效果只是视觉上的，与动态网页是不同的概念。静态网页的执行流程如图所示。
（2）动态网页
动态网页通常是需要在线获取、修改或更新数据的网页，一般由数据库和相应的应用程序构成。动态网页也可以是纯文本的内容，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要采用动态网站技术生成的网页都称为动态网页。动态网页文件一般以.asp、.jsp、.php、.perl为扩展名。动态网页的执行流程如图所示。
5．浏览器与服务器
  浏览器（Browse）是用于阅读网页中信息的一种软件工具，它安装在用户计算机上，如Internet Explorer（IE）等。浏览器的作用是“翻译”HTML标记语言，并按规定格式把内容显示出来。
  服务器（Server）是提供网络服务与管理的计算机。例如，提供网页服务和管理的计算机就称作Web服务器。
  Web采用浏览器/服务器(B/S)工作模式，工作原理如图所示：
知识点：网页的基本元素
不同性质的网站，其页面元素可能有所不同。一般构成网页的元素包括Logo、Banner、导航栏、文本、图像、声音、视频、动画、特效、表格、框架、超链接、表单等
三、自学与拓展
浏览以下三个网站，，分别从页面布局结构、颜搭配、导航设置、内容处理、图片及动画效果等几个方面对所浏览网站首页的设计进行赏析说明。
（1）中国茶文化网：www.chayg/
（2）伊利网站: www.yili/
（3）教材所提供的素材：神州旅游网
四、考核与评价
考核要点
考核内容
标准分
计分
（1）中国茶文化网
30
 
 
 
（2）伊利网站
30
 
 
（3）神州旅游网
40
 
 
小计
100
 
评价方式
自我评价
小组评价
教师评价
考核得分
 
 
 
【小结】
    本次任务主要欣赏了几个优秀网站的首页.通过分析,对这些网站的布局结构、颜搭配、视觉效果有了初步了解。
【作业】
    课后习题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。