HTML网页设计实训教程-教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案合集最新.ppt

《HTML网页设计实训教程-教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案合集最新.ppt》由会员分享，可在线阅读，更多相关《HTML网页设计实训教程-教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案合集最新.ppt（304页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML网页设计网页设计实训教程实训教程实训一实训一 制作诗词欣赏页面制作诗词欣赏页面主要内容主要内容制作诗词欣赏页面美化诗词欣赏页面实训目标：实训目标：l了解HTML网页基本语法和结构l了解HTML基本元素l掌握对网页中文字的格式化的方法l掌握对网页中段落的格式化的方法实训内容实训内容 文字是网页的基础部分，具体内容包括浏览器中要显示的文字、空格、特殊符号以及注释语句。可以通过一些HTML标记实现对文字、段落的格式化。本实训通过对网页中的文字和段落进行格式化制作一个诗词欣赏页面 实训效果实训效果常用工具介绍记事本EditPlusNotepad+UltraEditDreamweaver CS6

2、Visual StudioEclipseTextMate常用浏览器简介常用浏览器简介任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTML文档的基本结构 诗词欣赏页面 说明：说明：1.一个完整的HTML文档包含头部和主体两个部分的内容，在头部内容里，可以定义标题、样式等，文档的主体内容就是要显示的信息。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTML文档的基本结构 诗词欣赏页面 说明：说明：2.HTML用来描述功能的符号称为“标记”或“标签”。、等都是标记。标记在HTML源文件中书写不区分大小写。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页

3、面步骤1：文档中输入HTML文档的基本结构 诗词欣赏页面 说明：说明：3.标记通常分为单标记和双标记两种类型：（1）单标记仅单独使用就可以表达完整的意思。（2）双标记由首标记和尾标记两部分构成，必须成对使用。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTML文档的基本结构 诗词欣赏页面 说明：说明：4HTML标记可以添加一些附加信息，称之为“属性”。属性应该写在首标记内，并且和标记名之间有一个空格分隔。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTML文档的基本结构 诗词欣赏页面 说明：说明：5:告知浏览器或其他程序，这是一个Web文档，应该

4、按照HTML语言规则对文档内容的标记进行解释。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTML文档的基本结构 诗词欣赏页面 说明：说明：6:是HTML文档的头部标记，在此标记中可以插入其他用于说明文件的标题和一些公共属性的标记。其中可以用title元素来指定网页标题，即在之间写上网页标题文字。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTML文档的基本结构 诗词欣赏页面 说明：说明：7标记之间的文本是在浏览器中要显示的页面内容，如图片、文字、表格、表单、超链接等元素。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTM

5、L文档的基本结构 诗词欣赏页面 说明：说明：8为注释，注释会被浏览器忽略，不做解释。可以使用注释对程代码进行解释，适当的注释对代码的阅读和维护产生很大的帮助。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTML文档的基本结构 诗词欣赏页面 说明：说明：9HTML文件的扩展名为.html。文件名可以有英文字母、数字和下划线组成，不能包含特殊符号，如空格、$等。文件名区分大小写。网站首页文件名一般是index.html或者default.html。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤1：文档中输入HTML文档的基本结构（效果效果）任务任务1 1：制作诗词欣

6、赏页面：制作诗词欣赏页面步骤2：在标记之间录入诗词内容 任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤2：在标记之间录入诗词内容（效果效果）任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰 任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰 说明：说明：1标题字，是用几种固定字号显示的文字，在HTML中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。标 记描 述标 记描 述一级标题四级标题二级标题五级标题三级标题六级标题 align为h标记的属性，设置标题字的对齐方式，alig

7、n=”left|center|right”left表示左对齐，cengter为居中对齐，right为右对齐。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰 说明：说明：2文字样式，利用标记及其属性对网页文字的字体、字号、颜色进行定义。如：（1）face属性用来定义字体，可以为face属性一次定义多个字体，字体之间用“，”分隔开，浏览器在读取字体时，如果第一种字体系统中不存在，就显示第2种字体，依此类推，如果这些字体都不存在，就显示系统默认字体。（2）size属性用来定义字号，取值范围17。（3）color属性用来定义颜色，其值为该颜色的英文单

8、词或十六进制数值。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰 说明：说明：3文字修饰标 记描 述标 记描 述加粗文字显示上标斜体文字显示下标文字添加下划线以斜体显示地址信息文字添加删除线其中标记用来表示HTML文档的特定信息，如E-mail、地址、签名、作者、文档信息等，这些内容通常为斜体，大多数浏览器会在address元素前后添加一个换行符。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰 说明：说明：4段落标记，可以对文字进行段落定义，段落间会有默认间距。它可以单独使用，也可以成对使用

9、。单独使用时，下一个的开始就意味着上一个的结束，良好的习惯是成对使用。align为p标记的属性，设置标题字的对齐方式，align=”left|center|right”left表示左对齐，cengter为居中对齐，right为右对齐。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰 说明：说明：5水平分割线。标记在浏览器显示为水平线，可以作为段落之间的分割线，使得文档结构清晰，层次分明。可以通过属性来修饰水平线的样式。如。属 性说 明属 性说 明align水平线对齐方式color水平线颜色width水平线宽度noshade水平线不出现阴影siz

10、e水平线高度任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰 说明：说明：6换行标记，用于文字的换行。是个单标记，一般，浏览器会根据窗口的宽度自动将文本进行换行显示，如果想强制浏览器不换行显示，可以使用标记，但是在标记中被包含的内容将被强制换行。7添加空格。代码中“ ”表示输入一个空格。通常，HTML会自动删除文字内容中的多余空格，不管文字中有多少空格，都被视为一个空格。为了在网页中增加空格，可以明确使用“ ”表示空格。任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰 说明：

11、说明：8添加特殊符号。代码中“©”表示特殊符号“”。特殊符号和空格一样，也是通过在HTML文件中输入符号代码添加的。使用特殊符号可以输出键盘上没有的字符。特殊符号符号代码特殊符号符号代码&>®“"£·￥¥™任务任务1 1：制作诗词欣赏页面：制作诗词欣赏页面步骤3：修饰文字，通过、等标记对诗词内容进行修饰（效果效果）任务任务2 2：美化诗词欣赏页面：美化诗词欣赏页面步骤:通过HTML标记的属性来实现对页面中的各个内容进行排版、布局、颜色、大小等的控制 任务任务2 2：美化诗词欣赏页面：美化诗词欣赏页面步骤:通

12、过HTML标记的属性来实现对页面中的各个内容进行排版、布局、颜色、大小等的控制（效果效果）HTML网页设计网页设计实训教程实训教程实训二实训二 制作新闻列表页面制作新闻列表页面主要内容主要内容制作新闻列表页面美化新闻列表页面实训目标：实训目标：l掌握无序列表的应用l掌握有序列表的应用l掌握嵌套列表的应用实训内容实训内容 在制作网页时，列表是一种常用的格式控制方法，它可以把相关联的内容以简洁易于阅读的方式呈现出来。本实训将通过使用无序列表、有序列表以及列表的嵌套制作一个新闻列表和通知的页面。实训效果实训效果任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤1：文档中输入HTML文档的基本结构

13、 新闻列表页面 任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤2：无序列表应用。在标记之间添加无序列表标记以及列表项标记。根据实训要求，制作班级新闻列表。班级新闻 最新课程表 关于普通话考试的通知 钢琴名曲音乐欣赏-献给爱丽丝 中国奥运屈辱史 div+CSS高级应用学习 说明：说明：1.列表(List)，顾名思义就是在网页中将相关资料以条目的形式有序或无序排列而形成的表。常用的列表有无序列表（ul）、有序列表（ol）和定义列表（dl）三种。任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤2：无序列表应用。在标记之间添加无序列表标记以及列表项标记。根据实训要求，制作班级新闻列表。班

14、级新闻 最新课程表 关于普通话考试的通知 钢琴名曲音乐欣赏-献给爱丽丝 中国奥运屈辱史 div+CSS高级应用学习 说明：说明：2.无序列表ul，是一个没有特定顺序的相关条目（也称为列表项）的集合。type属性，disc：指定项目符号为一个实心圆点；circle：定项目符号为一个空心圆；square：指定项目符号为一个实心方块。任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤2：无序列表应用。在标记之间添加无序列表标记以及列表项标记。根据实训要求，制作班级新闻列表。（效果效果）任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤3：有序列表应用。在标记之间继续添加标记以及列表项标记。制

15、作普通话考试报名通知列表。报名时间：3月1621日，逾期不予受理。报名地点：所在院系办公室。报名费用：按物价局规定85元/人/次（含培训费用），报名时交齐。提交资料及注意事项：说明：说明：1.有序列表(Ordered List)是一个有特定顺序的相关条目（也称为列表项）的集合。type属性，1：指定项目编号为阿拉伯数字；a：指定项目编号为小写英文字母。A：指定项目编号为大写英文字母；i：指定项目编号为小写罗马数字；I：指定项目编号为大写罗马数字。任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤3：有序列表应用。在标记之间继续添加标记以及列表项标记。制作普通话考试报名通知列表。报名时间：3

16、月1621日，逾期不予受理。报名地点：所在院系办公室。报名费用：按物价局规定85元/人/次（含培训费用），报名时交齐。提交资料及注意事项：说明：说明：2.编号起始值。通常，在指定列表的编号样式后，浏览器会从1、a、A、i或I开始自动编号。有序列表标记的start属性，可改变编号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号。例如，设置start=3，则有序列表的列表项编号将从3、c、C、iii或III开始编号。任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤3：有序列表应用。在标记之间继续添加标记以及列表项标记。制作普通话考试报名通知列表。报名时间：3月1621日，

17、逾期不予受理。报名地点：所在院系办公室。报名费用：按物价局规定85元/人/次（含培训费用），报名时交齐。提交资料及注意事项：说明：说明：3.列表项样式。使用列表项标记的type属性，可以指定单个列表项的编号。4.列表项编号。列表项标记的value属性，可以改变当前列表项的编号大小，并会影响其后所有列表项的编号大小。但该属性只适用于有序列表。任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤3：有序列表应用。在标记之间继续添加标记以及列表项标记。制作普通话考试报名通知列表。（效果效果）任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤4：制作列表嵌套。在之前的有序列表标记内嵌套一无序列表

18、，并设置无序列表标记的type属性值为square。提交资料及注意事项：填写准考证一份（编号不用填写），所填姓名和出生年月等须与身份证一致；提交小一寸彩色证件照3张（照片不能是打印版、不能是生活照，3张照片必须统一底片），其中两张照片贴在报名表和准考证上，另一张用钢笔在背面写上校名、系别和姓名，与表格一起上交。说明：说明：列表还可以嵌套使用，也就是一个列表中还可以包含多层子列表。嵌套的列表可以是无序列表的嵌套，也可以是有序列表的嵌套。任务任务1 1：制作新闻列表页面：制作新闻列表页面步骤4：制作列表嵌套。在之前的有序列表标记内嵌套一无序列表，并设置无序列表标记的type属性值为square。（

19、效果效果）任务任务2 2：美化新闻列表页面：美化新闻列表页面步骤：设置“班级新闻”、“普通话考试报名通知”文字内容为三级标题大小，并以粗体的形式显示，在两部分内容之间加一水平分隔线。班级新闻普通话考试报名通知 任务任务2 2：美化新闻列表页面：美化新闻列表页面步骤：设置“班级新闻”、“普通话考试报名通知”文字内容为三级标题大小，并以粗体的形式显示，在两部分内容之间加一水平分隔线。（效果效果）HTML网页设计网页设计实训教程实训教程实训三实训三 制作导航菜单制作导航菜单主要内容主要内容编辑导航菜单美化导航菜单实训目标：实训目标：l掌握超链接的使用l理解链接路径的相关概念l掌握下载链接和邮件链接的

20、使用l掌握CSS样式的定义和使用l掌握CSS样式对文字、链接、列表样式控制的属性实训内容实训内容 网页文件的最大魅力是超于各个文件的空间，通过超链接相互连接构成一个纷繁复杂的互联网世界。超链接（Hyperlink）是一个网站的精髓，是一种允许一个网页同其他网页或站点之间进行连接的元素。本次实训内容主要利用超链接制作导航菜单，为了使导航菜单效果更加美观、适用，结合无序列表和CSS样式表进行样式控制，达到精美的效果。实训效果实训效果任务任务1 1：编辑导航菜单：编辑导航菜单步骤1：准备素材图片，图片宽度为107px,高度为39px，需要两张，分别表示超链接正常状态下的背景和鼠标经过超链接时的背景。

21、步骤2：创建站点文件夹“实训3”。站点的主要作用是用于组织管理整个网站中所包含网页文件、样式表、js脚本、flash、网页素材等文件。在该站点文件夹下面创建“images”文件夹，用来组织管理该网站所使用的图片素材，将前面准备好的图片素材复制到images文件夹下。步骤3：打开编辑环境，创建HTML文档3-1.html，并保存到指定站点文件夹下面。任务任务1 1：编辑导航菜单：编辑导航菜单步骤4：在3-1.html文档中输入HTML文档的基本结构，并修改标题为“导航菜单。导航菜单 任务任务1 1：编辑导航菜单：编辑导航菜单步骤5：创建导航菜单，通过无序列表和超链接完成导航菜单的制作，每个超链接

22、都是无序列表的列表项。.首页网页版式布局div+CSS教程div+CSS实例常用代码站长杂谈技术文档资源下载联系我们.任务任务1 1：编辑导航菜单：编辑导航菜单步骤5：创建导航菜单，通过无序列表和超链接完成导航菜单的制作，每个超链接都是无序列表的列表项。说明：说明：1.超链接由标记开始，结束，它们之间的文字为超链接文字。2.超链接标记的href属性为链接属性，和URL结合，定义链接所指定的目标地址。通常的取值有如下形式：（1）“#”，表示为空链接，即形成链接效果，但不跳转到任何网页。由于本次实训只是做出导航菜单效果，故只使用空链接即可。（2）news.html，表示当单击链接文字时跳转到new

23、s.html网页。（3）res/10day_DIV+CSS.rar，表示下载链接，单击链接文字时，弹出下载窗口，可以将该目录下的文件保存到用户指定的位置。（4）href=mailto:?subject=联系我们，表示邮件链接，其格式一般为：，其中subject为邮件主题，其它参数有cc为抄送，bcc为暗送，body为邮件内容，多个参数之间使用&进行分隔。单击该邮件链接时会打开outlook来编辑发送邮件。任务任务1 1：编辑导航菜单：编辑导航菜单步骤5：创建导航菜单，通过无序列表和超链接完成导航菜单的制作，每个超链接都是无序列表的列表项。说明：说明：3超链接标记的其他常用属性：（1）targe

24、t属性：用于指定打开链接的目标窗口，其默认方式是原窗口，其具体的属性值及描述如下：1）_parent：在上一级窗口中打开，一般是用分帧的框架页会经常使用。2）_blank：在新窗口打开。3）_self：在同一帧或窗口中打开，是target的默认值。4）_top：在浏览器的整个窗口中打开，忽略任何框架。（2）title属性：用户指定当鼠标指向链接时所显示的提示信息。（3）name属性：定义一个链接位置名称，如“a”，当href属性值为“#a”时，可以跳转到当前位置，实现页内跳转即目录链接。任务任务1 1：编辑导航菜单：编辑导航菜单步骤5：创建导航菜单，通过无序列表和超链接完成导航菜单的制作，每个

25、超链接都是无序列表的列表项。（效果效果）任务任务2 2：美化导航菜单：美化导航菜单步骤1：在html文档开头添加文档类型说明 说明：说明：这句话标明本HTML文档是过渡类型，另外还有框架类型和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。HTML文档类型说明能提供对CSS样式的支持。任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:

26、none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：1CSS（Cascading Style Sheet）称为层叠样式表，是对页面内容和显示风格分离思想的一种体现，通过给一个普通网页文件添加CSS规则，就可以得到十分美观的网页。样式表的每个规则都有两个主要部分：选择符和声明。选择符用来决定哪些元素受到影响，声明由一个或多个属性值对组，用来成定义样式。任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none

27、;/*去掉ul的外边距、内边距和项目符号*/说明：说明：基本语法如下：选择符属性1:属性值;属性2:属性值可以为一个选择符定义多个属性，属性名与属性值之间用冒号（:）分开，每个属性值对之间用分号（;）分开。任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：2CSS的设置方式：（1）内联样式表（inline style sheets），也称行内样式表，是在

28、HTML标记内直接添加style属性，style属性值就是样式的声明。如：任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：2CSS的设置方式：（2）嵌入样式表（embedded style sheets），也称内部样式表，是在标记对中添加的标记对，在该标记对中添加各种网页元素的样式规则定义。如：p font-size:12pt;color:#f00;任务

29、任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：2CSS的设置方式：（3）外部样式表（linked style sheets）。将样式规则定义语句放置在一个单独的外部文件中，这就是外部样式表文件，其扩展名为.css。一个外部样式表文件可以通过在标记对中添加标记链接到HTML文档中。如：任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之

30、间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：2CSS的设置方式：（4）导入样式表（imported style sheets），通过import url(/css/global.css);语句将外部样式表文件导入到另一个CSS文件中，或导入到HTML文件的标记对中。该语句必须放在标记对中的开始部分，并以分号（;）结束。任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（

31、内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：3.HTML的选择符 （1）HTML选择符，就是HTML标记名称，如果在CSS中将某个HTML标记名定义成了选择符，那么在CSS应用的网页中，所有的这个HTML标记内的元素都会按照相应的样式规则定义语句来显示。任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list

32、-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：3.HTML的选择符 （2）CLASS选择符(类选择符)，定义类选择符时需要在“类名”前加点(.)。使用类选择符定义的样式规则对所有HTML标记中定义了class属性，且属性值为该“类名”的HTML元素起作用。如：第一段文字.stopcolor:red;任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距

33、、内边距和项目符号*/说明：说明：3.HTML的选择符 （3）ID选择符，定义ID选择符时需要在ID值前加#号。使用ID选择符定义的样式规则只对具有某一ID属性值的HTML元素起作用。如：一段文字#pdemocolor:red;任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：3.HTML的选择符 （4）关联选择符。是指一个用空格隔开的两个或多个单一选择符

34、所组成的字符串，具有包含关系。如：p h2background:yellow;任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：3.HTML的选择符 （5）组合选择符。为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择符，每个选择符之间用逗号（,）隔开。如：h1,h2,h3,p,li,acolor:yellow;任务任务2 2：美化导航菜

35、单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：3.HTML的选择符 （6）伪元素选择符（伪类）。是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style

36、-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：4.“margin”属性和“padding”属性 “margin”属性表示块级元素的外边距，“padding”属性表示块级标记的内边距。任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则 ulmargin:0px;padding:0px;list-style-type:none;/*去掉ul的外边距、内边距和项目符号*/说明：说明：5.列表属性“list-style-type:none;”去掉列表的项目符号。CSS列表属性主要

37、包括列表的排列方式、列表符的形式和位置。任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则（效果效果）bodymargin:0px;/*去掉body的外边距*/任务任务2 2：美化导航菜单：美化导航菜单步骤2：在程序3-3 的和标记之间添加标记对，即应用嵌入样式表（内部样式表），定义相应的CSS样式规则（效果效果）任务任务2 2：美化导航菜单：美化导航菜单步骤3：设置超链接效果，在标记对之间继续添加“a”选择符的样式规则 a text-decoration:none;color:#D84700;fon

38、t-weight:bold;font-size:12px;display:block;width:107px;height:39px;background:url(images/nav_bg_01.jpg)0 0 no-repeat;text-align:center;line-height:39px;任务任务2 2：美化导航菜单：美化导航菜单步骤3：设置超链接效果，在标记对之间继续添加“a”选择符的样式规则 说明：说明：1.样式规则定义中使用的text-decoration、color、font-weight、font-size属性均属于文字样式属性。文字样式属性主要包括文字的字体、大小、颜

39、色、显示效果等基本样式 任务任务2 2：美化导航菜单：美化导航菜单步骤3：设置超链接效果，在标记对之间继续添加“a”选择符的样式规则 说明：说明：2.“display”属性为CSS布局属性，用于指定元素在网页中将如何放置,display属性值为“block”，目的是将HTML元素a，转换成块级元素。此处必须转换为块级元素，否则无法设置超链接标记的高度和宽度。html中元素被分为两类，一类是块级元素，一类是内联元素。块级元素：就是一个方块，像段落一样，默认占据一行出现，即前后都有换行；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。可以用CSS的属性值

40、对“display:inline”将块级元素改变为内联元素，也可以用“display:block”将内联元素改变为块级元素。任务任务2 2：美化导航菜单：美化导航菜单步骤3：设置超链接效果，在标记对之间继续添加“a”选择符的样式规则 说明：说明：3.“width”属性和“height”属性用来设置a元素（已被转化为块级元素）的宽度和高度，宽度值和高度值应该和前面提供的背景图片大小一致。4“background”是CSS的背景属性，用来设置超链接默认状态下的背景图片。其中，“url()”：指定背景图片的相对路径；“0 0”：表示背景图片的位置，从左上（left,top）位置显示；“no-repe

41、at”：表示背景图片不平铺。这是背景属性的综合属性设置，属性值之间必须以空格分隔。背景属性主要包括背景颜色、背景图像以及背景图像的控制。任务任务2 2：美化导航菜单：美化导航菜单步骤3：设置超链接效果，在标记对之间继续添加“a”选择符的样式规则 说明：说明：5.text-align:center;：设置超链接文本水平居中对齐；line-height:39px;：设置行高为39像素，目的是将导航中的文字在垂直方向上居中对齐。通常为了实现文字在块级元素中垂直居中对齐，需要将这个属性的值与块级元素的高度值相同，来实现垂直居中的效果。任务任务2 2：美化导航菜单：美化导航菜单步骤3：设置超链接效果，在

42、标记对之间继续添加“a”选择符的样式规则（效果效果）任务任务2 2：美化导航菜单：美化导航菜单步骤4：通过CSS伪元素选择符设置导航菜单在鼠标移动到链接之上的效果。在标记对之间继续添加“a”标记的伪类CSS样式，当鼠标移动超链接之上时更换背景图片。a:hoverbackground:url(images/nav_bg_02.jpg)0 0 no-repeat;说明：说明：1.“a:hover”：表示当鼠标经过或移至超链接之上时，超链接所显示的效果，通过“background”属性为超链接更换背景图片。2伪元素选择符使得用户体验大大提高，如：我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户

43、这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。任务任务2 2：美化导航菜单：美化导航菜单步骤4：通过CSS伪元素选择符设置导航菜单在鼠标移动到链接之上的效果。在标记对之间继续添加“a”标记的伪类CSS样式，当鼠标移动超链接之上时更换背景图片。（效果效果）HTML网页设计网页设计实训教程实训教程实训四实训四 制作个人相册制作个人相册主要内容主要内容编辑个人相册美化个人相册实训目标：实训目标：l掌握标记l了解标记及属性l理解盒子模型的概念实训内容实训内容 文字是网页中最重要的元素，图像、声音也是网页中必不可少的元素。直观、明了、绚丽多彩的图片往往会给网

44、页带来很大的生机，能丰富网页的信息内容，增强网页的表现能力。本次实训内容主要利用图像标记制作个人相册，为了使个人相册的制作效果更加美观，结合使用了DIV、无序列表、超链接以及CSS样式表来制作精美的个人相册。实训效果实训效果任务任务1 1：编辑个人相册：编辑个人相册步骤1：创建站点文件夹，实训站点文件夹为“实训4”，并在该站点文件夹下面创建“mages”文件夹，将前面准备好的图片素材复制到“images”文件夹下。步骤2：打开编辑环境，创建HTML文档4-1.html，并保存到指定站点文件夹下面。任务任务1 1：编辑个人相册：编辑个人相册步骤3：在4-1.html文档中输入HTML文档的基本结

45、构，并修改标题为“个人相册。个人相册 任务任务1 1：编辑个人相册：编辑个人相册步骤4：创建个人相册内容，即在标记之间添加如下代码。说明：说明：1.个人相册最终效果为3行4列布局的12张图片，代码中只使用了同一张图片和描述。任务任务1 1：编辑个人相册：编辑个人相册步骤4：创建个人相册内容，即在标记之间添加如下代码。说明：说明：2.标记，属于块级标记，是网页制作中常用的标记代码中为标记添加了“id”属性，目的是在样式表中通过ID选择符对标记进行位置和样式控制。任务任务1 1：编辑个人相册：编辑个人相册步骤4：创建个人相册内容，即在标记之间添加如下代码。说明：说明：3.标记用来在网页中添加图片。

46、“src”属性是必须的，用来指定所显示图片的路径。除了“src”属性，其他属性都是可以省略的。任务任务1 1：编辑个人相册：编辑个人相册步骤4：创建个人相册内容，即在标记之间添加如下代码。说明：说明：4.定义标记对将所有图片设置为超链接，并定义无序列表，将所有的图像链接放置在标记对中，作为无序列表的列表项。任务任务1 1：编辑个人相册：编辑个人相册步骤4：创建个人相册内容，即在标记之间添加如下代码。说明：说明：5.标记为网页添加背景音乐，“src”属性是必须的，指定背景音乐所在的路径，“loop”属性指定该背景音乐的播放次数，值为“-1”或“infinite”表示无限次，其值为正整数时代表播放

47、次数。任务任务1 1：编辑个人相册：编辑个人相册步骤4：创建个人相册内容，即在标记之间添加如下代码。（效果效果）任务任务2 2：美化个人相册：美化个人相册步骤1：定义内部样式表，通过对“body”和“ul”的样式定义，设置和的显示效果。添加样式规则定义。CSS代码如下：/*去掉body的外边距*/bodymargin:0px;font-size:12px;font-family:Verdana;line-height:1.5;/*去掉ul的外边距、内边距和项目符号*/ulmargin:0px;padding:0px;list-style-type:none;说明：说明：1“body”是CSS中

48、的HTML标记选择符，代表标记，样式规则“margin:0px;”去掉页面的外边距，样式规则“font-size:12px;font-family:Verdana;line-height:1.5;”设置页面中文字为12像素大小、Verdana字体、行高为1.5倍。任务任务2 2：美化个人相册：美化个人相册步骤1：定义内部样式表，通过对“body”和“ul”的样式定义，设置和的显示效果。添加样式规则定义。CSS代码如下：/*去掉body的外边距*/bodymargin:0px;font-size:12px;font-family:Verdana;line-height:1.5;/*去掉ul的外边

49、距、内边距和项目符号*/ulmargin:0px;padding:0px;list-style-type:none;说明：说明：2.“ul”为无序列表，通过“margin”属性和“padding”属性去掉列表的外边距和内边距，“list-style-type”属性值为“none”，用于去掉列表的项目符号。任务任务2 2：美化个人相册：美化个人相册说明：说明：3.盒模型的概念,每一个盒子都有内容（conten）、填充（padding）、边框（border）、边界（margin）这四个方面。可以通过CSS盒模型中的margin属性、border属性以及padding属性设置元素与网页之间的空白距离

50、、元素边框的宽度、颜色、样式，以及元素内容与边框之间的空白距离等。任务任务2 2：美化个人相册：美化个人相册说明说明：（1）设置边界,边界margin也称之为：外边距、外补丁或外边界，它的4个属性主要是控制元素边界与网页其他内容的空白距离，4个边界一般按顺时针方向：上、右、下、左的顺序分别为上边界（margin-top）、右边界（margin-right）、下边界（margin-bottom）、左边界（margin-left）四个属性。任务任务2 2：美化个人相册：美化个人相册说明说明：（2）设置填充,填充padding也称之为：内边距、内补丁或内边界，它的4个属性主要是控制元素边界与内部内容