网页设计与制作教案

W-design2017.09.13

网页设计与制作
网页设计和出版流程
第一步是对站点进行规划
第二步是创建站点的基本结构
第三步即可开始具体的网页创作过程
最后一步是站点的发布
第一节 站点的规划与创建
一、规划站点
Web站点是一组具有共享属性(如相关主题、类似的设计或共同目的等)的链接文档。
本地站点:是本地硬盘中存放远程网站所有文档的地方(文件夹)。
建立网站的通常做法是:在要地硬盘中建立一个文件夹用来存放网站的所有文件,往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后,再把它们拷贝到网站上供浏览者浏览。


1、规划站点结构
注:规划站点的结构之前应先用笔绘出站点的结构图(如下图所示是一个典型的学校站点的结构图)

2、规划站点的浏览机制
一般可采用以下的方法:
创建返回主页的链接
显示网站专题目录
显示当前位置
搜索和索引
反馈(将网页创作者或网站管理员公布在网页上,或创建一个E-MAIL超级链接,以使用户能快速地将信息反馈到网站中)
二、创建一个站点
步骤:
1、单击“文件”---“新建”---“站点”命令(或单击常用工具栏中“新建网页”按钮的下拉箭头,从打开的下拉菜单中选择“站点”命令)
2、选择一种站点模板或向导
3、单击“确定”按钮
三、站点的基本操作
1、打开站点:“文件”---“打开站点”
2、删除站点:
方法一:在Windows资源管理器中删除一个站点
方法二:在FrontPage中删除站点,在“文件夹”视图或“网页”视图的“文件夹列表”中,右击站点所对应的目录,在快捷菜单中单击“删除”命令

3、站点的设置
“工具”----“站点设置”,有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡
第二节 利用表格进行网页布局
一、 插入表格
1、单击常用工具上的“插入表格”按钮
2、单击“表格”---“插入”---“表格”命令
3、使用表格工具栏(“查看”—“工具栏”---“表格”命令)
4、由文本转换(“表格”—“转换”—“文本到表格”)一般以段落为分行标记,以逗号或句号为分列标记。

二、单元格的基本操作
1、选择单元格(“表格”—“选定”—“单元格”)
Ctrl:可选择不相邻的单元格
Shift:选择多个相邻的单元格
2、插入单元格(“表格”—“插入”—“单元格”)
3、合并单元格(“表格”—“合并单元格”或“表格工具栏”上的“合并单元格”按钮)
4、拆分单元格(“表格”—“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮)

三、填充单元格
1、文本与图像填充(“插入”—“图片”)
2、对齐文本与图像(“表格”—“属性”—“单元格”,“水平对齐方式”、“垂直对齐方式”)
3、修改单元格背景(“表格”—“属性”—“单元格”,“背景”)
4、调整边框颜色(“表格”—“属性”—“单元格”,“边框”)
5、改变单元格尺寸(“表格”—“属性”—“单元格”,“指定宽度”、“指定高度”)

四、修改表格的行与列
1、选择行与列
2、插入行与列(“表格”—“插入”—“行或列”)
3、均分行与列(“表格工具栏”中的“平均分配行高”或“平均分配列宽”)
4、删除行与列(“表格工具栏”中的“删除单元格”按钮或“表格”—“删除单元格”命令)
第三节 利用框架设计网页布局
一、认识框架网页1、框架的概念框架网页是一种特殊的网页,它将自身分成几个区域,每个区域称作一个框架窗口(通常简称为框架)
框架具有以下特性:
每个框架都可以独立地显示一个网页,各个框架窗口之间可以设立超链接。
每个框架窗口可以赋予一个名字,以便其他URL作为目标调用。

2、框架的使用场合(如邮箱、论坛)
通常用框架来显示在同一个站点中的多个超链接,这样可以不用浏览器中的“后退”按钮而方便的进行浏览。
框架也适用于类似在线书籍的应用,将目录显示在左边的框架中,单击目录,右边框架中显示相关的章节

二、创建框架网页1、框架网页的创建
“文件”—“新建”—“网页”,选择“框架网页”选项卡2、框架网页模板(10种) “设置初始网页”
“新建网页”

三、框架网页的保存和打开
框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。1、框架网页的保存
“文件”—“保存文件”或“框架”—“保存网页”2、框架网页的打开“框架”—“在新窗口中打开网页”

四、 框架网页的属性1、框架网页的属性“文件”—“属性”
“框架间距”、“显示边框”
2、框架的属性“框架”—“框架属性”

五、调整框架布局1、调整框架窗口的大小(用鼠标拖动或在“框架属性”对话框中调整)2、框架的拆分
方法一:“框架”—“拆分框架”(按行或按列拆分)
方法二:用鼠标拖动拆分(按Ctrl键)
3、框架的删除“框架”—“删除框架”

六、目标框架
当在框架网页的某一个框架中定义超链接时,需要指定被链接的网页显示在哪一个框架中,即指定超链接的目标框架。
选择要设置超链接的文字或图像,“插入”—“超链接”,单击“目标框架”、“更改目标框架”
第四节 使用导航栏
一、定义导航结构
在网页内添加导航栏之前,先建立该站点的导航结构
“视图”—“导航”按钮
二、认识导航栏属性
“插入”—“导航栏”按钮
“父层”:创建指向当前网页上一级网页的超链接,并将上一级网页的标题名称显示在导航栏内。
三、创建导航栏(要在浏览器中才可看到实际导航栏效果)

四、创建共享边框
用创建导航栏的方法只能在一个网页中创建导航栏,若需要导航栏出现在站点内多个网页的相同位置,则可将导航栏插入网页的共享边框内。
右击编辑窗口,单击“共享边框”命令
练习二、利用框架设计一个企业网站的布局
要求有如下内容:关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。
第五节 网页布局功能的应用
一、创建布局表格 1、创建布局表格 打开一个空白网页,并切换到“设计”视图下,单击“表格”菜单中的“布局表格和单元格”命令,随后在右侧弹出一个任务窗口,在该任务窗口下面程序提供了多种表格布局模板,在此单击其中需要的模板即可将该模板添加到网页中。


2.绘制布局表格  如果你对模板中提供的布局表格不太满意,还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”,随后将指针移到操作窗口最左端,然后拖动鼠标即可绘制表格。

3、设置表格属性  插入表格后,还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。   提示:在设置表格时,如果要想覆盖网页的默认边距,并让布局表格跨到文档窗口的边缘,可以将表格中的各个边距的属性都设置为0。
  
在设计框架时经常需要调整某一行或列的属性,这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框,每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头,如更改行高度时,单击此下拉箭头弹出一个下拉菜单,选择“更改行高”命令,在弹出的“行属性”对话框中重新输入该行高度值即可。
练习三、使用布局功能设计学校网站  
要求包括有以下内容:学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等
第六节网页布局设计
一、文本的美化(“格式”—“字体”)
1、输入文本
2、美化文本(设置文本字体、字号)注:字符的大小共有6级,其中默认级别是3。3、设置文本效果4、改变文本颜色5、设置字符间距

二、 运用边框与阴影(“格式”—“边框与阴影”)1、设置边框2、设置阴影

三、 使用列表(“格式”—“项目符号和编号方式”)
1、添加项目列表 。
项目列表也称为无序列表,它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有3种:实心黑点、空心圆圈和实心方块。

2、添加编号列表
在网页中的内容存在顺序关系时,可应用编号列表。
3、添加定义列表
定义列表就是在网页内定义词汇、术语的列表,具体的定义内容将以首行缩进的方式出现在列表的下一行。(格式工具栏的“样式”—“定义的术语”,输入要词汇、术语,按回车键)
4、设置嵌套列表
要建立组合列表,可以先生成第1级列表,然后再生成第2级列表,依此类推。

建立组合列表的具体操作步骤如下:(1)先生成第1级列表(2)将光标移动到拥有第2级列表的第1级列表项目的末尾,然后按回车键。将出现一个空的列表行。
(3)单击“格式工具栏”中的“增加缩进”图标。该行变为一个空白行,是没有列表编号或项目符号的。再单击一次“增加缩进”图标。(4)此时再按照建立列表的方法构造第2级列表。
(5)输入第2级列表。输入过程中每次接回车键就自动生成第2级列表项目。(6)第2级列表输入完毕后,将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第2级列表的设置操作。

嵌套列表可以转变为可折叠大纲,这样在浏览器中浏览时,就可以展开或折叠大纲中的各个级次。生成可折叠大纲的具体操作步骤如下:(l)按生成复合列表的方法构造好这个复合列表所有的列表级次。
(2)选择“格式”菜单中的“项目符号和编号方式”命令,打开“项目符号和编号方式”对话框,或者在列表中单击右键,从弹出的菜单中选择“列表属性”命令。
(3)在打开的对话框中,选中“启用可折叠大纲”复选框。(4)单击“确定”按钮。
练习四、设计一个介绍阳江风景及特产的网页
要求:设计一个网页介绍阳江的风景及特产,要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。
第七节网页装饰设计
一、添加图像
在浏览器中,能处理的图片格式只有GIF、JPEG格式和PNG格式等少数几种图片。
1、GIF格式图片GIF格式最多能支持256种颜色(8位颜色)。可以具有透明、动画等特殊效果。
2、JPEG格式文件JPEG格式可以处理高达1670万种颜色(24位颜色),所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。

插入本地计算机上的图像(“插入”—“图片”—“来自文件”,“从计算机选择一个文件”)
插入WEB上的图像(“插入”—“图片”—“来自文件”,“从WEB浏览器来选择网页或文件”)
二、处理图像
1、剪裁图像(“图片”工具栏—“剪裁”按钮)
2、设置透明背景(“图片”工具栏—“设置透明色”按钮)
三、添加文本(“图片”工具栏—“文本”按钮)
四、保存图像
注:默认情况下,当前站点的图像文件保存在Images文件夹中

五、运用特殊效果
1、调整图片的亮度和对比度
2、图片的翻转与旋转
3、图片的冲蚀和黑白处理
4、凹凸效果


六、设置图片对齐方式(“图片属性”—“外观”—“布局”—“对齐方式”)
七 使用水平线
水平线是贯穿网页宽度的细灰条,用于分隔文本或加着重符。添加水平线后,可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题,则会使用图形来代替水平线以匹配主题。
1、插入水平线
2、设置水平线属性

八、 修改网页背景(“格式”—“背景”)
1、调整背景色彩
2、调整背景图案
九、创建交换图像(DW 2004)
1、插入交换图像(“插入”—“图像对象”—“鼠标经过图像”)
“原始图像”、“鼠标经过图像”、“按下时,前往的URL”
2、预览交换图像:F12
第八节创建超链接
一、与当前站点的链接(“插入”—“超链接”,“搜索”当前站点的文件夹位置)
二、与空白网页的链接(“插入”—“超链接”,“创建一网页并链接到该网页”)
三、与电子信箱的链接(“插入”—“超链接”,“制作发送电子邮件的超链接”)
四、与Web的链接(“插入”—“超链接”,“使用WEB浏览器来选择网页或文件”,ALT+TAB,则网页地址自动添加到URL中)

五、修改链接颜色(“网页属性”—“背景”,“颜色”—“超链接”、“已访问的超链接”、“当前超链接”)
六、使用图像地图
月 1、创建热点
在图片中创建热点的具体操作步骤如下:
选中要建立热点的图片。图片被选中后,四周将出现8个控制方块,并且“图片工具栏”被激活。

在“图片工具栏”中,选择热点的形状的图标。可以选择长方形、圆形或多边形。
将鼠标移动到图片中。这时,鼠标指针变成一支笔的模样。
用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合
热点绘制完毕,图片中将出现该热点的边框。打开“插入超链接”对话框,建立到热点上的超链接的过程与建立到文本上的超链接的过程基本相同。
练习五、设计一个介绍世界著名风景的网站
要求:
用到嵌套列表、框架、超链接、图像热点等技术。

良师智胜 跟随良师,方为良师
长按,识别二维码,加关注

↓↓↓ 点击"阅读原文" 【查看更多信息】

网络公司首选华仕尊城设计http://www.w-vi.com

网页设计与制作教案-网站建设

2017-09-13 08:12:21

您现在的位置:首页网站建设网页设计与制作教案

网页设计与制作
网页设计和出版流程
第一步是对站点进行规划
第二步是创建站点的基本结构
第三步即可开始具体的网页创作过程
最后一步是站点的发布
第一节 站点的规划与创建
一、规划站点
Web站点是一组具有共享属性(如相关主题、类似的设计或共同目的等)的链接文档。
本地站点:是本地硬盘中存放远程网站所有文档的地方(文件夹)。
建立网站的通常做法是:在要地硬盘中建立一个文件夹用来存放网站的所有文件,往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后,再把它们拷贝到网站上供浏览者浏览。


1、规划站点结构
注:规划站点的结构之前应先用笔绘出站点的结构图(如下图所示是一个典型的学校站点的结构图)

2、规划站点的浏览机制
一般可采用以下的方法:
创建返回主页的链接
显示网站专题目录
显示当前位置
搜索和索引
反馈(将网页创作者或网站管理员公布在网页上,或创建一个E-MAIL超级链接,以使用户能快速地将信息反馈到网站中)
二、创建一个站点
步骤:
1、单击“文件”---“新建”---“站点”命令(或单击常用工具栏中“新建网页”按钮的下拉箭头,从打开的下拉菜单中选择“站点”命令)
2、选择一种站点模板或向导
3、单击“确定”按钮
三、站点的基本操作
1、打开站点:“文件”---“打开站点”
2、删除站点:
方法一:在Windows资源管理器中删除一个站点
方法二:在FrontPage中删除站点,在“文件夹”视图或“网页”视图的“文件夹列表”中,右击站点所对应的目录,在快捷菜单中单击“删除”命令

3、站点的设置
“工具”----“站点设置”,有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡
第二节 利用表格进行网页布局
一、 插入表格
1、单击常用工具上的“插入表格”按钮
2、单击“表格”---“插入”---“表格”命令
3、使用表格工具栏(“查看”—“工具栏”---“表格”命令)
4、由文本转换(“表格”—“转换”—“文本到表格”)一般以段落为分行标记,以逗号或句号为分列标记。

二、单元格的基本操作
1、选择单元格(“表格”—“选定”—“单元格”)
Ctrl:可选择不相邻的单元格
Shift:选择多个相邻的单元格
2、插入单元格(“表格”—“插入”—“单元格”)
3、合并单元格(“表格”—“合并单元格”或“表格工具栏”上的“合并单元格”按钮)
4、拆分单元格(“表格”—“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮)

三、填充单元格
1、文本与图像填充(“插入”—“图片”)
2、对齐文本与图像(“表格”—“属性”—“单元格”,“水平对齐方式”、“垂直对齐方式”)
3、修改单元格背景(“表格”—“属性”—“单元格”,“背景”)
4、调整边框颜色(“表格”—“属性”—“单元格”,“边框”)
5、改变单元格尺寸(“表格”—“属性”—“单元格”,“指定宽度”、“指定高度”)

四、修改表格的行与列
1、选择行与列
2、插入行与列(“表格”—“插入”—“行或列”)
3、均分行与列(“表格工具栏”中的“平均分配行高”或“平均分配列宽”)
4、删除行与列(“表格工具栏”中的“删除单元格”按钮或“表格”—“删除单元格”命令)
第三节 利用框架设计网页布局
一、认识框架网页1、框架的概念框架网页是一种特殊的网页,它将自身分成几个区域,每个区域称作一个框架窗口(通常简称为框架)
框架具有以下特性:
每个框架都可以独立地显示一个网页,各个框架窗口之间可以设立超链接。
每个框架窗口可以赋予一个名字,以便其他URL作为目标调用。

2、框架的使用场合(如邮箱、论坛)
通常用框架来显示在同一个站点中的多个超链接,这样可以不用浏览器中的“后退”按钮而方便的进行浏览。
框架也适用于类似在线书籍的应用,将目录显示在左边的框架中,单击目录,右边框架中显示相关的章节

二、创建框架网页1、框架网页的创建
“文件”—“新建”—“网页”,选择“框架网页”选项卡2、框架网页模板(10种) “设置初始网页”
“新建网页”

三、框架网页的保存和打开
框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。1、框架网页的保存
“文件”—“保存文件”或“框架”—“保存网页”2、框架网页的打开“框架”—“在新窗口中打开网页”

四、 框架网页的属性1、框架网页的属性“文件”—“属性”
“框架间距”、“显示边框”
2、框架的属性“框架”—“框架属性”

五、调整框架布局1、调整框架窗口的大小(用鼠标拖动或在“框架属性”对话框中调整)2、框架的拆分
方法一:“框架”—“拆分框架”(按行或按列拆分)
方法二:用鼠标拖动拆分(按Ctrl键)
3、框架的删除“框架”—“删除框架”

六、目标框架
当在框架网页的某一个框架中定义超链接时,需要指定被链接的网页显示在哪一个框架中,即指定超链接的目标框架。
选择要设置超链接的文字或图像,“插入”—“超链接”,单击“目标框架”、“更改目标框架”
第四节 使用导航栏
一、定义导航结构
在网页内添加导航栏之前,先建立该站点的导航结构
“视图”—“导航”按钮
二、认识导航栏属性
“插入”—“导航栏”按钮
“父层”:创建指向当前网页上一级网页的超链接,并将上一级网页的标题名称显示在导航栏内。
三、创建导航栏(要在浏览器中才可看到实际导航栏效果)

四、创建共享边框
用创建导航栏的方法只能在一个网页中创建导航栏,若需要导航栏出现在站点内多个网页的相同位置,则可将导航栏插入网页的共享边框内。
右击编辑窗口,单击“共享边框”命令
练习二、利用框架设计一个企业网站的布局
要求有如下内容:关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。
第五节 网页布局功能的应用
一、创建布局表格 1、创建布局表格 打开一个空白网页,并切换到“设计”视图下,单击“表格”菜单中的“布局表格和单元格”命令,随后在右侧弹出一个任务窗口,在该任务窗口下面程序提供了多种表格布局模板,在此单击其中需要的模板即可将该模板添加到网页中。


2.绘制布局表格  如果你对模板中提供的布局表格不太满意,还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”,随后将指针移到操作窗口最左端,然后拖动鼠标即可绘制表格。

3、设置表格属性  插入表格后,还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。   提示:在设置表格时,如果要想覆盖网页的默认边距,并让布局表格跨到文档窗口的边缘,可以将表格中的各个边距的属性都设置为0。
  
在设计框架时经常需要调整某一行或列的属性,这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框,每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头,如更改行高度时,单击此下拉箭头弹出一个下拉菜单,选择“更改行高”命令,在弹出的“行属性”对话框中重新输入该行高度值即可。
练习三、使用布局功能设计学校网站  
要求包括有以下内容:学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等
第六节网页布局设计
一、文本的美化(“格式”—“字体”)
1、输入文本
2、美化文本(设置文本字体、字号)注:字符的大小共有6级,其中默认级别是3。3、设置文本效果4、改变文本颜色5、设置字符间距

二、 运用边框与阴影(“格式”—“边框与阴影”)1、设置边框2、设置阴影

三、 使用列表(“格式”—“项目符号和编号方式”)
1、添加项目列表 。
项目列表也称为无序列表,它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有3种:实心黑点、空心圆圈和实心方块。

2、添加编号列表
在网页中的内容存在顺序关系时,可应用编号列表。
3、添加定义列表
定义列表就是在网页内定义词汇、术语的列表,具体的定义内容将以首行缩进的方式出现在列表的下一行。(格式工具栏的“样式”—“定义的术语”,输入要词汇、术语,按回车键)
4、设置嵌套列表
要建立组合列表,可以先生成第1级列表,然后再生成第2级列表,依此类推。

建立组合列表的具体操作步骤如下:(1)先生成第1级列表(2)将光标移动到拥有第2级列表的第1级列表项目的末尾,然后按回车键。将出现一个空的列表行。
(3)单击“格式工具栏”中的“增加缩进”图标。该行变为一个空白行,是没有列表编号或项目符号的。再单击一次“增加缩进”图标。(4)此时再按照建立列表的方法构造第2级列表。
(5)输入第2级列表。输入过程中每次接回车键就自动生成第2级列表项目。(6)第2级列表输入完毕后,将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第2级列表的设置操作。

嵌套列表可以转变为可折叠大纲,这样在浏览器中浏览时,就可以展开或折叠大纲中的各个级次。生成可折叠大纲的具体操作步骤如下:(l)按生成复合列表的方法构造好这个复合列表所有的列表级次。
(2)选择“格式”菜单中的“项目符号和编号方式”命令,打开“项目符号和编号方式”对话框,或者在列表中单击右键,从弹出的菜单中选择“列表属性”命令。
(3)在打开的对话框中,选中“启用可折叠大纲”复选框。(4)单击“确定”按钮。
练习四、设计一个介绍阳江风景及特产的网页
要求:设计一个网页介绍阳江的风景及特产,要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。
第七节网页装饰设计
一、添加图像
在浏览器中,能处理的图片格式只有GIF、JPEG格式和PNG格式等少数几种图片。
1、GIF格式图片GIF格式最多能支持256种颜色(8位颜色)。可以具有透明、动画等特殊效果。
2、JPEG格式文件JPEG格式可以处理高达1670万种颜色(24位颜色),所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。

插入本地计算机上的图像(“插入”—“图片”—“来自文件”,“从计算机选择一个文件”)
插入WEB上的图像(“插入”—“图片”—“来自文件”,“从WEB浏览器来选择网页或文件”)
二、处理图像
1、剪裁图像(“图片”工具栏—“剪裁”按钮)
2、设置透明背景(“图片”工具栏—“设置透明色”按钮)
三、添加文本(“图片”工具栏—“文本”按钮)
四、保存图像
注:默认情况下,当前站点的图像文件保存在Images文件夹中

五、运用特殊效果
1、调整图片的亮度和对比度
2、图片的翻转与旋转
3、图片的冲蚀和黑白处理
4、凹凸效果


六、设置图片对齐方式(“图片属性”—“外观”—“布局”—“对齐方式”)
七 使用水平线
水平线是贯穿网页宽度的细灰条,用于分隔文本或加着重符。添加水平线后,可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题,则会使用图形来代替水平线以匹配主题。
1、插入水平线
2、设置水平线属性

八、 修改网页背景(“格式”—“背景”)
1、调整背景色彩
2、调整背景图案
九、创建交换图像(DW 2004)
1、插入交换图像(“插入”—“图像对象”—“鼠标经过图像”)
“原始图像”、“鼠标经过图像”、“按下时,前往的URL”
2、预览交换图像:F12
第八节创建超链接
一、与当前站点的链接(“插入”—“超链接”,“搜索”当前站点的文件夹位置)
二、与空白网页的链接(“插入”—“超链接”,“创建一网页并链接到该网页”)
三、与电子信箱的链接(“插入”—“超链接”,“制作发送电子邮件的超链接”)
四、与Web的链接(“插入”—“超链接”,“使用WEB浏览器来选择网页或文件”,ALT+TAB,则网页地址自动添加到URL中)

五、修改链接颜色(“网页属性”—“背景”,“颜色”—“超链接”、“已访问的超链接”、“当前超链接”)
六、使用图像地图
月 1、创建热点
在图片中创建热点的具体操作步骤如下:
选中要建立热点的图片。图片被选中后,四周将出现8个控制方块,并且“图片工具栏”被激活。

在“图片工具栏”中,选择热点的形状的图标。可以选择长方形、圆形或多边形。
将鼠标移动到图片中。这时,鼠标指针变成一支笔的模样。
用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合
热点绘制完毕,图片中将出现该热点的边框。打开“插入超链接”对话框,建立到热点上的超链接的过程与建立到文本上的超链接的过程基本相同。
练习五、设计一个介绍世界著名风景的网站
要求:
用到嵌套列表、框架、超链接、图像热点等技术。

良师智胜 跟随良师,方为良师
长按,识别二维码,加关注

↓↓↓ 点击"阅读原文" 【查看更多信息】

网络公司首选华仕尊城设计http://www.w-vi.com

深圳网站建设首选华仕尊城  http://www.w-vi.com

W design values every chance to work with you.