下载文档原格式
《网页设计与开发》课程教学大纲《网页设计与开发》教学大纲一、课程简介网页设计课程是高等院校计算机、信息管理、电子商务和其他相关专业的一门重要的基础课程，也是一门实践性和技能性要求很强的学科。
课程涵盖HTML基本元素、CSS样式表和JavaScript脚本编程语言、页面布局和整站建设三大内容，全面介绍了WEB站点设计与开发的基本操作技术和应用技巧。
本课程采用课堂与实践相结合讲授、案例向导的教学方式。
二、教学目标通过本课程的学习，使学生对网页设计的基本原则、栏目和目录结构定义、主流页面布局方法、导航制作、图文排版、色彩理论等进行详细了解。
掌握网站规划、设计、制作、管理、发布的相关技术及网页制作的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表单网页、多媒体动态网页；掌握使用css技术进行网页布局的基本方法。
掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，对象的概念及使用JavaScript来进行开发、维护、管理和设置WEB应用程序；掌握HTML5最新页面开发技术；掌握综合网站设计和发布的基本流程和方法。
三、教学内容和要求1、教学内容教学内容主要分为基础内容和进阶提高两大部分。
基础内容全面地讲述了HTML、CSS、JavaScript技术。
主要包括HTML设计和开发所需了解的基本概念和框架结构；文字与段落、列表、超链接、表格、表单和多媒体在页面开发中的应用； CSS在实际开发中的应用技巧；JavaScript在动态网页开发中的基本概念和应用。
进阶提高主要包括web设计的基本原则和方法；基于表格的页面布局方法和基于div+css的页面布局方法，以及常见导航菜单的制作；HTML5中介绍了画布、新增表单元素及多媒体应用；综合案例系统介绍了网站开发从规划、实现到发布的完整过程。
2、教学要求●了解万维网的用途及网页设计的基本概念；●了解HTML、CSS、JavaScript在网页设计中的重要作用；●掌握HTML文档的基本结构及标记属性的使用方法和规则●理解HTML中的文本、字符、段落、表格、列表、表单标记的作用；●掌握主流页面布局方法；●理解JavaScript语言的作用和执行方式，掌握在网页中使用客户端脚本的方法，了解事件响应机制，掌握页面事件编程；●了解网页设计的基本原则和方法；●掌握HTML5最新网页设计技术；●掌握网站发布的基本流程。
Web前端开发技术(Web客户端编程)学分：3.5 学时：56 (28时理论/28时上机)一、课程的性质、地位与任务《Web前端开发技术》（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。
二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。
掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。
掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。
本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM 技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。
三、课程内容（重点△，难点★）1 Web前端开发技术综述1.1 Web概述1.1.1 了解Web起源1.1.2 理解Web特点1.1.3理解Web工作原理1.1.4 掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。
第一章习题1．HTML指的是（ A ）。
A超文本标记语言（Hyper Text Markup Language）B家庭工具标记语言（Home Tool Markup Language）C超链接和文本标记语言（Hyperlinks and Text Markup Language）2．web标准的制定者是（ B ）。
A 微软B万维网联盟（W3C）C网景公司（Netscape）3．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。
A <html> <head>…</head> <frame>…</frame> </html>B <html> <title>…</title> <body>…</body> </html>C <html> <title>…</title> <frame>…</frame> </html>D <html> <head>…</head> <body>…</body> </html>4．从IE浏览器菜单中选择____查看 源文件______命令，可以在打开的记事本中查看到网页的源代码。
5．实现网页交互性的核心技术是_______ JavaScript _______________。
6．CSS的全称是________ Cascading Style Sheet __________ ______。
7．写出你了解的专业网页编辑制作工具_____Dreamweaver_，_ EditPlus ___________。
8．URL的全称是____Uniform Resource Locator _____________________________。
第二章习题1.以下标记符中，用于设置页面标题的是（ A ）。
A <title>B <caption>C <head>D <html>2.以下标记符中，没有对应的结束标记的是（ B ）。
A <body>B <br>C <html>D <title>3.文件头标记也就是通常所见到的____<head>…</head>_____标记。
4.创建一个HTML文档的开始标记符是___<html>______，结束标记符是____</html>_____。
5.标记是HTML中的主要语法，分____单_____标记和____双_____标记两种。
大多数标记是____成对_____出现的，由____开始_____标记和_____结束____标记组成。
6.把HTML文档分为__头部_______和______主体___两部分。
___主体______部分就是在Web浏览器窗口的用户区内看到的内容，而__头部_______部分用来设置该文档的标题（出现在Web 浏览器窗口的标题栏中）和文档的一些属性。
7.HTML4或XHTML1.0的三种文档风格是__严格型、过渡型____、框架型_____。
8.简述一个HTML文档的基本结构。
一个完整的HTML文件包含头部和主体两个部分的内容，在头部内容里，可定义标题、样式等，文档的主体内容就是要显示的信息。
<html>标记通常会作为HTML 文档的开始代码，出现在文档的第一句，而</html>标记通常作为HTML文档的结束代码，出现在文档的尾部，其他的所有的HTML代码都位于这两个标记之间，该标记用于告知浏览器或其他程序，这是一个Web文档，应该按照HTML语言规则对文档内容的标记进行解释；<head>…</head>是HTML文档的头部标记；<body>…</body>标记之间的文本是在浏览器中要显示的页面内容。
第三章习题1.下面哪一项是换行符标记？（ C ）A．<body> B．<font> C．<br> D．<p>2.在HTML中，标记<font>的Size属性最大取值可以是（C ）。
A. 5 B．6 C．7 D．83.在HTML中，标记<pre>的作用是（ B ）。
A.标题标记B．预排版标记C.转行标记D．文字效果标记4.下面的（ B ）特殊符号表示的是空格。
A．" B． C．& D．©5.要设置一条1像素粗的水平线，应使用的HTML语句是_ <hr size=1>_ 。
6.在HTML文件中，版权符号的代码是__©___。
7.使页面的文字居中的方法有<center>…</center>__。
8.标题字的标记是<h>____。
第四章1.列表（List），顾名思义就是在网页中将相关资料以条目的形式有序或者无序排列而形成的表。
2.常用的列表有无序列表、有序列表和定义列表三种。
3.无序列表标记<ul>的type属性可以指定出现在列表项前的项目符号的样式，其取值可以是：disc 、circle 和square 三种。
4.有序列表标记<ol>的type属性可以指定出现在列表项前的项目编号的样式，其取值可以是： 1 、 a 、 A 、i 和I 五种。
5.使用有序列表标记的START 属性后，用户则可改变编号的起始值。
该属性值是一个整数，表示从哪一个数字或字母开始编号。
6.使用列表项标记<li></li>的type属性，用户可以指定单个列表项的符号（对于无序列表而言）或编号（对于有序列表而言）。
7.使用列表项标记<li></li>的V ALUE 属性，可以改变当前列表项的编号大小，并会影响其后所有列表项的编号大小。
但该属性只适用于有序列表中。
第五章习题1.下列哪一项是在新窗口中打开网页文档（B ）。
A．_self B．_blank C．_top D．_parent2.在网页中，必须使用（ A ）标记来完成超级链接。
A．<a>…</a> B．<p>…</p>C．<link>…</link>D．<li>…</li>3.超链接是建立网站、网页主要元素之一。
若要建立在同一网页内的链接，应采用以下（ B ）链接形式。
A．链接到一个E-mail B．书签式链接C．框架间链接D．链接到一个网站4.关于超链接，（ A ）的说法是正确的。
A．不同网页上的图片或文本可以链接到同一网页或网站B．不同网页上的图片或文本只能链接到同一网页或网站C．同一网页上被选定的一个图片或一处文本可以同时链接到几个不同网站D．同一网页上图片或文本不能链接到同一书签5.若要在页面中创建一个图像超链接，要显示的图形为myhome.jpg，所链接的地址为，以下用法中正确的是（B ）。
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">6.以下创建mail链接的方法，正确的是（ C ）。
A．<ahref="**************">管理员</a>B．<ahref="callto:**************">管理员</a>C．<ahref="mailto:**************">管理员</a>D．<ahref="Email:**************">管理员</a>7.下面是相对路径的是（ C ）。
A． B．ftp://219.153.40.150C．../a.html D．/a.html8.下面哪组属性是用于设置图像映射的区域坐标的（ D ）。
A．rec B．circle C．poly D．coords9.在HTML文件中，URL是统一资源定位器。
10.在HTML文件中，超链接可以分为内部链接和外部链接。
11.关于超链接，target 属性用于指定链接的目标窗口。
第六章习题1.<marquee> ... </marquee>，表示（D ）A.页面空白B.页面属性C.标题传递D.滚动文字2.嵌入背景音乐的HTML代码是（B ）A.<backsound src=#>B.<bgsound src=#>C.<bgsound url=#>D.<backsound url=#>3.通过哪个属性可以为图片添加边框线. （ C ）A. htmlB.aspC.borderD.img4.网页中常用的图片格式为GIF 、JPEG 和PNG 。
5.在HTML文档中，显示图片所用的标记是<img> 。
6.<marquee> ... </marquee>的width和height属性表示滚动背景的宽和高。
7.使用<bgsound> 标记只能添加声音文件，不能显示和调整播放软件的控制面板，而使用<embed> 标记则可以插入各种各样的多媒体。
第七章习题1.以下选项中，哪个全部都是表格标记（ B ）。
A．<table><head><tfoot> B．<table><tr><td>C．<table><tr><tt> D．<thead><body><tr>2.请选择可以使单元格中的内容进行左对齐的正确HTML标记（ A ）。
