Web开发基础_第6讲讲解.pptx

第5章主要内容;文字：表达了网站内容和作用，也具有传达情感的功能； 图像：能够极大地吸引浏览者的注意力； 多媒体元素：让网页变得“有声有色”，使静态网页具有动感，增强了网页魅力。;第6章 网页中超链接的应用;本章主要内容;6.1 超链接概述;;6.1 超链接概述;6.2 链接路径;6.2.1 绝对路径;6.2.1 绝对路径;6.2.2 相对路径;6.2.2 相对路径;6.2.2 相对路径;6.2.2 相对路径;6.2.3 根路径;6.3 创建超链接;6.3.1 创建文本超链接;6.3.1 创建文本超链接;6.3.1 创建文本超链接;6.3.1 创建文本超链接;6.3.1 创建文本超链接; CSS提供了4个伪类（指对同一个HTML元素在不同的状态下的一种定义方式），用于控制链接进行样式控制，每个伪类用于控制链接在一种状态下的样式。 a:link——用于设置a对象在正常状态下，即没有被访问时的样式。 a:visited——用于设置被访问后的链接样式 a:active——用于设置单击链接，而且释放之前的样式 a:hover——用于设置鼠标悬停在链接之上时的样式;6.3.2 创建图像超链接;6.3.3 创建锚记链接;6.3.3 创建锚记链接;6.3.3 创建锚记链接;6.3.4 创建电子邮件链接;6.3.4 创建电子邮件链接;6.3.4 创建脚本链接;6.3.6 创建空链接;6.3.7 创建文件下载链接;6.3.8 在HTML源代码中创建链接;6.4 创建导航链接;6.4 创建导航链接;6.4.1 传统Table布局创建导航;6.4.2 CSS设计网站导航;（2）创建一个CSS样式规则，选择器类型为ID，名称为#nav，设置其CSS基本属性，应用于无序列表ul，即ul id=“nav”。如： ;（3）链接对象a的样式控制：新建一个CSS样式规则，选择器类型为复合内容，名称为#nav li a，即为每个li下的每一个a链接对象设置其CSS样式。如： ;（4）竖向导航变为横向导航：新建一个CSS样式规则，选择器类型为复合内容，名称为#nav li，每个li对象设置其float属性为left，使得其自身向左浮动，从而使下一个对象贴近该对象的右边，最终所有的li都具有了向左浮动的特性，从而形成了横向的排列方式。代码如下： ;（5）交互式导航效果设计：新建一个CSS样式规则，选择器类型为复合内容，名称为#nav li a:hover，为每个li下的a连接对象设置鼠标悬停在链接之上时的样式。代码如下： ; Spry菜单??构件是一组可以导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用Spry菜单栏可在紧凑的空间中显示大量的导航信息，并使站点的访问者无需深入浏览站点即可了解站点上提供的内容。其操作步骤为：;（1）把光标定位在要插入Spry菜单的位置，选择【插入】|Spry|【Spry菜单栏】命令，打开【Spry菜单栏】对话框。 ;（3）在【属性】面板中的第一列，选择一个菜单栏项，例如“项目1”，在【文本】文本框中输入要更改的名称，在文档窗口看到更改后的项目栏。 ;（4）在【属性】面板中单击列表栏上方的加号按钮，可向菜单栏构件中添加菜单项【无标题项目】。 ;（5）在【属性】面板中单击列表栏上方的上下箭头按钮，可更改菜单项的顺序。 （6）在【属性】面板中【链接】文本框后的【浏览文件】按钮，选择要连接的文件，在【标题】文本框中输入图片的提示文本。 （7）保存网页，打开【复制相关文件】对话框，单击【确定】按钮，按F12键预览。