《HTML+CSS网页设计与布局》教案.doc
《《HTML+CSS网页设计与布局》教案.doc》由会员分享,可在线阅读,更多相关《《HTML+CSS网页设计与布局》教案.doc(25页珍藏版)》请在咨信网上搜索。
1、(word完整版)HTML+CSS网页设计与布局教案HTML+CSS网页设计与布局课程教案授课教师: 授课班级: 地点: 周课时: 5 课时 章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记教学目标1) 使学生了解网页设计的相关基础知识;2) 使学生熟悉Dreamweaver软件界面的基本操作方法。重点难点1) 了解网页设计相关概念和网页的类型;2) 熟练掌握Dreamweaver软件创建和管理站点的方法。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计一、 引入1、 相互认识,提出与本学科相关的知识,介绍
2、本门课程情况、教学内容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营造一种学习氛围,尊重同学,互帮互学,真正达到学以致用;2、 提出问题:上过网吧?有谁自学过网页设计?听说过HTML或者CSS这两个概念吗?二、 告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作;三、 逐步演示讲解分析教学内容1、 网站和网页的区别:(1)网页是Internet基本元素;(2)网站由网页组成;2、 静态网页和动态网页:静态网页:纯粹HTML语言格式的网页通常被称为静态网页,静态网页的后缀名通常为。htm、。html、.shtml、.xml。动态网页:许多人认为网
3、页会动就是动态网页,这是个错误的观点,在静态的网页中也可以含有动态的图片,这仅仅是视觉上的动态罢了.真正的动态网页是指实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页.也就是说,它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。静态网页的特点:(1)内容相对稳定,容易被搜索引擎检索到;(2)没有数据库支持,在网站制作和维护方面工作量大;(3)交互性差,在功能方面有很大的限制。动态网页的特点:(1)以数据库技术为基础,可大大降低网站维护的工作量;(2)可实现更多的功能,如用户注册、新闻发布、在线留言等;(3)不
4、利于使用搜索引擎进行网站推广。3、 常见网页类型:形象页、主页、栏目页、内页、新闻详细页等;4、 网页设计原则:(1)了解客户需求(2)遵循Web标准(3)运用形式美法则5、 网页设计流程:(1)手绘效果图:确定网页主题内容和风格(2)设计效果图:搜集、整合设计所需素材(3)版面编辑:网页的制作与实现(4)网页美化:动画设计,网页测试和发布6、 网页设计的主要软件:(1)Photoshop(2)Dweamveawer(3)Flash(4)Firworks7、 HTML基础知识:(1)HTML概念:Hyper Text Markup Language 超文本标识语言;(2)HTML文档的编写方法
5、:用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成;(3)网页文件命名:首页文件名默认为:index。htm 或 index.html;(4)HTML 文件结构: title BODY HTML 文件的正文 /HTML(5)用编辑器手工编写第一张网页;8、 学生实训及辅导;9、 Dreamweaver软件界面介绍:(1)软件面板组成及基本操作方法(2)软件首选参数设置10、 Dreamweaver站点创建:站点新建站点-设置站点名称设置站点默认图像文件夹。11、 学生实训操作:Dreamweaver站点创建与设置;12、 Dreamweaver创建
6、第一个网页:(1) 名称:index.html(2) 设置标题、输入文本、输入特殊字符(3)页面属性设置(4)预览网页13、 学生实训及辅导;14、 HTML常用标记:(1)标题标记:主题文字(2)段落标记:p这里表示段落(3)换行与注释:、(4)粗体与斜体:粗体/b、i斜体/i(5)删除线与下划线:s删除线/s、u下划线(6)上标与下标:sup上标/sup 下标15、 学生实训及辅导;16、 字体标记:(1)字体大小:font size=1”字体大小(2)字体颜色:(3)设置标题字体:主题文字/h#(4)物理字体: B,将字符设置成粗体。 I/I,将字符设置成斜体。 U/U,给字符增加下划线
7、. S/S,给字符增加删除线。 TT/TT,将字符设置成打字机字体。 /SUP,将字符设置成上标字体。 SUB/SUB,将字符设置成下标字体。(5)逻辑字体: /EM强调文字. STRONG字体加重。 CODE/SAMP显示示例文字。 KBD/KBD显示键盘按键文字. 缩小文字。 BIG/BIG放大文字。17、 字体标记实例讲解;18、 学生实训及辅导;四、 课外作业第3章上机实践.五、 课堂小结本次课主要内容:1、网页设计基础知识;2、Dreamweaver基本使用方法;3、HTML基础知识及常用标记;约15分钟约35分钟约20分钟约30分钟约20分钟约20分钟约20分钟约30分钟约20分钟
8、约30分钟约20分钟约20分钟约40分钟学生理解学生熟记学生实践学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师: 授课班级: 地点: 周课时: 5 课时 章节内容文字布局插入图像超级链接教学目标3) 使学生熟练掌握HTML常用标记的基本使用方法;4) 使学生掌握HTML常用标记各种属性的含义和设置方法.重点难点3) 掌握各种HTML常用标记的基本使用方法;4) 熟记各种HTML常用标记的含义.教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计六、 引入3、 回顾上周所学内容:上周主要介绍了网页设计和HTML相关基
9、础知识及Dreamweaver软件基础操作,重点介绍了HTML基础知识及常用标记;4、 提出问题:网页中文字如何布局?如何在网页中插入图像?如何运用超级链接?七、 告知学生课堂任务本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用。八、 逐步演示讲解分析教学内容19、 换行控制:文字一20、 不换行控制:21、 文字对齐:align=”、center居中/center22、 设置段落:段落一/p、p段落二23、 学生实训及辅导;24、 上周课外作业点评;25、 无序列表:ul li表项一/li表项/ul26、 有序列表:ol表项一/li表项/li文字/pre、xmp文本/x
10、mp28、 计算机输出格式:代码样式小型固定宽度字体显示的文本kbd代码样式固定宽度字体渲染/kbdtt代码样式固定宽度字体渲染文本/ttvar代码样式斜体字渲染/var29、 学生实训及辅导;30、 在网页中插入图像:img src=cn.jpg”31、 图像无法显示时的提示信息:33、 设置边框:img src=cn。jpg alt=风景” border=”0px34、 图像的链接:a href=http:/”img src=”cn。jpg 37、 文本与图像对齐:img src=”cn.jpg” align=”middle”38、 学生实训及辅导;39、 最简单的文字超链:a href=
11、”文字链接40、 超链网页的打开方式:_blank、_parent、_self、_top 41、 链接的注释:a href=”http:/www。163。com title=”网易网站 163网站42、 设置图片链接:43、 设置锚点:a name=锚点名”文章中的文字/a44、 邮箱地址链接:50、 密码框:51、 单选框:52、 复选框:input type=checkbox” 53、 按钮设置:54、 学生实训及辅导;55、 上周课外作业点评;56、 下拉表:select选项一/option选项二/optionoption selected选项三绝对路径57、 文本域:textarea!
12、文本域内容-/textarea58、 表单应用实例讲解;59、 学生实训及辅导;60、 表格基本语法:table/tabletr标签对表示表行th标签对表示表头td标签对表示表元61、 跨多行表元:Rowspan62、 跨多列表元:colspan 63、 表格内设置文字对齐:对齐语法用align表示,后面接的值是left、center和right,分别代表向左、居中和向右对齐复选框 64、 表格在网页中对齐:/table;65、 学生实训及辅导;66、 表格应用实例讲解;67、 学生实训及辅导;十四、 课外作业第8章上机实践。十五、 课堂小结本次课主要内容:1、表单的使用;2、插入表格;3、表
13、格应用实例;约10分钟约30分钟约40分钟约30分钟约20分钟约20分钟约40分钟约30分钟约40分钟约20分钟约40分钟学生理解学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师: 授课班级: 地点: 周课时: 5 课时 章节内容网页框架对象移动属性多媒体对象应用教学目标7) 使学生熟练掌握HTML常用标记的基本使用方法;8) 使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点7) 掌握各种HTML常用标记的基本使用方法;8) 熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程
14、设计十六、 引入7、 回顾上周所学内容:上周主要介绍了HTML表单和表格的标记应用方法,重点介绍了表单的应用实例;8、 提出问题:框架网页如何创建?如何使网页中的对象移动?如何在网页中插入Flash、影片、声音?十七、 告知学生课堂任务本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用.十八、 逐步演示讲解分析教学内容68、 框架的基本语法:frameset frame/frameframeset cols=25%,50,25%” frame src=http:/ frame src=http:/。cn/” frame src=”http:/www。163。com/”
15、69、 框架垂直分栏:垂直分栏是在frameset中用cols表示跨多列表元,colspan70、 框架水平分栏:水平分栏的语法用rows表示71、 设置不可调节框架大小:noresize72、 学生实训及辅导;73、 上周课外作业点评;74、 浏览器不支持框架:noframes 75、 设置框架边框:76、 设置滚动条:设置滚动条在是frame里面,用scrolling属性 77、 导航框架:导航框架是在网页框架的frame中加入name属性,表示该的名称,然后通过用a标记的链接,并用target的属性值等于frame的名称;78、 内联框架:内联框架存在body/body的单个HTML文件
16、中,可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容,叫做浮动框架也称内联框架;79、 学生实训及辅导;80、 框架应用实例讲解;81、 学生实训及辅导;82、 移动属性基本语法:marquee要移动的对象/marquee83、 文字的移动设置:marquee direction=#文字84、 图片移动的设置:marqueeimg src=仙境。gif向上移动/marquee86、 文本的滚动循环; 87、 文本的移动速度:scrollamount设置移动的速度88、 学生实训及辅导;89、 网页多媒体的基本语法:embed src=url loop=truefa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML+CSS网页设计与布局 HTML CSS 网页 设计 布局 教案
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【精****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【精****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。