第5章列表与超链接
i或I
项目符号显示为罗马数字i ii iii…或I II III…
数字
规定项目符号的起始值
数字
规定项目符号的数字
5.1 【案例11】案例实现
案例引入
二维码名片的出现，简化了繁琐的信息录 入方式，轻轻一扫，就可读取内部包涵的文字 和图片信息，极大地提高了信息的存取速度。 本节将运用定义列表制作一款时尚潮流的“二
• target：用于指定5.链4接【页案面例的打14开】方式知，识其点取值讲有解_self和_blank两种，其
中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。
2、清除超链接图像的边框
创建图像超链接时，在某些浏览器中，图像会自动添加边框效果，如下图所 示。
5.4 【案例14】知识点讲解
访问后超链接的状态
a:hover{ CSS样式规则; }
鼠标经过、悬停时超链接的状态
a: active{ CSS样式规则; }
鼠标点击不动时超链接的状态
4、锚点链接
浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊 的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。下面 对创建锚点链接的方法做具体演示。
1、list-style复合属性
同盒子模型的边框等属性一样，CSS中的列表样式也是一个复合属性，可以 将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综 合设置列表样式的语法格式如下：
5.3 【案例13】知识点讲解
list-style:列表项目符号 列表项目符号的位置 列表项目图像;
2、清除超链接图像的边框
为了不影响页面的美观，通常需要清除超链接图像的边框，使图像正常显示。 去掉链接图像的边框很简单，只需将图像的边框定义为0即可，具体示例代码如 下：
这时保存HTML文件5.，4刷【新案页面例，1效4】果如知下识图点所示讲，解链接图像的边框消失了。
<a href="#"><img src="images/logo.gif" border="0" /></a>
3、链接伪类
在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、 点击后和鼠标悬停时的样式不同。超链接标记<a>的伪类有4种，具体如下表所 示。
5.4 【案例14】知识点讲解
超链接标记<a>的伪类
含义
a:link{ CSS样式规则; }
未访问时超链接的状态
a:visited{ CSS样式规则; }
2、有序列表
在有序列表中，除了type属性之外，还可以为<ol>定义start属性、为<li>定 义value属性，它们决定有序列表的项目符号，其取值和含义如下表所示。
属性 type
start value
属性值
描述
5.1
【案例11】知识点讲解 1（默认）
项目符号显示为数字1 2 3…
a或A
项目符号显示为英文字母a b c d…或A B C…
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例 如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有 序列表的基本语法格式如下：
5.1 【案例11】知识点讲解
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li>
...... </ol>
2、背景图像定义列表项目符号
由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为 <li>设置背景图像的方式实现列表项目图像。下面对背景属性定义列表项目符号 的方法做具体演示。
5.3 【案例13】知识点讲解
5.3 【案例13】案例实现
案例引入
浏览网站时，通过导航栏可以让访问者 迅速找到所需要的资源区域，本节将运用列 表和超链接的相关知识制作一款“唱吧导航 栏”，其效果如下图（上）所示。当鼠标移 上每个歌曲分类时，其背景颜色和背景图像
所示。
5.1 【案例11】精美电商悬浮框
知识引入
无序列表 5.中最常用的列表，之所以称为“无序列表”，是因为其各个 列表项之间为并列关系，没有顺序级别之分。定义无序列表的基本语法格式如下：
5.1 【案例11】知识点讲解
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li>
<dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl>
2、定义列表实现图文混排
在网页设计中，定义列表常用于实现图文混排效果，其中<dt></dt>标记中 插入图片，<dd></dd>标记中放入对图片解释说明的文字。如下图所示的“讲师 简介”模块就可以通过定义列表来实现。
维码名片”，如下图所示。
5.2 【案例12】二维码名片
知识引入
定义列表
定义列表实现图文混排
5.2 【案例12】知识引入
列表嵌套
1、定义列表
定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定 义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt5> .2 【案例12】知识点讲解
5.4 【案例14】知识点讲解
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
1、超链接标记<a>
<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，下 面对它们进行具体地解释。
• href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就 具有了超链接的功能。
5.2 【案例12】知识点讲解 dl
dt
dd
3、列表嵌套
在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这 些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若 干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。
5.2 【案例12】知识点讲解
5.2 【案例12】案例实现
第五章 列表与超链接
HTML
· 无序、有序及定义列表的使用 · 超链接标记的使用 · CSS伪类
目录
【案例11】：精美电商悬浮框 【案例12】：二维码名片
【案例13】：电商团购悬浮框 【案例14】：唱吧导航栏
案例引入
在制作电商网站时，通常需要使用一些 精美的悬浮框对商品信息进行简单的分类， 这样即可以方便消费者搜索商品，也可以使 网页结构变得清晰美观。本节将运用无序列 表制作一款精美的电商“悬浮框”，如下图
...... </ul>
1、无序列表
值得一提的是，<ul>和<li>都拥有type属性，用于指定列表项目符号。在无 序列表中type属性的常用值有三个，它们呈现的效果不同，具体如下表所示。
type属性值
显示效果
5.1 disc（默认值） 【案例11】知识点●讲解
circle
○
square
■
2、有序列表
都发生变化，如下图（下）所示。
5.4 【案例14】唱吧导航栏
（上） （下）
知识引入
超链接标记<a>
清除超链接图像的边框
5.4 【案例14】知识引入
链接伪类
锚点链接
1、超链接标记<a>
一个网站通常由多个页面构成，进入网站时首先看到的是其首页，如果想从 首页跳转到其子页面，就需要在首页相应的位置添加超链接。在HTML中创建超 链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可。创建超链接的 基本语法格式如下：
5.4 【案例14】知识点讲解
5.4 【案例14】案例实现
Word文档中插入目录和索引的超链接设置
Word文档中插入目录和索引的超链接设置在Word文档中，插入目录和索引的超链接设置是一种常见且实用的功能。
通过超链接的方式，读者可以方便地导航到文档中的不同章节和索引处，提高了文档的可读性和易用性。
本文将介绍如何在Word文档中插入目录和索引的超链接设置。
一、插入目录的超链接设置在Word文档中插入目录，可以使读者快速浏览并定位到特定章节。
以下是插入目录的超链接设置步骤：1. 首先，在适当的位置插入一个目录，可以通过“插入”菜单中的“目录”选项来实现。
2. 在目录中，选中一个章节或标题，点击鼠标右键，在弹出菜单中选择“超链接”选项。
3. 弹出的超链接对话框中，选择“文档内”选项，然后在下方的列表中选择目标章节或标题，点击“确定”按钮即可完成超链接的设置。
4. 重复以上步骤，为目录中的其他章节或标题设置超链接。
5. 完成设置后，保存文档并预览插入的目录，可以通过点击目录中的章节或标题，跳转到相应的位置。
二、插入索引的超链接设置在Word文档中插入索引，可以让读者快速定位到关键词或术语的出现位置。
以下是插入索引的超链接设置步骤：1. 首先，在适当的位置插入一个索引，可以通过“插入”菜单中的“索引和目录”选项来实现。
2. 在索引中，选中某个关键词或术语，点击鼠标右键，在弹出菜单中选择“超链接”选项。
3. 弹出的超链接对话框中，选择“文档内”选项，然后在下方的列表中选择关键词或术语的出现位置，点击“确定”按钮即可完成超链接的设置。
4. 重复以上步骤，为索引中的其他关键词或术语设置超链接。
5. 完成设置后，保存文档并预览插入的索引，可以通过点击索引中的关键词或术语，跳转到相应的位置。
三、注意事项在进行目录和索引的超链接设置时，需注意以下几个问题：1. 确保目录和索引的标题与实际章节或关键词一致，避免出现混淆或错误。
2. 在设置超链接时，务必仔细核对所选中的目标章节或标题，避免跳转错误。
3. 若要调整目录和索引的格式，可以参考Word的相关指南，如修改字体、颜色、样式等。
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
《HTML+CSS+JavaScript网页制作案例教程》课程教学Design
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师1201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
网页设计与开发第5章试卷及答案
《网页设计与开发第5章》试卷一、选择题1．下列哪一项是在新窗口中打开网页文档（）。
A．_selfB．_blankC．_topD．_parent答案: B2 .超链接是建立网站、网页主要元素之一。
若要建立在同一网页内的链接，应采用以下（）链接形式。
A．链接到一个E-mailB．书签式链接C．框架间链接D．链接到一个网站答案: B3 .若要在页面中创建一个图像超链接，要显示的图形为myhome.jpg，所链接的地址为，以下用法中正确的是（）。
A．<a href=">myhome.jpg</a>B．<a href=""><img src="myhome.jpg"></a>C．<img src="myhome.jpg"><a href =""></a>D．<a href =><img src="myhome.jpg">答案: B4.下面是相对路径的是（）。
A．B．ftp://219.153.40.150C．../a.htmlD．/a.html答案: C5．表示跳转到页面的”bn”锚点的代码是：（）A. <a link="#bn"> ... </a>B. <a href="bn"> ... </a>C. <a href="#bn"> ... </a>D. <a herf="bn"> ... </a>答案: C6. <a href="hello.html#top"> ... </a>,表示（）A．跳转到”hello.html”页面的顶部B．跳转到”hello.html”页面的”top”锚点C．跳转到”hello.html”页面的底部D．跳转到”hello.html”页面的文字”top”所在链接答案: B7. 表示新开一个窗口的超链接代码是（）A. <a href=URL target=_new>..</a>B. <a href=URL target=_self>..</a>C. <a href=URL target=_blank>..</a>D. <a href=URL target=_parent>..</a>答案: C8.在父窗口打开超链接的代码是（）A. <a href=URL target=_top>..</a>B. <a href=URL target=_parent>..</a>C. <a href=URL target=_blank>..</a>D. <a href=URL target=_self>..</a>答案: B9.html语言中，创建一个位于文档内部的靶位的标记是？A. <name="NAME">B. <name="NAME"></name>C. <a name="NAME"></a>D. <a name="NAME"答案: C10、要想在新的浏览器窗口中打开链接页面，应将链接对象的“目标（target）”属性设为（）。
《网页设计》教学大纲
课程名称：网页设计课程代码：总学分：4总学时：54适用专业：计算机专业的本科先修课程和后续课程先修课程：计算机基础、图像类设计软件、计算机类语言后续课程：一、课程的性质、目的与任务课程性质：本课程是计算机网络技术、软件技术、电子信息技术、计算机系统与维护、电子商务技术等专业的技术基础课，属于必修课范畴。
课程目的：通过本课程学习，使学生了解网页制作的基础知识、基本流程。
熟悉并掌握HTML语言，WEB服务器的配置，CSS，JA V ASCRIPT并能熟练使用Dreamweaver网站的设计、制作与维护更新，为动态网页设计打下基础。
课程任务：本课程结合实例，详细介绍了HTML标记语言、CSS样式表的应用、JA V ASCRIPT程序设计等知识。
通过本课程的学习，使学生能够掌握网页设计与制作的基本技能，并轻松地创建出具个性化的静态网站等。
二、教学的基本要求以理论够用为度注重技能的培养。
在掌握主要概念和基本操作后，进行专项和综合训练。
通过课堂学习、课后练习和上机实验，使基本技能的训练得到加强，培养学生实际操作的能力。
（一）理论知识方面主要达到：1．掌握网页设计相关常识，熟悉网页制作的基本技术；2．了解网站设计制作的常用工具与基本流程，了解不同网站类型不同的设计与制作要求，了解网站的整体结构规划；3．掌握HTML语言；4．掌握利用CSS构建网站；5. 掌握利用表格或者CSS 进行网页布局5．理解脚本语言以及掌握JA V ASCRIPT（二）能力方面主要达到：1．熟练掌握使用手工编写HTML代码的方式编写网页；2．熟练掌握利用CSS+DIV方式进行网页设计；3．熟练掌握Macromedia Dremweave的基本操作；4．了解网页设计稿文件的切片与优化输出；了解网页图像的优化技巧；5．掌握JA V ASCRIPT编写一些简单的交互程序；6．掌握网站的测试、发布、推广与维护；三、课程教学内容、重点与难点第1章网页与网站基础知识1网页与网站的概念2网页的设计3网页版式和布局4网站的策划与创建原则●教学基础要求使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣●教学重点网页设计中的若干术语●教学难点网页设计中的若干术语第2章html基础1 html文档结构2 html基本语法●教学基础要求标记对与格式标记的使用●教学重点格式标记的使用●教学难点HTML基本语法第3章文字与段落1文字内容2文字样式3文字修饰4段落●教学基础要求了解标题元素,掌握字体,上下标,及特殊字符的标记●教学重点网页中特殊符号的输入●教学难点特殊符号对应的标记第4章列表1列表简介2无序列表3有序列表4嵌套列表5定义列表6菜单列表和目录列表●教学基础要求使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣●教学重点定义列表●教学难点菜单列表第5章超链接1超链接简介2创建超链接3链接对象●教学基础要求掌握超级链接标记的使用●教学重点字体、图片和超级链接标记的使用●教学难点理解书签超级链接的意义第6章表格1表格2表格标记3表格属性修饰4设置行的属性5设置单元格的属性6表格嵌套●教学基础要求掌握简单表格的制作表格中单元格的合并以及表格嵌套和叠加操作●教学难点理解表格属性rowspan与colspan的含义以及表格嵌套实现第7章框架1框架简介2框架的设置3子窗口的设置4浮动框架●教学基础要求掌握框架的制作●教学重点框架的嵌套使用●教学难点理解框架属性name、target的意义第8章表单1表单2输入3多行文本输入框4下拉列表框●教学基础要求掌握框架的使用●教学重点表单元素标志与属性●教学难点理解表单中相应元素对应标志及属性的含义第9章使用CSS格式化网页1样式表的定义与使用2定义选择符3文字与排版式的使用4背景与颜色的使用5美化网页与超链接的设置6矩形模块的概念与使用7列表●教学基础要求在网页中掌握CSS的运用方法●教学重点样式的定义CSS准确应用第10章javascript基础1javascript起步2javascript程序3标识符和变量4运算符和表达式5javascript程序控制结构6常用对象7事件编程●教学基础要求掌握JavaScript在网页开发中的程序设计●教学重点JavaScript函数、BOM对象的处理、DOM对象的处理●教学难点BOM对象的处理、DOM对象的处理、CSS2Properties对象的处理第11章web设计基础1web设计原则2网站结构规划3网页布局4内容设计5色彩设计●教学基础要求掌握WEB设计的原则●教学重点网页布局●教学难点网页规划第12章页面布局技术1.表格布局方法2.div+css布局方法3.页面导航布局方法●教学基础要求掌握网页设计中布局方法●教学重点div+css布局●教学难点div+css布局样式的定义与应用四、 课时安排建议（列简表） 序号 内容或章节 讲授学时安排作业 备注1 第1章 网页与网站基础 3 浏览网站，查看源文件2 第2章html 基础3 使用HTML 手工编写网页3 第3章文字与段落 34 第4章列表 35 第5章超链接 36 第6章表格 37 第7章框架 38 第8章表单3 9 第9章css 格式化网页 12 利用CSS 控制网页元素的风格和样式10 第10章javascript 基础 12 编写客户端脚本，与网页元素进行动态交互 11 第11章web 设计基础 3 制作综合网页12第12章 页面布局技术3合计 54五、 选用的教材和课件 教材：《网页设计与开发—html 、css 、javascript 实例教程》 课件：自作六、 考核方式和成绩评定 考核方式：综合设计作品成绩评定：平时成绩：30% ，考试（考核）：70%七、 主要教学参考书(注明：著者、书名、版本、出版者、出版年)执笔人： 审定人： 系（部）主任：。
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
第5章 HTML语言基础
5.2.1 HTML的标题标记
例5-2 文件头标记的应用。 <!--文件名：example5-2.html-->
<html>
<head> <title>文件头标记的应用</title> <meta name="keywords" content="study, computer">
<meta name="author" content="Zhangjie">
5.2.2 HTML的正文标记
（6）页面内容距浏览器边界的距离 格式： <body leftmargin="number01" topmargin=" number02">…</body> 说明：leftmargin属性和topmargin属性取值均为数值，分别表示网页 主体内容距浏览器左端和顶端的距离，如，<body leftmargin=“30” topmargin=“ number50”>。
属性：<body>标记一般有六种可选属性，它们用来设置Web页面的外 观。这些属性分别是：
（1）页面背景颜色属性
格式：<body bgcolor="#RRGGBB">…</body>
说明：该属性是用来设置页面的背景颜色的，其值可用六位十六进 制形式的颜色代码表示。颜色代码#RRGGBB中的RR、GG、BB分别表示红、 绿、蓝三种原色的亮度，取值范围在00～FF之间，数值越大亮度越高， 如颜色代码#000000表示为黑色。常见的颜色代码如表5-1所示。
WORD目录超链接操作步骤
WORD可链接目录制作教程一、目录定义根据文章内容分别定义相关章节的标题、正文。
1.选择需定义的章节的标题2.定义根据章节的划分确定标题的级别，最上一级用标题1，第二级用标题2，…正文内容不用另外定义。
二、目录生成定义好所有的标题和正文后，就可进行目录生成了。
在菜单里选插入—>引用—>索引和目录，在弹出的窗口选择目录框，然后点确定即可。
三、修改与更新目录制成之后，在目录页点击任何一章节均可直接进入该章节所在页面。
每次对文章修改后，对目录可进行自动修改和刷新。
1.对目录进行全选2.更新点右键，在弹出的菜单选更新域分两种情况：一、直接编辑目录（如一本书目录为例，分三步聚）1、设置制表站：格式/制表位/在‘位置’中输入38字符；选择对齐方式为‘右对齐’，前导符选择‘5’/设置/确定2、设置项目符号及编号：格式/项目符号及编号/多级符号/选择类型（默认第一种‘梯式’）/自定义/在‘编号格式’中的‘1’前添加‘第’字，在‘1’后再添加‘章’字/确定3、编辑：自动出现‘第1章’按键盘上Tab，输入页码/回车就会出现‘第2章’，按Tab键（级别就会小一级）注：若按Shift+Tab级别便会增一级，如此类推。
二、建立超级链接目录（提取索引与目录）：文档内容已全部编辑好（当然文档中必须具有标题及标题样式）：光标置于文档最前面（快捷键Ctrl+Home）/插入菜单/索引与目录/目录/确定（便自动产生目录，指针单击某项即快速查看相关内容，类似网页链接。
Word中动态目录的制作一、确定目录的显示级别先把目录分为两层，即章和节两层，对应正文标题的章和节两个级别，一级为章标题，二级为节标题，把其他内容大纲级别设置为正文。
二、格式的设置选中第一章标题，单击‚格式‛菜单，选择‚样式‛，在样式对话框中单击‚新建‛按钮，出现新建样式对话框，样式名称可以默认为（样式1），在基准样式中选‚标题1‛，选中自动更新复选框，在下面一排按钮中单击‚格式‛，选择‚字体‛，在出现的字体对话框中选黑体、3号、加粗，单击‚确定‛按钮。
网页设计习题
第1章引言1.选择题（1）通常网页的首页被称为（ A ）。
A．主页B．网页C．页面D．网址（2）网页的基本语言是（ C ）。
A．JavaScript B．VBScript C．HTML D．XML（3）网页在Internet上是通过URL来指明其所在位置的，每个不同的网页都应该有不同的URL，如263网站主页的URL就是（ A ）。
A． B．http:\\C．ftp:// D．mailto:（4）下列不属于Macromedia公司产品的是（ D ）。
A．Dreamweaver B．Fireworks C．Flash D．Frontpage（5）下列属于静态网页的是（ A ）。
A．index.htm B．index.jsp C．index.asp D．index.php（6）属于网页制作平台的是（ C ）。
A．photoshop B．flash C．dreamweaver D．cuteFTP（7）要想在打开网页时弹出一个信息框，可以使用下列（ C ）技术实现。
A．CSS技术B．HTML技术C．调用JavaScript D．URL（8）以下说法中，错误的是（ B ）。
A．网页的本质就是HTML源代码B．网页就是主页C．使用“记事本”编辑网页时，应将其保存为.htm或.html后缀D．本地网站通常就是一个完整的文件夹（9）URL是下列（）的简写，中文译作（ D ）。
A．Uniform Real Locator，全球定位B．Unin Resource Locator，全球资源定位C．Uniform Real Locator，全球资源定位D．Uniform Resource Locator，全球资源定位（10）下列（ D ）软件不能编辑html语言。
A．记事本B．FrontPage C．Dreamweaver D．C语言2.填空题（1）从IE浏览器菜单中选择查看->源文件命令，可以在打开的记事本中查看到网页的源代码。
06386网页设计与制作
湖北省高等教育自学考试课程考试大纲课程名称：网页设计与制作课程代码：06386第一部分课程性质与目标一、课程的性质与特点“网页设计与制作”是湖北省高等教育自学考试网络传播专业（专科段）开设的一门专业实践课程。
网页是网络中信息传播的重要载体，是当今网络传播应用的主要形式。
作为网络与新媒体专业的学生只有了解、掌握了网页设计与制作的基本原理、基本操作方法，才能更好进行网络传播的应用与实践。
本课程通过对网页的基本原理、CSS基础、网页页面的布局结构、文本图像与多媒体的使用、页面链接、列表与表格、表单与程序控制制作流程、以及对相关软件的操作掌握后，可以独立完成对网页的制作设计与编辑，从而将新闻等网络信息通过网页展现，更好将网络新闻的采编评与网络传播的网页展现形式结合，充分发挥网络传播的特点。
在网络与新媒体专业学生将来的实际工作中需要经常用到本课程内容中介绍的基本原理和方法。
因此，本课程是该专业学生必须掌握的一门课程。
本课程是本专业及相关专业相关课程进一步学习的基础课程。
二、课程目标和基本要求网页的设计与制作是一门与计算机结合十分紧密的课程。
既需要一定的理论知识，也需要一定的实际操作能力。
通过本课程自学、上机实习、作业等方式的学习，要求学生掌握网页的基本原理、网页制作与设计的基本方法、能操作相关应用软件，最终达到可以独立或者与他人分工合作完成简单和复杂网页的设计与制作。
具体地说，包括以下几个方面：（1）考生了解网页的基本概念、基本结构、制作流程和设计原则等相关基础知识，掌握网站的开发流程，能独立规划和设计网站。
（2）要求考生能熟练掌握多媒体素材在网页制作中的运用。
（3）使考生掌握网页描述语言HTML、CSS的用法，能熟练运用常见的网页标记。
掌握JavaScript 脚本语言程序设计的基础知识，能编写JavaScript脚本创建具有动态效果的网页。
本课程要求学生在自学过程中，特别要加强实践环节，培养动手能力，掌握相关软件的使用方法，要求应试者具备一定的上机能力和实际应用能力。