网站建设和网页制作

网络应用基础第7课,1,第6课网站建设和网页制作,本课内容普通网站的基本构成Web中的静态和动态网页Web服务器环境的安装Web网页的发布和访问HTML初步网页设计与编程,网络应用基础第7课,2,6.1普通网站的基本构成,Web服务器软件网页与文件系统中间件（HTML与数据库的纽带）数据库系统,网络应用基础第7课,5,6.2Web中的静态和动态网页,早期的网页完全使用HTML编制，此类网页不会随着时间、场合等其他因素而变化，被称为“静态网页”。随着Web技术的发展，单一的HTML已经不能满足网页制作的要求。例如，如果用户要求服务器发布其机器内部的时间信息，仅使用HTML无法完成这种要求。需要使用程序语言来把“静态”的HTML网页，变成“动态”的HTML网页。,网络应用基础第7课,6,6.2Web中的静态和动态网页,动态网页的工作模式有两种，一种是将程序代码镶嵌在HTML网页中，下载到用户浏览器中，由用户浏览器进程对下载的代码进行解读和执行后，将执行结果显示在浏览器屏幕上。这类动态网页标准的发展是由厂商自主进行的，因此，其工作效果往往与浏览器产品有关。,浏览器的类型与可执行的动态网页程序的关系,网络应用基础第7课,8,6.2Web中的静态和动态网页,动态网页的另一种工作模式是由服务器执行镶嵌在HTML网页中的程序，并将解释的结果发布到网络上，由用户浏览器并将结果在屏幕上展示。目前，比较流行的服务器端动态网页程序设计语言有JSP、ASP、PHP等。特点:1、与浏览器无关2、高可靠性，减轻客户端的负担3、较为简单方便学习,网络应用基础第7课,9,网络应用基础第7课,10,6.3Web服务器环境的安装,Web服务器的软件由于Web服务已经成为十分重要的网络应用，几乎所有的NOS都将Web服务器作为一项服务组件提供案例之一：WindowsNT中的IIS案例之二：RedhatLinux中的Apache,网络应用基础第7课,11,6.3Web服务器环境的安装,Web服务器的软件之二因特网上有专门的Web服务器供应商和自由软件，最为著名的当然是Apache本课程使用基于Windows的XitamiWebserver(以下称Xitami)来自伊穆提公司（iMatixCorporation）。Xitami小巧玲珑（安装软件本身为700k）、安装设置都极为简单。,网络应用基础第7课,12,6.3Web服务器环境的安装,70/Teacher/NetworkXitami的安装极为简单，对熟悉在Windows下安装软件的用户来说，不需要太多的准备。惟一需要在安装过程中留意的是由于Xitami中有一套简单的安全控制机制（便于用户通过网络控制和配置服务器），要求用户在安装时设置管理员用户名和口令，这时用户必须考虑一套对应的用户名和口令，并妥善记忆或记录以备不时之用。Xitami的安装完毕，可立即运行。,网络应用基础第7课,13,网络应用基础第7课,14,6.3Web服务器环境的安装,对Xitami进行测试的方法有两种：第一种方法：启动浏览器（IE或Communicator皆可），在地址栏中输入一个测试用的IP：HTTP:/或HTTP:/LOCALHOST在IPv4的编址机制中，是一个保留地址，可用于对本地主机上的服务进程进行环路测试。,网络应用基础第7课,15,6.3Web服务器环境的安装,第二种方法，使用本地主机的IP地址进行测试。由于的测试只能在本地主机上进行，如果希望从网络上其他主机上进行测试，则需要知晓服务器的IP地址，在Windows环境下常用的IP测试软件有GUI界面的Winipcfg.exe和字符界面的Ipconfig.exe。当然也可以使用主机域名进行，但鉴于在实验环境下难以建立DNS服务，建议先采用IP地址进行实验,网络应用基础第7课,16,6.4Web网页的发布和访问,每个Web服务器都有各自的所谓发布目录在进行网页发布时，可以将网页（及文件目录）传送或拷贝到该目录下Xitami的默认发布目录为:c:xitamiwebpages当把测试网页hello.htm放置到上述目录时,在浏览器中键入:/hello.htm即可访问,网络应用基础第7课,17,6.5HTML初步,HTML的优点：HTML文件比较小，便于在网络上传输；HTML文档独立于计算机操作平台；原则上，建立HTML文档不需要任何特殊的软件，只需一般的文本编辑器即可；HTML标记语言，非常便于学习。,网络应用基础第7课,18,6.5HTML初步,HTML支持通过CGI（CommonGatewayInterface即通用网关接口）方式与用户和外部程序进行交互。CGI是一种在网络服务器上运行的程序，用来处理用户从Web表单上输入的请求，查询数据库上的信息，向用户提交动态的结果。理论上，CGI程序可以用任何一种语言编写，但大多数程序员用C/C+、Perl和PHP语言编写CGI程序。,网络应用基础第7课,20,6.5HTML初步,HTML还支持Java编程，程序员只要将编好的Java程序按一定的要求嵌入到HTML文档中，就可以完成许多灵活的工作，如HomePage中的动画演示等。HTML还支持Javascript编程，程序员可以将Javascript语句嵌入到HTML文档中，完成更多的交互操作。,网络应用基础第7课,21,6.5HTML初步,HTML的局限性直接用文本编辑时，不是所见即所得；不同浏览器对同一个HTML文档可能得到不同的显示效果；已定义的标记往往不能满足多方面的需要;主要面向人机交互使用，在计算机之间交换数据不够便利HTML的后继者为XML（extensiblemarkuplanguage可扩展标记语言）,网络应用基础第7课,22,HTML句法结构,网络应用基础第7课,23,HTML句法结构,Google首页的部分源代码Google.另外还有HTML文档主体部分的声明。,网络应用基础第7课,24,HTML句法结构,一般HTML文档是普通的ASCII文本文件，它包含两类内容：普通的文本2003Google-搜索3,083,324,652张网页表示页面元素、结构、格式和其它超文本链接的标记标记(Tag)是用一对尖括号“”括起来的文本串，例如第一行的。标记通常具有如下结构：在标记定义中，“tagname”是标记名，定义标记的类型；而“attributes”为属性，一般标记即可以不定义属性，也可以定义若干个属性，属性给出了这个元素的附加信息。,网络应用基础第7课,25,HTML句法结构,在Google主页文档第二行的标记中，head是标记名，没有相关属性。在文档主体定义中，定义了若干属性，例如：“bgcolor=#fffffftext=#000000link=#0000ccvlink=551a8balink=#ff0000”。,网络应用基础第7课,26,HTML句法结构,需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往往对大小写敏感。例如，可以在超链中定义相关的文件名，尽管在Windows系统中，href=a1和href=A1可以指向同一文件，但在UNIX系统中，却是指向不同的文件。重要提示：在网页设计须统一命名方案,网络应用基础第7课,27,HTML句法结构,标记和文本结合起来形成元素(Element)。每个元素代表文档中的一个对象，比如文件头、段落或图片。一个元素可具有一个或一对标记，通常具有一些相关的属性。元素有两种类型：容器（container）元素和单个元素（空元素）。,网络应用基础第7课,28,HTML句法结构,容器元素包含文本内容，代表一个文本段、它由文本主体（或其他元素）组成，文本主体在开头和结尾处用一对标记来确定边界（结尾的标记用标记名前加“/”来表示，并不带任何属性）。HeaderelementbodyofDocument,网络应用基础第7课,29,HTML文档结构和常用元素,容器元素中包含的最为常用的元素有：text：这个元素是文档的抬头，类似书籍的页眉。在浏览器中，标题通常与文本页分开显示（例如，在窗口的标题栏中）。抬头（TITLE）在用户保存网页时一般都作为文件名，所以命名应该注意。,网络应用基础第7课,30,HTML文档结构和常用元素,容器元素中包含以下几个常用元素：text：标题把括起来的文本作为标题。从标记、直到，可以有六个层次的标题（较小的数字标记较重要的标题）。标题通常用较大的字型编排，并且在该标题的上下各有一个空行。：段落标识：图像标记把图像插入到文档中，图像可以在SRC属性中给出的URL处找到。标记就是一个可以在文档中插入图像的单个元素而单个元素是由不影响任何文本的单个标记组成的，它会在文档中插入一些对象。,网络应用基础第7课,31,HTML文档结构和常用元素,把图像插入到文档中，图像可以在src属性指定的URL处找到。最常见的图像格式是GIF。可选的align属性指出文本的当前行与图像在垂直方向上怎样对齐（通常是BOTTOM，但这随浏览器的不同而不同）。,网络应用基础第7课,32,texttext：该结构提供了一个无序的条目列表；每个条目以标记开始。通常在显示出的各条目项前置一个实心的圆点。text：超文本标记，也称为超链接。文本用某种特殊方式来显示（用颜色、下划线或其它类似方法）；当点击屏幕上的超文本链接时，Web服务器将检索“HREF”属性中的“URL”给出的文档，并将结果返回给用户浏览器。：放置一个横穿浏览器窗口的水平线，通常水平线的上下各有一个空行。：在文本中强制换行，以便后继文本都放在下一行。可以没有相应的结束标志,HTML文档结构和常用元素,网络应用基础第7课,33,HTML标准单位,在编辑HTML文件时，会涉及到对各种对象属性的赋值。例如，定义标题的大小、定义文本的格式、定义图像的位置、定义水平线和表格的长宽、定义文字和背景的颜色、定义链接的指向位置等。通常用各种数据来为这些属性赋值。一些数据，不仅在网页设计时经常要用到，而且它们的表示方法、代表的含义都有一套比较严格的规则。,网络应用基础第7课,34,HTML标准单位,长度单位可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性，同时也能用来定义这些对象在网页上的位置等属性。长度的表示有两种方式：绝对长度和相对长度。它们的单位分别为像素（pixel）和百分比（），像素代表屏幕上的各个显像点，而相对长度则描述了对象在浏览器窗口的所占的比例。,网络应用基础第7课,35,HTML标准单位,一般在网页设计中较少使用绝对长度，因为浏览器窗口可随时调整大小，如果水平线设置为绝对长度很容易造成不协调，而使用相对长度来描述则对象会随浏览器窗口大小变化而变化。,网络应用基础第7课,36,HTML标准单位,颜色单位也是描述网页表现形式中应用很频繁的一种数据类型。在设计网页的过程中，需要能定义字体、页面背景、表格背景甚至超链接的颜色，通过利用颜色数据来定义这些对象的颜色属性。,网络应用基础第7课,37,HTML标准单位,颜色单位有三种表达的方式：十六进制的颜色代码RedCharacters十进制颜色码Blue颜色名码GreenCharacters,网络应用基础第7课,38,HTML标准单位,统一资源定位器(URL)1路径是一种因特网资源地址的表示法。该数据里中可以包括链接所需协议、链接主机的域名或IP地址、链接主机的通讯端口（port）号、主机文件的发布路径和文件名称等。1由W3C对HTML4.0的定义中，URL的描述为“UniversalResourceIdentifier（URI）”。,网络应用基础第7课,39,HTML标准单位,在HTML中，URL路径又分为两种形式：绝对路径和相对路径。绝对路径是将主机地址和主机上资源发布目录的路径和资源名称进行完整的描述。如:,网络应用基础第7课,40,HTML标准单位,相对路径则是相对于当前的网页所在目录或站点根目录的路径。如:,网络应用基础第7课,41,HTML基本元素的使用,表单（form）HTML的表单特性是给予万维网真正力量、完成生动的交互式应用的因素之一。HTML表单仅仅是这种特性的一半。一旦用户填完表单，就把表格提交给一个特殊的程序或脚本，由这个程序或脚本取出信息，并用这个表格做一些有用的事（如把用户数据传递给数据库）。可以把表单看成因特网上通用的一种视窗（window）对话框，用于接受用户数据。,网络应用基础第7课,42,网络应用基础第7课,43,表单(续),表单元素formbody元素括起整个表单，并给出一些基本定义。表单仅占用HTML文档的部分空间；实际上，一个HTML文档可以包含几个独立的、完成不同功能的表单。method指定了信息传递给HTTP服务器的方法；action给出与处理提交信息的脚本（程序）相关的URL（如“scriptname.asp”，“scriptname.php”）。,网络应用基础第7课,44,表单(续),表单输入元素,网络应用基础第7课,45,表单输入元素(续),type属性给出所使用标记的样式，“string”可以是：CHECKBOX（复选框）。RADIO（单选按钮）TEXT（单行的文本输入栏）。IMAGE（图像放在表单里）SUBMIT（提交按钮）RESET(清除按钮)HIDDEN（在表单中保留不供显示的内容）,网络应用基础第7课,46,表单输入元素(续),另外：SIZE属性用于设置文本字段的窗口大小（以字符数为计量单位）。CHECKED属性与CHECKBOX和RADIO类型一起使用，用于表示按钮在默认状态时是否被选中。,网络应用基础第7课,47,表单(续),选项选择元素（类似Windows中的组合框）content1content2在选项选择元素中，所有可选项目由元素逐条列出；通常用下拉式菜单显示。跟在每个标记后面的text在下拉框中显示；如果没有给出value属性（可选属性）；当用户选择到某选项时则随表单呈上相应的text文本。multiple属性允许选择多于一个的选项；selected属性指定默认的选择。,网络应用基础第7课,48,选项选择元素(续),选项选择举例：BeijingXian,网络应用基础第7课,49,表单输入元素(续),多行文本输入text类似于标记，但允许多行文本输入。name属性与的类似，用行和列属性的数值定义文本输入区域的大小。元素中text的值将作为默认内容显示在文本区域中。,网络应用基础第7课,50,HTML基本元素的使用,实体HTML文档中出现的很多字符不可能通过输入直接放入HTML文档中，这些字符包括对HTML有特殊意义的字符，如，“”字符，以及许多键盘上找不到的国际字符和印刷字符。可以用实体（Entities）把这些字符放在文档中，实体是若干个文本片段，它们一起表示单个字符。其一般语法包括一个“&”号、一个表示字符的名字及一个分号。,网络应用基础第7课,51,实体（续）,保留字符是HTML中用于其它目的的普通字符，如果按原样输入则会引起混乱。,网络应用基础第7课,52,保留字符（续）,在浏览器中浏览HTML文档时，浏览器根据单词之间的留白来自动换行，并且HTML不支持两个及两个以上的空格。因此HTML语言提供了一个不换行空格的标记“nbsp；”，这样如果需要某几个单词之间不出现换行的话，就可以在这些单词之间使用这个换行标记“nbsp；”来替代空格，并且也可以利用这个标记来建立两个或两个以上的空格效果。,网络应用基础第7课,53,实体（续）,国际字符国际字符指多数除英语外的欧洲语言中使用的字符，其名字参照ISO拉丁字符集。,网络应用基础第7课,54,HEAD容器(续),Script元素标记是用来在页面中插入由浏览器执行的脚本程序（JavaScript或VBScript），为容器元素。如：“LANGUAGE”属性用来指明脚本语言的种类。因为浏览器往往可以使用多种脚本语言，所以必须指明语言的种类。注解标记（）是为了能与老版本以及无法解析脚本程序的浏览器兼容。,网络应用基础第7课,55,HEAD容器(续),LINK元素在当前文档和另一文档之间建立链接关系。name属性给链接起一个名字，比如“MailtoAuthor”（发给作者），rel属性描述了链接的类型，比如“made”（表示作者），“parent”（表示文档是大文档的