网页设计与制作项目实训教程 严加琼 曾金发 项目4新.pptVIP

项目4 制作纯文本网页 文字是网页中主要的信息载体，也是网页中最为重要的设计元素,用户主要通过文字了解网页的内容。因为纯文本页面所占用的存储空间非常小，在网络上传输速度较快，能快速地被用户打开，因此一般学习网站制作案例都是从纯文本页面开始。整齐美观、大小适中的文本能够体现网页的视觉效果，本项目所制作的“名胜古迹”纯文本网页，效果如图所示。 4.2.1 文本的输入 4.2.2 网页设计视图下编辑文本 4.2.3 插入相关文本要素 4.2.4 文本的格式化 4.2.1 文本的输入 1．输入文本文字 Dreamweaver CS5提供了多种插入文本的方法。标题、栏目名称等少量文本，可以选择直接在文档窗口中键入；段落文本，可以选择从其它文档中复制粘贴；整篇文章或表格，可以选择导入XML文档、表格式数据、Word文档和Excel文档，导入文本界面如图 所示。 2．输入文本空格 在“页面设计窗口”中可以直接输入空格，但只能输入一个空格，如需输入多个空格，可采用以下方法。 （1）切换到代码模式，在想插入空格的代码中插入“nbsp;”即可。 （2）直接使用快捷键【Ctrl+Shift+空格键】。 （3）在输入法中，把输入法变为全角模式，插入空格。 （4）点“编辑”→“首选参数”→“允许多个连续空格”如图所示。 3．实现文本换行 一般Dreamweaver中的文本段落是自动换行的，即在输入文字时，若文字超过了窗口显示范围时，会自动换到下一行。如果在文本输入的过程中需要划分段落，可以使用【Enter】键进行换行，用【Enter】键换行后上下段落的行间距为较大。如果用【Shift+Enter】快捷键进行强制换行，换行所产生的行距为【Enter】键换行所产生行距的一半，如图所示。 4.2.2 网页设计视图下编辑文本 1．选中网页中的文本 把鼠标指针指向要选中的文本开始处，按住鼠标左键并拖选需要选中的文本，拖动到被选中文本的末尾时释放鼠标左键。 2．删除文本操作 使用鼠标选择要删除的文本，先按住【Shift+方向键】选择要删除的文本，使其高亮度显示，然后按Delete键删除，或者单击“编辑”菜单，选择“清除”项进行删除。 如果删除中出现了错误，单击“编辑”菜单，选择“撤消”项，或者按【Ctrl+Z】键，就能回到删除之前的状态了。 3．搜索、替换文本 打开需要编辑的HTML文档，单击“编辑”菜单，选择“查找和替换”项，弹出“查找和替换”对话框，按照“查找和替换”对话框的说明进行操作即可。 4.2.3 插入相关文本要素 1.插入特殊字符 （1）通过菜单“插入”→“HTML”→“特殊字符”插入 先将光标放置到需要插入特殊字符的位置，然后展开菜单“插入”→“HTML”→“特殊字符”，在“特殊字符”的级联菜单中选择需要插入的特殊字符。 （2）通过“文本”插入工具栏插入 先在Dreamweaver CS5的“插入”工具栏中选择“文本”，显示“文本”插入工具栏，如图所示。 将光标放置到需要插入特殊字符的位置，然后单击“文本”插入工具栏的“字符”按钮，弹出级联菜单，在级联菜单中选择所需插入的特殊字符即可。 2．插入文本列表 当需要条列式逐项列出内容时，使用项目符号工具就可以在每一个项目前面加上符号或编号。 （1）项目列表 将鼠标定位在要添加项目列表的段落中。在 “属性”面板中，单击“项目列表”按钮即可对文字添加项目列表符号。如需更改项目列表，将光标定位到需要更改项目列表的文字上。在“属性”面板中，单击“列表项目...”按钮，打开“列表属性”对话框，在对话框中进行列表样式设置。如图所示。 （2）编号列表 若单击编号列表按钮，则项目前面加上的是数字编号，如图所示。 3．插入水平线 （1）在Dreamweaver CS5中打开文档，将光标定位在要插入水平线的位置。 （2）单击“插入”菜单，选择“HTML”项，选择“水平线”命令。或者单击“窗口”菜单，选择“插入”项，打开“插入”面板，在面板中选择“常用”项，单击“水平线”按钮，在文档中就插入了一条水平线。 4．插入时间 在Dreamweaver CS5中打开文档，将光标定位在要插入日期的位置上。单击“插入”菜单，选择“日期”项，或者单击“窗口”菜单，选择“插入”项，打开“插入”面板，在面板上选择“常用”项，单击“日期”按钮，弹出“插入日期”对话框。在弹出的“插入日期”对话框中，选择所需日期格式后，单击“确定”按钮。 4.2.4 文本的格式化 1．文本属性设置 （1）设置字体、字号、颜色 选中要改变字体的文本。单击菜单“插入”→“HTML”选项→“文本对象”选项→“字体”选项，打开“标签编辑器 - font”对话框。左侧列表框选择“常规”选项，在右侧对应的下拉列表框中进行字体、字号、颜色