快速学会网页制作

《快速学会网页制作》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、快速学会网页制作一、网页制作基础知识教学目标：了解网页制作的一些基础知识，如网站和网页的区别、网页的类型、网页的构成元素等，然后在了解的基础上再通过练习来巩固。教学重点难点：在深刻了解概念的基础上把理论转化成实际的应用。教学过程：在制作网页之前，首先要了解一些关于web网页的基本知识，了解一下构成一个网站的基本元素等。一、网站与网页网站是网页的集合，是一个整体，其中包括一个首页和若干个网页。网站设计者先把整个网站结构规划好，然后再分别制作各个网页。大多数网站为网站浏览者提供一个首页，首页再链接多个网页。一般来

2、说，一个网站是由很多网页构建而成的。首页是一个网站的门面，也是访问量最大的一个页面，访问者可以通过首页进入到网站的各个分页。因此，网站首页的制作是很重要的，它给浏览者一个第一印像，首页也奠定了网站的主题和整个基调，使访问者进入首页就能清楚地知道该网站所要传递的信息。一般网站的概念：专门放网页的文件夹放图片的文件夹放flash、css样式等首页一个完整的小网站结构：当然因为网站的类型不同，结构也会有所不同。如大型门户网站很注重信息量的多少和及时更新，避免一些花哨等，所以这类网站一般没有引导页。二、网页的类型从网

3、页是否执行程序来分，可分为静态网页和动态网页这两种类型。静态网页一般以.htm或.html为后缀结尾的，俗称html文件。动态网页内含有程序代码，运行于服务器端的程序、网页和组件等都属于动态网页，在网络中看到的动态网页通常是以.asp、.jsp等后缀结尾的，但也有以.php结尾的，如我们学校的校园网首页。一个完整有价值的网站应该是集静态、动态、动画于一身的。三、网页的构成元素网页构成的基本元素主要包括文本、图像、动画、超链接、音频、视频、表格和表单等。下面我们着重介绍和练习表格的属性。1表格是网页排版不可缺少

4、的一部分，它可以对文字和图片进行精确的定位，使页面保持一定的版式1、表格属性练习1、通过插入表格和表格属性对话框制作出以下表格：填充0边距0边框1背景无边框颜色#FF0000填充为0填充0间距2边框1边框颜色#FF0000填充为5填充0间距2边框4背景无边框颜色#FF0000[填充]：用于设置单元格内容和单元格边界之间的像素数[间距]：用于设置相邻的表格单元格之间的象素数[对齐]：用于设置表格相对于同一段落中其他元素的显示位置[边框]：用于设置表格边框的宽度，单位为像素注：将[边框]设置为0时，这时表格将不显

5、示边框，它所起到的作用是定位功能，这也是表格应用广泛的主要原因之一。2、制作细线表格间距为1边框为0表格背景色为蓝色单元格背景色为白色2作粗线表格间距为4边框为0表格背景色为蓝色单元格背景色为白色思考：作如下三张表格：二、表格基础练习教学目标：通过练习和讲解，使学生能学会表格的基本应用和一些难度较高的表格制作，为以后的网页制作打下基础。教学重点难点：对表格本身的属性能熟练的掌握应用及表格在网页排版中的灵活应用。教学过程：由于HTML语言本身并没有提供较多的手段，所以往往需要借助于网页的一个重要元素－表格来襀网

6、页的精细排版。表格在网页的实际制作过程中主要应用于网页定位上，通过设置表格的宽度、高度和比例大小等属性，把不同的网页元素分别固定在不同的单元格之中以达到页面的平衡。表格除了在网页定位上具有精准控制的特点外，还具有规范和灵活的特点。正是因为这些原因，表格在网页制作过程中扮演着非常重要的角色，几乎所有的网页都会应用到表格定位技术。3一、表格的总体布局用表格来布局网页一般是从上而下，一步一步来，而不是先用一张表格把整个网页框起来。在制作过程中注意用背景颜色，注意图片大小和单元格大小，且要注意文字的规范性。二、制作细

7、线单元格在本张网页中，其中涉及到几处小线条的单元格（如下图），以下介绍细线单元格的做法：细线1细线2第一步：制作好表格后，先在单元格属性高上设置好所需的高度，如下图：第二步：把网页切换“代码视图”，然后对选中的单元格删除“ ”空格代码，如下图：三，制作表格利用表格的属性间距、边框、边框颜色制作如上表格。三、html语法教学目标：了解HTML语言的语法结构，初步掌握HTML语言的基本结构。教学重点难点：1、HTML的基本结构及文字版面、图像的HTML语法。42、HTML语法含义的理解及进一步自学方法的

8、掌握。教学过程：一、上机作业：1、上机任意建一张网页，选择“代码视图”，看一下网页的源代码2、新建一张空白网页，它的源代码是空白的吗？3、写出红色、绿色、蓝色、黑色、白色的颜色代码二、html语法1、什么是HTML，它与网页是什么关系HTML是标记网页格式的格式化语言，如＜p＞表示段落，＜br＞表示换行等。本节课的重点就是记住这些常用的HTML标记。2、HTML语言的特点①HTML标记放在＜与＞之间