项目三 编辑网页文本（课件）- 高一《网页设计与制作》同步教学（机工版·2018）

项目三 编辑网页文本 > = = 任务一 新建页面、录入文字 = 网页分类 创建网页 页面属性 文字录入 = 本节提纲 = 网页分类 静态网页：.html、.htm、.shtml等。 静态网页有以下特点： 1．板式固定，一旦确定，不易修改。 2．速度快，成本低。 3． 对服务器要求较低，但存储压力较大。 动态网页：.asp、.jsp、.php，网页会根据访问的用户不同而显示不同的信息，这些信息取决于用户提供的数据，并存储在数据库中。 动态网页的特点有： 1．灵活，有很强的交互性。 2．功能更多。 3．数据库支持，维护方便。。 = 4 创建网页 “文件”菜单栏 新建 HTML 创建 = 页面属性 外观（CSS） 链接 标题 外观（HTML） 标题/编码 跟踪图像 = = 7 文字录入 在输入文字的过程中，我们可能会给文字进行换行操作，让不同内容的文字显示在不同段落。在Dreamweaver中，有分段和分行两种换行的方式： 1．分段：按Enter键输入，在代码界面产生<p>标签，也称段落标签，将文本彻底的分开，成为两个段落。 2．分行：按Enter+shift输入，在代码界面产生<br>标签，也称换行符，这时文字也会落到下一行去，但行与行中间不会产生空白行，上下的文本也依旧在同一个段落中。 = 自主练习 = 利用dreamweaver软件制作一个黑色（#000）背景白色（#FFF）文字的网页。 【练习1】 使用Dreamweaver软件，结合页面设置操作，完成一个类似下图的自我介绍网页。 【练习2】 任务二 设置本文格式 = 文本属性栏 = HTML 格式 格式下拉列表中有已经预设好的“标题1”到“标题6”，他们分别表示网页中的各级标题，对应的字体从大到小且都为加粗，“标题1”最大。在代码界面中，“标题1”显示的标签为<h1></h1>，“标题2”为<h2></h2>，以此类推。 ID 用来标志文本，在该选项中，我们可以手动输入id的值，也可以从下拉列表中选择已有的id值。 类 给选中的文字添加相应的CSS样式，可在下拉列表中选择已有的样式对文字进行设置。 。 = HTML 粗体、斜体 对选中的文字进行粗体和斜体的修改，按下按钮表示运用效果，若不需要该效果，则再按一次该按钮。 格式控制 （1）项目列表：点击按钮可将选中的文本转换为项目列表。 （2）编号列表：点击按钮可将选中的文本转换为编号列表。 （3）文本突出和缩进：在有区别的段落中使用，可将段落向左凸出一级或向右缩进一级。 链接 对选中的文本添加超链接，可直接输入链接的地址，也可以点击指向文件和浏览文件按钮进行添加。 。 = CSS 目标规则 该属性是从CSS样式中分离出来的功能，为了更快速的为文本设置已经定义好的CSS样式。点击编辑规则按钮，可以对选择的CSS样式进行编辑，也可以在下拉列表中新建CSS样式。 字体 在设置文本的字体时，可以在下拉列表中有许多可以选择的字体，没有修改时为默认字体，即浏览器的默认字体。下拉列表中有14种预设的字体，若在其中找不到需要的字体，可以点击编辑字体列表，在窗口中选择新的字体。添加新字体时需要注意，字体必须添加到选择的字体中才会出现在下拉列表中。 大小 设置文本大小时，可以直接输入数字，也可以选择下拉列表中预设的数值，文本的大小单位为像素（px）。 。 = CSS 字体颜色 前面我们说过可以在页面属性中修改文本的颜色，但那是对整个网页中所有的文本颜色进行修改，此处的文本颜色是可以仅对某一段文本进行设置的，用光标选中要修改的文本即可。设置颜色时，可以输入颜色代码，也可以从拾色器中直接选择。 对齐方式 文本的对齐方式有四种：“左对齐”、“右对齐”、“居中对齐”和“两端对齐”，需要设置时按下对应的按钮即可，默认的对齐方式为“左对齐”方式。 。 = 自主练习 = 利用dreamweaver软件制作如下图所示的网页。 【练习1】 任务三 了解网页设计基础 = 特殊文本元素 水平线 空格 时间 特殊字符 = 特殊字符 表达方式 1．数字参考 使用数字来表示网页中的特殊字符，这种方式有一种特定的格式：“&#D;”，其中D为一个数值，不同的数值表示不同的字符，如“&#169;”为版权符号“©”。 2．实体参考 跟数字参考相对，采用有意义的名称来表示网页中的特殊字符，它也有特定的格式：前缀“&”和后缀“;”，中间为表示字符地名称，不同的字符有不同的名字，如“&reg;”表示注册商标“®”。每一个特殊字符都有对应的数字参考和实体参考。 = 自主练习 = 利用dreamweaver软件制作如下图所示的网页。 【练习1】 谢谢 = = $