第五课 使用表格布局网页(二)
- 格式:doc
- 大小:876.50 KB
- 文档页数:6
XXXX中等职业学校《网页制作》的课程标准一、课程的性质与任务(一)课程性质《网页制作》是我校计算机应用专业开设的一门专业必修课,是计算机类专业的一门实践环节课程,也可以作为其他相关专业的实践课程或选修课,它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件AdobeDreamweaverCS3,通过这种有代表性的网页制作软件的使用,掌握网站设计的全过程,并能熟练地制作出有专业水准的网站。
(二)课程任务本门课程在专业教学计划中起着十分重要的作用,通过这门课程,学生可以掌握以下技能和知识:1.掌握网站的开发流程,如建站规划、效果图制作、建立站点、发布网站等相关知识。
2.掌握各种网页元素在DremweaverCS3中的使用。
例如,文本、表格、图像、超级链接、层、框架和表单等。
3.掌握HTML,理解各种标记的功能和用法。
4.掌握在DrenIWeaVerCS3中使用CSS控制网页元素的方法。
5.掌握在DrenIWeaVerCS3中使用JavaScript制作网页特效的基本方法。
6.能够解决一些网页设计中的常见问题。
(三)本课程的特点1.课程注重实际应用,即实践性强。
2.涉及的DremweaverCS3软件是目前网页制作工作中较为流行的软件,是“网页三剑客”之一,具有较强的实践性,学习难度不大。
3.突出理论联系实际,实作课时占总课时的50%以上,实际应用知识占课程总知识量的80%以上。
(四)与相关课程的衔接、配合、分工先修课程:“计算机应用基础”、“图形图像处理(FireWorkS或PhotoShop)"、"Flash动画制作”等。
二、课程目标本课程的基本目标是:使学生通过本课程的学习,掌握DreanIWeaVerCS3的使用方法,学会使用DreamweaverCS3制作Web网页的技术。
本课程学习结束后,学生应能根据实际需要自行设计静态网页,建立网站。
课题教课目的教课要点教课难点教课准备教课过程课题教课目的第一课创立站点知识目标初步认识什么是网站。
能力目标学会创立站点;掌握在站点内创立文件夹、重命名文件夹的方法;学会规划网站和收集整理素材。
感情目标经过收集和昆虫有关素材的研究性活动,培育热爱大自然的精神。
学会创立站点;掌握在站点内创立文件夹、重命名文件夹的方法;网络机房、多媒体教课软件等。
1、出示多姿多彩的昆虫图片。
情境创建2、问题:怎样共享这些资源?激发兴趣3、引出制作成网站。
一、认识网站的基本元素:1、网上旅行:师展现阅读北京科普之窗、中国科普博览。
2、生剖析网站的基本元素,师概括总结。
二、规划站点收集资料:1、任务:我的电脑F 盘中新建文件夹,命名为班级名,而后在这个文件夹中新建文件夹“昆虫网站”和“昆虫素材”。
自主研究2、学生演示报告。
沟通分享三、在 Dreamweaver中新建站点:1、任务:新建站点“昆虫记(班级号)到自己的文件夹内”。
2、学生演示报告。
四、在站点内创立文件夹:1、任务:站点内创立一个文件夹,重命名为“ images”。
2、学生演示报告。
1、学生提出问题。
合作学习2、师针对学生操作增补提出问题。
释疑解难3、小组解决。
4、小组报告。
1、利用站点管理器分别创建”jiefunifeng ””chan””tanglang””hudie””fenji ngui ””maiza 实践创作 ngchong””mayi”文件夹。
展现评论 2、小组评选优异作品。
3、全班展现。
4、师生评论。
梳理总结1、生说所学知识。
拓展延长2、出示精巧网页激发学生学习欲念。
第二课新建网页知识目标初步认识什么是网页。
教课要点教课难点教课准备学会新建和保留网页;掌握在网页中输入文字和设置文能力目标字颜色、大小、对齐方式的方法;学会设置网页标题和预览网页。
感情目标经过制作“赤条蜂”网页,培育对自然科学的研究兴趣。
网页中输入文字和设置文字的颜色、大小、对齐方式的方法;多媒体机房、网页等。
表格布局网页课程设计一、课程目标知识目标:1. 让学生掌握网页设计中的表格布局基础知识,理解表格布局的原理和用途;2. 学会运用HTML标签创建表格,设置表格的行、列和单元格属性;3. 掌握CSS样式表中与表格布局相关的属性,如边框、间距、填充等。
技能目标:1. 培养学生运用表格布局设计网页的能力,能独立完成简单的网页布局;2. 提高学生在网页设计中的问题解决能力,能够调整表格布局以适应不同设备和屏幕尺寸;3. 培养学生团队协作和沟通能力,能在小组合作中共同完成网页设计任务。
情感态度价值观目标:1. 培养学生对网页设计的兴趣和热情,激发学生的创造力和创新精神;2. 培养学生关注用户体验,注重网页布局的美观性和易用性;3. 增强学生的信息素养,使学生认识到网络技术在信息传播中的重要作用。
课程性质:本课程为信息技术课程,以实践操作为主,结合理论知识,培养学生的实际操作能力和创新思维。
学生特点:学生处于初中阶段,对新鲜事物充满好奇,具备一定的计算机操作基础,喜欢动手实践。
教学要求:教师应注重理论与实践相结合,以学生为主体,引导学生主动探究,培养其独立思考和解决问题的能力。
同时,关注学生个体差异,因材施教,确保每个学生都能在课程中取得进步。
通过课程学习,使学生能够达到上述具体的学习成果,为后续的网页设计学习打下坚实基础。
二、教学内容1. 理解表格布局的概念与作用- 表格布局的定义与分类- 表格布局在网页设计中的应用场景2. HTML表格标签的使用- <table>、<tr>、<td>、<th>等基本标签的用法- 表格行、列、单元格的属性设置3. CSS样式表中与表格布局相关的属性- 边框样式:border、border-collapse、border-spacing等- 单元格样式:padding、margin、text-align、vertical-align等- 表格背景与颜色:background-color、background-image等4. 表格布局实例分析与操作- 分析经典表格布局案例,了解其设计思路和实现方法- 学生实践操作,完成一个简单的表格布局网页5. 响应式表格布局- 介绍响应式网页设计的基本概念- 学习使用CSS媒体查询调整表格布局以适应不同屏幕尺寸6. 表格布局在实际项目中的应用- 分析实际项目需求,确定表格布局设计方案- 学生团队合作,完成一个具有实际意义的网页设计项目教学内容安排与进度:第1课时:理解表格布局的概念与作用,学习HTML表格标签的使用第2课时:CSS样式表中与表格布局相关的属性,分析表格布局实例第3课时:实践操作,完成一个简单的表格布局网页第4课时:学习响应式表格布局,调整表格布局以适应不同屏幕尺寸第5课时:团队合作,完成实际项目中的表格布局设计教学内容与教材关联性:本教学内容与教材中关于网页设计、HTML和CSS的知识点紧密相关,涵盖了表格布局的基本概念、用法和实际应用,确保了教学内容的科学性和系统性。
课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格(Table)就是由一个或多个单元格构成的集合,表格中横向的多个单元格称为行(在XHTML语言中以<tr>标签开始,</tr>标签结束),垂直的多个单元格称为列(以<td>标签开始,</td>标签结束),如图5—1所示。
行与列的交叉区域称为单元格,网页中的元素就放置在这些单元格中。
(一)插入表格Dreamweaver CS3提供了非常完善的表格编辑功能,首先介绍如何在网页文档中插入表格。
步骤 1 首先在文档页面上要插入表格的位置单击,以确定插入点位置。
步骤 2 单击“常用”插入栏中的“表格”按钮,打开“表格”对话框,设置各项参数后,单击“确定”按钮,即可插入表格,如图所示。
下面简单介绍一下“表格”对话框中几个重要选项的意义。
●表格宽度(Width):设置表格宽度值,否则,其宽度将随其中的内容而改变。
●在Dreamweaver中,最常使用的单位是像素和百分比。
像素使用0或大于0的整数表示;百分比是相对于浏览器而言的,使用 0 或百分比表示。
●边框粗细(Border):是指整个表格边框的粗细,标准单位是像素。
整个表格外部的边框叫外边框,表格内部单元格周围的边框叫内边框。
●单元格边距(Cell padding):也叫单元格填充,是指单元格内部的文本或图像与单元格边框之间的距离,标准单位是像素。
●单元格间距(Cell spacing):是指相邻单元格之间的距离,标准单位是像素。
(二)选择表格和单元格在Dreamweaver中选择表格的方法非常简单,只需用鼠标单击表格边框线即可。
当表格外框显示为黑色粗实线时,就表示该表格被选中,另外,还可以通过“标签选择器”选择表格。
具体做法是:在表格内部任意处单击鼠标,然后在“标签选择器”中单击对应的“<table>”标签,该表格便处于选中状态。
用表格布局网页教案第一章:表格布局网页概述1.1 教学目标了解表格布局网页的概念和作用掌握表格布局网页的基本方法1.2 教学内容表格布局网页的定义表格布局网页的优势表格布局网页的基本方法1.3 教学步骤引入表格布局网页的概念讲解表格布局网页的优势演示表格布局网页的基本方法1.4 课后作业学生自行设计一个简单的表格布局网页第二章:表格布局网页的基本操作2.1 教学目标掌握表格布局网页的基本操作2.2 教学内容插入表格调整表格大小合并单元格2.3 教学步骤插入表格并调整大小合并单元格和拆分单元格2.4 课后作业学生自行设计一个包含表格布局的网页第三章:表格布局网页的样式设置3.1 教学目标掌握表格布局网页的样式设置3.2 教学内容表格样式设置单元格样式设置3.3 教学步骤讲解表格样式设置的方法讲解单元格样式设置的方法3.4 课后作业学生自行设计一个包含表格布局和样式设置的网页第四章:表格布局网页的高级应用4.1 教学目标掌握表格布局网页的高级应用4.2 教学内容跨列单元格嵌套表格4.3 教学步骤讲解跨列单元格和跨行单元格的应用方法讲解嵌套表格的应用方法4.4 课后作业学生自行设计一个包含跨列单元格、跨行单元格和嵌套表格的网页第五章:表格布局网页的优化与调试5.1 教学目标掌握表格布局网页的优化与调试方法5.2 教学内容优化表格布局网页的性能调试表格布局网页的问题5.3 教学步骤讲解优化表格布局网页性能的方法讲解调试表格布局网页问题的方法5.4 课后作业学生自行设计一个包含优化与调试的表格布局网页第六章:响应式表格布局网页6.1 教学目标理解响应式网页设计的基本概念掌握使用表格进行响应式布局的方法6.2 教学内容响应式网页设计的基本原则使用CSS媒体查询调整表格布局实现表格的响应式布局6.3 教学步骤介绍响应式网页设计的基本原则演示如何使用CSS媒体查询调整表格布局示例实现一个表格的响应式布局6.4 课后作业学生完成一个表格布局的响应式网页设计,并在不同设备上测试其表现。
小学五年级信息技术教学设计课题:《用表格布局网页》执教:高密市井沟镇呼家庄小学赵治一、教材分析:本节选自青岛版信息技术教材中的《用表格布局网页》一课,主要内容是学习在表格中插入图片、调整图片以及表格中插入表格方法(也叫表格的嵌套),本课是在学生掌握了表格制作的基础上进行的,通过本节课的学习为美化网页迈出了重要的一步,能够培养学生学习的浓厚兴趣。
二、学情分析:本课的讲授对象是小学五年级学生,通过前二个课时的学习,学生对网页已有了基本的了解,学生能够熟练的启动、退出网页、制作表格并插入新图片,能够利用菜单进行一些基本操作,也为本节课的学习打下了基础,所以,引导学生探究完成学习目标对学生来说并不困难。
三、教学目标:1、知识与技能:掌握在表格中插入图片的方法和表格中插入表格的方法与技巧,设置单元格背景颜色。
2、过程与方法:通过小组合作形式,运用任务驱动方式,培养学生的协作探究能力。
3、情感、态度和价值观目标:通过小组合作培养学生的合作意识和探究能力;通过作品的美化布局与评价,培养学生的审美意识。
通过介绍银杏美景,培养学生热爱大自然的情怀。
四、教学策略:为鼓励学生大胆动手操作,利用探究任务的形式完成一个个操作,让学生根据已有知识和教师的指导、同伴的帮助,通过导学案的引领,自主探究完成操作;通过展示和评价学生的作品,提高学生的审美意识,体会成功的喜悦。
五、教学重点与难点:1、重点:在表格中插入图片及表格中插入表格的方法。
2、难点:表格的嵌套在网页设计中的应用。
六、教学过程:七、教学后记:本节课利用网络环境下的多媒体教学系统呈现教学内容和控制教学。
教学过程中,通过小组合作完成探究任务的形式,运用探究学习、合作学习、任务驱动等教学方式完成一个个教学任务。
整个过程引导学生大胆质疑、大胆尝试不同的操作方法,注重学生动手能力与合作探究能力的培养。
利用小组合作,让学生教学生,协作互助,教师始终保持一个指导者、组织者的角色,体现师生关系的和谐。
网页布局6.1 利用表格进行网页布局1、创建表格2、表格及单元格的基本操作1)选中表格2)选中表格的行和列3)选中一个单元格4)选中不相邻的行、列及单元格5)增加、删除行和列6)拆分、合并单元格3、设置表格和单元格的属性4、设置表格的属性5、设置单元格的属性6、布局表格和布局单元格为了简化使用表格进行页面布局的过程,DreamweaverMX2004提供了布局视图在布局视图中,可以使用表格作为基础结构来设计我们的页面,但是却避免了使用传统的方法创建表格来设计页面时经常出现的一些问题。
例如,在布局视图中,我们可以在页面中方便地绘制布局单元格,然后将这些单元格移动到所需的位置:我们还可以方便地创建固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局。
在本节中,我们就来学习关于布局表格和布局单元格。
首先将布局视图模式打开,打开方法为:在[1nsert](插入)栏中选择[layout] (布局)选项,在[Layout](布局)选项中单击[Layout mode](布局模式)按钮,弹出一个提示框,如图所示。
单击“确定”按钮便会激活布局视图工具,如图所示。
[1nsert](插入)栏中的[Layout](布局)选项1 创建布局表格和布局单元格通过[1nsert] (插入)栏/[Layoutl(布局)选项中的绘制布局表格按钮和绘制布局单元格按钮可以很自由地在页面中绘制布局表格和布局单元格。
1.1 创建布局表格布局单元格不能脱离布局表格独立存在,每一个布局单元格都有一个容纳它的布局表格。
绘制布局表格的步骤如下:1) 选择[1nsert] (插入)栏/[Layout] (布局)选项,将页面切换到[Layoutmode](布局模式)下。
2) 单击绘制布局表格按钮,将鼠标指针移到编辑区内,鼠标指针变成加号“+”。
拖动鼠标就可以在页面中创建一个布局表格,如图所示。
注意:布局表格左上角是布局表格标签,通过标签,网页设计者可以分辨并选出布局表格上方的数字说明了布局表格的大小。