lession02--HTML语言基础之文本

第2讲HTML与DW兰晶Dreamweaver基础启动和退出Dreamweaver8单击“开始”按钮，在开始菜单中依次选择“程序”—“Macromedia”—“MacromediaDreamweaver8”，启动Dreamweaver8程序。启动Dreamweaver8后出现开始界面。Dreamweaver8操作界面网页文件的基本操作新建网页菜单栏中“文件”|“新建”命令||标准工具栏上的按钮“新建文档”对话框中选择“基本页”选项中的“HTML”保存网页菜单栏中“文件”|“保存”||标准工具栏上的按钮关闭网页菜单栏中“文件”|“关闭”||单击文档的窗口右上角的“×”打开网页菜单栏中的“文件”|“打开”||选中文件拖拽到DW中的标签栏预览网页菜单栏中“文件”|“在浏览器中预览”|“Iexplore6.0”使用快捷键为F12在文档工具栏中单击，选择在浏览器中预览插入文本空格ctrl+shift+space硬回车enter软回车shift+enter练习P28图2.6请使用DW编辑出这个故事新建一个页面保存这个页面设置页面的标题段落要分隔首行要空两个汉字的距离HTML语言基础HTML（HyperTextMarkupLanguage）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“html”或“htm”。简单的HTML文档htmlheadtitle你好！/title/headbodyHi,大家好！/body/htmlHTML简介1．围堵标记格式：标记……/标记2．单标记格式：标记/只有起始标记，没有结束标记。3．标记属性格式：标记属性1属性2属性3……各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。完整的HTML1.标记放在“”内2.页面内容要放入页面内的文本、图像、多媒体文件等HTML文档的基本结构：HTML文件开始HEAD标头区开始TITLE.../TITLE标题区/HEAD标头区结束BODY文件主体内容开始文件主体内容……/BODY文件主体内容结束/HTML文件结束其中HTML/HTML之间表示这是个网页文件，是必有的标记。HTML语法结构人——头头——躯干｜姓名标签的嵌套一个标签必须是嵌套在另一个标签内使用的。大小括号原则P18练习请试着写出一个标准的html文件，其文件的标头为自己的名字，内容为自己的爱好。htmlheadtitleTom/title/headbodyMynameisTom.Ilike……/body/html空格空格的HTML码为 段落标记段落标记有两种：br/和p…/pbr/相当于是软回车，p…/p相当于是硬回车，一个p…/p相当于是两个br/p…/p标记的属性中须掌握的是align属性,有三个left/right/center例如：palign=left文字/p练习P28图2.6请使用记事本编辑出这个故事的html页面设置页面的标题段落要分隔首行要空两个汉字的距离字体的设置练习要求在DW中制作《游子吟》的页面：设置标题文字大小及颜色诗文题目为“标题一”作者信息为“标题三”作者姓名为斜体文本居中换行游子吟作者：孟郊慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。文本标记粗体b.../bstrong.../strong请试着写出斜体我是粗体的HTML源码，若下划线的标记是u,则请试着写出我是下划线的HTML源码b我是粗体/bstrong我是粗体/strongu我是下划线/u文本标记斜体i.../iem.../em请试着写出斜体我是斜体的HTML源码i我是斜体/iem我是斜体/em标题显示等级语法格式为：Hn…/Hnn：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大。可以用align属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。文本标记练习要求在记事本中制作出页面：设置标题文字大小及颜色诗文题目为“标题一”作者信息为“标题三”作者姓名为斜体文本居中换行游子吟作者：孟郊慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。文本标记字体标记fontfontface=？size=？color=？…/fontSize：设置字体的显示字号，范围是从“1～7”，其中“3”是默认值。Color：设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。Face：设置文本显示的字体，值为字体的名称。例：fontcolor=“#FF0000”红色/fontPS:fontHTML5中不支持。设置整个页面的字体文本标记特殊字符(P42表3-2)HTML中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“”，这些特殊字符在HTML语言中都有对的转义符，常用的转义符与特殊字符参见下表：HTML代码显示结果说明<小于号或显示标记>大于号或显示标记&&可用于显示其它特殊字符"引号®®注册©©版权™™商标 不断行的空格文本标记上标与下标上标sup.../sup下标sub…/sub请试着写出(1)我是最新消息new其中new要求为红色且为粗斜体(2)a1+a2=b1的HTML源码我是最新消息emsupfontcolor=#FF0000strongnew/strong/font/sup/emasub1/sub+asub2/sub=bsub1/sub练习请在上一个练习的基础上写出作者朝代的HTML源码：朝代为蓝色上标游子吟作者：孟郊(唐)慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。水平线标记hr水平线是在网页上划出一条水平的分割线，用hr来标记水平线。语法格式为：hralign=left/center/rightsize=？width=？color=？Size：设置水平线的高度，以像素为单位。Color：设置水平线的颜色。Width：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，会随着程序窗口的大小而改变。Align：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。文本标记列表在HTML中，列表常用的有“有序列表”和“无序列表”。列表1．有序列表OL基本语法结构为：oltype=nstart=？li项目1li项目2……li项目n/oltype=“1”type=“a”type=“A”type=“i”type=“I”Start表示起始的数值2．无序列表基本语法结构为：ultype=nli项目1li项目2……li项目n/ulType:设置符号形状，有实心圆、小正方形、空心圆三种，具体如下：type=“disk”符号为实心圆。（默认为disk）type=“square”符号为正方形。type=“circle”符号为空心圆。上机P49制作一则通知会议标题为2号标题项目使用无序列表落款为右对齐页面字体大小设为14px扩展知识点元信息标记meta设定关键字metaname=“keywords”content=“value”关键字之间用逗号分隔设定字符集metahttp-equiv=Content-Typecontent=text/html;charset=gb2312设定自动刷新metahttp-equiv=“refresh”content=“value”value的值为秒数设定自动跳转metahttp-equiv=“refresh”content=“value;url=url_value”设定转场效果metahttp-equiv=“page-enter”content=“revealtrans(duration=3,transition=23”转场的时机：page-enterpage-exit网页过渡效果的延续时间:duration