第三章网页文本的设计(DOC)_第1页
第三章网页文本的设计(DOC)_第2页
第三章网页文本的设计(DOC)_第3页
免费预览已结束，剩余3页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、?HTML网页设计?教案章节课题第三章网页文本的设计授课日期2022年3月16日第二周授课时数4学时教学目的1掌握HTML中文本的排版方法 2熟悉HTML中特殊文本的添加； 3掌握HTML文字列表的建立方法； HTML与文本相关的标记与属性。教学方法多媒体网络教室，采用“演播教学法。教学重点本阶段的重点是让学生掌握HTML文档添加文本的方法及其对于文本排版修饰的手段。教学难点1.HTML特殊字符文本添加2网页文本排版3无序列表、有序列表及其自定义列表的创立教具、挂图见课前准备工作作业题号见教案：附加题教学过程及时间分配主要教学内容及步骤课 刖 准 备 工 作图 样演 示 素 材1. ?第三章网

2、页文本的设计?PPT演示文稿；2. 实时网站登陆演示3. HTML代码书写教学过程及 时间分配教学内容一、普通文本的添加1.通过键盘直接输入例如1:vhtml ><head><title>无标题文档</title></head><body>v/body></html>2通过复制粘贴的方式注意的DW中选择性粘贴的方法例如2：二、特殊字符文本的添加1 特殊符号以&开头后面跟相关特殊字符例如3:在网页中展示“ <1>代码：&lt ; 1&gt ;(1) 半角大空白：&ens

3、p;(2) 全角大的空白：&emsp ;(3) 不断行的空白：&nbsp ;(4) 小于：&lt ;(5) 大于：&gt;(6) & 符号：&amp ；(7) 双引号：&quot ;(8) 版权：&copy ;(9) 已注册商标：&reg ;(10) 乘号：&times ；(11) 除号：&divides ；(12) 加减号：&plusmn；(13) 千分比：&permil；(14) 双向箭头：&harr;2 特殊公式标记1vsup>v/sup>为上标标记，用于将数字缩小

4、后显示于上方；2vsub>v/sub>为下标标记，用于将数字缩小后显示于下方； 练习1:写出(63 +36) -2 ±=?结果以千分比表示教学过程及 时间分配教学内容练习 2： H2+O2 = H2Ovhtml ><head><title> 运算式 </title></head><body>(6<sup>3v/sup>+3<sup>6v/sup>)&divide;2&plus mn;仁？<br> 结果以&permil ;表示。</

5、body></html><html ><head><title> 运算式 </title></head><body>H<sub>2</sub>+O<sub>2</sub >&harr;H<sub>2</sub>O</body></html>二、HTML网页文本的修饰1重要文本1加粗文本<b></b>2强调文本 <em></em>3加强调文本 vstrong

6、x/strong>2倾斜文本<i>倾斜文本</i>旁注的文字大小<small></small>4.设置已删除文本<del>已删除文本</del>文本方向<bdo></bdo>标签1从左向右显示：属性dir值为“ ltr 2从右向左显示：属性dir值为“rtl 二、HTML网页文本的排版1.实现段落与段内换行<p><br>浏览器解释HTML代码时会忽略多余的空格和换行，不管输入多少个空格，都将教学过程及 时间分配教学内容被视为一个空格。按回车键换行也是无效的，如果需要换行

7、需要使用一个标记来 告诉浏览器这里需要回车操作。例如4:段落标记<p></p>.用来定义网页中的一段文本，文本在一个段中会自动换行。换行标记<br>是一个单个使用的标记，break的缩与，作用是将文子在一个段内强制换行；2.设置标题<h1><h6>类似于word文档不同级别的标题，HTML中共有6个标题标记，数字越小级别越 咼文字也相应越大。3使文字水平居中<center>浏览器默认显示方式从靠左的位置开始显示文字4设置文字段落的缩进<blockquote>对某段文字进行缩进显示，正文的左右两侧都会距离浏览器边

8、界增加一定的距离。5为网页添加水平线<hr>:为了让网页内容更有条理的显示可以添加水平线，该标记也是单个使用的。 四、设置文字列表1建立无序列表<ul>工程列表使用的一对标记是<ul>v/ul>,其中每一个列表项使用<li></li> 结构如下：<ul><li>第一项<li>第二项<li>第三项</ul>2建立有序列表类似于word中的自动编号功能，使用<ol>v/ol>标记，每一个列表项前使用<li>v/li> 结构：<ol&

9、gt;<li> 第一项 </li><li> 第二项 </li><li>第三项</li></ol>3建立不同类型的无序列表前面的标记符号的变化Disc工程符号列表 结构：教学过程及 时间分配教学内容<ul type= d>c <li> 工程 1</li><li> 工程 2</li><li> 工程 3</li></ul>Circle工程符号列表结构：<ul type= circle <li> 工程 1&

10、lt;/li><li> 工程 2</li><li> 工程 3</li></ul>square工程符号列表结构：<ul type= square <li> 工程 1</li><li> 工程 2</li><li> 工程 3</li></ul>4建立不同类型的有序列表 数字列表结构：<ol><li> 工程 1</li><li> 工程 2</li><li> 工程 3</l

11、i></ol>字母列表结构：<ol type= “A<li> 工程 1</li><li> 工程 2</li><li> 工程 3</li></ol>5建立嵌套列表教学过程及 时间分配教学内容例如：<ul ><li>第一章<ul><li> 第一节 </li><li>第二节<ul><li> 知识点 1</li><li> 知识点 2</li></ul>&

12、lt;/li></ul></li><li> 第二章 </li><li>第三章</li></ul>6自定义列表<dl><dl>v/dl>用来创立一个普通的列表，<dt>v/dt>用来创立列表中的上层工程，<dd>v/dd>用来创立列表中最下层工程，<dt>v/dt>和<dd></dd>都必须放在 <dl></dl>标志对之间。总的来说<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记“definition title ，定义标题和

人人文库> 全部分类> 专业文献 > 工程机械

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论