网页制作教程自学指导书

1《网页制作教程》自学指导书一、课程编码及适用专业课程编码：总学时：82面授学时：28自学学时：54适用专业：计算机（函授专科）二、课程性质《网页制作教程》是计算机专业学生的必修课程。本课程全面系统地介绍了网页制作技术的基本理论和实际应用。本课程以实用为基本的出发点，不但包括各种网页制作技术的基础理论，而且强调了网页制作的具体应用，使学生既能打下坚实的理论基础，又能掌握实际的操作技能。三、本课程的地位和作用现在互联网已深入到我们工作和生活的各个方面，互联网上最重要的应用无疑是应用。《网页制作教程》正是要教会学生制作网页。因此《网页制作教程》是高等学校计算机专业的一门重要课程。通过本课程的学习，学生不但能理解各种网页制作技术的基础理论，而且还将学会自己动手制作网页。四、学习目的与要求通过本课程的学习，学生应掌握网页制作的基本理论----HTML语言，包括HTML的概念、HTML中的文本、图像、超链接、表格、框架、表单、其他特殊对象；学生应熟悉网页制作进一步的理论----CSS技术、JavaScript、DHTML技术；学生应会熟练使用DreamweaverMX制作网页。为学好这门课，学习时应注意以下几点：（一）要抓主要矛盾，有条件地略去一些次要因素，找出问题的本质。（二）要抓住重点，即应牢固掌握基本概念和基本思路。（三）要会举一反三，这是学好计算机的一个关键点。无论是硬件还是软件，在很多地方是相通的。（四）学习要理论联系实际，多动手、多上机。五、本课程的学习方法为了学好本课程，首先要具有正确的学习目的和态度，应为我国社会主义现代化事业而学习。在学习中要刻苦钻研、踏踏实实、虚心求教、持之以恒。在学习时要抓住基本概念、基本理论、工作原理和分析方法；要注意各部分内容之间的联系，前后是如何呼应的；要重在理解，能提出问题，积极思考，不要死记；通过习题可以巩固和加深对所学理论的理解，并培养动手能力，所以应按要求完成布置的作业题。解题前，要对所学内容基本掌握；解题时，要看懂题意，注意分析。除学习规定教材外，应参阅相关的参考书。应尽可能的多上机，只有多练，才能记住学过的东西。学习计算机的目的是熟练应用计算机。通过各个学习环节，培养分析和解决问题的能力和创新精神。解决问题不是仅仅照着书本上的例题作练习题，而是要求使用已有的知识对提出的要求能理解和领悟，并能提出自己的思路和解决问题的方案，这是一个创新过程。2六、自学内容与指导第一章HTML基础（一）自学内容服务器构成，我们通过浏览器访问这些服务器上的网页，不同的网页通过超链接联系在一起，构成了的网状结构。HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示。最基本的HTML标记符包括：HTML标记符HTML和/HTML、首部标记HEAD和/HEAD以及正文标记BODY和/BODY。BODY标记符包括一些常用属性，用于控制网页的基本显示效果。发布网页的基本过程为：制作本地站点、申请网页空间、上传网页。（二）本章重点和难点1、HTML的工作原理。2、Web页的基本结构。（三）学习指导HTML(HypertextMarkupLanguage)是一种规范（或者说是一种标准），它通过标记符（tag）来标记要显示的网页的各个部分。通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。浏览器按顺序阅读网页文件（HTML文件），然后根据内容周围的HTML标记符解释和显示各种内容，这个过程叫做语法分析。HTML中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的。一个Web页实际上对应于一个HTML文件。HTML文件以.htm或.html为扩展名。最基本的HTML文档包括：HTML标记HTML/HTML、首部标记HEAD和/HEAD、以及正文BODY/BODY。具体的标记符参见教材，不必死记硬背，关键是多上机，多练。第二章文本格式（一）自学内容HTML中用于进行文本分段的标记符包括：段落标记符P、换行标记符BR、水平线标记符HR、标题标记符Hn等。在标记符中使用align属性，可以控制内容的对齐方式。FONT标记符是最常用的控制字体格式的标记符，它可控制文字的字号、颜色以及字体。物理字符样式和逻辑字符样式可控制文字的不同显示效果，例如设置粗体、斜体等。OL和LI标记符结合，可以创建有序列表；UL和LI标记符结合，可以创建无序列表。（二）本章重点和难点1、。HTML中文本如何分段。2、FONT标记符。（三）学习指导分段标记符用于将文档划分为段落，标记为P/P，其中结束标记符通常可省略。换行标记符用于在文档中强制断行，标记为一个单独的BR。该标记与分段标记符P是有区别的。3align属性用于设置段落的对齐格式，其值包括：right（右对齐）、left（左对齐）、center（居中对齐）和justify（两端对齐）。align属性可应用于多种标记符，最典型的是应用于DIV、P、Hn（标题标记符）、HR等标记符。FONT标记符用于控制字符的样式，具有3个常用的属性：size、color和face。1.size属性字号属性size用于控制字符的大小。它的取值可以是绝对数值：从1到7，3是默认值。也可以使用相对数值：用+号或-号来作为相对值指定。2.color属性字体标记符的color属性可用来控制文字的颜色，它的使用方法与正文标记符BODY中使用的bgcolor属性相同。用户可以使用颜色名称或十六进制值指定颜色。3.face属性face属性用来指定字体样式。字体样式也就是通常所说的“字体”。例如，常用的英文字体有“TimesNewRoman”、“Arial”等；常用的中文字体有“宋体”、“楷体”等。第三章图像与超链接（一）自学内容Web页中使用的图像通常都是以下格式之一：GIF、JPEG、PNG、矢量格式。常用的图形图像处理软件包括：Photoshop、Fireworks、Flash等。在网页中插入图像需要使用IMG标记符，它包括src、alt、width、height等属性，这些属性可控制图像的显示效果。目前在网页中使用最广泛的是两类动画：Flash动画和GIF动画。在网页中创建超链接需要使用A标记符，通过为该标记符的href属性指定不同的值，可以创建出页面链接、锚点链接、电子邮件链接等不同类型的超链接。图像映射就是指在一幅图中定义若干个区域，每个区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面。（二）本章重点和难点1.图像标记符IMG。2.创建超链接。（三）学习指导在HTML中，使用IMG标记符可以在网页中加入图像。它具有两个基本属性：src和alt，分别用于设置图像文件的位置和替换文本。src表示要插入图像的文件名，必须包含绝对路径或相对路径，图像可以是GIF文件(后缀为．gif)、JPEG文件(后缀为.jpg)或PNG文件(后缀为．png)。alt表示图像的简单文本说明，用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示。使用IMG标记符的width和height属性可以指定图像的宽度和高度，以告诉浏览器Web页应分配给图像多少空间。当浏览器解释Web页时，在实际下载图像之前会给图像预留出空间，以避免在每个图像下载时重新绘制网页，从而加快网页的下载速度。width和height属性的取值既可以是像素数，也可以是百分数。如果用百分数，表示图像占当前浏览器窗口大小的比例。URL(UniversalResourceLocator，统一资源定位器)是表示Web上资源的一种方4法，通常可以理解为资源的地址。（相对于本地路径而言，URL可以看作是一种网络路径。）组成：一个URL通常包括3部分：一个协议代码、一个装有所需文件的计算机地址(可用域名或IP地址表示，或一个电子邮件地址等)，以及具体的文件路径和文件名。例如：创建超链接需要使用A标记符，它的最基本属性是href，用于指定超链接的目标。A标记符的格式如下：Ahref=链接目标链接点/A链接目标：要访问的目标页面或其他资源，使用URL来表示。通过为href指定不同的值，可以创建出不同类型的超链接。链接点：在A和／A之间任何可单击的网页元素，如文字或图像。第四章表格与框架（一）自学内容创建表格一般需要使用TABLE标记符、TR标记符、TD标记符，在TD标记符中使用colspan属性和rowspan属性，可以合并单元格。在创建表格的各种标记符内使用不同的属性，可以控制表格的显示效果。表格在网页中最常用的功能就是进行页面版式的控制。框架是在同一个浏览器窗口中显示多个网页的技术，创建框架需要使用FRAMESET和FRAME标记符。在制作框架结构的网页时，最重要的是指定超链接的目标框架，从而获得交互式的界面效果。（二）本章重点和难点1.表格的属性设置。2.使用框架设计网页布局。（三）学习指导在TABLE标记内使用frame、rules和border属性可以设置表格的边框和单元格分隔线。1.frame属性表格边框表示表格最外层的四条框线，可以用frame属性进行控制，该属性的取值可以是：void表示无边框。void是默认值，即默认时不显示边框。above表示仅有顶框。below表示仅有底框。hsides表示仅有顶框和底框（水平方向）。vsides表示仅有左、右侧框（垂直方向）。lhs表示仅有左侧框。rhs表示仅有右侧框。box表示包含全部四个边框。border表示包含全部四个边框。2.rules属性rules属性用于控制是否显示以及如何显示单元格之间的分隔线，取值可以是：none表示无分隔线。none是默认值，即默认时不显示单元格间的分隔线。5groups表示仅在行组和列组间有分隔线。说明：行组和列组是HTML4.0中有关表格的两个概念，但目前没有浏览器支持，所以在此忽略不讲。rows表示仅有行分隔线。cols表示仅有列分隔线。a11表示包括所有分隔线。3.border属性border属性用于设置边框的宽度，其值为像素数。如果设置border=0，则意味着frame=void，rules=none(除非另外设置)。如果设置border为其他值(如果使用不指定值的单独一个border，相当于border=1)，则意味着frame=border，rules=a11(除非另外设置)。在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白，使用cellpadding属性可以控制表格分隔线和数据之间的距离，这两个属性的取值通常都采用像素数。表格在页面中的对齐与其他页面内容一样，可以直接在TABLE标记符中使用align属性。表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。设置水平对齐的方法是：在标记符TR、TH、TD内使用align属性。设置表格数据在垂直方向的对齐应在TR、TD或TH标记符中使用valign属性。框架在实际网页制作中的最典型应用是设计页面布局，主要包括指定超链接的目标框架和使用页内框架1.指定目标框架所谓目标框架，就是指定超链接的目标文件要在其中显示的那个框架。方法：控制超链接的目标文件在哪一个框架内显示的方法是在A标记符内使用target属性，格式为：Ahref=目标文件target=目标框架名超链接点/A2.目标框架名target属性的值可以是已定义的框架名(在框架集文件中为某个FRAME标记符指定的name属性值)，也可以是以下特殊框架名：_top表示将超链接的目标文件装入整个浏览器窗口。_self表示将超链接的目标文件装入当前框架(即超链接所在的框架)，以取代该框架中正在显示的文件。此取值为默认值，即如果不指定别的目标框架，则超链接的目标文件将在超链接所在的框架打开。_bl