第2章 网页元素的添加3 超链接的设置方法　课件

学习目标 掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 最终效果如图所示。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 1）新建文件夹shici，在该文件夹中新建子文件夹image，将所有的素材拷贝到image文件夹中。在Dreamweaver CC中，单击菜单命令“站点” →“站点设置对象”，打开“站点定义”对话框进行站点定义，设站点名称为“诗词大观”，站点文件夹定义为文件夹shici。 2）新建网页，保存为index.html，设网页的标题为“诗词大观”。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 3）单击属性面板中的“页面属性”按钮，打开“页面属性”对话框，在“外观（CSS）”选项下，设“背景图像”为image/bg.gif。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 3）再单击“链接（CSS）”选项，按照图所示的颜色代码设置页面中所有超链接的4种显示状态，单击“确定”按钮。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 4）输入文本“诗词大观---七言古诗---五言古诗”，按回车键另起一段。选中文本“诗词大观”，在文本CSS属性面板中，设字体为隶书，字号为24，颜色为黑色。 分别选中两个“---”，在文本CSS属性面板中，设字体为宋体，字号为12，颜色为黑色。 选中文本“七言古诗”和“五言古诗”，在文本CSS属性面板中，设字体为隶书，字号为16，颜色为#FF6600。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 5）将光标移至下一段落，输入文本“七言古诗”，按回车键另起一段。选中该文本，在文本CSS属性面板中，设字体为隶书，字号为24，颜色为#FF6600，对齐方式为“居中对齐”。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 6）将光标移至下一段落，新建表格，在弹出的对话框中如图所示进行设置。选中表格，在表格属性面板中设Align式为“居中对齐” 。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 7）将光标移到单元格中，分别输入如图所示的文本。拖拽鼠标框选所有单元格，在CSS属性面板中，设字体为宋体，字号为12，颜色为黑色，单元格的“水平”和“垂直”分别设为居中，单元格的“宽”为50%，“高”为24。在HTML属性面板中在“链接”文本框中输入符号“#”。这样表格中单元格左右对称，单元格的高度为24像素，文字居中对齐，所有文字均添加了空链接。按F12在浏览器观看效果。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 7） 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 8）将光标移到表格的右侧,按回车键另起一段。单击菜单命令“插入”→“图像”→“图像”，插入的图像文件为image/renwu1.gif。将光标移到图像的右侧，在CSS属性面板中确认“目标规则”为“新内联样式”，单击居中对齐按钮 ，这样图像就在文档中居中对齐了，按F12在浏览器中观看效果。光标移到图像右侧按回车键另起一段。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 9）重复步骤6、7、8，完成五言古诗的页面制作。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 10）光标移到“五言古诗”前面，切换到代码视图，会发现光标在文字“五言古诗”前面闪烁。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 11）此时在光标闪烁处手工输入代码<a name="wuyan"></a>，意味着在此处插入了一个名称为 “wuyan”的锚点，代码如图所示。切回到设计视图，会发现在文字“五言古诗”前面出现了一个锚记图标，如图所示。 2.1 第2章 网页元素的添加 2.3.1案例制作：网站“诗词大观”首页 2.3 超链接的设置方法 12）光标移到文档第一行，选中“五言古诗”，在HTMI属性面板的“链接”文本框中输入“#wuyan”，这样就建立了锚记链接，HTML属性面板如图所示