静态网页的制作.ppt

《静态网页的制作.ppt》由会员分享，可在线阅读，更多相关《静态网页的制作.ppt（38页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、静静态网网页的制作的制作w1.1静态网页的概述静态网页的概述w1.2动态网页的概述动态网页的概述w1.3静态网页的工作过程静态网页的工作过程w1.4静态网页的制作工具静态网页的制作工具1.1静态网页的概述静态网页的概述w初期的网站都是由静态网页组成的，网页中只有文字、图形、初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的图像等，用户只能被动地接受这些信息。那时的Web页面的页面的核心是核心是HTML(一种标记语言一种标记语言)，它编写很方便，不要求有特，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏定的语言环境，可以

2、用任何一种编辑器写好，便可以放到浏览器观看结果。现在览器观看结果。现在HTML已经有许多专门的编辑软件，如已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver等。等。最初的最初的Web是完全的静态，仅仅提供大量的信息服务，是完全的静态，仅仅提供大量的信息服务，没有服务器端客户端的概念。没有服务器端客户端的概念。“静态静态”指的就是网站的网页指的就是网站的网页内容内容“固定不变固定不变”。当用户浏览器通过互联网的。当用户浏览器通过互联网的HTTP(Hyper text Transfer Protocol)协议向协议向Web服务器请求提供网页内服务器请求提供网页内容

3、时，服务器仅仅是将原已设计好的静态容时，服务器仅仅是将原已设计好的静态HTML文档传送给文档传送给用户浏览器。其页面的内容使用的是标准用户浏览器。其页面的内容使用的是标准HTML代码，再加代码，再加上上GIF格式的动态图片。格式的动态图片。1.2动态网页的概述动态网页的概述w所谓动态网页是指网页文件里包含了程序代所谓动态网页是指网页文件里包含了程序代码，通过后台数据库与码，通过后台数据库与Web服务器的信息交服务器的信息交互，由后台数据库提供实时数据更新和数据互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不查询服务。这种网页的后缀名称一般根据不同的程序设计语言而不同

4、，如常见的有同的程序设计语言而不同，如常见的有asp、jsp、php、perl、cgi等形式。动态网等形式。动态网页能够根据不同时间和不同访问者而显示不页能够根据不同时间和不同访问者而显示不同内容。同内容。1.3静态网页的工作过程静态网页的工作过程w静态网页制作概括起来，有如下几个部分：静态网页制作概括起来，有如下几个部分：1、网页素材搜集与制作（图像处理与动画制作）、网页素材搜集与制作（图像处理与动画制作）经常需要在网页中应用一些图像与动画，一方面是由于经常需要在网页中应用一些图像与动画，一方面是由于实际内容的需要，一方面是为了增加网页吸引力。在实际内容的需要，一方面是为了增加网页吸引力。在

5、WWW上通常采用上通常采用jpeg、GIF格式的图片和格式的图片和flash等格式的动画。等格式的动画。2、网页版式设计、网页版式设计规划各元素在网页中的位置关系和表现方法，合理安排规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方。图像、文本等元素，使网页布局合理、美观大方。3、文本编写、文本编写自己的网页中需要大量的文字材料，这就要在网页编辑自己的网页中需要大量的文字材料，这就要在网页编辑器中用器中用HTML语言中的标签编写。也可以利用网页编辑工具语言中的标签编写。也可以利用网页编辑工具的的“所见即所得所见即所得”功能，直接写入文字。功能，直接写入文

6、字。4、处理网页之间的关联、处理网页之间的关联主要是建立合理、高效的网页导航系统。主要是建立合理、高效的网页导航系统。5、网页发布、网页发布主要是将建设好的网页上传到服务器中供用户浏览。主要是将建设好的网页上传到服务器中供用户浏览。1.4静态网页的制作工具静态网页的制作工具w1、图像处理与动画制作工具：、图像处理与动画制作工具：Photoshop、Flash等。等。2、网页编辑工具：、网页编辑工具：1）纯文本编辑工具，如）纯文本编辑工具，如Notepad等；等；2）转换工具，如）转换工具，如word等；等；3）专用工）专用工具，如具，如FrontPage、Dreamweaver等。等。3、网页

7、上传工具：、网页上传工具：1)FTP工具，如工具，如WS-等；等；2)专用专用网页编辑软件的文件传输功能。网页编辑软件的文件传输功能。4、网页优化工具：网页减肥茶、网页优化大师等。、网页优化工具：网页减肥茶、网页优化大师等。HTML基础知识基础知识w2.1 HTML简介简介w2.2 HTML编写工具编写工具w2.3 HTML编写的格式编写的格式w2.4 标志（标志（tag）的结构特点）的结构特点w2.5 HTML文件的组成文件的组成w2.6 文件标题标志文件标题标志w2.7 颜色表示方法颜色表示方法 2.1 HTML简介简介wHTML是是Hypertext Markup Language(超文

8、本标超文本标志语言志语言)的缩写，它是构成的缩写，它是构成Web页面页面(Page)的主要工的主要工具，是用来表示网上信息的符号标志语言。具，是用来表示网上信息的符号标志语言。在网上，如果要向全球范围内出版和发布信息，在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的机都能够理解的一种用于出版的母语母语。Wide Web)所使用的出版语言就是所使用的出版语言就是HTML语言。通过语言。通过HTML，将所需要表达的信息按某种规则写成，将所需要表达的信息按某种规则写成HTML文件，通过专用的

9、浏览器来识别，并将这些文件，通过专用的浏览器来识别，并将这些HTML翻译翻译成可以识别的信息，就是现在所见到成可以识别的信息，就是现在所见到的网页。的网页。2.2 HTML编写工具编写工具w用用HTML编写的文件编写的文件(文档文档)的扩展名是的扩展名是HTML或或.HTM。它们是供浏览器解释浏览文件的格式。可以使用记事本、写它们是供浏览器解释浏览文件的格式。可以使用记事本、写字板等编辑工具来编写字板等编辑工具来编写HTML文件。文件。HTML语言使用标志对语言使用标志对(标签标签)的方法来编写文件，既简单又方便。它通常使用的方法来编写文件，既简单又方便。它通常使用来表示标志的开始和结束来表示

10、标志的开始和结束(例如例如标志对标志对)，因此在，因此在HTML文档中这样的标志文档中这样的标志对都必须是成对使用的。对都必须是成对使用的。在今天，做网页的工具到处都是在今天，做网页的工具到处都是,只要动几下鼠标，一个只要动几下鼠标，一个精彩的网页就出来了，精彩的网页就出来了，HTML是否要学呢？答案是肯定的，是否要学呢？答案是肯定的，因为工具就是工具，它们生成的代码是机械的，不够简洁，因为工具就是工具，它们生成的代码是机械的，不够简洁，使网页打开的速度减慢。还有很多新的功能，工具是生成不使网页打开的速度减慢。还有很多新的功能，工具是生成不了的。必需对代码进行编辑。了的。必需对代码进行编辑。2

11、.3 HTML编写的格式编写的格式w查看网页源文件，可见查看网页源文件，可见html文件的格式如下：文件的格式如下：网页的标题网页的标题其中省略号部份是网页的内容其中省略号部份是网页的内容,其实每个标记都是一一对应的。其实每个标记都是一一对应的。每个网页文件都是以每个网页文件都是以开始和以开始和以结束。结束。与与之间的内容是网页的标题。会显示在浏览器的标题之间的内容是网页的标题。会显示在浏览器的标题栏上。栏上。与与之间放的是网页内容。之间放的是网页内容。2.4 标志（标志（tag）的结构特点）的结构特点w1、用、用包围。包围。2、多数成对出现。、多数成对出现。3、结束标记用、结束标记用/。4、

12、标签是嵌入式的。、标签是嵌入式的。5、标签可有多种属性和属性值。、标签可有多种属性和属性值。6、标签用西文半角字符，对大小写不敏感。、标签用西文半角字符，对大小写不敏感。2.5 HTML文件的组成文件的组成w头部和主体头部和主体w标志和普通文本标志和普通文本 2.6 文件标题标志文件标题标志w文件标题标志为文件标题标志为。使用过浏览。使用过浏览器的人可能都会注意到浏览器窗口最上边的器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是蓝色部分显示的文本信息，那些信息一般是网页的网页的主题主题。要将网页的主题显示到浏览。要将网页的主题显示到浏览器的顶部其实很简单，只要在器的

13、顶部其实很简单，只要在标志对之间加入要显示的文本即可。标志对之间加入要显示的文本即可。2.7 颜色表示方法颜色表示方法 wHTML用用#RRGGBB字符串字符串代表色彩，成为代表色彩，成为RGB值。值。RGB值中的值中的RR、GG和和BB分别代表红绿蓝三原色的两分别代表红绿蓝三原色的两位十六进制整数值。每种原位十六进制整数值。每种原色的取值范围在色的取值范围在00和和FF（即十进制的（即十进制的0和和255）之）之间，即一个字节存储一种原间，即一个字节存储一种原色。每种原色都有色。每种原色都有256种由种由浅至深的色彩变化，网页中浅至深的色彩变化，网页中呈现的色彩都是由这三种原呈现的色彩都是由

14、这三种原色调配出来的。色调配出来的。rgb值可以值可以表示出（表示出（256*256*256）种）种颜色。颜色。黑色黑色白色白色绿绿色色黄色黄色红红色色蓝蓝色色#000000#FFFFFF#00FF00#FFFF00#FF0000#0000FFHTML简单段落www这是第一段。w这是第二段。w这是第三段。w在HTML里，用p来定义段落。ww多个段落的编写wwww这一段这一段w在源代码里在源代码里w包含很多分行，包含很多分行，w但是浏览器忽略但是浏览器忽略w这些分行。这些分行。www这一段这一段 在浏览器里在浏览器里w包含包含 很多很多 空格，空格，w但是但是 浏览器忽略多余空格。浏览器忽略多余

15、空格。www你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。段落的行数会因此改变。www段落中的换行标记wwww要在一段里换行请使用br这个Tag。www6种级别的标题设置www这是1号标题w这是2号标题w这是3号标题w这是4号标题w这是5号标题w这是6号标题ww标题的居中对齐www这是标题w上面的标题是居中显示的。ww段落中横线的添加www用hr这个Tag可以在HTML文件里加一条横线。ww村妇想像皇宫的生活：皇后得用金扁担挑水吧。ww问：谁是世界上最可怜的人？答：炮兵连炊事班战

16、士！问：为什么？答：戴绿帽背黑锅看别人打炮。ww初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！ww其他格式标记www粗体用b表示。w斜体用i表示。w芙蓉姐姐这个词当中划线表示删除。w想唱就唱这个词下划线插入。wX2其中的2是下标wX2其中的2是上标w好好学习，天天向上。这句话缩进表示引用wcall getOrdersw用code显示计算机代码，code里显示的字符是等宽字符。ww字号的设置ww字体大小 font sizeww这段文字的字体大小值为1。w这段文字的字体大小值为2。w这段文字的字体大小值为3。w这段文字的字体大小值为4。w这段文字的字体大小值为5。w

17、这段文字的字体大小值为6。w这段文字的字体大小值为7。ww字体大小颜色ww字体颜色 font colorww这段文字用的是缺省的字体颜色。w这段文字的字体颜色为红色。w这段文字的字体颜色为灰色。w这段文字的字体颜色为绿色。ww字体风格ww字体风格 font faceww以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。warial courier verdanawarial courier verdanawarial courier verdanaww列表标志 w1、定义列表用来创建一个定义列表，用来创建列表中的上层项目，用来创建列表中最下层项目，

18、和都必须放在标志对之间。w中国城市 北京 上海 广州 w美国城市 华盛顿 芝加哥 纽约 w一个普通列表中国城市北京上海广州美国城市华盛顿芝加哥纽约 思考w定义列表定义列表(Definition List)：（为标题）：（为标题）野生动物 所有非经人工饲养而生活于自然环境下的各种动物。宠物 指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物，又称作同伴动物。w2、有序列表和无序列表标志对用来创建一个有序列表；标志对用来创建一个无序列表；标志对只能在或标志对之间使用，此标志对用来创建一个列表项。中国城市 北京上海广州美国城市 华盛顿芝加哥纽约 中国城市1.北京 2.上海 3.广州 美国城市华盛顿华盛顿

19、 芝加哥芝加哥 纽约纽约 无序列表w不排序列表不排序列表(Unordered List)：l站长网 站长学院之网页课程 l站长网 站长学院之网页代码 l站长网 站长学院之魔兽世界 创建HTML表格 wHTML表格用表格用表示。一个表格可以分表示。一个表格可以分成很多行成很多行(row)，用，用表示；每行又可以分表示；每行又可以分成很多单元格成很多单元格(cell)，用，用表示表示。www只有一行只有一行(Row)一列一列(Column)的表格的表格www100www一行三列的表格一行三列的表格www100w200w300www两行三列的表格两行三列的表格www100w200w300www400

20、w500w600wwww表格的表头 w用来表示表格的表头，表头的字是粗体显示的。www有表头的表格：www姓名w电话w传真wwwBill Gatesw555 77 854w555 77 855www竖直方向的表头：www姓名wBill Gateswww电话w555 77 854www传真w555 77 855wwwwcaptionw在一个表格上加上标题。这个表格有标题：这个表格有标题：表格标题表格标题100200300400500600www用colpsan属性，设置包含多列的单元格：www姓名w联系方式wwwBill Gatesw555 77 854w555 77 855www用rowspan这个属性，设置包含多行的单元格：www姓名wBill Gateswww联系方式w555 77 854www555 77 855wwww