还剩5页未读,继续阅读
文本内容:
湖南商务职业技术学院教案束如〈hr/、br/、img/等例如bodyh2html5的概念/h2X!—该h2元素为有内容的元素一hr/!一该hr元素为空元素一p万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML的第五次重大修改/p!一该p元素为有内容的元素一〉/body按照元素是否换行来分,HTML元素可以分为“块级元素”和“内联元素”相反地,内联元素就是不会换行,内联元素就是紧贴着前面一个元素显示,内联元素也称之为行内元素常见的内联元素有图像img、超链接a、span、加粗strong、斜体em等属性HTML标签可以拥有属性属性提供了有关HTML元素更多的信息属性总是以名称/值对的形式出现,格式为name二“value属性名=属性值,属性总是在HTML元素的开始标签中规定例如bodybgcolor=n#FF6600nh2align=centerhtml5的概念/h2hrcolor=#FF00FF”/palign=right”〉万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML的第五次重大修改/p/body上述代码中,body设置了属性bgcolor表示背景颜色;h2与P设置了属性align表示对齐方式;hr设置了color属性,表示水平线的颜色4HTML与XHTML的重要区别尽管所有浏览器都兼容HTML但是为了使网页能够符合web标准,建议网页设计师应该尽量严格遵循XHTML规范来编写代码,需要注意以下几个方面在XHTML中标签名称与属性名称必须小写在XHTML中标签必须严格嵌套在XHTML中属性值用双引号括起来在XHTML中属性值必须使用完整形式
2、常见的HTML结构元素1D0CTYPE文档类型的含义与选择在Dreamweaver中新建一个网页文档时,默认情况下生成的基本网页代码如图13-6所示,可以看到最上面有1行关于DOCTYPE文档类型”的声明,这行代码的作用就是告诉浏览器,使用哪种规范来解释这个文档中的代码网页设计师可以在新建文档的时候选择使用哪种文档类型在Dreamweaver的新建文档对话框中,在右下角有一个文档类型下拉框,如图1-3-7所示页磔521布局n空白贡朝例收无潦悻网格布局H他标中的贡百示例申的贡国算他mwMI板1xsu(S35xsu(片tf)B年项目Aetiec^eraptiCSS1JtveriptXKLASPJsScriptASPVBScriptASPMETClASPJETVBColdfusionColdfusion组件JSPPXP1列值定,居申i列固定,J8中,标胭和神士1列液志,国中1列液态,居中,标胆和即王2列固定,右例拦2列固定,右侧罡、标题和血生2列GQ定,左利住2列固定•左例在、标题KW壬2列我左,右斜拦2列赛有,右例拦、行胭神隆主2列谟态,左例栏2列费态•左御拦、杯匏柏时主3加旋3列雁,标题裾挑王3列遵车3列/卷•标第和I处王KTMU52列瓯,右雌、标麴相I加KTMU539照,标囹(耶I违无依览〉HTML文档启用XtiCMkt附加CSS文件源手涡一燔CHRM-皿,帮助(K)二|♦即,名内容|曲R)]«!消⑹注意初学者建议使用XHTML
1.0transitional(XHTML
1.0过渡类型),这样在编写网页代码时,即可以按照XHTML的标准书写符合Web标准的网页代码,在一些特殊情况下,也可以使用HTML传统的不那么严谨的写法
(2)基本结构元素HTML网页中基本结构元素有3个,分别是html元素、head元素和body元素这些元素一定出现在每个网页上,且仅出现一次html元素〈html〉与〈/html》标签决定了网页文档的开始点和结束点,在它们之间是文档的头部和主体,是网页文件最外围的一对标签,其作用是告诉浏览器整个文件是HTML格式htmlhead这里是网页文档的头部/headbody这里是网页文档的主体/body/htmlhead元素head元素的内容是网页的头部信息,这些信息不会显示在网页中,只是给浏览器提供信息〈head〉标签用于定义文档的头部,它是所有头部元素的容器〈head〉中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等head部分可以包含以下标签〈base〉,linkmetascriptstyle以及〈title》等〈title〉元素定义网页文档的标题,标签内容会显示在浏览器技能训练40minstyle两个子文件夹;第二步打开DW软件,新建站点,与mySite映射;第三步新建HTML文件,参考内容如下学生解决问题Q*!DOCTYPEhtnlPUBLIC//WJC//DTDXM7XX.
1.0Tranal11ona17/£NVhttp://ww.w
3.orq/TR/xhtmll/DTD/xht®ll-transitional.dtdhtrolxvlnsv^http://www.w.org/1999/xhtBlNhead»tahttp-equiv-Cont«nt-TypQcont«nt-*t9xt/ht«l;ch«r»«t-uvf-8*/今天的主JB HTXL
5.0/titlemtanaM»wkeyvord9Ncontent*aHTMLrhtal5«htal
5.0n/aetana«e--lescripvioncontent-*HTML5*T-RMhtml.HTML5舄成为HTML的M标*/netahttp-equiv=refxreshcontent=5;URL=http://www.hnswxy.cot/«/h“dbodybgcolor»#0099^6-■俅存网页信息这里保存网页信息这里保存同员信总这里保存网页信息iS・保存网货值包达夏保存网页信息3里保存网页信息辽Mbr/华学问员信£i2置保存网贡值电诂里3力司页名星追班保存网员6星这更保存对贡7且这豆保存河贡是江里保存网页华息江里保存网页鲁息这里保存网失信息这里保存两次售.电N生保存冏页信息这里保存用欠信息这M保存网友信息这里修存网页信息哈里保存网页信息■/phlalign-wcenterUEl/hlh2t7g2/h2h3^H3/h3h4t5E4/h4hSfHs/h5Q6标186/h6/body/htitl7uL・L▲BE旧除管口.%1!C»ffN.■UWTR56K-c-0♦第四步:保存为pagel.html第五步通过不同浏览器查看网页效果第六步请同学完成以上练习题,提交作业1>截图dreamweaver软件中代码的“拆分视图”;
2、截图网页在浏览器中的预览效果;
3、压缩mySite文件夹;将以上三个内容上传提交课堂小结3min通过对本次课的学习,让学习者了解了HTML的各个常见元素HTML是网页设计的核心基础,请学习者真正理解每一个标签的含义与使用方法作业布置.继续完成技能训练任务,并提交至学习通.预学下一次课的内容教学反思授课章节及主题HTML基础
(一)课次3教学目标知识目标.掌握什么是HTML与XHTML以及区别.掌握标签、元素和属性的概念.掌握常用的HTML块级元素的语法及使用方法能力目标.能够利用Dreamweaver软件进行简单网页文档的制作;.能够熟练使用常见HTML标签进行网页文档的编写素养目标.培养学生清晰有序的逻辑思维;.培养学生数据分析与总结的意识;.培养学生系统分析与解决问题的能力学情分析知识基础学生已经具备了一定的计算机操作能力和Photoshop、Dreamweaver软件的基本操作技能,对网页设计有一些基本的了解学生特点.学生爱学习爱思考爱表达,喜欢动手实践,但学生自律性不强,遇到困难时畏难.软件课程知识绝大部分同学掌握较好,少部分同学操作不太熟练.解决复杂问题能力弱,缺乏知识迁移能力教学重点.内联元素和块状元素的区别.Html基本结构元素.标题元素和段落元素教学难点Html基本结构元素教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https:〃www.xueyinonline.com/detai1/221724252参考书.《电子商务网页设计与制作》,电子工业出版社.《HTML5+CSS3网页设计与制作》,人民邮电出版社参考网络资源.菜鸟教程https:〃www.runoob.com/.虎课网:https://huke
88.com/教学过程设计环节教学内容教师活动学生活动知识回顾10min
1、投票下面哪款软件是集网页制作和管理网站于一身的所见即所得网页代码编辑器?A:DreamweaverB:PhotoshopC:Flash
2、抢答什么是站点?为什么要建立网络站点?
3、选人回答什么是本地站点?
4、抢答什么是静态网页,它与动态网页有什么不同?
5、抢答如何合理的建立站点目录?
1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点
1.学生积极参与课堂活动任务导入2min小明成功地安装了DreamweaverCS6软件创建了本地站点,生成了第一个网页文件看到浏览器中显示出来的网页效果,小明高兴之余想起在创建网页过程中在代码视图中看到的那些代码〈head>、<body>等他一个都不认识,那是些什么呢?
1.【任务导入】教师通过案例导入本次课的学习目标
1.学生了解本次课学习的目标知识准备35min
1、HTML和XHMTLHTMLHTML是HyperTextMarkupLanguage的缩写,中文名称是超文本标记语言,超级文本标记语言是万维网Web编程的基础,也就是说万维网是建立在超文本基础之上的XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage的缩写,中文名称是可扩展超文本标记语言,表现方式与HTML基本相同,但有一些细微的差别XHTML相对HTML在语法要求上更加地严格,是一种加强版的HTML此处不做过多解释,两者之间的不同区别在下一节中进行详细分析HTML标签、元素和属性标签HTML标签是由一对尖括号“〈”各以及标签名组成,如<P>段落标签,P为标签名标签分为“开始标签”与“结束标签”两种,如图1-3-3所示,其中<p>为段落标签的开始标签,</p>为段落标签的结束标签标签名称/、<p>这是二个段落</p>111开始标签元素内容结束标签tuM按照有无元素内容来分,HTML元素可以分为有内容元素和空元素,其中有内容的元素是指元素内容不为空的元素,如<p>><body>>等元素内容为空内容的元素,称之为空元素,空元素没有明显的结束标签,在开始标签中进行关闭以开始标签的结束而结.【知识讲授】教师讲解Html相关知识点.【课堂讨论】1什么是HTMLHTML与XHTM的主要区别是什么?
3.【课堂讨论】2什么是HTML元素?HTML元素有哪两种分类形式?你能详细说说这两种分类形式吗?
4.【课堂讨论[3HTML网页中的基本结构元素有几个?分别是什么?什么作用?
5.【课堂讨论】4网页中的段落是用什么标签来定义的?它
1.听取教师讲解知识占・
八、\
92.积极参与课堂活动的左上角,其目的是告知访问者网页的主题,元素是head部分中唯一必需的元素link儿素用于链接外部样式CSS文件和javascript等外部文件;style/L素用来HTML文档定义样式信息在style中,可以规定在浏览器中如何呈现HTML文档,其中的type属性是必需的,用来定义style元素的内容唯一可能的值是“text/css”script儿素用于定义客户端脚本,比如JavaScriptscript元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件〈meta〉元素用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等base元素用来为页面上的所有链接规定默认地址或默认目标注意以上6个元素中只有title元素是必须出现的,其它元素根据实际需求来使用body元素body元素是定义文档的主体body元素包含文档的所有内容,比如文本、超链接、图像、表格和列表等等body是用在网页中的一种HTML标签,表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容body元素中常用的属性有bgcolor(背景颜色)、background(背景图像)等不过现在的Web标准不建议使用属性,建议使用CSS样式进行背景样式的定义,详见第三单元任务lo例如!D0CTYPEhtmlPUBL1C-//W3C//DTDXHTML
1.0Transitional//EN“http:〃www.w
3.org/TR/xhtm11/DTD/xhtm11-transitional.dtdhtmlxmlns=http://www.w
3.org/1999/xhtmlheadmetahttp-equiv=Content-Type“content=text/html;charset=utf-8/title〉今天的主题HTML
5.0/titlemetaname=keywords”content=HTMLHTML5HTML
5.0超文本标记语言”/metaname=descriptioncontent=HTML5是下,代的HTMLHTML5将成为HTML、XHTML以及HTMLDOM的新标准/metahttp-equiv=refreshcontent=10//headbodybgcolor=#FFFFFF这里保存网页的各种内容信息!/body/html以上就是一个基本的网页结构,〈htmlX/html》是文档元素,里面包含两个元素,一个是网页头部元素〈headX/head一个是网页主体元素〈body/body
3、常见的HTML块级元素块级元秆般都从新行开始,它可以容纳内联元素和其他块级元素,常见块级元素有标题元素hn、段落元素p、块元素div、表格元素table等如果没有CSS的作用,块级元素会按照顺序以每次另起一行的方式一直往下排而有了CSS以后,我们可以改变这种html的默认布局模式,把块级元素摆放到想要的位置上去常见的块级元素有标题元素hn、段落元素p、表格元素table、列表元素ul、滚动元素marquee、水平线元素hr、大区块元素div等1标题元素hn标题元素有6种,分别为hl、h
2、h
3、h
4、h5与h6其中的h为heading标题的意思,数字1飞代表标题的级别,如hl代表一级标题,h2代表二级标题,h3代表三级标题,h4代表四级标题,h5代表五级标题,h6代表六级标题2段落元素p网页中的段落是用P标签来定义的,它的语法为p内容/p当需要在一个段落中进行换行时,使用br/〉标签来进行段落文本的换行注意使用空的段落标记〈pX/p〉去插入一个空行是个坏习惯,建议使用br/标签代替它常常使用段落标签,让文章条理段落上下分割清晰,同时也有利于搜索引擎优化SE0让搜索引擎感觉到你的网页内容段落更加友好清晰段落标签在每个段落之间会生成定距离,类似下个p标签等于使用两个br标签换行❷技能训练•g点HTML网页结构兀素练习请同学们完成以下练习第一步在电脑新建文件夹mySite在mySite中新建images与.【实操演示】教师讲解结构元素实操.【发布任务】教师在学习通发布技能任务.【实践指导】来回巡视,及时帮助
1.观看实操演示,掌握Html网页结构兀素
2.完成技能训练题。