《网页制作实用教程 教学课件 ppt 作者 张淑清2 第三章》由会员分享，可在线阅读，更多相关《网页制作实用教程 教学课件 ppt 作者 张淑清2 第三章（33页珍藏版）》请在金锄头文库上搜索。
1、网页设计实用教程,第 三 章,第三章：网页元素的添加-文字、图像和链接,本章主要介绍如何在网页中添加文字、图像并设置超级链接。重点介绍文本格式编排、CSS样式表的创建及其对版面的控制与美化，插入图像和建立超级链接，其中CSS样式表是本章的难点。,目标要求,第三章：网页元素的添加-文字、图像和链接,插入文本 文本格式编排 查找和替换 CSS样式表的应用 插入图像 设置超级链接,讲课提纲,编辑文字,一个网页最离不开的是文字。文字是网页的灵魂，是构成网页的重要表达工具。 Dreamweaver的文本编辑方法与Word等程序相似，我们这里重点介绍的是Dreamweaver特有的文本编辑方法。,文本的输
2、入,直接输入方式 剪切、复制和粘贴方式 从其他文档中导入文本方式 注：在字符间添加空格 插入换行符和特殊字符,插入水平线,水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。在文档中插入水平线的方法很简单，只要将插入点放在要插入水平线的位置，然后执行下列操作之一： l 选择菜单命令“插入 | HTML | 水平线” l 在“插入”栏的“HTML”类别中单击 （水平线）按钮 若要修改水平线，选择水平线后可利用“属性”面板根据需要对该水平线的属性进行修改。,插入日期,将当前日期插入到文档中，可以按如下方法操作。 在“文档”窗口中，将插入点放在要插入日期的位置。 选
3、择菜单命令“插入 | 日期”或者在“插入”栏的“常用”类别中，单击 （日期）按钮。 在出现的“插入日期”对话框中（如图所示），选择星期格式、日期格式和时间格式。 如果希望在每次保存文档时都更新插入的日期，请选择“储存时自动更新”。如果希望日期在插入后变成纯文本并永远不自动更新，则取消选择该项。 单击“确定”按钮。,段落格式的设置,段落是指具有统一格式的一段文本，而标题是用于强调段落主题的文本。段落格式的设置主要包括：设置标题格式、段落对齐方式以及设置段落缩进。,字符格式的设置,字符格式包括字体大小、字体类型（如宋体、楷体）、颜色及字符样式（如粗体、斜体、下划线）等。字符格式可以应用于所选文本、
4、段落和文本块。,创建列表,列表一般用于突出主题的重点或分类对象的属性。它常被用来格式化包含逻辑关系的文本信息。 在Dreamweaver MX 2004文档窗口中，可以用现有文本或新文本创建编号列表（有序列表）、项目符号列表（无序列表）和定义列表。此外，列表还可以嵌套。,文本样式,使用CSS样式以像素为单位设置字体大小，可以确保页面的布局与外观在各种浏览器中保持一致。 CSS样式能够让用户更加方便、有效地对文本进行控制，用户只要创建了某个样式，可将该样式应用到多个地方，达到“创建一次，多次使用”的目的。大大提高文本格式排版的效率，方便用户统一网站的整体风格。,什么是css样式？,css样式表是
5、控制文本或文本区外观的一组格式属性，是一系列格式设置规则。 css样式表可以非常灵活地控制网页的外观，从精确的布局定位到特定的字体和样式，样式表包括文档中的所有格式。使用外部样式表还可以一次作用于若干篇文档甚至整个站点 。,创建CSS样式（一）,创建CSS样式，其操作步骤如下 ： 单击“CSS样式”面板右下角的 （新建CSS样式）按钮，打开“新建CSS样式”，对话框,创建CSS样式（二）,在“选择器类型”选区中选择所要创建样式的类型 。 输入名称、标签或选择器。 “定义在”选区是要求用户在此填写样式表的存储位置。 在打开的“CSS样式定义”对话框中对各个参数进行设置,创建CSS样式（三）,设置
6、完成后，单击“确定”按钮，新创建的CSS样式就会出现在“CSS样式”面板中，如图 样式表设计完成后，还可以重命名样式表、将该样式表应用到选定文字等操作,编辑CSS样式,要编辑CSS样式，可按如下步骤操作。 在标签检查器中，单击“相关CSS”选项卡查看当前文档中的CSS 样式。 将插入点置于要编辑CSS样式的文本中。（“相关CSS”选项卡中将以蓝色背景显示选中文本所应用的CSS样式）。 在“相关CSS”选项卡中双击该样式名称。（“CSS样式”面板中将以灰色背景显示该样式名称）。 在“CSS样式”面板中选中该样式名称，单击位于“CSS样式”面板底部的“编辑样式”按钮。 在出现“CSS样式定义”对话
7、框中根据需要修改样式，然后单击“确定”。 所作的更改将立即应用于当前文档，使您可以在更改的同时进行预览。如果编辑的是存储在外部样式表中的样式，务必保存更改，以便查看是否应用了更新。,编辑CSS样式表,CSS样式表通常包含一个或多个样式。您可以编辑 CSS 样式表中的单个样式，但有时需要编辑多个样式。 要编辑CSS样式表，可按如下步骤操作。 在“CSS 样式”面板中，单击要编辑的样式表以选中它。 单击位于“CSS 样式”面板底部的（编辑样式表）按钮。 所选CSS样式表的样式随即出现在对话框中。 在对话框中，根据需要对一个或多个CSS样式进行编辑。 单击“完成”按钮，保存对样式表的修改。,删除CS
8、S样式,要删除CSS样式，在“CSS样式”面板中选择需要删除的CSS样式后单击 删除CSS样式）按钮；或右击该样式，在弹出的快捷菜单中单击“删除”命令。,在网页中添加图像,图像可以为站点增色不少，使站点更具有吸引力。目前，图象格式有GIF、JPEG（包括JPG和JEPG）和PNG三种，而用得最广泛的是GIF和JPEG这两种格式。 GIF：最多只能显示256种颜色，适合于色彩要求较低的导航条、按钮、图标和项目符号等。 JEPG：压缩率很高，可显示数百万种颜色。适合于对色彩要求较高的风景画、照片等。 PNG：是一种替代 GIF 格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及Alph
9、a通道透明的支持。PNG文件具有较大的灵活性并且文件较小，对于几乎任何类型的Web图形都是最适合的。,图像的添加和设置,插入图像操作 改变图像大小 设置图像的对齐属性 设置图像的垂直边距与水平边距 设置图像的替代文字 设置图像边框,超级链接,链接是Internet的核心，没有链接，就没有World Wide Web 。 链接的类型有： 1、文字超级链接 2、图片超级链接 3、命名锚记 4、空链接 5、电子邮件链接 6、下载链接,文字超级链接,选中作链接文字,选定链接目标文档,图片超级链接,1图像链接：选中图像，利用属性面板进行相关的设置即可。 2图像映射：图像映射就是指在一幅图像中定义若干个区
10、域（这些区域被称为热点），每个区域中指定一个不同的超链接，当单击不同的区域时可以跳转到相应的目标页面。,空链接,空链接是指没有指定目标文件的链接，这样的超链接在单击时不进行任何跳转。 为文本创建空链接时，只要先在文档窗口中选择文本，然后在“属性”面板中“链接”框中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为，其他情况下不必建立。,电子邮件链接,电子邮件链接是指当浏览者单击该超链接时，系统会启动客户端电子邮件系统（如Outlook Express）并进入创建新邮件状态，使访问者能方便地撰写电子邮件。 创建电子邮件链接的步骤如下： 将光标定位到需要插入电子邮件链接的位置。 选择菜单命
11、令“插入 | 电子邮件链接”或单击“插入”栏“常用”类别中的 (电子邮件链接)按钮。 在弹出的“电子邮件链接”对话框中输入用于超链接的文本和收件人的电子邮件地址。 单击“确定”按钮。 【提示】 也可以按如下方法创建电子邮件链接：先选择要创建电子邮件链接的文本或图片，然后在“属性”面板的“链接”文本框中输入“mailto:（收件人的电子邮件地址）”。,下载链接,只要将超链接所链接的目标文件为浏览器不能自动打开的文件格式 （例如“.rar”、“.zip”、“.exe”等文件格式），则会弹出如图所示的 “文件下载”对话框，用户可根据需要选择下载或打开文件。,小结,本章介绍了网页中各种元素的添加，首先
12、介绍了在页面中输入文本及改变文本颜色、排列方式、字体样式、字体大小等，并介绍了CSS样式的创建、编辑与应用；其次讲述了如何插入图像、编辑图像、设置网页背景，以及如何在Dreamweaver中为图片添加注释文字等；最后介绍了各种与链接有关的元素，如文本超级链接、图像超级链接、命名锚记、空链接、电子邮件链接等。请结合浏览网页及本章后面的练习加深对这些知识的理解。,填空题,在Dreamweaver MX 2004中插入文本的方法有： 、 、 、 。 如果希望用相同的样式控制多个文档格式，则最简单的方法是 。 网页中使用的图像格式主要有 、 和 。,选择题,选择题,判断题,简答题,简要说明段落格式和字符格式包括哪些选项。 有哪些列表类型？如何创建不同类型的列表？ 有哪几种超链接？在Dreamweaver MX 2004如何创建？,上机实训,
