网页设计与制作课件ppt.ppt

《网页设计与制作课件ppt.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作课件ppt.ppt（215页珍藏版）》请在三一办公上搜索。

1、网页设计与制作,2-18周，其中包含5次实验。联系方式：电子邮件：QQ：270045454,第一章 网页设计与制作基础,本章要点：,Internet概述知识 网页设计基本知识 网络基础知识,第一节 关于互联网,Internet,Internet是由遍布全球的各种网络系统、主机系统，通过统一的协议TCP/IP联接在一起所组成的世界性计算机网络系统。,一、什么是协议？,网络中的计算机类型和操作系统的类型不可能完全相同，因而在机器字长、信息格式、信息传递方式等诸方面存在着差异，使得这些计算机之间难以进行进行交换。为了解决这一问题，需要事先对一些通信规则进行约定或定义，这些规则精确地规定所交换数据的格

2、式和传输方法，即计算机在交换信息时都要遵守的表达方式。网络协议（Protocol）是一系列通信规则的总称，主要包括用户数据与控制信息的结果和格式，需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三部分内容。协议的实质是进行通信所使用的语言。,一、什么是协议？,网络中存在多种级别的协议。总的来说，可以分为硬件协议和软件协议。硬件协议。此类协议定义了硬件设备如何运作以及如何协同工作。软件协议。程序之间的通信是通过软件系统已完成的。无论是网络客户机，还是网络服务器，都提供有特定的协议包，它们在与其他计算机通信之前，必须在那些计算机中载入相应的协议包，协议包中包含了计算机访问特

3、定网络设备或服务所需的协议。,二、互联网协议,1、TCP/IP协议,TCP/IP(Transmission Control Protocol/Internet Protocol)传输控制协议/互联网协议。TCP/IP协议定义了在互联网络中如何传递、管理信息(文件传送、收发电子邮件、远程登录等)，并制定了在出错时必须遵循的规则。,从协议分层模型方面来讲，TCP/IP由四个层次组成：,1、TCP/IP协议,网络接口层网络层传输层应用层,负责接收IP数据包并通过网络发送,负责相邻计算机之间的通信,提供应用程序间的通信,向用户提供一组常用的应用程序,1、TCP/IP协议,IP协议处理网络上一个主机到另

4、一个主机的数据报路由选择，运行在OSI网络七层模型中的网络层上。TCP协议工作在OSI模型中的传输层上，用于建立和校验数据连接。,二、互联网协议,2、PPP协议点对点协议（PPP：Point to Point Protocol）为在点对点连接上传输多协议数据包提供了一个标准方法。PPP 最初设计是为两个对等节点之间的 IP 流量传输提供一种封装协议。在 TCP-IP 协议集中它是一种用来同步调制连接的数据链路层协议（OSI 模式中的第二层），替代了原来非标准的第二层协议，即 SLIP。除了 IP 以外 PPP 还可以携带其他协议，包括 DECnet 和 Novell 的 Internet 网包

5、交换（IPX）。,二、互联网协议,3、其他协议HTTPFTPSMTPPOP3TELNET,三、IP地址,在TCP/IP的地址编排方案中，采用了一种通用的地址格式，为互联网中的每一个网络和每一台主机都分配一个地址。这个地址在Internet中时唯一的，并以此屏蔽了物理网络地址的差异。这个地址是由高层软件技术来完成的，确切地说是通过IP协议层实现的。IP层所用到的地址是互联网地址，又叫IP地址。Internet中的每一台服务器和路由器的每一个端口都必须有一个IP地址。IP地址由32位二进制数表示，每8位为一组，以圆点分隔。IP地址是一种层次型地址，在概念上分为三个层次：主机、由主机构成的网络和由网

6、络构成的互联网。,四、域名和域名系统,IP地址用数字表示主机，不容易记忆，使用也不方便。为了解决这个问题，同时也为了便于网络地址的分层管理和分配，自1984年起在互联网上采用了一种字符型的地址标识，这便是域名（Domain Name）。域名标识了一个用户所属的机构、所使用的主机或节点机。域的命名方式称为域名系统，域名必须按ISO有关标准进行。域名采用层次型命名机制，域名由n级组成，各级之间以圆点分隔。,四、域名和域名系统,域名的格式如下所：第n级子域名，。二级子域名，顶级域名（主机名）（机构名）（网络类型名）（国别代码）,五、WWW,万维网（亦作“网络”、“WWW”、“3W”，英文“Web”或

7、“World Wide Web”），是一个资料空间。在这个空间中：一样有用的事物，称为一样“资源”；并且由一个全域“统一资源标识符”（URL）标识。这些资源通过超文本传输协议(Hypertext Transfer Protocol)传送给使用者，而后者通过点击链接来获得资源。从另一个观点来看，万维网是一个透过网络存取的互连超文件(interlinked hypertext document)系统。万维网联盟（World Wide Web Consortium，简称W3C），又称W3C理事会。1994年10月在拥有“世界理工大学之最”称号的麻省理工学院(MIT)计算机科学实验室成立。建立者是万维

8、网的发明者蒂姆伯纳斯李。万维网常被当成因特网的同义词，不过其实万维网是靠着因特网运行的一项服务。,第二节 什么是网页,网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。所谓网站(Website)，就是指在因特网上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（

9、信息）或者享受网路服务。,第二节 什么是网页,网站与网页的关系网站是由网页集合而成的，而大家通过浏览器所看到的画面就是网页，网页说具体了是一个html文件，浏览器是是用来解读这份文件的。也可以这样说：网页是有许多html文件集合而成。至于要多少网页集合在一起才能称作网站，这可就没有规定了，即使只有一个网页也能被称为网站。什么是网页现在在你眼前，出现在显示器上的这个“东西”，就是一个网页。网页实际是一个文件，它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算

10、机，然后再通过浏览器解释网页的内容，再展示到你的眼前。构成网页的元素文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。在网页上点击鼠标右键，选择菜单中的“查看源文件”，就可以通过记事本看到网页的实际内容。可以看到，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。为什么在源文件看不到任何图片？网页文件中存放的只是图片的链接位置，而图片文件与网页文件是

11、互相独立存放的，甚至可以不在同一台计算机上。,第二节 什么是网页,构成网页的元素文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。在网页上点击鼠标右键，选择菜单中的“查看源文件”，就可以通过记事本看到网页的实际内容。可以看到，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。为什么在源文件看不到任何图片？网页文件中存放的只是图片的链接位置，而图片文件

12、与网页文件是互相独立存放的，甚至可以不在同一台计算机上。,第三节 什么是HTML？,设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。,第四节 Web浏览器

13、,网页浏览器主要通过HTTP协议连接网页伺服器而取得网页，HTTP容许网页浏览器送交资料到网页伺服器并且获取网页。目前最常用的HTTP是HTTP/1.1，这个协议在RFC2616中被完整定义。HTTP/1.1 有其一套Internet Explorer并不完全支援的标准，然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以URL（统一资源定位符）指示，此乃网页的地址；以http:开首的便是通过HTTP协议登陆。很多浏览器同时支援其他类型的URL及协议，例如ftp:是FTP（档案传送协议）、gopher:是Gopher及https:是HTTPS（以SSL加密的HTTP）。,第四节 Web

14、浏览器,网页通常使用HTML（超文本连结标记语言）文件格式，并在HTTP协议内以MIME内容形式来定义。大部分浏览器均支援许多HTML以外的文件格式，例如JPEG、PNG和GIF图像格式，还可以利用外挂程式来支援更多文件类型。在HTTP内容类型和URL协议结合下，网页设计者便可以把图像、动画、视频、声音和流媒体包含在网页中，或让人们透过网页而取得它们。早期的网页浏览器只支援简易版本的HTML。专属软体的浏览器的迅速发展导致非标准的HTML代码的产生。这导致了浏览器的相容性的问题。现代的浏览器（Mozilla、Opera和Safari）支援标准的HTML和XHTML（从HTML 4.01版本开始

15、）。他们显示出来的网页效果都一样。Internet Explorer仍未完全支援HTML 4.01及XHTML 1.x。现在许多网站都是使用所见即所得的HTML编辑软体来建构的，这些软体包括Macromedia Dreamweaver和Microsoft Frontpage等。他们通常预设产生非标准HTML；这阻碍了W3C制定统一标准，尤其是XHTML和CSS（层叠样式表，设计网页时用）。,第五节 网页设计的基本目标,一、创意要新二、页面制作1、网页结构2、页面内容3、文字4、图形,第五节 网页设计的基本目标,三、商业网页设计的要求1、良好的视觉效果2、站点开发周期应尽可能短，网页发布的信息一

16、定要准确3、维护更新要方便4、其他问题,第六节 网页制作工具及分类,一、标记型网页制作工具二、“所见即所得”型网页制作工具三、编程型网页制作工具四、图像处理工具五、通用图像处理工具六、专用图像处理工具七、不同类型工具的比较,第七节 小结,一、从了解HTML的基本标记开始二、选择一个自己认为颇为顺手的工具，从第一个页面开始三、多多访问他人的网页，从中受到启发四、深入分析成功的网页、网站,第二章 网站设计的原则与页面风格,第一节 网站设计原则,第二章 网站设计的原则与页面风格,第二节 站点的总体风格一、商业网站的风格二、非商业组织站点的风格三、个人网站的风格,第二章 网站设计的原则与页面风格,第三

17、节 站点的层次站点的层次是指站点的主页和二级、三级页面之间的结构关系。第四节 站点结构实例分析,第二章 网站设计的原则与页面风格,第五节 站点目录结构组织一、站点目录结构组织二、站点的链接结构的组织1、树形链接结构2、星形链接结构第六节 小结,第三章 网页构图与色彩,第一节 页面的布局一、重心平衡概述二、重心平衡设计实例第二节 页面色彩以及图片格式的使用一、网页用色概述二、色彩的基本概念三、色彩和GIF、JPEG文件格式四、Web安全调色板,第三章 网页构图与色彩,第三节 页面构图方法一、网页布局的基本概念1、页面尺寸2、整体造型3、页眉4、文本5、页脚6、图片7、多媒体,第三章 网页构图与色

18、彩,第三节 页面构图方法二、网页页面布局的方法1、纸上布局2、软件布局三、页面构图实例,第三章 网页构图与色彩,第四节 文本色彩体系第五节 网页设计的通用规则一、网站的设计目的决定设计方案二、浏览者的需求应放在第一位三、页面的有效性四、页面的布局保持统一性五、使用表格和适当的帧结构来设计网页六、谨慎使用图片七、平面设计意识八、减少Java Applet和其他多媒体的使用,第四章 PhotoShop,第一节 PhotoShop概述与基本操作第二节 进一步了解PhotoShop第三节 PhotoShop特殊功能第四节 制作一幅漂亮的图片,Internet的起源和发展,1969年美国国防部高级研究所

19、计划局（ARPA）建立ARPAnet，1986年美国国家科学基金会（NSF）建立了NSFnet。,1991年6月中国第一条与国际互联网连接的专线建成，我国1994年3月正式加入Internet，目前我国有权管理Internet国际出口的单位有5家。,ARPA于1962年10月开始了研制大型网络的计划ARPANET，1969年12月初步建成这个试验性网络。1980年发展成为TCP/IP协议，1983年美国军方将TCP/IP协议确定为网络协议标准1986年美国国家科学基金会（NSF）建立了NSFnet。,1987年，IBM、MCI和Merit共同组建了ANS。1992年ANS建立了一个新的主干网A

20、NSNET。1989年3月，欧洲粒子物理实验室（CERN）英国计算机学者Tim Berners-Lee建议建立一个由超文本链接方式组成的信息网Web。1990年11月，NeXT公司（Apple创始人斯蒂夫乔布斯组建）发布了最初的World Wide Web（后来简称WWW或W3）模型。1991年，CERN正式向外界发布了WWW协议标准。在WWW标准基础上，由美国麻省理工学院、CERN及法国计算机与控制国家研究院参加组成的合作机构提出了新的、更为复杂的超文本标记语言HTML草案，发布了HTML标准1.0版，后来升级为HTML2.0版和3.0版。1994年11月，Netscape Communic

21、ator（网景公司）开发的Netscape Navigator（导航者）问世。Microsoft也于一年后的1995年11月推出自己的浏览器Internet Explorer。,Internet在中国的发展,三个阶段：,第一阶段（19871993年），电子邮件使用阶段,1991年6月中国第一条与国际Internet联网的专线由北京的中国科学院高能物理所建成。,第二阶段（19941995年），教育科研网发展阶段,1994年4月正式开通了中国与国际Internet的64Kbps专线连接，并设立了中国最高域名（CN）服务器。到1995年初，高能所将卫星专线改用海地电缆，通过日本进入Internet。

22、这时，我国才算是真正加入了国际Internet行列之中。,1994年9月，中国邮电部门开始计划进入Internet，建立中国公用Internet网，即CHINANET，作为公共商用网向公众提供Internet服务。,第三阶段（1995年至今），商业应用阶段,1.1.3 中国现有的五大Internet网络,中国公用计算机互联网络（CHINANET）,中国教育与科研网络（CERNET）,中国科技网（CSTNET）,中国金桥信息网（CHINAGBNET）,中国公众多媒体通信网（169网）,Internet的功能,1.电子邮件E-mail,电子邮件（E-mail）,SMTP（Simple Mail P

23、rotocol，简单邮件传输协议）POP3（Post Office Protocol version 3，邮局协议）,2.FTP文件传输协议,文件传输（FTP：File Transfer Protocol）,3.远程登录,远程登录（Telnet）,4.网上查询,名称地址录信息检索工具索引式信息检索工具交互式信息检索工具,5.网上交流,公告板系统BBS网络新闻组电子邮件通信组 聊天,1.1.5 TCP/IP简介,协议是关于信息格式和信息交换规则的正确描述。,网络通信协议就是计算机之间为互相通信、传递信息而所约定的规则。协议的实质是网络通信所使用的一种语言。,TCP/IP(Transmission

24、 Control Protocol/Internet Protocol)传输控制协议/互联网协议。TCP/IP协议定义了在互联网络中如何传递、管理信息(文件传送、收发电子邮件、远程登录等)，并制定了在出错时必须遵循的规则。,从协议分层模型方面来讲，TCP/IP由四个层次组成：,网络接口层网络层传输层应用层,负责接收IP数据包并通过网络发送,负责相邻计算机之间的通信,提供应用程序间的通信,向用户提供一组常用的应用程序,1.1.6 IP地址和域名,IP地址是网上的通信地址，是计算机、服务器、路由器的端口地址，每一个IP地址在全球是惟一的，是运行TCP/IP协议的惟一标识。,1.IP地址,207.4

25、9.68.15,网络地址,主机地址,域名 代表IP地址 207.46.156.252,IP地址也称为URL（Unique Resource Location，中文意义为“统一资源定位符”），IP地址由四个从0到255之间的32位二进制组成，分为网络地址和主机地址。,2.域名,Internet域名是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有重复的域名。域名的形式是以若干个英文字母或数字组成，由“.”分隔成几部分。,域名管理系统DNS（Domain Name System）是域名解析服务器的意思.它在互联网的作用是：把域名转换成为网络可以识别的ip地址.比如：我们上网时

26、输入的会自动转换成为61.135.132.6,URL地址和HTTP,URL（Uniform Resoure Locator：统一资源定位地址）是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。俗称“网址”。,Scheme:/machinename/directory,Internet资源类型（scheme）：指出WWW 客户程序用来操作的工具。如“http:/”表示WWW服务器，“ftp:/”表示FTP服务器，“gopher:/”表示Gopher服务器，而“new:”表示Newgroup新闻组。,服务器地址（host）：指出WWW 页所在的服务器域名。,端口（port）：有

27、时（并非总是这样），对某些资源的访问来说，需给出相应的服务器提供端口号。,HTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于将超文本从WWW服务器传输到本地浏览器的传送协议。,路径（path）：指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。与端口一样，路径并非总是需要的。,1.1.8 连接Internet的方式,进入Internet的方式主要有三种：主机方式、网络方式和仿真终端方式。,1.2 网页设计基本知识,1.2.1 WWW简介,万维网,WWW 是 World Wide Web（环球信息网）的缩

28、写，也可以简称为 Web，中文名字为“万维网”。它是一种基于超文本文件的交互式浏览检索工具。用户可用WWW在Internet网上浏览、传递、编辑超文本格式的文件。,HTML：HyperText Markup Language，超文本标记语言，是一套独立于平台的格式定义(用标记说明),用来描述3W文档中的各个组成部分。,网页就是我们通过网络浏览器看到的网站页面，网页通常都符合HTML的规范。,静态网页是在动态网页出现后相对而言的传统采用HTML编写的网页。,动态网页指的是采用ASP、PHP、CGI等程序动态生成的页面，在网络空间中并不存在这个页面，只有在接到用户的访问要求后才生成并传输到用户的浏

29、览器中。,一个网站的起始页称为主页（Homepage）或首页。,超级链接是带下划线或边框，并内嵌了 Web 地址（又称为 URL-统一资源定位符）的文字和图形。,B/S：Browser/Server浏览器/服务器C/S：Client/Server客户端/服务器,1.2.2 超文本描述语言HTML,1.什么是HTML,HTML是Hypertext Markup Language（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标记语言。,HTML最早源于SGML语言（Standard General Markup Language，标准通用化标记语言），

30、HTML是由Web的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记式语言，它是SGML的应用。WWW协会作为制定HTML标准的国际性正式组织，于1993年正式推出HTML 1.0版，提供简单的文本格式功能。1995年2月推出HTML 2.0版，增加了表格处理、图形、图像等功能。1995年10月又推出了HTML 3.0版。1996年3月的HTML 3.2版加入了标记，用于嵌入JavaApplet程序，增加了图像映像及地图索引等功能。,2.HTML的作用,格式化文本建立超链接 创建列表 插入图像 建立表格加入多媒体 交互式表单、计数器等,3.

31、专用的网页编辑器,完全的所见即所得工具 纯粹的HTML代码编辑工具 混合型工具,4.XML简介,XML是EXtensible Markup Language的缩写 XML是一种类似于HTML的标记语言 XML是用来描述数据的 XML的标记不是在XML中预定义的，你必须定义自己的标记 XML使用文档类型定义（DTD）或者模式（Schema）来描述数据 XML使用DTD或者Schema后就是自描述的语言,FrontPage,FrontPage是最流行、功能最强大的网页制作软件之一，集成在Office XP之中。它可以利用其他Office套件的功能，制作出更加个性化的网页。它是由Microsoft公

32、司推出的新一代Web网页制作工具。它使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。其界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsofy公司将其封装入Office之中，成为Office家庭的一员，使之功能更大强大。,Dreamweaver 是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。可用于可视化设计与管理网页和网站的专业级HTML编辑器。Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。可编写ASP

33、、JSP及PHP程序，从而创建动态网站系统。包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性。与同为Macromedia公司出品的Fireworks和Flash一道，被誉为网页制作三剑客。,Dreamweaver,Fireworks,Fireworks是一个强大的网页图形设计工具，提供专业网络图形设计和制作方案。通过它，可以编辑网络图形和动画，支持位图和矢量图。同时它能与dreamweaver、flash能实现网页的无缝连接，与其它图形程序各HTML编辑也能密切配合。可以非常轻松的做出各种网页设计中常见的效果，

34、比如翻转图象，下拉菜单等，设计完成以后，可以将它输出为html文件，还能输出为可以在photoshop、illustrator和flash等软件中编辑的格式。,MacroMedia推出的Flash是业界内最优秀的矢量动画制作软件，是一个网页交互动画制作工具。用于矢量图形编辑和动画制作。,Flash,第五章 HTML入门,本章要点：,HTML基础知识 基本标识 文本/图像/表格/链接/框架/多媒体/表单等标识,第一节 HTML基本结构,Html文件是标准的ASCII文件，Html文件由元素(element)组成，每一个元素都有名称和可选择的属性。是一种用来制作超文本文档的简单标记语言。用HTML

35、编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。HTML文件是一种纯文本格式的文件,描述HTML文件结构的标识符。,规定文件的逻辑结构控制页面显示方式,扩展名：.html，htm编写工具：记事本，写字板Editplus及各种网页制作工具。,网页标题网页的内容,HTML标识是由“”所括住的指令，可分为双标识指令也称为围堵标识（由，

36、所构成）、单标识指令也称为空标识（只有）。,标识的写法,demo This is my first html file.,起始标注开始,注：元素名也叫标注名 后不能有空格,指明属性值,注：一个元素可以有多个属性，各个属性用空格分开。,起始链接结束,注：结尾标注用。,注：一个元素的元素体中可以有另外的元素HTML并非大小写敏感（WIN）属性只可加于起始标识中,Html的元素有下列三种表示方法：1)文件或超文本2)文本或超文本3),X,双标识指令与单标识指令,2.1.3 与网页有关的常见名词,绝对路径:通过文件在文件系统中的绝对位置进行描述。例如：c:html2pagesexalink1.htmh

37、ttp:/,相对路径:以当前文件所在的文件夹为基准来定位其它文件的路径。相对路径有三种情况：（1）链接的文件在当前文件夹的上一级文件夹下时用“.”表示向上一级，用“/”来分隔文件夹和文件名。（2）链接的文件在当前文件夹的下一级文件夹下时直接写下一级文件夹名和文件名。（3）链接的文件在当前文件夹中时，直接写文件名。,【例】简单的HTML文件。简单的HTML文件 最简单的网页,第二节 页面排版,结构,html文件开始 文件头开始 网页标题 文件头结束 文件体开始 文件体 文件体结束 html文件结束,色彩是用 16 进制的 红绿蓝(red-green-blue,RGB)值来表示。16 进制的数码有

38、:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.RGB颜色可以有四种表达形式:：#rrggbb(如，#00cc00)#rgb(如，#0c0)rgb(x,x,x)x是一个介乎0到255之间的整数(如，rgb(0,204,0)rgb(y%,y%,y%)y是介乎0.0到100.0之间的整数(rgb(0%,80%,0%)或者是下列预定义色彩：,作为一般的原则，大多数属性值不用加双引号。但是包括空格、号，号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。,2.3 页面格式标识,1.设置网页的背景色,格式：,2.设置网页的图像背景,格式：,3.设置网页的文本颜色

39、,格式：,4.设置网页的文本链接颜色,格式：,5.设置网页的文本已使用链接颜色,格式：,6.设置网页的文本正使用链接颜色,格式：,7.设置网页的左方距离,格式：,8.设置网页的上方距离,格式：,9.设置网页的固定背景,格式：,用BODY标记设定文字的颜色 春夜喜雨 唐杜 甫 好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。,BMP格式,BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。,GIF格式,GIF是英文Graphics Interchange Format（图形

40、交换格式）的缩写。GIF格式的特点是压缩比高，磁盘空间占用较少，GIF87a简单地用来存储单幅静止图像，GIF89a格式文件可形成连续的动画。,JPEG格式,JPEG是常见的一种图像格式，扩展名为.jpg或.jpeg，其压缩技术十分先进，PEG格式的文件尺寸较小，下载速度快。,PSD格式,Adobe公司的图像处理软件Photoshop的专用格式Photoshop Document（PSD）。,2.4 文本标识,标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。,1.文本的字体,例：今天 天气 真好！,2.短语,知识点：,HTML 指超文本标签语言。HTML 文件是包含一些标

41、签的文本文件。这些标签告诉 WEB 浏览器如何显示页面。HTML 文件必须使用 htm 或者 html 作为文件扩展名。HTML 文件可以通过简单的文本编辑器来创建。HTML 标签是用来标记 HTML 元素的。HTML 标签被 符号包围。这些包围的符号叫作尖括号。HTML 标签是成对出现的。例如 和。位于起始标签和终止标签之间的文本是元素的内容。HTML 标签对大小写不敏感，和的作用的相同的。,注意点：,推荐您使用纯文本编辑器来学习HTML。扩展名使用.html 是相当安全的做法。要使用小写的标签和使用小写属性。始终为属性值加引号 不要忘记关闭标签 使用空的段落标记 去插入一个空行是个坏习惯。

42、用 标签代替它。,3.行和段,1.强制换行,2.段落,3.标尺线,或,注释标签,4.预置格式,段落格式,4.布局,1.居中,（1）使用标记和align属性的center值,格式：文本或图像,（2）使用标记,格式：文本或图像,（3）使用标记和align属性的center值,格式：文本或图像,2.右对齐,（1）使用标记和align属性的right值,格式：文本或图像,（2）使用标记和align属性的right值,格式：文本或图像,3.左对齐,（1）使用标记和align属性的left值,格式：文本或图像,（2）使用标记和align属性的left值,格式：文本或图像,4.标记,文本或图像文本或图像文本

43、或图像,2.5 图像标识,在网页中加入图像主要考虑两个方面的问题。一是下载速度，二是图像质量,图像文件的格式有几十种，如：GIF、JPEG、BMP、PCX、TGA等等，但网页支持的、最常用的图像文件是 GIF、JPEG格式。,1.图像文件的格式,格式：,注：x、y可取像素数，也可以取百分数。,图像布局,1.图像在页面居中,标记,align属性,设置图像与文本之间的空白,格式：,hspace=x 设定水平方向的空白vspace=y 设定垂直方向的空白,属性：,垂直/环绕对齐,格式：,文本 文本,参数：,align=top 文本与图像的顶部对齐align=middle 文本与图像的中央对齐alig

44、n=bottom文本与图像的底部对齐align=left图像居左，文本在图像的右侧align=rigth 图像居右，文本在图像的左侧,第四节 表格标识,用表格对网页进行排版,表项1表项2表项n 表项1表项2表项n,1.基本格式,(1)标记,border=“n”-定义表格的粗细bordercolor=“颜色值”-定义表格边框的颜色summary=“简要说明”-简要说明表格的格式和内容bgcolor-设定表格的背景色background-设定表格的背景图像width=“n”/“n%”-设定表格的宽度height=“n”-设定表格的高度align=“left”/“right”/“center”-表格

45、在页面上的水平对齐方式cellpadding-调节表单元线与数据之间的距离cellspacing-调节表元与边框之间的距离rules=“参数”-设定表格线frame=“参数”-设定表格边框,(2)标记,定义表行,bgcolor-设定表格一行的背景色。align=“left”/”right”/”center”-设定表格一行的表数据项的水平对齐方式。bordercolordark=“颜色值”-设定表格边框的暗色颜色bordercolorlight=“颜色值”-设定表格边框的明色颜色,(3)标记,定义表元(表格的具体数据),bgcolor-设定背景色。align=“left”/”right”/”ce

46、nter”-定义表数据项的水平对齐方式。bordercolordark=“颜色值”-定义表格边框的颜色width=“n”/“n%”-设定表格单元宽度height=“n”-设定表格单元高度,2.表题,表题,-定义表头，以粗体字显示,3.表头,4.行和列的合并,（1）行合并,表项,（2）列合并,表数据项,5.表格尺寸,1.设定表格宽度,2.设定表格高度,3.设定表元宽度,4.设定表元高度,第六节 超级链接,超链接是WWW上的一种链接技巧，它通过已定义好的关键字和图形，只要点取某个图标或某段文字，就可以自动连上相对应的其他文件。所以在WWW 站点画面中，可以通过超链接点取的方式，从一个网页链接到另一

47、个网页。,什 么 是 超 链 接(Hyperlink)?,1.创建网页间的链接,文本或图像,四种情况：,（1）链接同一个目录内的文件,（2）链接下一级目录内的文件,文本,文本,（3）链接上一级目录内的文件,文本,（4）链接同级目录内的文件,文本,2.链接指定的文章段,定义锚点,字符串,链接锚点,文本或图像,TARGET=窗口名称 TITLE=指向连接显示的文字,第八节 框架,2.8.1 框架标识,1.标记,格式：,注：x、y可以取像素数、百分数和符号*,例一：,例二：,例三：,例四：,2.初始化框架,是指给各个框架指定初始显示的网页。,FRAME src=“文件名”name=“框架名”,3.边

48、框宽度和颜色设定,frameborder-指定框架有无边框border-确定边框的宽带borercolor-给框架边框着色,值为yes时为3D边框，为no时边框消失。默认值为yes。,值为像素数，默认值为像素宽,4.空白,Marginwidth-设定框架内容与左右边框间的空白Marginhwidth-设定框架内容与上下边框间的空白,5.加入滚动条,强制加入垂直滚动第和水平滚动条,框架内不加滚动条,自动使用滚动条,6.固定边框,noresize属性,7 框架间的链接,格式：,热点文本,target属性：,框架名_top_self_blank_parent,8 内联框架,格式：,src-指定内联框

49、架内显示页的URLwidth-指定内联框架的宽height-指定内联框架的高align-指定内联框架的对齐方式frameborder-用数值指定内联框架的立体框宽name-指定内联框架的名字scrolling=“yes”/“no”-指定内联框架是否加入滚动 条hsapce=x-指定内联框架水平方向上左侧间隔vsapce=x-指定内联框架垂直方向上顶部间隔,第七节 表单标识,输入表单主要由输入表项、单选钮、选择框、成段文字输入及发送、复位按钮等表单控制组成。,1.建立表单,表单内容：输入表项、单选钮、选择框、输入成段 文字、发送、复位按钮,表单的作用是从用户方收集信息，当用户填好表单上所需信息并

50、将表单提交后，服务器就可以得到表单中包含的信息，并经进行处理。,您的姓名:您的主页的网址:密码:,.其中GET|POST表示二者选择一个。表单中提供给用户的输入形式为：*=text,password,checkbox,radio,image,hidden,submit,reset*=一般是一个唯一标识符,表单的基本结构,标记属性：,Action-设定表单的处理手段。Method-设定传送表单数据组的方法。Enctype-指定当method为post时向服务器传送表单所使用的内容类型Accept-charset-设定由服务器处理表单时必须收到的输入数据的字码列表Accept-指定用“,”分开服务