第2章网页制作基础

《第2章网页制作基础》由会员分享，可在线阅读，更多相关《第2章网页制作基础（140页珍藏版）》请在金锄头文库上搜索。

1、1,欢迎各位老师 莅临指导,2,SEC,MIN,3,SEC,MIN,4,SEC,MIN,5,SEC,MIN,6,SEC,MIN,7,SEC,MIN,8,SEC,MIN,9,SEC,MIN,10,SEC,MIN,11,SEC,MIN,12,SEC,MIN,第二章 网页制作基础,07物流管理 刘宏宇,物流网络技术,第14页,本章主要内容,网页与网站 超文本标记语言 常用的主页制作工具,物流网络技术,第15页,学习要求,了解网页与网站的区别与联系； 熟悉HTML文档格式和常用标签； 了解常用的主页制作工具,物流网络技术,第16页,本章目录,3.2 超文本标记语言,3.2.1 第一个HTML文档,3.

2、2.2 文字修饰与布局,3.2.3 加入其它网页元素,3.2.4 框架,3.2.5 使用表单,3.3 主页制作工具,本章习题,3.1 网页与网站,物流网络技术,第17页,3.1 网页与网站,一、网页与网站的概念,网页？,网站？ 再想想,物流网络技术,第18页,Http:/,文字、链接,图片,物流网络技术,第19页,网站是什么呢,物流网络技术,第20页,二、静态页和动态页,思考？,什么是静态网页呢？,什么又是动态网页呢？,物流网络技术,第21页,物流网络技术,第22页,哪一个是 动态页面呢？,物流网络技术,第23页,静态网页和动态网页,（1） 静态网页 静态网页是网站建设初期经常采用的一种形式.

3、网站建设者把内容设计成静态网页,访问者只能被动地浏览网站建设者提供的网页内容.其特点如下： 网页内容不会发生变化,除非网页设计者修改了网页的 内容。 不能实现和浏览网页的用户之间的交互。信息流向是单向的,即从服务器到浏览器。 服务器不能根据用户的选择调整返回给用户的内容. （2）动态网页 动态网页其实就是建立在B/S架构上的服务器端脚本程序。在浏览器端显示的网页是服务器端程序运行的结果。,物流网络技术,第24页,静态网页和动态网页的区别,静态网页与动态网页的区别在于Web服务器对它们的处理方式不同。 当Web服务器接收到对静态网页的请求时，服务器直接将该页发送给客户浏览器，不进行任何处理。如果

4、接收到对动态网页的请求，则从Web服务器中找到该文件，并将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，将执行后的结果传递给客户浏览器。,物流网络技术,第25页,3.2 超文本标记语言,超文本 一般把通过在文本中插入链接把相关文本组织在一起而形成的文档称为超文本(hypertext)。通常超文本使用超文本标记语言来描述。 超文本标记语言 超文本标记语言(Hyper Text Makeup Language，简称HTML)是一种用来创作万维网页面的描述语言，它使用HTML标签来定义文档的格式、组成和链接关系，供浏览器解释执行。,物流网络技术,第26页,3.2 超文本标记语

5、言,HTML标签 所谓HTML标签，由3部分组成：左尖括号“”，“标签名称”，和右尖括号“”。标签通常是成对出现的，分别称为“开始标签”和“结束标签”，结束标签的左尖括号后加一个斜杠符号“/”。 定义属性 在各种HTML标签中，常常还可以定义一些属性，这些属性用于指出文档元素的一些特性，如背景颜色、字体大小、对齐方式等，指定文档元素属性的附加信息一般放在相应的“开始标签”中。,物流网络技术,第27页,3.2.1 第一个HTML文档,本小节按以下顺序讨论： 举例 文档一般格式 说明 调试方法,物流网络技术,第28页,1.举例,程序代码 我的第一个WEB页 正文内容写在这里 ,物流网络技术,第29

6、页,1.举例,操作方法 将上述代码用文本编辑器或其他专门的主页制作软件输入并保存为一个扩展名为htm或html的文件后，在文件夹窗口双击该文件图标，就可看到浏览结果了。,物流网络技术,第30页,1.举例,浏览结果,物流网络技术,第31页,2.一般形式, 头部 主体部分 ,网页开始标签,头部标签,网页主体标签,网页结束标签,物流网络技术,第32页,3.说明,开始和结束标签 头部信息，可以包含标题(TITLE)，媒体环境(META)等说明信息,客户端脚本也可放在这一部分。 网页主体部分。,物流网络技术,第33页,3.说明,标签可以设置一些属性，形式为： 其中： bgcolor背景颜色 text 非

7、链接文字的颜色 link 链接文字的颜色 alink正被点击的链接文字的颜色 vlink 已经点击(访问)过的链接文字的颜色,物流网络技术,第34页,16进制的颜色代码举例,物流网络技术,第35页,3.说明,如果要使用背景图像，语法为： 注意：在HTML文档中，不区分英文字母的大小写，对于标签中的属性值，一般可以不加引号，只有当属性值中包含空格或一些其它符号时，引号才是必须的。,物流网络技术,第36页,调试HTML代码,总有一些时候会忘了输入某些代码或敲错某些符号，这时Web页可能会变得非常滑稽。通过反复的浏览，比较出现的效果与预想效果的不同点，从中发现存在的错误，这一过程称为调试。,物流网络

8、技术,第37页,调试HTML代码,常见的错误有标签名称书写错误、标签的属性书写错误、结束标签遗忘或书写错误等。如例3-1第3行中若结束位置的遗忘了或写成，则在窗口的标题栏中将看到不正确的内容。只要仔细观察显示结果，不难发现其中的错误。,物流网络技术,第38页,3.2.2 文字修饰与布局,1.修饰方法 标题文字 文字大小 文字颜色 定义字体 标记文字 2.文字布局 段落 换行 文字对齐 预格式化文本,物流网络技术,第39页,1.修饰方法,标题文字 (Header) 指使用标签将某些文字设置成标题，形式如下： 作为标题的文字 其中n为1到6的数字，根据n的大小不同，将显示出不同大小的黑体字。H1最

9、大，H6最小。标题文字独立占一行，不受段落标记的影响。,物流网络技术,第40页,1.修饰方法,文字大小 (FONT SIZE) 指使用标签的SIZE属性设置文字的大小。形式如下： 需显示成n号大小的文字 其中：n=1,2,37。 SIZE的默认大小为3，在此基础上，可以用-2，-1，0，+1，+2，+3或+4代替n。即+1代表4。,物流网络技术,第41页,1.修饰方法,文字颜色(FONT COLOR) 指使用标签的COLOR属性设置文字的颜色。形式如下： 文字 其中：rrggbb为16进制值，表示组成颜色的RGB三原色的对比关系，对常用的颜色，可以使用名称来代替式中的“#rrggbb”，对应关

10、系为：Black(000000),Olive(808000),Red(ff0000),Blue(0000FF),Maroon(800000),Navy(000080),Gray(808080),Lime(00ff00),Fuchsia(ff00ff),White(ffffff),Green(008000),Purple(800080),Silver(C0C0C0),Yellow(ffff00),Aqua(00ffff)。,物流网络技术,第42页,1.修饰方法,定义字体(FONT FACE) 指使用标签的FACE属性设置文字的字体。形式如下： 需设置字体的文字 其中：字体为Arial、Times

11、、宋体、楷体等。 值得注意的是，当别的机器访问你的网页时，在浏览器上是否能按照你所设置的字体显示，取决于浏览器所在的机器中是否安装了相应的字体。,物流网络技术,第43页,三种文字的修饰方法有一个共同点就是都使用标签把要修饰的文字括起来，所不同的是使用不同的属性，即： SIZE表示大小 COLOR表示颜色 FACE表示字体 通常这几个属性可以同时使用，例如要用6号大小红色显示“动态网页”这几个字时，形式如下： 动态网页,物流网络技术,第44页,1.修饰方法,标记文字 对于文字还有一些常用的修饰，即加粗、斜体和加下划线等。对此，HTML中设计了几个独立的标签，使用形式如下： 需要加粗的文字 需要显

12、示成斜体的文字 需要添加下划线的文字 以上三个标签可重叠使用。如：动态网页制作，将使“动态”两字加粗显示，“网页”两字加粗并加下划线，“制作”两字显示成斜体并加下划线。,物流网络技术,第45页,修饰举例,网页内容 文字的修饰 这是标题字体H1 这是标题字体H6 这是大小为5的楷体字 本教材讨论的是：动态网页制作 这是红色的文字 ,物流网络技术,第46页,修饰举例,浏览结果,同其他例子一样，在抓取屏幕图形时已将窗口缩小。,物流网络技术,第47页,2.文字布局,段落 段落是文档的基本单位，在HTML中可以使用标签来指定文档中具有独立意义的段落，通过设置段落标签的某些属性可以控制段落的对齐方式。浏览

13、器在显示时，一个段落的前后将留有较大的空隙，也可以说相当于有一个空行。,物流网络技术,第48页,2.文字布局,换行 一个段落中可以包含多个行，可以使用标签来强制文字换行。一般情况行与行之间的间隔比段与段之间的间隔要小。 注意：如果不使用段落标签指出从哪里开始新的一段或一行，那么显示时文本就会连成一整块，而不管你在源文件中输入了多少个回车符。一般情况根据浏览器窗口的宽度，当一行太长时，会自动换行。,物流网络技术,第49页,2.文字布局,文字对齐 可以以段落为单位设置文字的对齐方式，形式如下： 文字 其中：对齐方式有left、center和right，分别表示左对齐、居中对齐和右对齐。默认为lef

14、t表示左对齐。标题文字也有相应的属性，使用形式为： 标题文字,物流网络技术,第50页,2.文字布局,文字对齐 如果需要将文字或其它对象居中对齐，也可以使用标签，形式如下： 要居中的文字或对象 注意：标题不能作为段落的一部分，也不受段落标记的影响。,物流网络技术,第51页,3.2.3 加入其它网页元素,网页中除了一般的文字外，通常还有一些其它对象，如线条、图片、表格等。 要在HTML中插入各种对象，通常需要指出三个内容：即标签名称、标签属性及提示信息。 以下分别进行讨论： 1.插入水平线 2.加入超级链接 3.加入图像 4.插入表格,物流网络技术,第52页,1.插入水平线,有时为了较明显地划分上

15、下各部分的内容，在文档中间加入一些水平线，使用形式如下： 其中：HR为标签名称，它指出插入的元素为一个线条。WIDTH、ALIGN和SIZE都是线条的属性，其右侧为该属性对应的值。式中的宽度可以是百分比，表示占屏幕宽度的百分比，如“90%”,也可以是屏幕的象数点个数，如“222”。对齐方式可以是Left(左对齐)，Center(中间对齐)及Right(右对齐)。高度为点数。,物流网络技术,第53页,水平线举例,网页内容 水平线 这里是标题 这里是正文内容 ,物流网络技术,第54页,2.加入超级链接,使用超文本标记语言来编写网页的主要原因是网页的内容中常常需要使用超链接，通过超链接，用户可以简单地用点击某些文字来转向到其它网页或本网页的其它位置。根据需要转向的位置不同，超级链接的形式有所不同。,物流网络技术,第55页,1) 链接到其它地址,形式： 提示文字 例如： 雅虎中文 作用： 用于链接到其它网站或本网站的其它网页,物流网络技术,第56页,2) 链接到本页的其它地方,形式： 提示文字 其中：位置是命名的一个地方，命