网页制作基础——文字处理

1、第2章 网页制作基础 文字处理2022年4月3日星期日本章内容vHTML基础基础v利用利用HTML创建和测试创建和测试Web页的方法页的方法v利用利用HTML设置标题和文字设置标题和文字v利用利用HTML设置段落设置段落v利用利用HTML进行文本格式的处理进行文本格式的处理v网页工程组织网页工程组织vDreamweaver v作业作业一、 HTML基础v 1标记符 v 标记符又称标签，HTML是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果。v 在HTML中，所有的标记符都用尖括号括起来。例如，表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记

2、符。 如： .v HTML标记符是不区分大小写的，但通常约定标记符使用大写字母，这有利于HTML文档的维护一、 HTML基础v 属性是用来描述对象特征的特性。在HTML中，所有的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔。格式为：v 受影响的内容 v HTML属性通常也不区分大小写。 2HTML文档的基本结构文档的基本结构一个典型的一个典型的HTML文本的基本结构形式如下：文本的基本结构形式如下：v v v v 文本标题文本标题v v v v 文本内容文本内容v v 演示一、一、 HTML基础基础一、一、 HT

3、ML基础基础v （1）HTML标记符v 这两个标记符是HTML文档的标记符。处于文档的最前端，表示文档的开始，即浏览器从开始解释。而则位于文件的最后一行，这样的结果表示这一整份的文档都是HTML语法的文档。 v （2）HEAD标记符 v 是HTML文件头标记符，用来描述HTML首部的内容，说明文档的整体信息。所有首部信息并不会出现在WWW浏览器所看到的窗体中。通常与某些标记符一起使用，如标记符。 一、一、 HTML基础基础v （3）TITLE标记符v 指的是一份文档的标题。通常来说，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于WWW浏览器而言，标题所在的位置虽然依照浏览器的不

4、同而不同，但是大部分都位于浏览器的最上方。 v （4）BODY标记符v 指的是定义出一个HTML文档的体部，位于首部下面。在标记符内的文字，所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中。 一、一、 HTML基础基础v3. 语言字符集语言字符集(Charsets)的信息的信息vv#= GB2312, us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb_2312-80,x-euc-tw, x-cns11643-1, x

5、-cns11643-2, big5 一、一、 HTML基础基础v 3. 语言字符集语言字符集(Charsets)的信息的信息v ASCII码码:iso8859-1，属于单字节编码，最多能表示的字，属于单字节编码，最多能表示的字符范围是符范围是0-255，应用于英文系列。比如，字母，应用于英文系列。比如，字母a的编码的编码为为0 x61=97。v 很明显，很明显，iso8859-1编码表示的字符范围很窄，无法表示编码表示的字符范围很窄，无法表示中文字符。中文字符。v 将以将以中文中文两个字为例，经查表可以知道其两个字为例，经查表可以知道其GB2312编码编码是是d6d0 cec4，Unicode

6、编码为编码为4e2d 6587，UTF编编码就是码就是e4b8ad e69687二、二、 创建和测试创建和测试Web页页v由于HTML文件的实质就是文本文件，因此可以用任何文本编辑器编辑HTML文件，通常可以使用Windows系统中的“记事本”程序。v测试工具： Internet Explorer Firefox + Firebug Plugin二、二、 创建和测试创建和测试Web页页v （1）创建Web页v 保存了Web页之后，在所选择的文件夹中将包含所创建的Web页，可以由IE将其打开。 v （2）发布Web页v 用户创建了Web页之后，通常可以直接将其保存在硬盘、软盘或光盘上，作为一种电

7、子文档，也可以将其发布到Internet上，以便让全世界的浏览者都能够进行浏览。发布Web页时应按以下步骤进行。v 创建本地站点v 申请网页空间v 用FTP上传网页 v 文本格式处理包括文字设置和格式处理。文本格式处理包括文字设置和格式处理。v 1文字设置文字设置v 在网页中为了增强页面的层次，其中的文字可以用不在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型和颜色，通常用同的大小、字体、字型和颜色，通常用FONT标记符标记符来完成。来完成。v FONT标记符设置格式为：标记符设置格式为：v 被设置的文字被设置的文字 v size属性是字号属性，用于控制文字的大小，它的取属性

8、是字号属性，用于控制文字的大小，它的取值既可以是绝对值，也可以是相对值。值既可以是绝对值，也可以是相对值。v face属性是字体标记符，宋体、楷体等。属性是字体标记符，宋体、楷体等。 v color属性可用来控制文字的颜色，属性值可以是颜色属性可用来控制文字的颜色，属性值可以是颜色名称或十六进制值。名称或十六进制值。三、 文本格式处理v字体字体 示例示例v大小可选值：大小可选值：17 示例示例v颜色可选值：颜色可选值： Red, green, blue等等 十六进制组合方法：十六进制组合方法：RGB 示例示例三、 文本格式处理三、 文本格式处理v 转义字符v 空格   v 双

9、引号 "v &符号 &v 左右尖括号 < >v :换行换行v物理字体物理字体(Physical Style) ：粗体：粗体 ：斜体：斜体 ：下划线 ：上标 ：下标 ：删除线 Demo src三、 文本格式处理设置页面属性设置页面属性v（1）设置页面背景颜色）设置页面背景颜色v标记符中使用标记符中使用bgcolor属性可以为网页设属性可以为网页设置背景颜色。置背景颜色。 v（2）设置页面背景图像）设置页面背景图像v单纯使用一种颜色作为背景显然有些单调，网页单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面

10、的背景，使用设计者也可选择特定图案作为页面的背景，使用BODY标记符的标记符的background属性即可。属性即可。HTML语语句为：句为：v 三、 文本格式处理v（3）设置文字和超链接的颜色）设置文字和超链接的颜色vBODY标记符的属性。标记符的属性。 bgcolor - 背景色彩背景色彩 text - 非可链接文字的色彩非可链接文字的色彩 link - 可链接文字的色彩可链接文字的色彩 alink - 正被点击的可链接文字的色彩正被点击的可链接文字的色彩 vlink - 已经点击已经点击(访问访问)过的可链接文字的色彩过的可链接文字的色彩三、 文本格式处理三、 文本格式处理v页面背景图案

11、设置注意事项v使用Dreamweaver会使用绝对路径v修改成为相对路径三、 文本格式处理v绝对路径v默认处理： 当前目录 .v上一级目录 .v目录分隔符： /三、 文本格式处理vDOS下使用相对路径访问文件v访问规则： 默认：当前目录下寻找文件 通过绝对路径或者相对路径来进行访问v分区 分区名称： 例如 D:v切换目录 Cd 目录名称四、利用四、利用HTML设置标题和文字设置标题和文字v在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中n是1到6的数字。表示最大的标题，表示最小的标题。使用标题样式时，必须使用结束标记符。四、利用四、利用HTML设置标题和文字设置标题和文字v

12、标题文字标记符的格式：v 标题文字 v属性align用来设置标题在页面中的对齐方式：vleft（左对齐）、center（居中）或right（右对齐）。默认为左对齐v如:计算机系四、利用四、利用HTML设置标题和文字设置标题和文字v标记符v默认显示宋体，会自动插入一个空行，不必再用空行标记符。v与HEAD中的定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。Demo五、利用五、利用HTML设置段落设置段落v 在HTML中段落处理是通过段落标记来完成的，常用的段落标记符有：v 1注释标记符v HTML的注释标记符的格式为：v 2强制换行标记符v 强制换行标记符为，放在一行

13、的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。 五、利用五、利用HTML设置段落设置段落v 3强制换段标记符v 在HTML文档中，无法用多个回车、空格、Tab键来调整文档段落的格式。要用HTML的标记符来强制换行、分段。v （1）强制换段标记符v 强制换段标记符的格式为：v 文字v （2）设置段落标记符v 设置段落标记符的格式为：v 文字 Demo五、利用五、利用HTML设置段落设置段落v 4显示预排格式标记符v 当用其他编辑工具编排好了一段文字后，其中很可能有一些HTML文件不支持的控制符号，如回车、多个空格、Tab键等。如果希望在浏览网页

14、时仍保留在编辑工具中已经排好的段落格式，可以使用标记符将预先排好的格式保留下来。v 显示预排格式标记符的格式为：v 预先排好的格式有预排无预排五、利用五、利用HTML设置段落设置段落v5分区显示标记符v 分区显示标记符的格式为：v 文本或图像 分区演示五、利用五、利用HTML设置段落设置段落v水平线v在页面中插入一条水平标尺线（Horizontal Rules），可以使不同功能的文字分隔开，看起来整齐、明了。 v水平线标记符的格式为：v水平线练习六、网页工程组织六、网页工程组织v设定一个主目录:防止过多的目录切换v在该主目录下建立几个目录 按照业务或者部门分类 如果构建经管院主页，可以按照系别

15、、实验室、研究中心分别建立不同的目录 学校主页设计 按照类型：Images, css, music, html 可以考虑把图片、音乐子目录放置到按照业务分类的目录下七、七、Dreamweaverv Dreamweaver cs5.5中对文本的输入及编辑，与Word极其相似。v 1编辑文本v （1）换行v 自动换行：在输入文字时，若某一行的长度超过了Dreamweaver窗口的显示范围，文字将自动换到下一行。 v 利用“Enter”键换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。 插入了div标记v 利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出

16、现空白行，可以按“Shift+Enter”键。七、七、Dreamweaverv（2）插入特殊的字符v有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在Dreamweaver 4.0 中，这些特殊字符不仅可以通过“Insert”菜单下的“Special Character”命令来插入，还可以通过对象面板来直接插入。 七、七、Dreamweaverv 2查找替换文本的内容v 如果要在文档中查找或替找某个文字，可利用Dreamweaver 4.0提供的查找和替换功能。选择“Edit”|“Find and Replace”（查找与替换）命令，打开“Find and Replace”对话框，

17、 v 3设置文本格式v 在Dreamweaver 4.0中设置文本格式可以通过属性面板，类似与Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗倾斜、对齐方式（左对齐居中右对齐）、文字所链接的路径或URL等。 七、七、Dreamweaverv v 标记符指Ordered List，它是用来创建一个标有数字的列表；v 标记符用来创建一个标有圆点的列表；v 标记符只能在或标记符内使用，此标记符用来创建一个列表项。 v 示例代码七、七、Dreamweaverv在Dreamweaver中可以方便创建列表中可以方便创建列表 打开设计视图打开设计视图 在选中几行

18、文本后，按下按钮即可。其形状与在选中几行文本后，按下按钮即可。其形状与Word相同相同 选中文本行后，按下选中文本行后，按下“List Item”按钮，设置所需按钮，设置所需要的类型要的类型v增加缩进量增加缩进量 将添加将添加内容内容作业作业 查找自己喜欢的一首诗/词 通过网页展示你的这首诗 要求： 简洁 大方 美观 工具不限第2章 网页制作基础表格、超链接和多媒体2022年4月3日星期日表格的基本语法表格的基本语法v. - 定义表格v - 定义表行v - 定义表头v - 定义表元(表格的具体数据)表格的基本语法表格的基本语法vTABLEvTABLE标记符用于定义整个表格，表格内的所有内容都应

19、该位于和 之间表格的基本语法表格的基本语法vCAPTIONv如果表格需要标题，那么就应该使用CAPTION标记符将表格标题包括在和之间。表格的基本语法表格的基本语法vTRvTR标记符用于定义表格的行，对于每一个表格行，都对应一个TR标记符。TR标记符的结束标记符可以省略。表格的基本语法表格的基本语法vTD和THv在表格行中的每个单元格，都对应于一个TD标记符或者TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。TD与TH的功能和用法几乎完全相同（可以任意混合使用，但效果略有不同）v唯一不同之处在于TD表示普通表格数据，而TH表示表格的行列标题数据（也就是通常所说的表头）。TD和

20、TH的结束标记符都可以省略，并且可以不包括任何内容表格的基本语法表格的基本语法v 示例: a 1 b 2 表格的基本语法表格的基本语法v示例运行结果查看vDreamweaver创建表格 设置行数,列数 输入表格内容 表格修改 添加行 添加列带边框的表格vvFoodDrinkSweet/FoodDrinkSweet vtrABC ABC vv结果结果带边框的表格vDreamweaver修改表格的边框 修改表格属性v步骤 选中表格 修改border属性 设置为大于零的整数值设置为大于零的整数值跨多行、多列的表元跨多行、多列的表元v 跨多列的表元 v v Morning Menuv Food Dri

21、nk Sweetv ABCv v Demo跨多行、多列的表元跨多行、多列的表元vDreamweaver合并列v步骤 选中所需要合并的列(可以是多列) 点击右键 Table-Merge Cells跨多行、多列的表元跨多行、多列的表元v 跨多行的表元 v v Morning Menuv Food Av Drink Bv Sweet Cv v Demo跨多行、多列的表元跨多行、多列的表元vDreamweaver合并列v步骤 选中所需要合并的行内对应的列 点击右键 Table-Merge Cells表格尺寸设置表格尺寸设置 v v 边框尺寸设置： v v FoodDrinkSweetv ABC v v

22、 Demo表格尺寸设置表格尺寸设置 v v 表格尺寸设置： v v FoodDrinkSweetv ABC v v Demo表格尺寸设置表格尺寸设置 v v 表元间隙设置： v v FoodDrinkSweetv ABC v v Demo表格尺寸设置表格尺寸设置 v v 表元内部空白设置： v v FoodDrinkSweetv ABC v v Demo表格内文字的对齐表格内文字的对齐/布局布局 vtr align=# vth align=#v v#=left, center, right#=left, center, right表格内文字的对齐表格内文字的对齐/布局布局 v v v Food

23、DrinkSweetv v Av Bv C v Demo表格内文字的对齐表格内文字的对齐/布局布局 v v #=top, middle, bottom, baselinev表格内文字的对齐表格内文字的对齐/布局布局 v v v FoodDrinkv SweetOtherv v Av Bv Cv Dv demo表格在页面中的对齐表格在页面中的对齐/布局布局v for example: FoodDrinkSweet ABC 表格在页面中的对齐表格在页面中的对齐/布局布局v table vspace=# hspace =# #=space value #=space value FoodDrinkSweetABCv FireFox支持该属性，而IE不支持 Demo表格的标题表格的标题 v . #=left, center, righ