[互联网]网页设计制作基础.ppt

《[互联网]网页设计制作基础.ppt》由会员分享，可在线阅读，更多相关《[互联网]网页设计制作基础.ppt（55页珍藏版）》请在三一办公上搜索。

1、计算机实践,管理与经济学院,网页设计与制作,1,图形图像处理,2,Office 办公软件,3,课程组成,课程日历,网页设计与制作,吴 彬,计算机实践网页设计与制作,网页设计制作基础网页设计工具 Dreamweaver网页动画制作工具 Flash,一、网页设计制作基础,网页：Web Page构成网站的基本元素，是网站中的一“页”，也就是在浏览器中看到的一幅画面；,网页是什么？,一、网页设计制作基础,每个网页通常对应着一个文件，文件名常以 htm 或 html 后缀结尾，俗称 HTML文件。不同的文件名后缀，代表不同类型的网页，除 htm 或 html 后缀外，其它如：cgi、asp、jsp、ph

2、p 等；,网页是什么？,一、网页设计制作基础,构成网页的基本元素,文字：承载信息和交流的工具图片和动画：修饰网页、提供信息声音和视频：多媒体信息超链接：实现网页间快速跳转表格：列表化数据、精确定位网页元素的位置表单：输入数据，提交服务器处理导航栏：引导浏览者访问其它：ActiveX控件、Java小程序、滚动字幕等,一、网页设计制作基础,网页工作原理,输入网址（URL）,客户端,服务器,一、网页设计制作基础,网页文件（HTML）存放在与互联网相连的某台计算机（服务器）中，经由网址（URL）来识别与存取，当用户在浏览器中输入网址后，浏览器通过 HTTP 协议从服务器上获取网页文件，并经过分析、解释

3、后显示在计算机屏幕上。,网页工作原理,一、网页设计制作基础,网页关键性技术标准,统一资源定位器（URL）超文本标记语言（HTML）超文本传送协议（HTTP）,一、网页设计制作基础,统一资源定位器（URL）,URL：Universal Resource Locator，用于完整地描述Internet上网页及其它资源地址的一种标识方法，俗称为“网址”。URL的基本结构：,通信协议:/域名或IP:端口号/路径/文件名？查询参数信息片段,例：http:/,网页关键性技术标准,一、网页设计制作基础,超文本标记语言（HTML）,HTML：Hypertext Markup Language；HTML是一种规

4、范，一种标准，它通过标记符号标记网页中的各个部分（如：文字、图片、视频、动画等），并告诉浏览器如何显示；之所以称为“超文本”，是因为文本中包含了被称为“超级链接”的热点，通过点击超链接可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。,网页关键性技术标准,一、网页设计制作基础,超文本传送协议（HTTP）,HTTP：Hypertext Transfer Protocol是客户端与服务器端之间进行请求和应答的一种标准，它采用请求/响应模型；客户端向服务器发送一个请求，称之为消息，消息的内容包括请求的方法、URL、协议版本等。服务器根据请求作出响应，响应的内容包括协议版本、

5、成功或错误代码、服务器信息、实体信息等。,网页关键性技术标准,一、网页设计制作基础,超文本传送协议（HTTP）,GET http:/download.microtool.de:80/somedata.exeHost:download.microtool.deAccept:*/*Pragma:no-cacheCache-Control:no-cacheReferer:http:/download.microtool.de/User-Agent:Mozilla/4.04en(Win95;I;Nav)Range:bytes=554554-,典型的请求消息,网页关键性技术标准,请求的资源地址,服务器域

6、名,浏览器版本信息,一、网页设计制作基础,超文本传送协议（HTTP）,HTTP/1.0 200 OK Date:Mon,31Dec200104:25:57GMT Server:Apache/1.3.14(Unix)Content-type:text/html Last-modified:Tue,17Apr200106:46:28GMT Etag:a030f020ac7c01:1e9f Content-length:39725426 Content-range:bytes 554554-40279979/40279980,典型的响应消息,网页关键性技术标准,协议及状态代码,服务器信息,数据总长度

7、（字节数）,静态网页是实实在在保存在服务器上的文件，每个网页都对应着一个独立的文件，都由一个固定的网址（URL）进行访问；动态网页实际上是能在服务器上运行的程序，用户每次看到的网页并不对应服务器上存放的某个文件。动态网页会根据用户每次请求提交的参数，相应地生成静态网页；,一、网页设计制作基础,静态网页 vs 动态网页,一、网页设计制作基础,静态网页 vs 动态网页,静态网站服务器,我要看文章1,我要看文章2,动态网站服务器,表（Table）,一、网页设计制作基础,网站：Website，众多网页的集合提供某种网络服务（如：资讯、搜索、BBS等）,网 站,网站,?,.,一、网页设计制作基础,域名（

8、网址）,网络接入环境,服务器硬件平台,网站,服务器操作系统,信息发布服务（IIS、Apache）,网页（按照一定规则组合在一起，具有某种逻辑结构的集合）,一、网页设计制作基础,目标规划,系统分析,网站设计,网站实现,网站发布,网站调试,维护与管理,建设网站的一般流程,网站生命周期,一、网页设计制作基础,超文本标记语言HTML,由万维网联盟（W3C）制定发布，最新版本4.01HTML文件：用 HTML 语言编写的代码文件，纯文本文件，后缀名：htm 或 html,（1）表达信息的文字（2）称为“标记”的特殊字符,一、网页设计制作基础,超文本标记语言HTML,这是一行有下划线的文字,浏览器,HTM

9、L标记本身（）不显示在浏览器中,一、网页设计制作基础,超文本标记语言HTML,创建简单的HTML文件,打开记事本，输入右侧的代码，保存时输入含后缀 htm 的完整的文件名，如 hello.htm，保存退出；在“我的电脑”中找到 hello.htm 并双击。,一、网页设计制作基础,超文本标记语言HTML,基本文档结构,一、网页设计制作基础,超文本标记语言HTML,1.标记,HTML文档由标记和被标记的内容组成，标记用于定义信息的类型，也称作标签（Tag），格式为：被标记的内容 例如：我的第一个网页,语法规则,一、网页设计制作基础,超文本标记语言HTML,双标记：成对出现的，例如：我的第一个网页,

10、头标记,尾标记,单标记：只有头标记的标记，例如：，表示换行。,1.标记,两种结构的标记,语法规则,一、网页设计制作基础,超文本标记语言HTML,1.标记,HTML是一种嵌套语言，一个标记的外面可以再嵌套另外一个标记。例如：我的第一个网页,语法规则,一、网页设计制作基础,超文本标记语言HTML,2.属性,标记规定了信息是什么，但怎样控制这些信息的显示，就需要使用属性。格式为：,例如：欢迎！,语法规则,被标记的内容,一、网页设计制作基础,超文本标记语言HTML,2.属性,一个标记可以有多个属性，无先后顺序。例如：,语法规则,含义：粗细为3个像素，宽度为200像素，左对齐显示的水平线。,一、网页设计

11、制作基础,超文本标记语言HTML,几个重要标记,1.文档头标记.,HTML文档头描述网页的基本信息，主要被浏览器所用，不会显示在网页里。另外，搜索引擎会查找网页中的文档头信息，提取文档标题等作为关键词进行收录。嵌套在里常见的标记有：、,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,1.文档头标记.,：文档标题，显示在浏览器标题栏中：链接资源文件，如样式表：定义CSS样式：网页元数据，如：编码字符集,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,2.文档主体标记.,文档主体中包含了所有要在浏览器中显示的文字、表格、图片等内容元素，网页中大部分标记都嵌套在.内。标记的属

12、性可对网页的整体显示效果进行控制。,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,2.文档主体标记.,bgcolor：网页背景色background：网页背景图片text：文字颜色link：超级链接的颜色alink：当链接被点中时文字颜色vlink：访问过的链接的文字颜色leftmargin：网页的左边距，单位：像素topmargin：网页上边距，单位：像素,属性,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,3.字体标记.,用于设定文字的大小，颜色和字体格式。,face：字体格式，如：宋体，黑体color：文字颜色，如：red，#FF0000size：文字大小，1

13、7号,属性,例：红色黑体5号字,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,3.字体标记.,在HTML里，颜色有两种表示方式：用颜色名称表示，比如 blue 表示蓝色，有16种可以表示颜色的名称(aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow)。用 6 位 16 进制的数值表示，从左至右每两位依次代表红、绿、蓝三原色值，颜色值范围：#000000#FFFFFF例如：#FF0000 表示红色 red,一、网页设计制作基础,超文本标记语言HTM

14、L,几个重要标记,4.标题文字标记（n=1、2、36）,用于将文字设置为标题格式。标题共分六级，n值越大级别越小,显示的字号也就越小。,例：1 这是第1级标题 1.1 这是第2级标题 1.1.1 这是第3级标题,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,4.标题文字标记（n=1、2、36）,例：居中大标题,属性,align：left，左对齐，默认值center，居中right，右对齐,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,5.段落标记.,用于将页面内容划分为一个一个的段落，段落间自动产生一个空行。,属性,align：left，左对齐，默认值center，

15、居中right，右对齐,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,5.段落标记.,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,6.换行标记（单标记）,用于在一个段落中进行换行，行与行之间没有空行。,这是第一段，第一行 这是第一段，第二行 这是第一段，第三行,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,7.锚点标记.,href：需要跳转过去的新地址target：新地址要在哪个窗口打开title：鼠标停留时显示的注释,属性,用途一：设置超级链接,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,7.锚点标记.,北京理工大学,校园招聘,首页

16、,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,7.锚点标记.,要点：用 name 属性定义锚点名称。在创建超链接时使用“#锚点名称”作为链接地址。,用途二：设置命名锚点,返回顶部,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,8.图片标记,src：图片文件的路径alt：替代的文字说明width：图片宽度，单位：像素height：图片的高度，单位：像素border：边框粗细，单位：像素hspace：水平方向上的空白，单位：像素vspace：垂直方向上的空白，单位：像素align：设置图片的垂直、水平对齐方式,属性,一、网页设计制作基础,超文本标记语言HTML,几个重

17、要标记,8.图片标记,例2：用图片做超链接,例1：在网页中插入一张图片,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,9.表格标记.,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,9.表格标记.,标记内通常嵌套有、标记。,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,9.表格标记.,第1行第1列 第1行第2列 第2行第1列 第2行第2列,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,9.表格标记.,属性,width=n|x%height=n|x%border=ncellspacing=ncellpadding=nalign=left|ce

18、nter|right background=图片地址 bgcolor=颜色代码,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,10.水平线标记,水平线可将网页中的内容按照从上到下的顺序分隔开，使页面看起来整齐、明了。,align：left，center（默认值），rightsize：水平线粗细，单位：像素width：水平线长度，单位：像素或百分比color：水平线颜色noshade：取消立体效果,属性,一、网页设计制作基础,超文本标记语言HTML,几个重要标记,10.水平线标记,一、网页设计制作基础,可扩展超文本标记语言XHTML,XHTML：Extensible Hypertext Markup Language在HTML4.0的基础上，用XML的规则对其进行扩展，以实现HTML向XML的过渡本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性HTML不区分大小写，而XHTML区分,一、网页设计制作基础,可扩展超文本标记语言XHTML,1.所有的标记都必须要有一个相应的结束标记2.所有标记名和属性名都必须使用小写 3.所有的标记都必须合理嵌套 4.所有的属性必须用引号括起来 5.把所有特殊符号用编码表示 6.给所有属性赋一个值 7.不要在注释内容中使“-”8.图片必须有说明文字（alt属性）,代码规范,本章内容结束,