第1单元初建网站.docx
- 文档编号:22788378
- 上传时间:2023-04-27
- 格式:DOCX
- 页数:48
- 大小:1.39MB
第1单元初建网站.docx
《第1单元初建网站.docx》由会员分享,可在线阅读,更多相关《第1单元初建网站.docx(48页珍藏版)》请在冰豆网上搜索。
第1单元初建网站
第1单元初建网站
一、单元概述
在本单元中,我们从生成简单网页入手,理解网页设计的基础知识;然后规划站点,了解网站建设的开发流程;最后利用Dreamweaver8创建站点,并制作首页。
二、学习目标
本单元是学生初次接触用于制作网站的软件Dreamweaver8,因此首先让学生在欣赏网站的同时了解网页设计与网站制作的基本常识是必要的,在进行软件介绍的时候重点强调网页编辑软件的优越性,另外要让学生明确的是:
在着手创建网站之前,必须要先对网站进行站点规划,最后通过创建“安全自护我能行”为题的网站使学生经历“规划网站→创建站点→编辑首页”的网站初步建设过程。
通过本单元循序渐进的学习过程,学生将按部就班地掌握:
使用HTML语言编写的代码生成网页、用IE浏览器预览网页、网站的开发流程、创建站点、创建首页、规划素材文件、为页面添加网页标题和背景色、使用表格初步布局
网页、调整表格、设置网页背景图像、插入Flash动画并设置参数、插入普通文本和特殊字符、保存网页等知识与技能。
在教学过程中要尽可能地利用学生已有的知识技能分析并解决新的问题,例如网页中的背景色调整、表格设置与调整、插入文本、保存网页等,其操作方法与Office系列软件和上学期学过的Flash8具有较大的相似程度,此时教师可以引导学生知识迁移、自行探索发现解决问题的方法,而教师则可将注意力集中在更需要关注的学生身上,最大限度地提高课堂效能,将问题在课上给予解决。
教师在布置单元任务或课堂任务的时候,要鼓励学生不完全模仿范例,而是利用素材进行网页的创意和设计,争取留给学生更多的空间去发挥创意。
在进行评价的时候要对创意部分及时给予鼓励,充分利用各种方式对学生作品进行展示,引导不同层次的学生之间形成良性竞争,从而在班级教学中创造出和谐上进的学习氛围,对信息技术教学产生推动作用,充分体现“学生为主体,教师为主导”的教学模式。
三、重点难点
教学重点
1.掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。
2.学会使用HTML代码在记事本工具中制作网页并且通过用IE浏览器预览网页。
3.了解网站的开发流程,能够围绕网站主题设计组织结构图。
4.熟悉Dreamweaver8的工作界面。
5.掌握创建站点、规划素材文件的方法。
6.学会创建首页、设置网页标题和背景色、保存网页及在IE中预览网页。
7.能够根据网页内容对页面进行合理的表格布局,并调整表格属性。
8.能够灵活地将图像、Flash动画、文本和特殊字符插入到页面中,并且通过“属性检查器”设置以上网页元素的属性。
教学难点
1.HTML语言的结构,标签和属性的含义。
2.通过观察文档图标和扩展名判断该文档调用的启动软件。
3.能够根据网站主题的需要,搜集并整理相关素材,去粗取精、去伪存真。
4.通过“窗口”菜单和面板组对工作界面进行自由布局安排,打造适合自己使用的软件环境。
5.使用“标签选择器”来选择网页元素,以设置其属性。
6.利用像素和百分比两种度量单位来控制网页元素的尺寸。
四、学时安排
本单元共4课,总计4学时,每课占用1学时。
备课时间:
上课时间:
第1课新手入门
(一)本课教学目标
1.掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。
2.学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。
3.掌握浏览网页的方法并理解网页编辑工具与浏览工具之间的关系。
(二)教学设计与教学建议
1.课堂引入分析
在当前的社会生活中,网络正在发挥着越来越重要的作用,大量制作精美、功能强大的网站出现在互联网上。
对于学生来说,制作个人网站也正在成为一种流行时尚。
通过本教材的学习可以轻松帮助学生入门,并逐步亲手打造属于自己的个性十足的网站。
在本课的引入设计中,教师可以这样设计:
首先打开IE浏览器,在地址栏中输入网址,打开一个范例网站的首页,单击首页中的动画、超文本、图片等网页元素,可以分别链接到网站中的其他页面中。
在操作过程中教师提出问题,引导学生思考互联网、网站、网页、首页等术语的含义,以及它们之间的关系,尝试让学生体会浏览器和网页的关系,从而将网站设计与网页制作的基本知识进行概括总结并明确落实到每个学生身上。
在进行教学的时候,一定要让学生认识到已有知识的重要性,充分利用已经具备的技能去尝试解决新问题,从而变被动学习为主动探究。
教师可引导学生充分利用教材中的“视野拓展”和“创作天地”板块进行自学,这实际上是在实施分层教学,以巩固本课的知识技能为主,适当地进行补充,让部分基础较好的同学在完成基本任务之后也能有事可做,给学生创造出提高的空间。
作为网站制作的起始课,教师要切实地关注每个学生,尤其是在以前的学习过程中表现出学习能力较弱的学生,要确保每个学生都有一个好的开始,都能将第一个网页作品保存到教师指定的位置(本地磁盘或网络中的指定目录)。
教师应对所有完成保存网页任务的学生进行及时地评价与鼓励,保护学生的学习积极性。
另外,对完成基本任务并有所创新的同学重点表扬,鼓励学生主动学习,有计划地营造良性竞争的氛围。
2.重点内容分析
(1)网页设计与网站制作的基本知识是本课的教学重点
在本课中通过欣赏站点,使学生了解和掌握互联网、网页与首页、网站、IE浏览器的基本含义,并且能够明确它们相互之间的关系。
学生在学习网站制作之前已经接触过网站,浏览过各式各样的网页,因此教师在完成此教学任务的时候,可以充分利用学生已有基础,不必完全进行讲授式教学,可以结合启发、设问等方法,使学生尽可能地自己总结出相关知识。
(2)使用记事本作为网页编辑工具来编辑HTML代码并生成网页是本课的难点
在进行此部分教学的时候,可以先借助学生已有技能,启动记事本,复制并粘贴素材文件中提供的HTML代码,命名并保存文件,然后在浏览器中进行预览。
对于HTML代码部分,教师可以尝试通过修改属性值的方法,引导学生探索标签的含义及其与属性值的对应关系,这也同时是对“创作天地”板块中的练习进行提示的过程,然后通过分析此HTML实例,讲解HTML语言的基本结构,对基本的、
、标签进行初步介绍,鼓励有余力的同学通过“视野拓展”板块进行自学,并独立完成“创作天地”中的练习。通过教师演示引导学生思考扩展名对文件的影响,既包括其对文件图标的影响,也包括调用应用程序的影响,从而引出程序关联的知识进行补充讲解,见图1.1和图1.2。
(3)保存并上传文件
本课是学生第一次上传网页作业,因此要着力于培养学生的学习习惯,尤其是在保存作业至本次磁盘之后,一定要尽可能地让学生将文件上传到网络中的指定位置,这不仅便于教师评价,更便于学生之间互评。
学生可以通过比较作品的差异看到自身在整个集体中的位置,从而反思自身作品,迸发灵感,二次创作,这样在整个班级中将会产生更多的富有创意的优秀作品。
学生还可以随时查看上传作业的情况,作为调整自身作业完成进度的参考。
(三)教学补充
本课对HTML语言进行了简单的介绍,在“视野拓展”和“创作天地”板块中都安排了此部分的内容。
教师可以补充一些简单的HTML标签和属性,提供给有兴趣的学生作为提高练习使用,也为今后更好地使用“标签选择器”选择对象打下基础。
备课时间:
上课时间:
第2课轻松上路
(一)本课教学目标
1.了解网站的开发流程。
2.掌握开发个人网站的步骤。
3.能够根据网站主题设计网站结构。
4.熟悉Dreamweaver8的工作区布局和界面环境。
5.掌握使用向导创建站点的方法与步骤。
(二)教学设计与教学建议
1.课堂引入分析
前面已经掌握了网站、网页、网页的组成元素等基础知识,现在就来了解开发建设一个网站的过程中需要进行的工作。
在进行网站建设的时候,需要先进行需求分析,要对网站的主题、素材、规划内容综合考虑。
本课首先要解决的正是网站的组织结构问题,我们以“安全自护我能行”为例对网站的组织结构图进行讲解,要求学生掌握围绕主题确定网站结构及网页内容的方法。
规划好站点后,就可以开始着手创建站点了。
使用Dreamweaver8创建站点,当然要先熟悉软件的工作环境。
我们在这里只需要简单介绍即可,因为本软件的文档窗口与Office系列软件相似,面板组又和同一公司出品的Flash软件雷同,只需要简单地提示学生并快速演示工作区布局即可。
创建站点的时候,使用站点定义向导是很好的选择,尤其适合初学者使用,教师可提示学生使用“站点定义”对话框中的“高级”标签也能够创建站点,功能更为强大,速度也更快,推荐学生在今后的创作过程中尝试使用。
2.重点内容分析
规划网站及创建站点是本节课的教学重点,下面分别进行教学建议。
在本课讲解网站开发流程之后,教师应迅速将课题引导至规划站点上来,引导学生围绕网站主题“安全自护我能行”展开讨论,共同思考本网站应该如何规划,依照先整体后局部,先简单后复杂的原则去分层、分角度设计网站结构和网页内容,让学生体验完整的规划过程,以便对“创作天地”中布置的课外提高任务起到降低难度的作用。
创建站点是本课的重要内容,要求所有学生一定要掌握使用“站点”菜单的“新建站点”命令创建站点的方法,如图2.1所示,可以通过提示或在今后的教学过程中演示渗透来介绍使用“文件”面板创建站点的方法,如图2.2所示,尽量使学生能够熟悉如图2.3所示的“管理站点”对话框,并且弄清楚在此对话框中的“删除”站点并非删除掉网站文件本身,仅仅是删除在Dreamweaver8对此站点设置的信息而已。
(三)教学补充
1.切换网站
当学生使用的计算机具有磁盘保护的功能,或者在Dreamweaver8中创建了多个待编辑的网站时,学生启动软件后,系统不会恰好打开需要编辑的站点,此时可以提示学生使用“文件”面板来打开需要的网站。
其操作过程如图2.4、2.5和2.6所示。
2.网站组成
在创建站点的过程中,教师不可避免地会遇到站点的组成问题,一般来说在Dreamweaver8中创建的站点分为三部分:
本地站点、远程站点和测试站点,讲清楚此三部分的含义,才能正确设置站点。
本地站点:
这是我们创建站点的工作目录,用来存放网页和素材,它可以位于学生的本地计算机,也可以位于教师配置的网络服务器上。
远程站点:
远程站点是用来存储我们创建的站点文件的文件夹,这些文件用于测试、生产、协作和发布站点。
如果想在不连接Internet时测试站点,可以在本地计算机上通过软件设置的办法去模拟Web服务器环境。
测试站点:
用来测试动态页面的站点,适用于动态网页。
3.动态网页和静态网页
至于动态网页和静态网页的区别,教师可以简单概括讲解如下:
动态网页和静态网页是相对的,动态网页是指内容由站点数据库中变化的数据来显示的网页,静态网页和动态网页的扩展名不同,静态网页一般是以.htm、.html、.shtml、.xml等为扩展名,而动态网页则是以.asp、.jsp、.php、.perl、.cgi等为扩展名的。
教师还可以提供学生一些动态网站的地址,让学生通过自己的实际操作去体会二者的区别。
备课时间:
上课时间:
第3课开篇之作
(一)本课教学目标
1.进一步熟悉Dreamweaver8的工作界面。
2.掌握利用“文件”面板打开网站的方法。
3.学会根据网站素材的分类规划网站的文件夹。
4.熟练地创建并保存网页。
5.掌握设置网页标题的方法。
6.能够根据网页内容使用表格恰当布局。
7.学会设置网页背景色及表格背景图像。
8.初步认识并尝试使用标签选择器选择对象。
9.熟练地使用快捷键在浏览器中预览网页效果。
(二)教学设计与教学建议
1.课堂引入分析
当站点规划并创建完毕之后,要进行的工作首当其冲就是制作网站的首页。
首页作为网站的门面,对网站来说至关重要,因此我们要尽量将首页制作的富有吸引力。
2.重点内容分析
(1)在“文件”面板中规划站点
首页需要使用的素材必须存放在网站中才能被它引用,所以我们要为素材建立文件夹,将不同类别的素材分门别类地存放,便于管理。
打开“文件”面板,模仿在Windows中的操作,右击网站名“安全自护我能行”,在弹出的快捷菜单中执行“新建文件夹”命令,此时文件夹名处于可编辑状态,我们只需要直接输入文件夹名即可完成命名,创建网页也可以采用此方法,如图3.1所示。
与使用“新建”菜单来创建网页相比,在“文件”面板中操作更为简单快捷。
为素材归类存放准备的文件夹建立完毕之后,我们要将素材存放到相应的目标文件夹中。
此时可以考虑暂时脱离Dreamweaver8的软件环境,使用windows的资源管理器进行操作,这样做的好处是可以批量复制粘贴文件,尤其是素材准备充分的情况下,能够节省大量的时间,这种方法优于在网页中先使用素材后再逐个保存到网站中的方法。
在教材中我们所介绍的正是此种方法。
至于传统的先使用素材后保存到指定文件夹的方法,虽然不推荐使用,但是也可以介绍给学生,其过程如图3.2所示(此示意图是以在网页中插入图像为例的)。
图3.2保存网页使用的素材图像
创建首页的过程与创建普通网页并无实质性的区别,系统区分首页和普通网页依赖于文件名,如果网页被命名为index.html(index.htm)或者default.html
(default.htm),那么在将来发布网站的时候就会指定该网页为首页,此原则是由发布站点的软件所决定的,作为使用者我们只需要遵守该原则,在Dreamweaver中将首页命名为index.html(index.htm),其他网页链接在它下层即可。
(2)设置网页标题
每个网页都有标题,但是网页的标题并不显示在网页文档中,而是显示在浏览器的标题栏中,如果不设置则显示成“无标题文档”,如图3.3所示。
(3)设置网页背景
更改首页的背景色,属于设置网页的页面属性,既可以通过“属性检查器”的“页面属性”按钮,也可以通过“修改”菜单的“页面属性”命令完成,弹出的对话框相同。
我们设置背景色的目的是为了让后插入的表格的背景图像能够融合到整个网页中,使画面效果过渡自然,所以对背景颜色要求非常精确。
在系统提供的色板中我们无法找到对应的颜色,用拾色器则比较复杂,因此我们采用的是输入十六进制颜色值的方法进行设置,此方法我们在学习Flash的时候曾经讲授过,此处不再赘述。
当网页同时设置了背景颜色和背景图像的时候,系统只会显示背景图像,忽略背景颜色。
(4)使用表格对页面布局
插入表格是在网页设计中经常采用的页面布局方式,使用表格控制网页元素的定位,既简单又精确,因此掌握好表格的运用是非常重要的。
当表格用于布局的时候,通常会将边框线设为0像素,这样在浏览器中浏览网页时将不会看到表格边框线。
我们在首页中正是如此设置的,表格的边框线在编辑状态下显示为虚线,在IE中预览的时候,边框线并不显示。
当需要选择表格对象(表格、行、列、单元格)的时候,我们推荐使用状态栏中的“标签选择器”来进行。
需要注意的是,随着鼠标在表格中位置的不同,“标签选择器”区域显示的内容也会发生相应的变化,此时我们可单击标签,并观察表格对象的选择状态即可判断所选的对象是否正确。
对于如图3.5所示的2*2的表格来说,当将插入点定位在b1单元格中时,单击“标签选择器”中的