《网页设计与制作》.

Presentation on theme: "《网页设计与制作》."— Presentation transcript:

1 《网页设计与制作》

2 第三章 制作页面 3.1 案例导入：西部旅游网 3.2 页面属性的设置 3.3 文本的修饰 3.4 设置超级链接 使用图像 3.5

3 3.1　实例：制作一个旅游网站

4 该网站实例包含了若干个网页，在网页中添加文本、插入图像、建立超链接，涉及到的知识点有以下几点：
页面属性的设置及文本的修饰； 插入图像，插入图像对象实现特效； 多个网页之间建立超链接。

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

6

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

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

9 设置段落 选中文本，“属性”面板中,对段落进行修饰,对齐方式、文本缩进等. 列表(有序列表\无序列表) 选中文本，在“属性”面板中,单击“列表”按钮,再单击列表项目，弹出“列表属性”对话框，对列表进行样式的修饰. 建嵌套列表:进行文本缩进,输入嵌套列表.

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

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

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

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

14 4、图像链接 选中图像,在“属性”面板中的“链接”文本框中键入要链接的网址或文件即可. 5、热点链接 选中图像,单击属性面板中的热点按钮,可将热点设置为矩形\圆形\多边形等. 为链接设立目标 在“属性”面板中,设置链接目标。 blank(新建窗口); _parent(父窗口打开超链接); _self(在本窗口或本框架中打开链接); _top,在当前浏览器的最外层打开链接

15 3.4 使用图像 一、图像的格式 GIF:索引格式,最多支持256色. JPG(JPEG):有损压缩格式,支持的是真色彩. PNG:专门针对WEB开发的一种无损压缩格式. 二、插入图像 “插入”栏|“图像”按钮，或是“插入”菜单|“图像”命令，打开“选择图像源文件”对话框,选定需要的图像.单击“确定”按钮。

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

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

18 四、使用水平线 加入水平线 “插入”栏|“常用”选项卡中的“水平线”按钮。选中水平线，在“属性”面板中，修改水平线的属性。

19 五、插入鼠标经过图像及导航条 1、插入鼠标经过图像 先在图片处理软件中处理两个图片. 单击“插入”栏|“鼠标经过图像”按钮或是选择“插入”菜单|“图像对象”|“鼠标经过图像”按钮，弹出“鼠标经过图像”对话框,输入原始图片的名称和位置；输入鼠标经过图片的名称和位置即可. 为鼠标经过图像加入一个超链接:前往“URL”文本框中输入超链接地址即可.

20 2、插入导航条 导航条在网页中起到了向导的作用，通过导航条的指引，快速地找到所要浏览的信息， 导航条由多个导航条元件组成，每个导航条元件链接到相应的链接地址，在网页中一般横排或竖排。每个导航条元件包含一组图像，分别来响应鼠标动作。

21 设置方法如图所示：

22 六、创建网页相册 新建一个空白的网页文件 选择“命令”菜单|“创建网站相册”命令,弹出一个对话框,设置相册标题\副标题\其它信息等;选择“浏览”按钮,确定源图像文件夹和目标图像文件夹,设置略缩图的大小\格式等,小数点位数可改变图像的尺寸大小.,“为每张相片建立导览页面”复选框来为每个图像创立导航页.如图所示。

23

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

25 本章练习题 1. 选择题 （1）网页中常用的图像文件格式包括（ ）。 A．JPG、BMP、GIF B．JPG、GIF、PNG
1. 选择题 （1）网页中常用的图像文件格式包括（ ）。 A．JPG、BMP、GIF B．JPG、GIF、PNG C．BMP、PNG、GIF D．MP3、JPG、GIF （2）在插入导航条时，（ ）是必须的。 A．按下图像 B．替换文本 C．状态图像 D．鼠标经过图像 （3）单击（ ）会跳转到当前页面某个位置，却不会打开新的网页文件。 A．空链接 B．文本链接 C．锚记链接 D． 链接 2. 简答题 一个完整的URL地址包括哪些内容？超链接中的绝对路径和相对路径有什么区别？ 一幅图像中创建多个链接区域，如何实现？ 网页中支持的图像格式有哪些？它们有什么特点？

26 上 机 实 训 1、背景知识 根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。
　　 根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。 2、实训准备工作 　　 将文本素材和图像素材准备好，发送到学生主机上，以供学生参考使用。 3、实训要求 创建一个以篮球为话题的网站，要求如下： （1）编辑网站首页，效果图如图所示，包括有图像映射、鼠标经过图像、导航条。 （2）编辑其它内容网页并添加超链接，如图所示，其它页面中包括有图像和文本等，有一个网页中是明星的相册。 课时安排：4课时。

27

28