1、1.1 Web服务器工作原理、相关术语及概念,Web概述Web是英文World Wide Web的简称Web中文译名万维网，是Internet提供的一项服务Web是目前最成功、最流行的超文本系统。,1.1 Web服务器工作原理、相关术语及概念,Web工作原理,1.1 Web服务器工作原理、相关术语及概念,Web工作原理客户机和WWW服务器之间的通信通常分为三个步骤： 1、首先，客户机通过浏览器向服务器发送HTTP请求，请求一个特定的网页； 2、然后，服务器接收这个请求，找到所请求的网页，用HTTP协议再将这个网页通过Internet发送给客户机； 3、最后，客户机接收这个网页，并将其显示在浏览
2、器中。,1.1 Web服务器工作原理、相关术语及概念,URL概述URL是Uniform Resource Location的缩写，译为“统一资源定位符”。通俗地说，URL是Internet上用来描述信息资源的字符串,用一种统一的格式来描述各种信息资源。,1.1 Web服务器工作原理、相关术语及概念,URL组成URL由三部分组成第一部分是协议（或称为服务方式）； 第二部分是存有该资源的主机IP地址（有时也包括端口号）； 第三部分是主机资源的具体地址。如目录和文件名等。,1.1 Web服务器工作原理、相关术语及概念,URL实例http:/ info_19626.htmlhttp:/202.102.
3、240.88/http:/ 网页和网站,网页与网站的关系网页就是通过浏览器在 Internet上看到的页面，英文名称为 Web Page；网站也称为站点，英文名称为 Web Site，是多个网页的集合，这些网页通过链接而被组织起来，他们具有共享的属性，例如相同的主题或目标。,1.2 网页和网站,主页也叫首页，主页(Homepage)是网站中的一个特殊页面，它专指一个网站的首页。具体的说它是作为一个组织或个人在网络上站点开始点的页面，其中包含指向其他页面的超链接。通常主页的名称是固定的，例如叫做index.htm 或 index.html等。,1.3 网页类型,网页类型分类根据网页制作的语言，可
4、以将网页分为静态网页和动态网页。静态网页使用的语言是HTML,动态网页使用的语言有HTML+ASP、HTML+PHP或HTML+JSP等。,1.3 网页类型,静态网页的基本特点1、每个网页都有一个固定的URL，且URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”。2、网页内容一经发布，无论是否有用户访问，内容都是保存在网站服务器上的。3、静态网页的内容相对稳定，因此容易被搜索引擎检索。4、静态网页没有数据库的支持。5、静态网页的交互性较差，在功能方面有较大的限制。,1.3 网页类型,动态网页的基本特点1、动态网页以数据库技术为基础，可以大大降低网站维护的工作量。2、采用
5、动态网页技术的网站可以实现更多的功能。3、动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。4、动态网页中的“？”对搜索引擎检索存在一定的问题。,1.4 网页的基本构成元素,网页的基本构成元素1、文本网页中的信息主要是以文本为主的。2、图像一般图片被用于Logo, Banner,背景图等方面。3、超链接超链接是网站的灵魂，超链接可以是文字或者图片。4、表格表格是网页排版的灵魂,1.4 网页的基本构成元素,网页的基本构成元素5、表单表单是用来收集站点访问者信息的域集。6、导航栏导航栏就是一组超链接，用来方便地浏览站点。7、动画动画是网页上最活跃的元素，
6、包括GIF动画和FLASH动画。8、框架框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示。,1.6 网页制作常用工具和语言,网页制作常用工具1FrontPage（排版）2Dreamweaver（排版）3Fireworks （美化）4Photoshop（美化）5Flash （美化）6.记事本7.vs2005或vs2008,2.1 HTML网页技术简介,HTML（Hypertext Markup Language) 超文本标记语言,是用于描述网页文档的一种标记语言。HTML并不是一种程序，它只是一种控制网页中信息显示的标记语言。HTML中定义了一系列标签，这些标签用于
7、组织文字、图片、链接、表格等元素，以及控制网页的文档格式、字符格式、段落格式等。HTML文件是根据html语法规则写出来的文件，一般扩展名为.html或.htm,2.2 HTML的基本结构-语法结构,HTML的标签一个HTML文件由一系列的元素和标签组成。标签是HTML文件的重要组成部分。HTML的标签分成对出现的标签和单独出现的标签两种。大多数标签是成对出现的，由首标签和尾标签组成。标签的完整语法如下所示：要控制的元素,2.2 HTML的基本结构-语法结构,HTML的标签HTML的标签，大、小写或混写均可。如：、，其结果都是一样的。在每个HTML标签中，还可以设置一些属性，控制标签所建立的元
8、素。设置标签属性的语法如下：元素语法中，设置各属性所使用的“”可省略。,2.2 HTML的基本结构-文档结构,HTML的基本结构第一个HTML示例HTML的基本结构。,2.2 HTML的基本结构-文档结构,HTML的基本结构,2.2 HTML的基本结构-文档结构,文件开始标签在任何的一个HTML文件里，最先出现的HTML标签就是，它用以表示该文档是以超文本标记语言（HTML）编写的。它是成对出现的，首标签和尾标签分别位于文档的最前面和最后面，文件中的所有文本和标签都包含在其中。如：文件的全部内容该标签不带任何属性。,2.2 HTML的基本结构-文档结构,文件头部标签是一个表示网页头部的标签。由
9、标签所定义的元素中，并不放置网页的任何内容，而是放置关于这个HTML文件的信息，也就是说它并不属于HTML文件的主体，它包含文件的标题、编码方式、URL等。这些信息大部分是用于提供索引、辨认或其他应用。写在与中间的文本，如果又写在“title”标签中，表示该网页的名称，并作为窗口的名称显示在这个网页窗口的最上方。,2.2 HTML的基本结构-文档结构,文件标题标签每个HTML文件都需要有一个文件名称，在浏览器中作为窗口名称显示在该窗口的最上方。网页的名称要写在和之间，并且标签应包含在与标签之中。,2.2 HTML的基本结构-文档结构,文件主体标签标签是成对出现的。网页中的主体内容应该写在和之间
10、，而标签包含在标签里面。,2.3 HTML网页中的段落排版,分段控制标签p1、由标签所标识的文字，代表同一个段落的文字。在浏览器中，不同段落文字间除了换行外，还会以一个空白行加以间隔，以便区别出文字的不同段落。它可以单独使用，也可以成对使用。2、格式： 文字 文字 文字 3、说明其中align属性有left、center和right三个参数，这三个设置值将依次把段落文字的水平对齐方式设为左对齐、居中对齐和右对齐。,2.3 HTML网页中的段落排版,换行标签br换行标签是个单标签，HTML文件中任何位置只要使用了标签，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。在一般的文本文件中，只
11、要按下键盘上的回车键便会产生一个换行符，使文本文件中的文字换行显示。但是在HTML文件中，由回车键所产生的换行符，在浏览器中并不会视为换行符号。因此，若要将某位置后的文字显示于下一行时，必须在该位置使用标签，才能达到换行的效果。,2.3 HTML网页中的段落排版,水平分割线标签hr标签是单独使用的标签，它的作用是换行并在该行下画一条横线，横线的上下两端都会留出一定的空白。通过给标签设置一定的属性，可以使它具有更强的功能。标签的属性有size、width和align。下表为控制标签所建立的水平分隔线样式的属性说明。,2.3 HTML网页中的段落排版,水平分割线标签hr,2.3 HTML网页中的段
12、落排版,注释如果想方便地在HTML中查找和记忆有关文件的内容和标识，则可以在HTML文件中加入注释，放在注释中的文本在屏幕上是不出现的。注释标签的格式有两种： ,2.4HTML网页中的文本修饰,标题文字标签hn标签用于设置网页中的标题文字，被设置的文字将以黑体、粗体的方式显示在网页中。1格式：标题文字 2说明：标签是成对出现的，夹在和之间的文字就是文档中的标题。标签共分六级，其中标签所括起的文字是第一级标题，最大最粗；标签所括起的文字是最后一级标题，最小最细。,2.4HTML网页中的文本修饰,标题文字标签hnalign属性用于设置标题的位置。align属性的参数值为left、center或ri
13、ght之一，分别表示标题位于浏览器窗口的左侧、中间和右侧。标题文字具体有多大则因浏览器的不同而不同。标签本身具有换行的作用，标题总是从新一行开始。,2.4HTML网页中的文本修饰,文字格式控制标签fontfont标签用于控制文字的字体、大小与颜色。控制的方式是利用属性设置实现的，各属性的使用功能说明见下表。,2.4HTML网页中的文本修饰,文字格式控制标签font,2.4HTML网页中的文本修饰,文字格式控制标签font1格式：文字2说明： face属性的格式为：文字若face属性所指定的字体名称，并不存在于用户的系统时，将使用默认的字体。,2.4HTML网页中的文本修饰,文字格式控制标签fo
14、ntsize属性的取值为1-7，默认值为3；同时，也可以用“+”或“-”来设定字号的相对值。color属性的格式为：或,2.5 HTML网页中的列表,无序列表1格式：项目符号项目符号就表明上一个列表项的结束。,2.5 HTML网页中的列表,有序列表有序列表标签用于说明文件中的某些成份，需按特定顺序排列和显示。有序列表的输出结果是在列表的每项前都有编号。1格式：项目符号项目符号,2.5 HTML网页中的列表,有序列表,2.1.1 背景图案的设定,为网页设置背景图片 1、网页背景颜色与背景图片的设定：2、向网页中插入图形：,2.1.1 背景图案的设定,为网页添加超链接 1、建立超链接 超链接名称
15、target=”_blank”的含义。 2、超链接的种类 （1）锚点链接（同一文件的链接） 在要使用链接的地方： 超链接名称 在链接到的地方： 超链接名称,2.1.1 背景图案的设定,（2）不同文件的链接 超链接名称 （3）链接到网站（4）用链接发邮件 描述文字,例：一个简单的表格实例，效果如下图所示。一个简单的表格姓名 性别 年龄 专业 ,2.8.1 定义表格的基本语法, 张东健 男 18 计算机,2.8.1 定义表格的基本语法,2.8.1 定义表格的基本语法,2.8.1 定义表格的基本语法,1、基本标签： table表格标签，tr表格的行，th表格的表头，td表格的单元格 2、对整个表格的
16、格式化，即table标签对应的属性： border，bordercolor，width，height，align，bgcolor，background，cellspacing，cellpadding 3、对行的格式化，即tr标签对应的属性： height，bordercolor，bgcolor，align，valign 4、对单元格的格式化，即td标签对应的属性： bordercolor，bgcolor，background，width，align，valign，rowspan，colspan,2.8.2 定义表单的基本语法,一、表单 1、表单的作用表单主要用于采集和提交用户输入的信息。表单最
17、常见的应用有用户登录界面、注册界面、问卷调查等。表单的控件包括文本框、密码框、按钮、单选框、复选框等。 2、表单标签 form 3、表单标签的属性 form标签的两个属性：action，method action的值是表单提交后发送的URL地址。method属性用来定义提交表单的方式，可取值为get或post。,2.8.2 定义表单的基本语法,二、表单控件 1、基本标签 input创建表单内控件的标签，select，option创建下拉列表框，textarea-创建多行文本框。 2、基本标签的属性 input标签的一些属性：type，name，size，value，maxlength，chec
18、ked select标签的两个属性：multiple，size Textarea标签的两个属性：rows，cols,2.8.2 定义表单的基本语法,三、表单控件实例 1、基本标签 3、使input标签的type属性取不同的值，将会产生不同的控件。type主要有九种类型：text、password、radio、checkbox、submit、reset、image、hidden和file。,2.8.2 定义表单的基本语法,三、表单控件实例,3.1.1 css概念,1、CSS的全称 Cascading Style Sheet，层叠样式表。 2、CSS的功能 控制网页内容的样式，边框，字体，颜色。
19、3、如何将CSS加入到HTML页面？ 有3种样式，行内样式、内部样式、外部样式。 （1）行内样式 行内样式是3种样式中最直接最简单的一种，直接对HTML标签使用style=“，例如： 虽然这种方法比较直接，在制作页面癿时候需要为很多的标签设置style属性，并且将样式和结构混杂在一起，没有实现内容和表现的分离。,3.1.1 css概念,（2）内部样式 内嵌样式就是将CSS代码写在之间，并且用标签进行声明。#containerwidth:500px;height:350px;（3）外部样式 这种方法就是将样式定义在独立的CSS文件中，并将该文件链接到要运用样式的HTML文件。只需要在之间加上就可
20、以了，如下： 外样式是使用频率最高，最实用的样式，真正实现了内容和表现的分离。,3.1.1 css概念,4、三种样式的优先级 如果这三种样式中的两种用于同一个页面后，就会出现优先级的问题， 这三种样式的优先级按照“就近原则”：行内样式 内部样式 外部样式。 5、如何利用CSS控制HTML页面元素的样式大家通过行内样式、内部样式、外部样式实现将CSS加入HTML页面，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。 CSS选择器有：标签选择器、ID选择器、类选择器。,3.1.1 css概念,（
21、1）标签选择器一个完整的HTML页面由很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，比如： p font-size:12px; background:#900; color:090; 会使页面中所有p标签癿背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色),3.1.1 css概念,（2）ID选择器定义id选择器要在id名称前加上一个“#”号，id名称可以自定义，但不能以数字开头。ID选择器在某一个HTML页面中叧只能使用一次，就像只有一个身份证 (ID)一样，不重复！ 在页面中使用ID选择器更具有针对性，如： #a1color:red;font-s
22、ize:35px;font-family:黑体 id选择器，在标签中添加id属性，并使其id值等于已定义好的id选择器名称，将使ID等于a1的标签中的文字颜色为红色，文字大小为35像素，文字字体为黑体。,3.1.1 css概念,（3）类选择器使用.加自定义名称来命名选择器，例如：.a2color:red;font-size:35px;font-family:黑体 类选择器根据元素class属性实现对特定元素的样式控制。例如，class选择器，在标签中添加class属性，并使其class值等于已定义好的类选择器名称，将使标签中的文字颜色为红色，文字大小为35像素，文字字体为黑体。,3.1.1 c
23、ss概念,6、背景样式控制background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment 7、字体样式控制font-family，font-size，font-weight，font-styletext-indent，text-align，text-decoration，word-spacing，letter-spacing，text-transformline-height,我们在布局页面的时候，会将HTML标签分成两种，块状元素和内联元素（我们平时用到的标签div和p就是块状
24、元素，链接标签a就是内联元素）。它们是很重要的两个概念。1、块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。 如何使块状元素位于同一行，float属性。2、内联元素内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。,块状元素与内联元素,表1 块状元素与内联元素的比较,补充：块状元素与内联元素,4.1 Dreamweaver工作界面,6、文档窗口“文档”窗口显示当前文档，包含三种视图：设计视图、代码视图、代码和设计视图。设计视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。代码视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。 代码和设计视图可以在单个窗口中同时看到同一文档的代码视图和设计视图。,4.2 建立站点,要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。Dreamweaver8提供了对本地站点和远程站点强大的管理功能。,
