三章网页图文网页上的文本编辑ppt课件.ppt

第三章第三章 网页图文网页图文韦妍韦妍网页设计与制作多媒体元素的插入多媒体元素的插入多媒体元素的插入多媒体元素的插入教学任务教学任务教学任务教学任务网页上的文本编辑网页上的文本编辑网页上的文本编辑网页上的文本编辑网页上的图像编辑网页上的图像编辑网页上的图像编辑网页上的图像编辑CSSCSS样式设置文本格式样式设置文本格式样式设置文本格式样式设置文本格式1 12 23 34 4第三章第三章第三章第三章 网页图文网页图文网页图文网页图文教学重点与教学重点与教学重点与教学重点与难难点点点点多媒体元素的插入多媒体元素的插入多媒体元素的插入多媒体元素的插入网页上的图像编辑网页上的图像编辑网页上的图像编辑网页上的图像编辑CSSCSS样式设置文本格式样式设置文本格式样式设置文本格式样式设置文本格式2 23 34 4第三章第三章第三章第三章 网页图文网页图文网页图文网页图文43.1 .1新建网页文件与文件夹1.1.新建网新建网页页文件与文件文件与文件夹夹的操作步的操作步骤骤：：（（1 1）移）移动动鼠鼠标标在文件面板中在文件面板中选择选择站点根文件站点根文件夹夹后，后，单击单击鼠鼠标标右右键键，再，再从从弹弹出的快捷菜出的快捷菜单单中中选择选择“ “新建文件新建文件” ” 或或“ “新建文件新建文件夹夹” ” 命令。

命令2 2）出）出现现新建的网新建的网页页文件或文件文件或文件夹夹后，后，输输入文件名或文件入文件名或文件夹夹名称并按名称并按下回下回车键车键第三章第三章第三章第三章 网页图文网页图文网页图文网页图文3.1 3.1 .1.1新建网新建网页页文件与文件文件与文件夹夹（（2 2）文件夹和文件命名规则）文件夹和文件命名规则l l汉语汉语拼音：根据每个拼音：根据每个拼音：根据每个拼音：根据每个页页面的面的面的面的标题标题或主要内容，提取两三个概括字，将它或主要内容，提取两三个概括字，将它或主要内容，提取两三个概括字，将它或主要内容，提取两三个概括字，将它们们的的的的汉语汉语拼音作拼音作拼音作拼音作为为文件名如文件名如文件名如文件名如“ “公司公司公司公司简简介介介介” ”页页面可提取面可提取面可提取面可提取“ “简简介介介介” ”这这两个字的两个字的两个字的两个字的汉语汉语拼音，文件名拼音，文件名拼音，文件名拼音，文件名为为“jianjie.html”“jianjie.html” l l拼音拼音拼音拼音缩缩写：根据每个写：根据每个写：根据每个写：根据每个页页面的面的面的面的标题标题或主要内容，提取每个或主要内容，提取每个或主要内容，提取每个或主要内容，提取每个汉汉字的第字的第字的第字的第1 1个字母个字母个字母个字母作作作作为为文件名。

如文件名如文件名如文件名如“ “公司公司公司公司简简介介介介” ”页页面的拼音是面的拼音是面的拼音是面的拼音是“gongsijianjie”“gongsijianjie”，那么文件名，那么文件名，那么文件名，那么文件名就是就是就是就是“gsjj.html”“gsjj.html”第三章第三章第三章第三章 网页图文网页图文网页图文网页图文3.13.1.1.1 新建网新建网页页文件与文件文件与文件夹夹（（2 2）文件夹和文件命名规则）文件夹和文件命名规则l l英文英文英文英文缩缩写：适用于写：适用于写：适用于写：适用于专专有名有名有名有名词词例如，“Active Server Pages”“Active Server Pages”这这个个个个专专有名有名有名有名词词一般用一般用一般用一般用ASPASP来代替，因此文件名来代替，因此文件名来代替，因此文件名来代替，因此文件名为为“asp.html”“asp.html” l l英文原英文原英文原英文原义义：：：：这这种方法比种方法比种方法比种方法比较实较实用、准确如可以将用、准确如可以将用、准确如可以将用、准确如可以将“ “图书图书列表列表列表列表” ”页页面面面面命名命名命名命名为为“BookList.html”“BookList.html”。

第三章第三章第三章第三章 网页图文网页图文网页图文网页图文3.1 3.1 .1.1新建网新建网页页文件与文件文件与文件夹夹（2）文件夹和文件命名规则以上以上4种命名方式有种命名方式有时会与数字、符号会与数字、符号组合使用例如合使用例如“Book1.htm”、、“Book_1.htm”一个网站中最好不要使用不同的命名一个网站中最好不要使用不同的命名规则，以免，以免造成造成维护上的麻上的麻烦第三章第三章第三章第三章 网页图文网页图文网页图文网页图文83.1.2 文本插入与编辑1.1.文本的插入文本的插入（（1 1）移）移动动鼠鼠标标到菜到菜单栏执单栏执行行【【文件文件】】→→【【打开打开】】命令，命令，选择选择并打开所需并打开所需的文本文件（的文本文件（DreamweaverDreamweaver会自会自动动打开打开纯纯文本格式的文本文件）如文本格式的文本文件）如图图3-13-1所示第三章第三章第三章第三章 网页图文网页图文网页图文网页图文9• •提示：在提示：在【【文件文件】】面板中双击相应的文本文件也可打开面板中双击相应的文本文件也可打开第三章第三章第三章第三章 网页图文网页图文网页图文网页图文101.1.文本的插入文本的插入（（2 2）接着）接着执执行菜行菜单栏单栏【【编辑编辑】】→→【【全全选选】】命令。

如命令如图图所示第三章第三章第三章第三章 网页图文网页图文网页图文网页图文111.1.文本的插入文本的插入（（3 3））选选取文本后，取文本后，执执行菜行菜单栏单栏【【编辑编辑】】→→【【拷拷贝贝】】命令4 4）切）切换换至至编辑编辑窗口后，移窗口后，移动动鼠鼠标标到菜到菜单栏执单栏执行行【【编辑编辑】】→→【【粘粘贴贴】】，将，将复制的文本粘复制的文本粘贴贴到网到网页页上 提示：除了提示：除了导导入文本文件外，若看到入文本文件外，若看到别别人的网人的网页页内容，有可以借内容，有可以借鉴鉴的，的，也可以利用复制也可以利用复制HTMLHTML与粘与粘贴贴HTMLHTML功能，把那一段文本功能，把那一段文本连连同格式复制同格式复制过过来第三章第三章第三章第三章 网页图文网页图文网页图文网页图文122.文本的编辑 网网页页上的段落文本分上的段落文本分为为：：• • 有有有有项项目符号• • 没有没有没有没有项项目符号 分隔段落文本有两种方法：分隔段落文本有两种方法：• • 按按按按【【【【EnterEnter】】】】键键分段会造成分段会造成分段会造成分段会造成较较大行距的段落大行距的段落大行距的段落大行距的段落间间距。

距• 按按【【Shift+EnterShift+Enter】】】】键则键则只是只是只是只是换换行而已第三章第三章第三章第三章 网页图文网页图文网页图文网页图文13（（ 1 1））编编排文本段落排文本段落①①将光将光标标移到要分段的位置后，按下移到要分段的位置后，按下【【EnterEnter】】键键②②当按下当按下【【EnterEnter】】键时键时，，则则会造成会造成较较大行距的段落如大行距的段落如图图所示第三章第三章第三章第三章 网页图文网页图文网页图文网页图文14• •若按下若按下【【ShiftShift】】+ +【【EnterEnter】】键键，，则则只是只是强强迫文本迫文本换换行而已如行而已如图图所示第三章第三章第三章第三章 网页图文网页图文网页图文网页图文15（（2 2）修改文本）修改文本颜颜色与字体色与字体①① 移移动动鼠鼠标选标选取文本后，打开取文本后，打开【【属性属性】】面板，在面板，在“ “格式格式” ”列表中列表中选择标题选择标题1 1，接着在，接着在“ “字体字体” ”列表中列表中选择选择“ “编辑编辑字体列表字体列表” ”②②出出现现【【编辑编辑字体列表字体列表】】对话对话框后，在框后，在“ “可用字体可用字体” ”列表中列表中选择选择要置入的字要置入的字体，接着体，接着单击单击 按按钮钮。

如下如下图图所示③③将需要使用到的字体置入将需要使用到的字体置入“ “选择选择的字体的字体” ”列表中后，最后列表中后，最后选择选择 按按钮钮④④回到回到编辑编辑画面后，移画面后，移动动鼠鼠标标到到“ “字体字体” ”列表中列表中选择刚选择刚才新增的字体才新增的字体第三章第三章第三章第三章 网页图文网页图文网页图文网页图文16第三章第三章第三章第三章 网页图文网页图文网页图文网页图文17（（2 2）修改文本）修改文本颜颜色与字体色与字体⑤⑤再再单击单击 文本文本颜颜色按色按钮钮，从，从弹弹出的色板中出的色板中选择选择文本的文本的颜颜色，如色，如图图所示然后然后选择选择　　 居中居中对齐对齐按按钮钮，将文本居中，将文本居中对齐对齐第三章第三章第三章第三章 网页图文网页图文网页图文网页图文183.1.3 列表设置 当需要条列式一当需要条列式一项项一一项项列出内容列出内容时时，使用，使用项项目符号工具就目符号工具就可以在每一个可以在每一个项项目前面加上符号或目前面加上符号或编编号。

号1.设置列表 选选取要取要设设置置项项目符号的内容后，接着启目符号的内容后，接着启动动【【属性属性】】面板，然后面板，然后单击单击 项项目列表按目列表按钮钮设设置完置完项项目符号后目符号后显显示出如下示出如下图图所示的效果所示的效果第三章第三章第三章第三章 网页图文网页图文网页图文网页图文19第三章第三章第三章第三章 网页图文网页图文网页图文网页图文20• •若若单击单击 编编号列表按号列表按钮钮，，则项则项目前面加上的是数字目前面加上的是数字编编号，如号，如图图所示第三章第三章第三章第三章 网页图文网页图文网页图文网页图文212.更改项目符号样式 在在【【属性属性】】面板里，系面板里，系统统默默认认的列表的列表项项目有目有项项目列表和目列表和编编号列表两种，号列表两种，也可以修改符号或也可以修改符号或编编号的号的样样式更改项项目符号或目符号或编编号号样样式的操作步式的操作步骤骤如如下：下：（（1 1）将光）将光标标移到列表移到列表项项目中，打开目中，打开【【属性属性】】面板，接着面板，接着单击单击 按按钮钮。

2 2）出）出现现【【列表属性列表属性】】对话对话框后，在框后，在“ “列表列表类类型型” ”菜菜单单中中选择选择“ “项项目列表目列表” ”或或“ “编编号列表号列表” ”（如（如图图所示），接着在所示），接着在“ “样样式式” ”下拉列表中下拉列表中选择选择相相应应的符号或的符号或编编号（如号（如图图所示），然后所示），然后单击单击 按按钮钮第三章第三章第三章第三章 网页图文网页图文网页图文网页图文22第三章第三章第三章第三章 网页图文网页图文网页图文网页图文23•由于所有的列表由于所有的列表项项目被目被视为视为同一个段落，因此完成同一个段落，因此完成设设置后，所有置后，所有项项目符号或目符号或编编号就会号就会变变成所成所选选的正方的正方形或大写形或大写罗马罗马数字（如数字（如图图所示），而不需要一所示），而不需要一项项一一项项修改第三章第三章第三章第三章 网页图文网页图文网页图文网页图文243.1.4 网页版面布局 在制作网在制作网页页的的过过程中，若是遇到程中，若是遇到较较复复杂杂的画面，可以使用的画面，可以使用编辑辅编辑辅助工具，助工具， 如如标标尺（尺（RulersRulers）） 、网格、网格线线（（GridGrid）） 等，等，以提高制作网以提高制作网页页的效率。

的效率 1 1．．标标尺尺 执执行行【【查查看看】】菜菜单单→→【【标标尺尺】】→→【【显显示示】】命令在编辑编辑区区 上出上出现现的刻度就是的刻度就是标标尺（如尺（如图图所示），它可以作所示），它可以作为摆为摆放放对对象位置的依象位置的依据 第三章第三章第三章第三章 网页图文网页图文网页图文网页图文25第三章第三章第三章第三章 网页图文网页图文网页图文网页图文262 2．网格．网格线线 网格网格线线主要的作用是能主要的作用是能够够更方便地排列更方便地排列图图形位置，有了网格形位置，有了网格线线就可就可以很快地看到以很快地看到对对象与象与对对象之象之间间的的间间距，而距，而这这些网格些网格线线在在实际浏览时实际浏览时是看不到的是看不到的步步骤骤：： 执执行行【【查查看看】】菜菜单单→→【【网格网格设设置置……】】→→【【显显示网格示网格】】命令命令 选择显选择显示网格示网格线线功能后，功能后，编辑编辑区就会出区就会出现现淡淡绿绿色的网色的网 格格线线第三章第三章第三章第三章 网页图文网页图文网页图文网页图文27网格线第三章第三章第三章第三章 网页图文网页图文网页图文网页图文283.1.5 项目实训项项目一目一1.1.实训题实训题目目 “ “长长城城——世界建筑史上一大奇迹世界建筑史上一大奇迹” ”网网页页2.2.实训实训目的目的 通通过过制作制作该该网网页页作，可以掌握文本的作，可以掌握文本的标题设标题设置、文字的移置、文字的移动动和和复制、文字的复制、文字的查查找与替找与替换换等基本等基本设计过设计过程。

程第三章第三章第三章第三章 网页图文网页图文网页图文网页图文293.3.实训实训案例效果案例效果第三章第三章第三章第三章 网页图文网页图文网页图文网页图文网页设计与制作。