网页制作教程自学指导书.doc

网页制作教程自学指导书一、课程编码及适用专业课程编码：总学时：82面授学时：28自学学时：54适用专业 ：计算机（函授专科）二、课程性质网页制作教程是计算机专业学生的必修课程。本课程全面系统地介绍了网页制作技术的基本理论和实际应用。本课程以实用为基本的出发点，不但包括各种网页制作技术的基础理论，而且强调了网页制作的具体应用，使学生既能打下坚实的理论基础，又能掌握实际的操作技能。三、本课程的地位和作用 现在互联网已深入到我们工作和生活的各个方面，互联网上最重要的应用无疑是WWW应用。网页制作教程正是要教会学生制作网页。因此网页制作教程是高等学校计算机专业的一门重要课程。通过本课程的学习，学生不但能理解各种网页制作技术的基础理论，而且还将学会自己动手制作网页。四、学习目的与要求通过本课程的学习，学生应掌握网页制作的基本理论-HTML语言，包括HTML的概念、HTML中的文本、图像、超链接、表格、框架、表单、其他特殊对象；学生应熟悉网页制作进一步的理论-CSS技术、JavaScript、DHTML技术；学生应会熟练使用DreamweaverMX制作网页。为学好这门课，学习时应注意以下几点：（一）要抓主要矛盾，有条件地略去一些次要因素，找出问题的本质。（二）要抓住重点，即应牢固掌握基本概念和基本思路。（三）要会举一反三，这是学好计算机的一个关键点。无论是硬件还是软件，在很多地方是相通的。（四）学习要理论联系实际，多动手、多上机。五、本课程的学习方法为了学好本课程，首先要具有正确的学习目的和态度，应为我国社会主义现代化事业而学习。在学习中要刻苦钻研、踏踏实实、虚心求教、持之以恒。在学习时要抓住基本概念、基本理论、工作原理和分析方法；要注意各部分内容之间的联系，前后是如何呼应的；要重在理解，能提出问题，积极思考，不要死记；通过习题可以巩固和加深对所学理论的理解，并培养动手能力，所以应按要求完成布置的作业题。解题前，要对所学内容基本掌握；解题时，要看懂题意，注意分析。除学习规定教材外，应参阅相关的参考书。应尽可能的多上机，只有多练，才能记住学过的东西。学习计算机的目的是熟练应用计算机。通过各个学习环节，培养分析和解决问题的能力和创新精神。解决问题不是仅仅照着书本上的例题作练习题，而是要求使用已有的知识对提出的要求能理解和领悟，并能提出自己的思路和解决问题的方案，这是一个创新过程。六、自学内容与指导第一章 HTML基础 （一）自学内容WWW由无数的Web服务器构成，我们通过浏览器访问这些服务器上的网页，不同的网页通过超链接联系在一起，构成了WWW的网状结构。HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示。最基本的HTML标记符包括：HTML标记符和、首部标记和以及正文标记和。BODY标记符包括一些常用属性，用于控制网页的基本显示效果。发布网页的基本过程为：制作本地站点、申请网页空间、上传网页。（二）本章重点和难点 1、HTML的工作原理。2、Web页的基本结构。（三）学习指导HTML(Hypertext Markup Language) 是一种规范（或者说是一种标准），它通过标记符（tag）来标记要显示的网页的各个部分。通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。浏览器按顺序阅读网页文件（HTML文件），然后根据内容周围的HTML标记符解释和显示各种内容，这个过程叫做语法分析。HTML中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的WWW。一个 Web 页实际上对应于一个 HTML 文件。HTML 文件以 .htm 或 .html 为扩展名。最基本的HTML文档包括：HTML标记、首部标记和、以及正文。具体的标记符参见教材，不必死记硬背，关键是多上机，多练。第二章 文本格式 （一）自学内容HTML中用于进行文本分段的标记符包括：段落标记符P、换行标记符BR、水平线标记符HR、标题标记符Hn等。在标记符中使用align属性，可以控制内容的对齐方式。FONT标记符是最常用的控制字体格式的标记符，它可控制文字的字号、颜色以及字体。物理字符样式和逻辑字符样式可控制文字的不同显示效果，例如设置粗体、斜体等。OL和LI标记符结合，可以创建有序列表；UL和LI标记符结合，可以创建无序列表。（二）本章重点和难点1、。HTML中文本如何分段。2、FONT标记符。（三）学习指导分段标记符用于将文档划分为段落，标记为，其中结束标记符通常可省略。换行标记符用于在文档中强制断行，标记为一个单独的。该标记与分段标记符是有区别的。align 属性用于设置段落的对齐格式，其值包括：right（右对齐）、left（左对齐）、center（居中对齐）和 justify（两端对齐）。align 属性可应用于多种标记符，最典型的是应用于 DIV、P、Hn（标题标记符）、HR 等标记符。FONT标记符用于控制字符的样式，具有3个常用的属性：size、color 和 face。1.size 属性字号属性size用于控制字符的大小。它的取值可以是绝对数值：从1到7，3是默认值。也可以使用相对数值：用 + 号或 - 号来作为相对值指定。2.color 属性字体标记符的 color 属性可用来控制文字的颜色，它的使用方法与正文标记符中使用的 bgcolor 属性相同。用户可以使用颜色名称或十六进制值指定颜色。3.face 属性face 属性用来指定字体样式。字体样式也就是通常所说的“字体”。例如，常用的英文字体有“Times New Roman”、“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(Universal Resource Locator，统一资源定位器)是表示Web上资源的一种方法，通常可以理解为资源的地址。（相对于本地路径而言，URL可以看作是一种网络路径。）组成：一个URL通常包括3部分：一个协议代码、一个装有所需文件的计算机地址(可用域名或IP地址表示，或一个电子邮件地址等)，以及具体的文件路径和文件名。例如：/forum/index.htm创建超链接需要使用 A 标记符，它的最基本属性是 href，用于指定超链接的目标。A 标记符的格式如下：链接点 链接目标：要访问的目标页面或其他资源，使用URL来表示。通过为href指定不同的值，可以创建出不同类型的超链接。链接点：在和之间任何可单击的网页元素，如文字或图像。第四章 表格与框架 （一）自学内容创建表格一般需要使用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是默认值，即默认时不显示单元格间的分隔线。 groups表示仅在行组和列组间有分隔线。说明：行组和列组是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属性。表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。设置水平对齐的方法是：在标记符、内使用align属性。设置表格数据在垂直方向的对齐应在TR、TD或TH标记符中使用valign属性。框架在实际网页制作中的最典型应用是设计页面布局，主要包括指定超链接的目标框架和使用页内框架1. 指定目标框架所谓目标框架，就是指定超链接的目标文件要在其中显示的那个框架。方法：控制超链接的目标文件在哪一个框架内显示的方法是在 A 标记符内使用 target 属性，格式为：超链接点2. 目标框架名target属性的值可以是已定义的框架名(在框架集文件中为某个FRAME标记符指定的name属性值)，也可以是以下特殊框架名：_top表示将超链接的目标文件装入整个浏览器窗口。_self 表示将超链接的目标文件装入当前框架(即超链接所在的框架)，以取代该框架中正在显示的文件。此取值为默认值，即如果不指定别的目标框架，则超链接的目标文件将在超链接所在的框架打开。_blank表示将超链接的目标文件装入一个新的浏览器窗口。_parent 表示将将链接的目标文件装入当前框架的父框架(也就是当前框架的最近一级的FRAMESET)，但一般浏览器将其实现为等同于_top，即在整个浏览器窗口中装载目标页面。3.页内框架与框架结构网页是将整个浏览器划分为多个区域不同，页内框架是作为网页的一个组成部分，因此在一些场合常常可以获得很好的布局效果。页内框架应使用标记符IFRAME指定，它是插入到网页中作为一个对象来使用的。第五章 表单与特殊对象 （一）自学内容表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。 创建表单需要使用FORM标记符，在该标记符中可以指定处理表单的方式。 使用INPUT标记符可以创建文本框、口令框、复选框、单选框、文件选择框、按钮等表单控件，使用TEXTAREA标记符可以创建多行文本框，使用SELECT和OPTION标记符可以创建选项菜单。 使用LABEL标记符可以指定控件的标签。 使用OBJECT标记符可以插入Flash、Shockwave等多媒体对象，使用APPLET标记符可以插入Java小应用程序对象，使用MARQUEE标记符可以插入滚动字幕对象。（二）本章重点和难点1、 表单控件的类型。2、 网页中的各类特殊对象，包括多媒体对象、Java小应用程序对象。（三）学习指导表单控件的类型HTML定义了以下类型的控件：文本框用以输入文本信息。可以创建三种类型的文本框：使用INPUT标记符可以创建单行文本框和口令框(单行文本框和口令框的区别在于在后者中输入的字符将以*显示)，而使用TEXTAREA标记符则可以创建一个多行文本框。对于任何一种文本框，所输入的文本将作为控件的当前值。复选框用以在所给出的多个选项中同时选择多条信息（即多项选择）。复选框使用户可以选择信息，对于多个具有同一名称的复选框，用户可以选中其中的一个或多个。可以使用INPUT标记符创建复选框。单选框用以在所给出的多个选项中选择一条信息（即单项选择）。单选框与复选框类似，也是用于选择信息。但与复选框不同的是：对于具有同一控件名称的多个单选框，用户只能选择其中之一。可以使用INPUT标记符创建单选框。按钮可以创建三种类型的按钮：提交按钮：即submit按钮，单击该按钮将提交表单；重置按钮：即reset按钮，单击该按钮将使所有控件恢复其初始值，以便用户重新输入或选择；普通按钮：即button按钮，其功能取决于所使用的脚本程序。可以使用INPUT标记符创建按钮。选项菜单选项菜单使用户可以从多个选项中进行单项或多项选择。SELECT标记符和OPTION标记符用于创建选项菜单。文件选择框文件选择框使用户可以选择文件，以便这些文件的内容可以与表单一起提交。可以使用INPUT标记符创建文件选择框。隐藏控件隐藏控件并不在表单中显示，但其值会与表单一起提交。该控件通常用于保存一些特定信息。可以使用INPUT标记符创建隐藏控件。对象控件也可以在表单中插入通用控件，以便使这些控件的值与表单中其他控件的值一起提交。可以使用OBJECT标记符创建对象控件。 使用网页中的各类特殊对象必须用OBJECT标记符和PARAM标记符。Flash动画可以算得上是近年来最热门的动画了，它的最典型特点就是动画文件小，但获得的各种动画效果却非常好。这是因为Flash动画是矢量动画，能够用比较少的文件大小表现更多的细节。Java小应用程序(Java Applet)是由Java语言编写的一种程序，可以直接插入到网页中，以便增强网页效果或实现某些特定功能。第六章 CSS技术 （一）自学内容CSS技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。在网页中使用CSS包括三种常用方式：将样式定义直接嵌入到标记符中、将样式定义嵌入到网页中以及将样式定义包含在外部CSS样式文件中。CSS样式定义的基本形式为：selector propertyl：valuel；property2：value2；，其中，selector可以是HTML标记符、具有上下文关系的HTML标记符、用户定义的类、用户定义的ID以及虚类；而property和value则分别是由CSS标准定义的CSS属性和相应的值。CSS属性包括：字体与文本属性、颜色与背景属性、布局属性、定位和显示属性、列表属性以及鼠标属性。过滤器(filter)是CSS的一种扩充，它能够将特定的效果应用于文本容器、图片或其他对象。（二）本章重点和难点1.CSS样式表项的组成2.如何在网页中使用CSS技术（三）学习指导CSS样式表项的组成：selector propertyl:valuel;property2:value2; 其中selector表示需要应用样式的内容，property表示由CSS标准定义的样式属性，value表示样式属性的值。5种常用的selector包括：HTML标记符、具有上下文关系的HTML标记符、用户定义的类、用户定义的ID、虚类。在网页中使用CSS技术有三种方法：1、使用style属性可以在HTML标记符中直接嵌入样式定义，如下所示：也就是将style属性的值指定为CSS属性和相应值以冒号组对，用分号分隔。2、在HTML标记符中直接指定样式信息显然没有发挥出样式表的主要优势-简化格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将同类的样式都统一定义，然后再具体应用于网页中的元素，那么就能体现出CSS的优越性了。实际上，这正是CSS应用于网页的最常用方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式。定义样式的方式为： 其中，selector表示样式作用的对象，property和value则表示相应CSS属性和值的配对。3、在STYLE标记符中定义样式对于单独网页的格式设置和维护很有效，但如果在一个大网站中，为每个页面都定义类似的样式，显然又是效率不高的，这时最好的办法就是将重复在多个网页中使用的样式放在外部样式表文件中，然后通过链接的方式引用其中的样式。链接式样式的优点很明显，网页设计者可以在一个链接的CSS文件上做修改，然后所有引用它的网页都会自动更新。第七章 JavaScript和DHTML技术（一）自学内容在网页中插入脚本语言通常有三种方式：使用SCRIPT标记符、在标记符中直接嵌入脚本以及链接外部脚本文件。JavaScript脚本语言的基本要素包括：变量、运算符、表达式、语句、以及函数。JavaScript是一种基于对象的脚本语言，它可以使用JavaScript对象和浏览器对象这两类对象。DHTML技术结合了HTML、CSS和客户端脚本技术，通过在脚本中引用和动态更改各种HTML对象的属性(包括CSS属性)，从而获得交互式和动态显示的效果。（二）本章重点和难点1.什么是脚本？脚本分哪两类？2.什么是DHTML？它分为哪三方面？（三）学习指导脚本即脚本语言，是嵌入在 HTML 源码中使用的编程语言，用以增强网页的功能和表现力。脚本语言按其执行时所处的位置分为两类：1.服务器端脚本语言直接在服务器端执行，执行的结果传输到客户端浏览器中显示。常用的服务器端脚本语言有：asp、jsp、php、perl等。2.客户端脚本语言随网页内容传输到客户端，由客户端浏览器解释执行。执行的结果直接在端浏览器中显示。常用的客户端脚本语言有两种：VB Script：仅被 MicroSoft Internet Explorer 浏览器所支持。Java Script: 可被 MicroSoft Internet Explorer、Netscapt Navigator、Mozilla、Operor等众多的浏览器所支持。Java Script几乎已经成为客户端脚本的标准。所谓动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成。DHTML建立在原有技术的基础上，可分为三个方面：一是HTML，也就是页面中的各种页面元素对象，它们是被动态操纵的内容； 二是CSS，CSS属性也是动态操纵的内容，从而获得动态的格式效果； 三是客户端脚本(例如JavaScript)，它实际操纵Web页上的HTML和CSS。第八章 用DreamweaverMX制作网页（一）自学内容DreamweaverMX的重要界面元素包括：插入栏、属性检查器和选项面板等。DreamweaverMX具有强大的站点管理功能，能够很好地维护本地站点并能方便地管理远程站点。使用属性检查器可以为文本添加段落格式、字符格式、列表格式以及超链接格式。在DreamweaverMX中可以方便地插入图像和设置图像属性，并能制作一些常见的动态图像效果。使用DreamweaverMX不但能嵌入常用的各种多媒体对象，而且能制作Flash按钮和Flash文本。通过使用表格、层和框架，DreamweaverMX可以对网页进行适当的布局。通过使用表单和行为，DreamweaverMX可以方便地创建出各种动态效果。在DreamweaverMX中可以使用两类样式修饰各种网页元素，即HTML样式和CSS样式。（二）本章重点和难点网站开发的流程。（三）学习指导网站建设的一般流程为：规划阶段，设计阶段，开发阶段，发布阶段，维护阶段。1 规划阶段：要考虑以下问题：确定网站目标，分析目标用户对站点的需求，确定站点的风格，还要考虑网络技术因素（带宽，浏览器与分辨率，即时交互与插件）。2 设计阶段：要考虑以下问题：站点的目录结构，导航系统，页面的版式，网页中的颜色，文字、图像、动画等对象的使用。3 开发阶段：将站点中的网页按设计方案制作出来。需要注意的是制作好的网页一定要进行测试。4 发布阶段：首先向ISP申请空间，然后将制作好的网页上传至服务器。5 维护阶段：应该对网站不断地更新和修改。七、自学进度及各章节学时安排自学周数18周，每周保证3学时，总计54学时。