2_HTML静态网页版面设置_电子教程讲解.ppt

任务1：文字段落与图片的设定 四、网页的基本排版 （1）插入文本元素 在Dreamweaver中可以输入普通文字，也可以输入特殊字符，设置字体大小，改变文本颜色等。 直接输入文本的时候文本是可以自动换行的 如果需要重新开始一段时，按Enter键即可（自动添加p /p标签） 如果按Shift+Enter组合快捷键，会在文本后面添加br标签。 任务1：文字段落与图片的设定 四、网页的基本排版 （2）设置文本属性字体 在Dreamweaver 中可以很方便地设置文本的大小、颜色和样式等格式，使用文本的属性面板可以改变大部分格式，而且全部选项都包含于“文本”菜单命令中。 选择输入文本后，文本的属性如下所示 文本属性 任务1：文字段落与图片的设定 四、网页的基本排版 （3）插入图像 在“插入”面板的“常用”类别中单击“图像”按钮，也可以执行菜单“插入”→“图像”命令。 图像插入到网页后，在“属性”面板中设置图像的属性。 插入“图像”后的属性面板 任务2：页面布局 【任务陈述】 本任务将在网页内容布局排版时使用表格和列表，通过表格使页面中的文字、段落、图片能够更加整齐美观。 任务2：页面布局 【知识准备】 2.5 列表 一、无序列表ul 语法： ul type=符号类型 li第一项/li li第二项/li li第三项/li /ul 无序列表使用的一对标签是ul/ul，无序列表指没有进行编号的列表，每一个列表项前使用li。 ul如果不使用其项目li的属性值，默认情况下的ul会加“实心圆”。 实例 type类型 描述 type= disc 实心圆 type= circle 空心圆 type= square 小方块 任务2：页面布局 2.5 列表 二、有序列表ol 有序列表标记-ol 语法： ol LI第1项 LI第2项 …… /ol 有序列表中，各个列表项使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序性，一般采用数字或者字母作为顺序号。 li标记表示这 是一个列表项的开始，默认情况下，采用数字序号进行排列。 实例 任务2：页面布局 2.5 列表 二、有序列表ol 有序列表的序号类型-type 语法： ol type=序号类型 LI第1项 LI第2项 …… /ol 默认情况下，有序列表的序号是数字的，通过type属性可以调整序号的类型。 在该语法中，序号类型可以有5种 实例 type类型 描述 type=1 表示列表项目用数字标号（1,2,3…） type=A 表示列表项目用大写字母标号（A,B,C…） type=a 表示列表项目用小写字母标号（a,b,c…） type=Ⅰ 表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ…） type=ⅰ 表示列表项目用小写罗马数字标号（ⅰ,ⅱ,ⅲ…） 任务2：页面布局 2.5 列表 二、有序列表ol 有序列表的起始数值-start 语法： ol start=起始数值 LI第1项 LI第2项 …… /ol 默认情况下，有序列表的列表项是从数字1开始的，通过start参数可以调整起始数值。 这个数值可以对数字起作用，也可以作用于英文字母或者罗马数字。 起始数值只能是数字，但是同样可以对字母和罗马数字起作用。 实例 任务2：页面布局 2.5 列表 三、嵌套列表 将一个列表嵌入到另一个列表中，作为另一个列表的一部分，称为嵌套列表。无论是有序列表的嵌套还是无序列表的嵌套，浏览器都可以自动分层排列。 实例 任务2：页面布局 2.5 列表 四、定义列表标签dl/dt/dd 定义列表通常用于术语的定义。 定义列表由dl开始，术语由dt开始，英文意为Definition Term。 术语的解释说明，由dd开始，dd/dd之间的文字缩进显示。 实例 任务2：页面布局 2.6 表格 一、定义表格的基本语法 表格中一般通过三个标签来构建，分别是表格标签table、行标签tr和单元格标签td 表格标签是table和/table 实例 标签 描述 table…/table 用于定义一个表格的开始和结束 tr…/tr 定义表格的一行，一组行标签内可以建立多组由td或th标签所定义的单元格 td…/td 定义表格的单元格，一组td标签将建立一个单元格，td标签必须放在bt标签内 表格标签 任务2：页面布局 2.6 表格 二、表格标签table的属性 表格标签table有很多属性，最常用的属性如表 综合实例 属性 描述 width/height 表格的宽度（高度），值可以是数字或百分比，数字表示表格宽度（高度）所占的像素点数，百分比是表格的宽度（高度）站浏览器宽度（高度）的百分比 align 表格在页面