Presentation is loading. Please wait.

Presentation is loading. Please wait.

实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像

Similar presentations


Presentation on theme: "实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像"— Presentation transcript:

1 实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像
第四章、制作页面 实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像

2 1 实例导入:咖啡吧 2 页面属性的设置 3 文本的修饰 4 设置超级链接 5 制作纯文本网站 6 使用图像

3 第一节 实例导入:咖啡吧

4 实例导入:西部路由网 第一节 该网站实例包含了若干个网页,在网页中添加文本、插入图像、建立超链接,涉及到的知识点有以下几点:
1)页面属性的设置 2)文本的修饰; 3)插入图像: 4)插入图像对象实现特效; 5)多个网页之间建立超链接。

5 页面属性的设置 第二节 “修改”菜单>“页面属性”命令,或单击“属性”面板中的“页面属性”按钮。弹出“页面属性”对话框:
外观选项卡:设置背景颜色及背景图像,另外还可设置文本\链接\访问过的链接\活动链接\页边距等。 标题/编码选项卡:设置网页的标题,输入请到西部来旅游。显示在浏览器的标题栏中,如果未定义,则显示为“Untitled Document” 编码选项卡:选择文档编码。 跟踪图像选项卡:跟踪图像是为网页排版的一种辅助手段,在HTML文档不显示。选择跟踪图像的路径及不透明度。

6 第二节 页面属性的设置

7 文本的修饰 第三节 操作文本是最基本的网页制作技能,例如:字体的修饰、段落的对齐方式等。
输入和修改文本 软回车(换行,shift+回车键)和硬回车(另起一个自然段) 输入连续的空格:切换到中文全角状态;或是在源代码中输入“&nbsp”或是在插入栏中“字符选项”中单击“不换行空格”按钮 输入特殊字符 插入栏中文本选项中的“字符”选项,单击要输入的字符。 另外还有一种方法,利用WORD进行特殊字符的输入,并通过WORD可获得大量文本内容。

8 文本的修饰 第三节 选择、复制、移动文本 拷贝HTML,直接将文件的HTML源代码拷贝至剪贴板。 CTRL+Z是撤消,CTRL+Y重做
检查拼写错误:文本菜单|“检查拼写”命令。 查找和替换文字 “编辑”菜单|“查找和替换”命令 设置文字属性 选中文本,在“属性”面板进行文字的设置,或是使用插入栏|“文本”选项中的某个按钮进行修饰;更多的可选择“文本”菜单|“样式”命令进行修饰。

9 文本的修饰 第三节 设置段落 选中文本,“属性”面板中,对段落进行修饰,对齐方式、文本缩进等.
列表(有序列表\无序列表) 选中文本,在“属性”面板中,单击“列表”按钮,再单击列表项目,弹出“列表属性”对话框,对列表进行样式的修饰. 建嵌套列表:进行文本缩进,输入嵌套列表. 加入水平线 “插入”栏|“常用”选项卡中的“水平线”按钮。选中水平线,在“属性”面板中,修改水平线的属性。

10 设置超级链接 第四节 1 URL地址 超链接是组成网站的基本元素,通过超链接将多个网页组成一个网站,浏览者通过超链接选择阅读路径。
超链接是通过URL(统一资源定位器)来定位目标信息的。URL包括4部分:网络协议、域名或IP地址、路径和文件名。URL地址分为绝对URL和相对URL。 1、绝对URL 指在Internet上资源的完整地址,包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。书写格式为: 协议://计算机域名或IP地址[/文档路径][/文档名] 例如:

11 设置超级链接 第四节 1 URL地址 2.相对URL 文件与当前位置之间的相对位置关系。一般是指同站点内的链接。
如链接到同一路径的文档,直接输入文件名即可,如news.htm 如链接到同一路径下子文件夹的文档,则先输入子文件夹名和斜杠(/),再输入文件名,如yule/news.htm 如链接到上一级路径中,要在文件名前输入“../”,如“../news.htm”。

12 第四节 设置超级链接 2 超链接的分类 超链接的分类有很多种,按链接目标的不同,超链接分为:页面链接、锚记链接、电子邮件链接,按链接单击对像的不同,超链接分为:文字链接、图像链接、图像映射等。 1、文件链接 页面链接是指链接目标是其它网页或文件,浏览者单击超链接时将跳转到相应的网页或显示相应的文件。 设置方法:选中创建超链接的文本或图像,在“属性”面板的链接文本框中输入URL地址,或单击链接框右侧的“浏览文件”按钮,弹出“选择文件”对话框,选择相应的文件。

13 第四节 设置超级链接 2 超链接的分类 2、锚记链接 锚记又称书签,一个篇幅较长的网页分为许多块,可以通过锚记跳转到网页中不同的部分. 定义锚记:将光标定位到要用锚记的位置,单击插入栏中的命名锚记按钮.出现命名锚记的对话框,输入锚记名称. 设置带有锚记的超链接:选中文字或图像元素,在属性检查器中,单击链接文本框,在URL文本框中键入“文件名称#锚记名称”,如果链接在同一文档中进行,则直接键入“#锚记名称”. 3、 链接:

14 第四节 设置超级链接 2 超链接的分类 4、空链接   空链接一般默认指向当前页面,并不会打开新的网页文件。此种链接并不常用,一般会和JavaScript脚本语言配合使用,以达到一些特殊的网页特效。   设置方法如下:在“属性”面板的“链接”框中输入一个单独的“#”号,即表示一个空链接。

15 制作包含超链接 的纯文本网站 第五节

16 第六节 使用图像 1 插入图像 图像的格式 GIF:索引颜色格式,最多支持256色。 JPG(JPEG):联合图像专家组,有损压缩格式,支持的是真色彩。 PNG:可移植的网络图形,专门针对WEB开发的一种无损压缩格式。 “插入”栏|“图像”按钮,或是“插入”菜单|“图像”命令,打开“选择图像源文件”对话框,选定需要的图像.单击“确定”按钮。

17 使用图像 第六节 2设置图像属性 选中图像,在“属性”面板中设置图像的属性: 对图像进行命名.
改变图像大小:在“属性”面板直接输入图像的尺寸大小。 在“文档”窗口拖动图像的右方、右下方、下方的句柄进行拖动。在“属性”面板中单击重设大小可以恢复图像的大小。 图像的对齐方式:垂直、水平方向等。 设置图片的边距::垂直边距、水平边距 经图像加上文本说明:在“属性”面板中“替代”文本框中输入说明文本。

18 第六节 使用图像 2设置图像属性 设置低分辨率图像 制作两张图像,一个是浏览器最终显示的图像,另一个是它的低分率或者灰度版本。 单击图像,在“属性”面板中,低品质源输入低分辨率的图像地址。 增加图像边框:在“属性”面板中输入边框宽度。

19 使用图像 第六节 3制作翻转图像 先在图片处理软件中处理两个图片。
单击“插入”栏|“鼠标经过图像”按钮或是选择“插入”菜单|“图像对象”|“鼠标经过图像”按钮,弹出“鼠标经过图像”对话框,输入原始图片的名称和位置;输入鼠标经过图片的名称和位置即可。 为鼠标经过图像加入一个超链接:前往“URL”文本框中输入超链接地址即可。

20 使用图像 第六节 4图像映射(又称为热点链接) 选中图像,单击属性面板中的热点按钮,可将热点设置为矩形\圆形\多边形等。
为链接设立目标:在“属性”面板中,设置链接目标。 blank(新建浏览窗口打开链接); _parent(父浏览窗口打开超链接); _self(在本浏览窗口或本框架中打开链接); _top(在无框架状态下打开链接)。

21 本章小结 本章主要介绍了网页元素编辑及相关属性的设置,包括以下几个方面: 1.网页文本的编辑 2.超链接的建立
3.图像的插入和图像对象的编辑

22 练习题 (1)一个完整的URL地址包括哪些内容?超链接中的绝对路径和相对路径有什么区别? (2)一幅图像中创建多个链接区域,如何实现?
(3)网页中支持的图像格式有哪些?它们有什么特点?

23 上机实验 1.背景知识 根据本章所学的文本编辑、插入图像及图像对象、超链接的设置等知识进行网站的创建。 2.实验准备工作
将文本素材和图像素材准备好,发送到学生主机上,以供学生参考使用。 3.实验要求 创建一个以美食为主题的创建网站,要求如下。 (1)编辑网站首页,效果如图 (2)编辑其他内容网页并添加超链接,其他页面中包括有图像和文本等。 4.课时安排 上机实验安排2课时。

24 上机实验

25 上机实验

26 THANKS


Download ppt "实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像"

Similar presentations


Ads by Google