01第1章赏析网页 网页制作案例教程电子教案.doc

第1章　赏析网页 在学习制作网页之前，通过赏析网页，认识浏览器窗口的基本组成和网页的基本组成元素，认识网页的布局结构，了解网页的基本概念。 【教学导航】 教学目标 （1）认识网页和网站 （2）认识浏览器窗口的基本组成 （3）认识网页的基本组成元素 （4）认识网页的布局结构 （5）了解网页的相关概念和术语 （6）了解一些制作网页、处理图像、制作动画的工具 本章重点 （1）网页的基本组成元素 （2）网页的布局结构 本章难点 （1）网页的布局结构 （2）网页的基本概念 教学方法 任务驱动法、分组讨论法、三步训练法（课堂引导训练－课堂同步训练－课外拓展训练） 课时建议 2课时（含课堂同步训练） 1.1　课前准备 启动浏览器（例如IE浏览器），然后在地址栏中输入相应的地址并回车就能浏览该网页。 文件夹“task01-1”中网页index0101.html的浏览效果如图1-1所示，观察该网页的基本组成、布局结构和色彩搭配。 图1-1　网页index0101.html的浏览效果 1.2　课堂引导训练 【课堂引导训练任务描述】 赏析网页任务卡如表1-1所示。 表1-1　赏析网页任务卡 任务编号 01-1 任务名称 赏析“E游天下”网的主页 网页主题 E游天下 计划工时 120min 赏析网页任务描述 （1）通过赏析网页认识浏览器窗口的基本组成、认识网页的基本组成元素、认识网页的布局结构 （2）通过分析网页了解网页的相关概念和术语 任务实现流程分析 教师引导赏析光盘的网页－学生分组浏览指定的网站，分析网页的结构、色彩和组成元素－教师点评 配盘素材导引 原始文件位置：start\01第1章赏析网页\task01-1 最终文件位置：result\01第1章赏析网页\task01-1 【任务完成过程】 1.2.1　认识网页和网站 1、网页 网页是HTML（超文本标记语言）或者其他语言编写的，通过浏览器编译后供用户获取信息的页面，网页中可以包含文字、图像、动画、视频、超链接（也称超级链接）等各种网页元素。 2、网站 网站是若干个相关网页的集合。通过超级链接将网站中多个网页建立联系，形成一个主题鲜明、风格一致的Web站点。 3、网页的工作原理 一个网页的工作过程如图1-所示，可以归纳为以下四个步骤： （1）用户在浏览器中输入网页的网址，例如：http:// 。 （2）客户端的访问请求被送往网站所在的Web服务器，服务器查找对应的网页。 （3）若找到网页，则Web服务器把找到的网页回送给客户端。 （4）客户端收到返回的网页后在浏览器中显示出来。 1.2.2　认识浏览器窗口的基本组成 浏览器窗口由网页标题、标准按钮、地址栏、网页和状态栏等部分组成。 1.2.3　认识网页的基本组成元素 （1）文本 文本是网页传递信息的主要元素，不仅传输速度快，而且可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置，设置得风格独特的网页文本会给浏览者带来赏心悦目的感受。 （2）图像 丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为jpg格式和gif格式，即以jpg和gif为扩展名的图像文件。 （3）动画 动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球有效方法之一，目前网页中经常使用Flash动画和GIF格式的图片。 （4）超级链接 超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。 （5）导航栏 导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可以方便地浏览网页。 （6）视频 在网页中插入视频文件将会使网页变得更加精彩而富有动感。常用的视频文件格式有flv、rm、avi等。 （7）网站的Logo Logo是网站的标志、名片，例如搜狐网站的狐狸标志，如同商标一样，Logo是网站特色和内涵的集中体现。 （8）表单 表单是用来接收用户在浏览器端输入的信息，然后将这些信息发送到服务器端，服务器的程序对数据进行加工处理，这样可以实现一些交互作用的网页。 （9）其他元素 网页中除了上述这些最基本的构成元素，还包括横幅广告、字幕、计数器、音频等其他元素，它们不仅能点缀网页，而且在网页中起到十分重要的作用。 1.2.4　认识网页的布局结构 网站的布局实质上也就是网站的版式，通常有上下型、上中下型、左右型、左中右型等几种，中部通常分为左右区块、左中右区块等多种布局。 目前大部分网站一般使用表格和DIV+CSS两种方式进行布局。 1.2.5　了解制作网页的常用软件 常用制作网页的工具如下： （1）制作网页的专门工具：Dreamweaver、FrontPage。 （2）图像处理工具：Photoshop、Fireworks。 （3）动画制作工具：Flash、Swish。 （4）图标制作工具：小榕图标