工信版（中职）网页设计与制作教程3.ppt

《工信版（中职）网页设计与制作教程3.ppt》由会员分享，可在线阅读，更多相关《工信版（中职）网页设计与制作教程3.ppt（46页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、YCF（中职）网页设计与制作教程3项目活动三休闲运动网站设计项目活动三休闲运动网站设计:输入与输入与编辑网页元素编辑网页元素任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本 任务二在网页中插入与编辑图像任务二在网页中插入与编辑图像 任务三休闲运动网站建设任务三休闲运动网站建设返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本一、输入文本一、输入文本应用应用 编辑网页时，编辑网页时，如果需要在空白如果需要在空白网页中输入文本，网页中输入文本，可直接在光标所在位置输入文本，可直接在光标所在位置输入文本，输入方法与其输入方法与其他文本编辑器一样。他文本编辑器一样。如果需要编辑一个已

2、经有内容的网页，如果需要编辑一个已经有内容的网页，则可打则可打开该网页，开该网页，将光标定位到需要输入文字的位置，将光标定位到需要输入文字的位置，输入文本即可。输入文本即可。二、输入空格二、输入空格在默认情况下，在默认情况下，只允许网站设计者只允许网站设计者输入一个空格，输入一个空格，若要连续输入多个空格，若要连续输入多个空格，则需要进行设置或通过特则需要进行设置或通过特定的方式实现。定的方式实现。下面将介绍多种插入空格的方法。下面将介绍多种插入空格的方法。)先在先在“插入插入”面板中找到面板中找到“文本文本”选项卡，选项卡，然后单击其最后面然后单击其最后面的的“字符字符”按钮，弹出一个下拉列

3、表，按钮，弹出一个下拉列表，选择选择“不换行空格不换行空格”命令就命令就可以为文本添加一个空格，可以为文本添加一个空格，如如图图 所示。所示。如果需要添加多个空如果需要添加多个空格则可以在这个按钮上一直单击，格则可以在这个按钮上一直单击，直到达到需要的数目为止。直到达到需要的数目为止。下一页返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本)直接在键盘上按直接在键盘上按“”组合组合键来实现空格的输入。键来实现空格的输入。)在代码视图中进行空格的添加。在代码视图中进行空格的添加。打开代码视图，打开代码视图，可以看到使用前可以看到使用前述方法添加的空格在代码视图中显示为述方法添加的空格在

4、代码视图中显示为“.”。这就是说，这就是说，在代码视图中空格的代码就是在代码视图中空格的代码就是“.”。这时，。这时，只需将空格的只需将空格的代码复制，代码复制，然后根据所需的数量进行粘贴就可以任意添加空格。然后根据所需的数量进行粘贴就可以任意添加空格。)使用全角模式来输入空格。使用全角模式来输入空格。一般情况下，一般情况下，当用户使用中文输入法当用户使用中文输入法进行中文的输入时，进行中文的输入时，有半角和全角两种模式。有半角和全角两种模式。将半角切换为全角后，将半角切换为全角后，再按下空格键也可以添加多个空格。再按下空格键也可以添加多个空格。)还有一个更简单的空格输入方法。还有一个更简单的

5、空格输入方法。在菜单栏上执行在菜单栏上执行“编辑编辑”“首选参数首选参数”命令，命令，打开打开“首选参数首选参数”对话框，对话框，选择选择“分类分类”列表列表中的中的“常规常规”选项，选项，接着再将右边的接着再将右边的“允许多个连续的空格允许多个连续的空格”选项选项选中，选中，如如图图 所示。所示。这样当需要添加空格的时候，这样当需要添加空格的时候，就可以直就可以直接按空格键输入了。接按空格键输入了。上一页 下一页返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本三、输入特殊字符三、输入特殊字符在在 中除了添加空格，中除了添加空格，还需要添加一些特殊还需要添加一些特殊符号，符号，如、

6、如、￥、￥、等。一种方法可单击等。一种方法可单击“插入插入”面板中的面板中的“文文本本”选项卡，选项卡，然后单击其最后的然后单击其最后的“字符字符”按钮，弹出下拉列表，按钮，弹出下拉列表，选选择相应的命令即可，择相应的命令即可，如如图图 所示所示.还有一种方法可用代码，还有一种方法可用代码，特特殊符号的代码表示方法和空格的有些相似，殊符号的代码表示方法和空格的有些相似，也是由前缀也是由前缀“”加上加上字符对应的名称，字符对应的名称，再加上后缀再加上后缀“.”组成，组成，一些常用特殊符号的源代一些常用特殊符号的源代码，码，如如表表 所示。所示。除了上述常用的特殊符号外，除了上述常用的特殊符号外，

7、如果还需要输入其他的特殊符号，如果还需要输入其他的特殊符号，则则可单击可单击“插入插入”“”“特殊字符特殊字符”“其他字符其他字符”选项，选项，弹出弹出“插入其他字符插入其他字符”对话框，对话框，选择相应的字符，选择相应的字符，单击单击“确定确定”按按钮即可，钮即可，如如图图 所示。所示。上一页 下一页返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本四、文字换行与分段四、文字换行与分段在在 中输入文字，中输入文字，按按 键可以分段，键可以分段，中段落与段落之间是隔行换行的。中段落与段落之间是隔行换行的。如果希如果希望前后两行文字之间能够没有距离，望前后两行文字之间能够没有距离，则可

8、以在按着则可以在按着 键的键的同时按下同时按下 键，键，进行强制换行，进行强制换行，这样前后两行文字就可以这样前后两行文字就可以紧挨着了。紧挨着了。强制换行是一个没有结尾的标记，强制换行是一个没有结尾的标记，不用不用 表示，表示，而用而用 来表示。来表示。文件的任何位置只要使用了文件的任何位置只要使用了 标记，标记，当文当文件显示在浏览器中时，件显示在浏览器中时，该位置之后的文字将显示在下一行，该位置之后的文字将显示在下一行，如如图图 和和图图 所示。所示。上一页 下一页返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本五、文字属性的设置五、文字属性的设置对文字属性的设置是在对文字属

9、性的设置是在“属性属性”面板中完成的。面板中完成的。首先输入一段文字，首先输入一段文字，然后将这些文字选中，然后将这些文字选中，“属性属性”面板变为文本的属性，面板变为文本的属性，有有 和和 两种模式，两种模式，分别如分别如图图 和和图图 所示。所示。如果在如果在 界面上不显示界面上不显示“属性属性”面板，面板，则可通则可通过执行菜单命令过执行菜单命令“窗口窗口”“属性属性”，打开打开“属性属性”面板。面板。图图 中的中的“格式格式”选项用于设置标题和段落选项用于设置标题和段落.如果定义了如果定义了 样式，样式，可以通过可以通过“类类”选项为文本选择已经设置好的选项为文本选择已经设置好的 样式

10、样式 按钮用于设置文按钮用于设置文 本的加粗与否本的加粗与否.按钮用于设置文本的倾斜与按钮用于设置文本的倾斜与否。否。上一页 下一页返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本六、文本选项卡的设置六、文本选项卡的设置用户除了可以使用用户除了可以使用“属性属性”面板来对文字进行设置，面板来对文字进行设置，还可以使用还可以使用“插入插入”面板的面板的“文本文本”选项卡来设置文字。选项卡来设置文字。单击单击“插入插入”面板中的面板中的“文本文本”选项卡，选项卡，“文本文本”选项卡的文字设置选项如选项卡的文字设置选项如图图 所所示示在在“文本文本”选项卡中，选项卡中，粗体和斜体的设置和

11、粗体和斜体的设置和“属性属性”面板中的相同。面板中的相同。“加强加强”按钮按钮 和和“强调强调”按钮按钮 的功效和粗体、斜体一样的功效和粗体、斜体一样接着是接着是“段落段落”按钮、按钮、“块引用块引用”按钮和按钮和“已编排格式已编排格式”按钮。按钮。使使用用“段落段落”按钮进行设置，按钮进行设置，实际上和直接按下回车键进行编辑的功实际上和直接按下回车键进行编辑的功效是一样的。效是一样的。关于关于“块引用块引用”的设置，的设置，用户可以先选择一段文字，用户可以先选择一段文字，然后在然后在“文本文本”选项卡中选择选项卡中选择“块引用块引用”按钮，按钮，这样就可以看到如这样就可以看到如图图 所示的中

12、间文字的缩进效果。所示的中间文字的缩进效果。上一页 下一页返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本从从图图 可以看出，可以看出，与选中文字紧挨着的其余几行文字都发生与选中文字紧挨着的其余几行文字都发生了改变。了改变。它们的改变主要是文字缩进，它们的改变主要是文字缩进，即即“块引用块引用”按钮就相当于按钮就相当于“缩进缩进”按钮。按钮。如果再次单击如果再次单击“块引用块引用”按钮，按钮，那么这段文字就会那么这段文字就会继续缩进。继续缩进。“已编排格式已编排格式”按钮按钮 的功能是保留文字在源代码中的格式，的功能是保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。

13、页面中显示的和源代码中的效果完全一致。在使用该功能时，在使用该功能时，需先需先选中一段文字然后再单击选中一段文字然后再单击 按钮。按钮。单击该按钮后文字会发生一些单击该按钮后文字会发生一些变化，变化，所有被选中的文字都会尽量排列成一行，所有被选中的文字都会尽量排列成一行，而且代码视图中原而且代码视图中原来的来的 标签也在单击标签也在单击 按钮后会变为按钮后会变为 。在在 标签中找到之前输入的文字，标签中找到之前输入的文字，然后在这些文字前面重新编排这几行文字，然后在这些文字前面重新编排这几行文字，接着再回到设计视图中，接着再回到设计视图中，就会发现源代码中的文字格式和页面中显示的格式一模一样。

14、就会发现源代码中的文字格式和页面中显示的格式一模一样。上一页 下一页返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本“”“”和和“”按钮与按钮与“属性属性”面板中的面板中的“样式样式”选项里的选项里的“标题标题”选项功效是一样的，选项功效是一样的，也是用来设置标题样式的。也是用来设置标题样式的。后面的后面的“”“”“”及及“”“”“”按钮都是用于列表设置的。按钮都是用于列表设置的。七、为文字添加修饰七、为文字添加修饰在在 中还可以为文字添加多种修饰，中还可以为文字添加多种修饰，如将文字显示为粗体、添加下划线、添加删除线等。如将文字显示为粗体、添加下划线、添加删除线等。单击菜单单击菜

15、单“格式格式”“样式样式”命令即可进行设置，命令即可进行设置，如如图图 所示。所示。上一页 下一页返回任务一在网页中输入与编辑文本任务一在网页中输入与编辑文本八、插入水平线、日期八、插入水平线、日期水平线可以将文字、图像、表格等对象在视觉上分隔开。水平线可以将文字、图像、表格等对象在视觉上分隔开。一篇内容繁一篇内容繁杂的文档，杂的文档，如果合理地放置几条水平线，如果合理地放置几条水平线，就会变得层次分明，就会变得层次分明，便于便于阅读。阅读。在如在如图图 所示的所示的“常用常用”选项卡中，选项卡中，单击单击 按钮，按钮，可插可插入水平线入水平线.也可以通过执行菜单也可以通过执行菜单“插入插入”

16、“”“水平线水平线”命令，命令，插入水平线。插入水平线。在如在如图图 所示的所示的“常用常用”选项卡中，选项卡中，单击单击 按钮，按钮，可插可插入日期入日期.也可以通过执行菜单也可以通过执行菜单“插入插入”“日期日期”命令，命令，插入日期。插入日期。上一页返回任务二在网页中插入与编辑图像任务二在网页中插入与编辑图像一、网页中的图像格式一、网页中的图像格式图像虽然存在着多种文件格式，图像虽然存在着多种文件格式，但但 页面中通常使用的只有三页面中通常使用的只有三种，种，即、即、和。和。和和 文件格式文件格式的支持情况最好，的支持情况最好，大多数浏览器都可以查看它们，大多数浏览器都可以查看它们，文件

17、具有文件具有较大的灵活性并且文件较小，较大的灵活性并且文件较小，因此它们对于几乎任何类型的因此它们对于几乎任何类型的 图像都是最适合的。图像都是最适合的。二、图像的插入二、图像的插入)启动启动 后，后，新建一个空白的页面，新建一个空白的页面，将要将要插入的图像复制到当前站点中，单击插入面板中的插入的图像复制到当前站点中，单击插入面板中的“常用常用”选项卡，选项卡，单击单击“图像插入图像插入”按钮，按钮，在弹出的菜单中选择在弹出的菜单中选择“图像图像”，如如图图 所示。所示。下一页返回任务二在网页中插入与编辑图像任务二在网页中插入与编辑图像)单击单击“图像图像”后，后，将弹出将弹出“选择图像源文

18、件选择图像源文件”对话框，对话框，如如图图 所示。所示。单击单击“站点根目录站点根目录”按钮，按钮，将目录转到站点目录下。将目录转到站点目录下。找到要插入的图像文件，找到要插入的图像文件，选中它，选中它，单击单击“确定确定”按钮，按钮，选中的图像选中的图像将插入到空白页面中。将插入到空白页面中。)按按 键，键，可预览插入图像的效果，可预览插入图像的效果，如如图图 所示。所示。三、图像的编辑三、图像的编辑图像插入到网页中后，图像插入到网页中后，不一定完全符合要求，不一定完全符合要求，还需要对它进行修改还需要对它进行修改加工。加工。这就要使用这就要使用“属性属性”面板进行编辑，面板进行编辑，如如图

19、图 所示。所示。上一页 下一页返回任务二在网页中插入与编辑图像任务二在网页中插入与编辑图像选中图像后，选中图像后，“属性属性”面板自动更新成图像面板自动更新成图像“属性属性”面板，面板，其左上其左上角显示当前图像的缩略图，角显示当前图像的缩略图，同时显示图像文件的大小。同时显示图像文件的大小。在缩略图右在缩略图右侧有一个文本框，侧有一个文本框，在其中可以输入图像的标记名称。在其中可以输入图像的标记名称。图像图像“属性属性”面板中有图像宽度和高度，面板中有图像宽度和高度，如果图像大小与原图不一致的话，如果图像大小与原图不一致的话，这里这里的数字就会用粗体显示，的数字就会用粗体显示，当然也可以通过

20、修改这里的数值对图片进行当然也可以通过修改这里的数值对图片进行缩放缩放在文档中，在文档中，单击一个图像即可将其选中，单击一个图像即可将其选中，被选中的图像周围会出现被选中的图像周围会出现选择框和三个控制点选择框和三个控制点。改变图像的大小有以下两种方法改变图像的大小有以下两种方法:()通过拖动三个控制点可以改变图像的大小。通过拖动三个控制点可以改变图像的大小。按住按住 键，键，再拖动控制点，再拖动控制点，可以使图像在拉伸过程中保持宽高比例不变。可以使图像在拉伸过程中保持宽高比例不变。上一页 下一页返回任务二在网页中插入与编辑图像任务二在网页中插入与编辑图像()选中图像，选中图像，在图像在图像“

21、属性属性”面板中通过设置图像的宽度和高度面板中通过设置图像的宽度和高度来改变图像的大小。来改变图像的大小。一般来说，一般来说，在插入图像之前，在插入图像之前，应该利用其他图应该利用其他图像处理软件对图像进行效果处理，像处理软件对图像进行效果处理，并根据其在网页中所占位置的宽度并根据其在网页中所占位置的宽度和高度进行裁切或压缩，和高度进行裁切或压缩，不推荐直接在不推荐直接在 中中缩放图像。缩放图像。如果改变了图像大小，如果改变了图像大小，可以通过可以通过“撤销撤销”按钮恢复图像按钮恢复图像的原始大小。的原始大小。四、插入其他图像对象四、插入其他图像对象图像占位符相当于图像的临时替代对象。图像占位

22、符相当于图像的临时替代对象。如果网页中的某个图像尚未如果网页中的某个图像尚未制作好，制作好，可暂时用图像占位符来代替。可暂时用图像占位符来代替。.插入图像占位符插入图像占位符执行执行“插入插入”“图像对象图像对象”“图像占位符图像占位符”命令插入图像占位命令插入图像占位符，符，如如图图 所示，所示，设置完成后单击设置完成后单击“确定确定”按钮。按钮。上一页 下一页返回任务二在网页中插入与编辑图像任务二在网页中插入与编辑图像.插入鼠标经过图像插入鼠标经过图像在上网浏览网页时，在上网浏览网页时，我们经常会看到这种情况，我们经常会看到这种情况，将鼠标移动到某一将鼠标移动到某一图片上时，图片上时，图像

23、变成了另外一幅图像，图像变成了另外一幅图像，当鼠标移开时，当鼠标移开时，又恢复成了又恢复成了原来的图像，原来的图像，这就是我们所说的鼠标经过图像这就是我们所说的鼠标经过图像。执行执行“插入插入”“图像对象图像对象”“鼠标经过图像鼠标经过图像”命令插入鼠标经命令插入鼠标经过图像，过图像，如如图图 所示，所示，设置完成后单击设置完成后单击“确定确定”按钮。按钮。上一页返回任务三休闲运动网站建设任务三休闲运动网站建设)创建本地站点，创建本地站点，将素材文件夹中的将素材文件夹中的 中的休闲运动网站文件中的休闲运动网站文件夹中的素材文件夹下的所有文件及文件夹复制到本地根文件夹中。夹中的素材文件夹下的所有

24、文件及文件夹复制到本地根文件夹中。)在在 中打开中打开.，将光标定位到表格的第一个单元格中，将光标定位到表格的第一个单元格中，切换到代码视图，切换到代码视图，光标定位光标定位到到 标签中，标签中，设置背景图片为设置背景图片为.，设置单元格的高设置单元格的高度为度为 像素，像素，代码为代码为，效果如，效果如图图 所示。所示。)切换到设计视图中，切换到设计视图中，将光标定位到设置背景图片的单元格中，将光标定位到设置背景图片的单元格中，执执行菜单行菜单“插入插入”“媒体媒体”“”命令，命令，插入。插入。选中，选中，在在“属性属性”面板中，面板中，设置设置“宽宽”“高高”分别为分别为 和，和，保存。保

25、存。按按 浏览网页，浏览网页，效果如效果如图图 所示。所示。下一页返回任务三休闲运动网站建设任务三休闲运动网站建设)在在图图 中，中，背景为黑色，背景为黑色，为了实现为了实现图图 所示效果，所示效果，需设置需设置 背景为透明。背景为透明。选中，选中，在在“属性属性”面板的面板的“”选项卡的下拉菜单中，选项卡的下拉菜单中，选择选择“透透明明”，即可完成设置。即可完成设置。)将光标定位到表格的第二个单元格中，将光标定位到表格的第二个单元格中，执行菜单执行菜单“插入插入”“图图像像”命令，命令，插入插入 文件夹中的文件夹中的.图像，图像，保存，保存，浏览网页效果，浏览网页效果，如如图图 所示。所示。

26、上一页 下一页返回任务三休闲运动网站建设任务三休闲运动网站建设)将光标定位到导航下方左侧的第将光标定位到导航下方左侧的第 个单元格中，个单元格中，在属性面板的在属性面板的“背景颜色背景颜色”文本框中输入文本框中输入“”，将光标定位到该单将光标定位到该单元格中，元格中，输入文字输入文字“会员登录会员登录”。)将光标定位到将光标定位到“会员登录会员登录”下方的单元格中，下方的单元格中，执行菜单执行菜单“插入插入”“图像图像”命令。命令。在打开的在打开的“选择图像源文件选择图像源文件”对话框中，对话框中，选择图选择图像像.，单击单击“确定确定”按钮，按钮，插入图像插入图像。)在下面的在下面的 行行

27、列表格的三个单元格中分别输入文字列表格的三个单元格中分别输入文字“运动服运动服”“运动鞋运动鞋”“运动帽运动帽”，选择该表格，选择该表格，切换到代码视图，切换到代码视图，在在 标签中，标签中，加入代码加入代码 /.，代码视图中的代码如下代码视图中的代码如下:上一页 下一页返回任务三休闲运动网站建设任务三休闲运动网站建设)在在“运动服运动服”“运动鞋运动鞋”“运动帽运动帽”所在表格下方插入图像所在表格下方插入图像.，保存网页，保存网页，按按 键浏览，键浏览，效果如效果如图图 所示。所示。)在在图图 的右侧空白单元格中，的右侧空白单元格中，输入输入“运动与生命运动与生命”，按按“”键换行键换行。)

28、插入水平线，插入水平线，执行菜单执行菜单“插入插入”“”“水平线水平线”命令，命令，插入水平线插入水平线。)按按 键分段，键分段，输入文字输入文字“生命是宝贵的。生命是宝贵的。人生犹如人生犹如百代过客，百代过客，电光火石，电光火石，来去匆匆。来去匆匆。珍惜生命。珍惜生命。保持健康的身体，保持健康的身体，离不开运动。离不开运动。生命在于运动，生命在于运动，运动在于锻炼，运动在于锻炼，锻炼贵在坚持，锻炼贵在坚持，坚持坚持就是胜利就是胜利”。)将光标定位到这段文字的开始位置，将光标定位到这段文字的开始位置，按住按住“空格空格”组合键，组合键，输入连续空格输入连续空格。上一页 下一页返回任务三休闲运动

29、网站建设任务三休闲运动网站建设)将光标定位到这段文字的结束位置，将光标定位到这段文字的结束位置，按住按住“”组合键，组合键，分段。分段。)将光标定位到文档底部的单元格中，将光标定位到文档底部的单元格中，在属性面板中，在属性面板中，设置单元设置单元格的背景颜色为格的背景颜色为“”，并且在单元格中输入版权信息，并且在单元格中输入版权信息，插入版权符号，插入版权符号，执行菜单执行菜单“插入插入”“”“特殊符号特殊符号”命令，命令，插入版权符号，插入版权符号，输入其他文字。输入其他文字。)保存文档，保存文档，按键盘上的按键盘上的 键浏览页面，键浏览页面，效果如效果如图图 所示。所示。上一页返回图图 添

30、加空格菜单添加空格菜单返回图图 设置允许连续输入空格设置允许连续输入空格返回表表 特殊符号的源代码特殊符号的源代码返回图图“插入其他字符插入其他字符”对话框对话框返回图图 页面窗口页面窗口返回图图 源代码源代码返回图图“属性属性”面板面板 模式模式返回图图“属性属性”面板面板 模式模式返回图图“颜色颜色”选项卡选项卡返回图图“文本文本”选项卡选项卡返回图图“块引用块引用”按钮的使用按钮的使用返回图图 文字的修饰文字的修饰返回图图“常用常用”选项卡选项卡返回图图 插入图像插入图像返回图图“选择图像源文件选择图像源文件”对话对话框框返回图图 预览插入图像的效果预览插入图像的效果返回图图 图像图像“属性属性”面板面板返回图图“图像占位符图像占位符”对话框对话框返回图图“插入鼠标经过图像插入鼠标经过图像”对对话框话框返回图图 休闲运动网站效果图休闲运动网站效果图返回图图 设置单元格背景图片及高设置单元格背景图片及高度度返回图图 插入插入 后的网页后的网页返回图图 插入导航效果图插入导航效果图返回图图 输入文字、插入图像效果图输入文字、插入图像效果图返回图图 休闲运动网站最终效果图休闲运动网站最终效果图返回