资源简介

课题 第1课 网页制作与网站建设基础知识
课时 2课时（90 min）
教学目标 知识目标： （1）了解网页和网站的概念，网站建设的基本流程，以及网页的构成元素和网页的本质 （2）了解网站管理与网页制作相关软件，以及网页标记语言——XHTML （3）了解网站建设的基本流程 技能目标： 能够认识一个网页当中的各个元素，以及其具体作用 素质目标： 勇于接收新知识，学习新技能，对所学知识有总体认识
教学重难点 教学重点：网页当中各构成元素及其作用 教学难点：网站建设的基本流程
教学方法 问答法、讨论法、讲授法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 新课预热（5 min）→ 问题导入（5 min）→传授新知（25 min）→课堂实训（8 min） 第2节课：问题导入（3 min）→ 传授新知（30 min）→ 课堂实训（7 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务，让学生根据自己浏览过的网页，选择一个自己觉得最好的网页，分享给其他同学 【学生】按照要求完成课前任务 通过课前任务，让学生了解一个好的网页是什么样子，明确学习的方向
考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况
新课预热 （5 min） 【教师】自我介绍，与学生简单互动，介绍课程目标、内容安排、考核要求等 【学生】聆听、互动 【教师】通过大家找到的网页，介绍如何制作一个好的网页，通过哪些软件去制作网页 【学生】聆听、理解 通过新课预热，与学生互相熟悉，并让学生了解这门课目标、内容以及考核要求
问题导入 （5 min） 【教师】随机邀请学生回答以下问题 请学生思考网站和网页有什么区别，有什么联系？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课课题：认识网页和网站 通过问题导入，引导学生思考，调动学生的主观能动性
传授新知 （25 min） 【教师】讲解新知，介绍网页和网站的相关知识 任务一 认识网页和网站 一、任务说明 本任务将简单介绍网页和网站的概念、网页的构成元素及网页的本质。 二、预备知识 （一）网页和网站 网页就是人们上网时在浏览器中打开的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。 另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页）。 【课堂问答】 【教师】随机邀请学生回答以下问题 请同学们思考，我们访问百度首页，输入的www.是什么？跟网站有什么关系？ 【学生】聆听、思考、回答 【教师】总结学生的回答 www.是一个网址，网址就是域名，也就是网站的一个URL，通过网址能够定位到网站的地址路径，是组成网站的一部分，而一个网站只有域名是不够的，还需要一些其他内容才能组成一个网站。也就是说，网站包括网址，而网址不包括网站。 （二）网页的构成元素 网页中的元素，按功能可分为站标、导航条、广告条、标题栏和按钮等。 站标：也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。Logo一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是图文组合。 导航条：导航条可以说是网站最重要的组成部分，它是一组链接到网站内主要页面的超链接组合，通过单击这些超链接，浏览者可以轻松找到网站中的各个页面，导航条也因此而得名。同时，导航条也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。 广告条：又称Banner，其功能是宣传网站或为其他商品做广告。Banner的尺寸可以根据内容或版面需要来安排。 标题栏：此处的标题栏不是指整个网页的标题栏，而是网页上各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，从而大大方便了浏览者。 按钮：按钮通常是启动某些装置或机关的开关，网页中的按钮也不例外，单击它，网页会实现相应的操作，比如跳转到其他页面，或下载数据等。 （三）网页的本质 一般来说，网页是由图像文件（扩展名为.jpg或.gif等）、Flash动画文件（扩展名为.swf）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi或.flv）等共同组成。制作网页的过程，就是输入或编辑这些元素的过程。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容，讲解在浏览器中查看网页 三、任务实施——在浏览器中查看网页 在了解了网页的构成元素及其本质后，接下来通过辨识“新浪网”网站首页的构成元素，来进一步加深对网页构成元素的认识。此外，我们还可通过将网页另存到本地磁盘，来进一步了解其本质。 【多媒体】演示在浏览器中查看、保存网页的具体步骤 步骤1 启动IE浏览器后，在“地址栏”中输入“新浪网”网址http://www..cn/，然后按回车键即可在浏览器中打开“新浪网”网站首页。 【课堂问答】 【教师】随机邀请学生回答以下问题 请同学们思考，我们输入http://www..cn/的时候，不加http://可以吗？不加www.可以吗？ 【学生】聆听、思考、回答 【教师】总结学生的回答 通过学生实际动手操作，验证该问题。 步骤2 在网页中指出其中的站标、导航条、广告条、标题栏和按钮，如图1-4所示（详见教材）。 步骤3 在浏览器中选择“文件”>“另存为”菜单，打开“保存网页”对话框。 步骤4 在“保存在”下拉列表中选择保存路径，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，单击“保存”按钮，将网页保存到磁盘中，如图1-5所示（详见教材）。 步骤5 打开保存网页的文件夹，可看到一个文件夹和一个网页文档，如图1-6所示（详见教材）。 步骤6 双击其中的文件夹将其打开，可以看到里面有图像文件、脚本文件、HTML文件以及样式文件等，如图1-7所示（详见教材）。 【知识库】 制作网页时，只是将图像、脚本及样式等文件的路径在网页中做了记录，它们并没有真正嵌入到网页中，要想在浏览网页时看到这些文件，就必须将它们按照正确的路径保存在网站目录中。 【学生】聆听、观看、思考、理解、记录 通过教师讲解、课堂问答和多媒体演示等方式，让学生了解网站、网址、网页的基础知识，掌握网页的构成元素；通过实训，辨识网页的组成部分，并保存网页，了解其本质
课堂实训 （8 min） 【教师】组织学生完成以下任务 按照上述任务实施中，在浏览器中访问www.京东主页，辨识网页的组成元素，并保存网页，了解其本质。 【学生】聆听、思考、上机操作、完成任务 【教师】根据学生的课堂表现对其考核进行评价 通过课堂实训，巩固课堂所学知识，帮助学生加深网页及其本质的认识
第二节课
问题导入 （3 min） 【教师】随机邀请学生回答以下问题 我们拍摄证件照，拍出来的照片一般是用什么软件来处理的？ 【学生】聆听、思考、回答 用问题导入，让学生主动探究制作网页需要的软件，培养其善于动手的能力
传授新知 （30 min） 【教师】总结学生的回答，讲解新知，介绍网页制作与网站开发常用技术 任务二 网页制作与网站开发常用技术 一、任务说明 本任务将简单介绍网站管理与网页制作相关软件，以及网页标记语言——XHTML的相关知识。 二、预备知识 （一）网站管理与网页制作相关软件 Dreamweaver是目前最常用的网站管理和网页制作软件，其功能全面、操作灵活、专业性强。 在制作网页时，除Dreamweaver外还需要用到Photoshop、Flash、Fireworks等辅助软件，这些软件的主要功能与特点如下。 Photoshop：Adobe公司推出的一款优秀而强大的图形图像处理软件，网页设计人员常用它设计网页效果图和网页素材等。 Flash：Adobe公司推出的动画制作软件。主要用于制作矢量动画，如广告条、网站片头动画、动画短片和MTV等。此外，利用该软件还可以制作交互性很强的游戏、网页和课件等。 Fireworks：Adobe公司推出的专门针对网页图形图像设计的工具软件。主要用于制作网页图像、网站标志、GIF动画、图像按钮和导航条等。 （二）网页标记语言——XHTML XHTML是Extensible HyperText Markup Language（可扩展超文本标记语言）的英文缩写，它的前身是HTML。由于HTML代码繁琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。 我们在Dreamweaver的可视化编辑环境中制作网页时，系统也会自动将这些设计“翻译”成XHTML代码，并保存在网页文档中。因此，我们使用Dreamweaver制作网页的过程，实际上就是编辑XHTML文档的过程。 XHTML语言的核心是标签（或称为标记）。也就是说，我们在网页上看到的文字、图像、动画等在XHTML文档中都是用标签来描述的。在XHTML文档中，标签一般用“<”和“>”括起来。标签可分为单标签和双标签，单标签只需要单独使用就能完整地表达意思，其语法如下： <标签名称 属性1 属性2 属性3 …> 双标签由“始标签”和“尾标签”两部分组成，必须成对使用，其中始标签告诉浏览器从此处开始执行该标签所表示的功能，尾标签告诉浏览器在此处结束该功能。标签名前加一个斜杠“/”即为尾标签。其语法如下： <标签名称 属性1 属性2 属性3 …> 一个完整的XHTML文档由文档头和文档体两部分组成。在文档头里，对文档进行了一些必要的定义；文档体是要显示的各种文档信息。如以下代码所示： ……（详见教材） 其中在最外层，表示这对标签间的内容是XHTML文档。起始标签与结束标签之间的内容是XHTML文档的头部，其中主要包括：由“meta”对象声明的页面类型（“text/html”）和编码方式（“utf-8”），以及由起始标签指明的文档标题。另外，我们还可以在这里加入由起始标签构成的CSS层叠样式表（项目五将会做详细介绍）。 起始标签和结束标签之间是XHTML文档的主体，也是我们进行网页设计的主要部分。 【课堂问答】 【教师】随机邀请学生回答以下问题 XHTML语言是编程语言吗？ 【学生】聆听、思考、回答 【教师】总结学生的回答 XHTML用于创建网页的标记语言，并不是编程语言，XHTML 运行在浏览器上由浏览器来解析并呈现，它是建设网站的基础。 表1-1（详见教材）列出了网页制作中常用的XHTML标签及其意义。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容，讲解应用XHTML语言编写一个简单的网页 三、任务实施——应用XHTML语言编写一个简单的网页 【多媒体】演示手动编写一个简单的网页的步骤 步骤1 选择“开始”>“所有程序”>“附件”>“记事本”菜单，打开记事本程序。 步骤2 在记事本中输入下面的XHTML代码。 ……（详见教材） 步骤3 在记事本中选择“文件”>“保存”菜单，弹出“另存为”对话框。 步骤4 在对话框的“保存在”下拉列表中选择文件的保存路径，在“保存类型”下拉列表中选择“所有文件”，在“文件名”编辑框中输入“First.html”，然后单击“保存”按钮。 步骤5 关闭记事本，打开“First.html”所在文件夹，双击“First.html”文件，在IE浏览器中打开该文件。 【学生】聆听、观看、记录、思考、记忆 【教师】讲解新知，介绍网站建设基本流程 任务三 网站建设基本流程 一、任务说明 本任务将简单介绍网站建设的基本流程，以使读者对网站建设流程有一定的了解，为后面的学习打下坚实的基础。 二、预备知识 （一）规划站点结构 所谓规划站点结构，就是根据网站要实现的功能和内容来规划网站结构。网站结构有两层意思，一是逻辑结构，二是物理结构。 逻辑结构是指将网站内容划分成哪些栏目，实际上就相当于网页中的导航条，图1-10显示了某企业宣传网站的逻辑结构图。 物理结构是指网站中文件的目录结构（即站点文件夹内部的目录结构），其一般可分为两种，一种是扁平式的，就是所有网页都放在网站根目录下，该方式比较适合小型网站；还有一种是树形结构，根目录下分成多个类别，然后在每个类别下再放上属于该类别的网页。 对于第二种方式来说，比较好的情况是物理结构与逻辑结构相吻合，从而便于网站的管理和维护。 （二）收集素材 网站素材的收集相当重要，通常情况下，素材按来源可分为以下几种类型。 客户提供：主要是与产品或企业相关的图像和文字，比如产品外观图像以及产品介绍等。 网上收集：可以使用百度、搜狗等搜索引擎搜索并下载素材。 从光盘中获取：市面上有很多图片素材库光盘出售，可以购买并从中选取需要的图片。 利用现成图片或自己拍摄：可以从出版物中获取图片，也可以使用自己拍摄和积累的照片资料。比如可以将彩图用扫描仪扫描到电脑中，再经过加工应用到网页中。 自己动手创作：例如可以使用Flash制作动态广告条或首页动画。 （三）网页美术设计 网页美术设计是指用图像处理软件（如Photoshop、Fireworks等）设计制作出网页效果图。 在进行网页美术设计时，有一些基本的原则是需要遵循的，下面简单介绍一下。 网页配色：① 设计网页时，网页背景颜色最好选择白色或黑色（多数网页均为白色），这样颜色搭配最灵活；② 可根据网站性质确定网页的主色调，并且该主色调应贯穿于网站中的所有网页；③ 恰当地运用同类色、邻近色和对比色，可增强网页的层次感，丰富网页的色彩或突出某些重要内容（如导航条或版块标题等）。 网页版式设计：版式是设计网页时要考虑的一个重要因素。一般情况下，各种网页的布局都大同小异。设计页面前应事先规划好站标、导航条、广告条和各版块位置。 网页尺寸：页面尺寸是网页设计中必须要考虑的一个问题。目前，我国大部分电脑的显示器是17英寸，其分辨率通常为1 024×768像素。因此，为避免在浏览网页时需频繁拖动水平滚动条，最好将网页宽度设置为1 002像素以内。 （四）制作网页 在使用图像处理软件（如Photoshop）设计好网页效果图后，还需要将设计好的效果图进行切割导出。将图片导出后，就可以在Dreamweaver中组织网站内容了，包括输入文本，插入图片、动画等。 【提示】 像Photoshop、Fireworks等图像处理软件，一般都有切割图片的功能。 （五）申请域名和虚拟空间 域名由若干个英文字母和数字组成，由“.”分隔成几部分，如搜狐网站的域名为“”。 域名是在IP地址的基础上发展而来的，它相当于现实生活中人的名字，只有通过这个名字别人才能找到网站。与名字不同的是，域名在世界上是独一无二的，也就是说没有重复的域名。 【知识库】 互联网上连接了不计其数的服务器和客户机，每一个主机都有一个唯一的地址，我们称这个地址为IP地址（Internet Protocol Address）。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“61.135.150.126”就是一个IP地址。由于IP地址在使用过程中难于记忆和书写，人们又发现了一种与IP地址对应的字符来表示地址，这就是域名。 所谓虚拟空间，是指网站内容所占用的连接到互联网上的服务器空间。 目前，服务商能够提供的虚拟空间模式有三种：主机托管、主机租用和虚拟主机。 ……（详见教材） （六）测试和发布网站 在将网站发布到虚拟空间之前，通常需要检查网页在不同版本浏览器中的显示情况。尤其对于大型网站，这个步骤是十分必要的。 由于各种浏览器支持的XHTML语言版本不同，要让网页在所有浏览器中正常显示是不可能的，尤其是对于有特殊效果的网页。所以要仔细检查，必要时还要舍弃某些效果。 在测试完毕后，就可以利用Dreamweaver或专门的FTP软件将已完成的网站上传至申请的虚拟空间了。 （七）推广和维护网站 发布网站后，还要进行宣传推广，否则网站就会被淹没在浩如烟海的网络海洋中。另外，还要经常更新或添加站点内容。 网站推广：目前，网站推广的方法主要有注册到搜索引擎、交换广告条、网络广告以及报纸和杂志广告等。 网站维护：网站维护主要是指网站发布后内容的实时更新。为方便后期的维护和更新，在上传网站后，最好写一个使用手册，让每个网站维护人员都能轻松上手。 【课堂问答】 【教师】随机邀请学生回答以下问题 请简述一下网站建设的流程。 【学生】聆听、思考、回答 【教师】总结学生的回答 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容，讲解规划“天音”企业网站结构 三、任务实施——规划“天音”企业网站结构 【多媒体】演示规划“天音”企业网站的结构的步骤 步骤1 首先规划网站的逻辑结构。根据网站内容和企业需求，我们将该网站分为“首页”“公司简介”“产品中心”“客户中心”“人员招聘”和“天音社区”6个一级栏目，同时“产品中心”又分为“手机”“电视”“冰箱”和“洗衣机”4个二级栏目，其结构如图1-12所示（详见教材）。 步骤2 接下来规划网站的物理结构。该网站属于企业宣传型网站，规模很小，可以将所有网页放在网站根目录下。 步骤3 首先在本地磁盘创建一个文件夹，命名为“SM”，以作为网站根文件夹；然后在“SM”中创建一个名为“images”的文件夹，以存放站点中的图像和动画文件，如图1-13所示（详见教材）。 【学生】聆听、观看、记录、思考、记忆 通过教师讲解、课堂问答和多媒体演示等方式，让学生了解网页制作与网站开发常用技术，手动编写一个测试网页帮助学生认识XHTML语言，最后详细介绍了网站的建设流程，每一步需要完成的工作
课堂实训 （7 min） 【教师】组织学生完成以下任务 按照上述任务实施所讲步骤，应用XHTML语言，使用各类标签，编写一个简单的网页，并在浏览器中运行。 【学生】聆听、思考、上机操作、完成任务 【教师】根据学生的课堂表现对其考核进行评价 通过课堂实训，帮助学生进一步巩固所学知识，充分认识XHTML语言，并对自身的学习情况进行评估
课堂小结 （3 min） 【教师】简要总结本节课的要点 本次课主要介绍了网页制作与网站建设基础知识、网页的构成元素和网页的本质、网站管理与网页制作相关软件，以及XHTML语言，熟悉了网站建设的基本流程，通过实训，帮助大家进一步掌握了网页的构成元素，充分认识了XHTML语言。 【学生】总结回顾知识点 总结知识点，巩固印象
作业布置 （2 min） 【教师】布置课后作业 完成项目实训——规划饰品网站，规划一个首页如图1-14（详见教材）所示的饰品网站，在纸上画出其逻辑结构图。 【学生】完成课后任务 通过课后练习，复习巩固所学知识
教学反思 本节课对本课程的课程目标、内容安排、考核要求等进行了介绍，讲解了网页的构成元素，网页制作相关软件，认识了XHTML语言，阐述了网站建设基本流程。本节课不足之处是互动环节安排得较少，以后应该让学生有更多的实践机会，提高动手能力。

展开更多......

收起↑