网页相关设计制作基础

1、网页相关设计制作基础网页设计与制作1图形图像处理2Office 办公软件3课程组成星期（第12周）一二三四五一二三四五日期（8月229月4日）222324252629303112上午1节（8:00-8:50）-上课上课上课上课上课上课上课2节（9:00-9:50）3节（10:10-11:00）上课上课上机上机上机上机上机4节（11:10-12:00）下午5节（14:00-14:50）上机上机上机上机6节（15:00-15:50）7节（16:10-17:00）8节（17:10-18:00）课程日历网页设计与制作图形图像处理Office办公软件网页设计与制作吴 彬计算机实践网页设计与制作网页设计制

2、作基础网页设计工具 Dreamweaver网页动画制作工具 Flash一、网页设计制作基础网页：Web Page构成网站的基本元素，是网站中的一“页”，也就是在浏览器中看到的一幅画面；网页是什么？一、网页设计制作基础每个网页通常对应着一个文件，文件名常以 htm 或 html 后缀结尾，俗称 HTML文件。不同的文件名后缀，代表不同类型的网页，除 htm 或 html 后缀外，其它如：cgi、asp、jsp、php 等；网页是什么？一、网页设计制作基础构成网页的基本元素文字：承载信息和交流的工具图片和动画：修饰网页、提供信息声音和视频：多媒体信息超链接：实现网页间快速跳转表格：列表化数据、精确

3、定位网页元素的位置表单：输入数据，提交服务器处理导航栏：引导浏览者访问其它：ActiveX控件、Java小程序、滚动字幕等互联网一、网页设计制作基础网页工作原理输入网址（URL）HTTP请求HTTP响应客户端服务器网页文件网页HTTP协议一、网页设计制作基础网页文件（HTML）存放在与互联网相连的某台计算机（服务器）中，经由网址（URL）来识别与存取，当用户在浏览器中输入网址后，浏览器通过 HTTP 协议从服务器上获取网页文件，并经过分析、解释后显示在计算机屏幕上。网页工作原理一、网页设计制作基础网页关键性技术标准统一资源定位器（URL）超文本标记语言（HTML）超文本传送协议（HTTP）一、

4、网页设计制作基础统一资源定位器（URL）URL：Universal Resource Locator，用于完整地描述Internet上网页及其它资源地址的一种标识方法，俗称为“网址”。URL的基本结构：通信协议:/域名或IP:端口号/路径/文件名？查询参数信息片段例： :/ abc /read.asp?id=999#top网页关键性技术标准一、网页设计制作基础超文本标记语言（HTML）HTML：Hypertext Markup Language；HTML是一种规范，一种标准，它通过标记符号标记网页中的各个部分（如：文字、图片、视频、动画等），并告诉浏览器如何显示；之所以称为“超文本”，是因为文

5、本中包含了被称为 “超级链接”的热点 ，通过点击超链接可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。 网页关键性技术标准一、网页设计制作基础超文本传送协议（HTTP）HTTP：Hypertext Transfer Protocol是客户端与服务器端之间进行请求和应答的一种标准，它采用请求/响应模型；客户端向服务器发送一个请求，称之为消息，消息的内容包括请求的方法、URL、协议版本等。服务器根据请求作出响应，响应的内容包括协议版本、成功或错误代码、服务器信息、实体信息等。 网页关键性技术标准一、网页设计制作基础超文本传送协议（HTTP）GET :/download.

6、microtool.de:80/somedata.exeHost: download.microtool.deAccept:*/*Pragma: no-cacheCache-Control: no-cacheReferer: :/download.microtool.de/User-Agent:Mozilla/4.04en(Win95;I;Nav)Range:bytes=554554-典型的请求消息 网页关键性技术标准请求的资源地址服务器域名浏览器版本信息一、网页设计制作基础超文本传送协议（HTTP）HTTP/1.0 200 OK Date:Mon,31Dec200104:25:57GMT S

7、erver: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典型的响应消息网页关键性技术标准协议及状态代码服务器信息数据总长度（字节数）静态网页是实实在在保存在服务器上的文件，每个网页都对应着一个独立的文件，都由一个固定的网址（URL）进行访问；动态网页实际上是能在服务器上运行的程序，用户每次看到

8、的网页并不对应服务器上存放的某个文件。动态网页会根据用户每次请求提交的参数，相应地生成静态网页；一、网页设计制作基础静态网页 vs 动态网页编号1的文章文章2文章1一、网页设计制作基础静态网页 vs 动态网页文章2文章3文章1静态网站服务器我要看文章1我要看文章2编号作者内容1xxxxxx2xxxxxx数据库动态网站服务器读文章看编号1的文章编号1的文章表（Table）一、网页设计制作基础网站：Website，众多网页的集合提供某种网络服务（如：资讯、搜索、BBS等）网 站网站?a.htmb.htmc.htme.htmd.htm.一、网页设计制作基础域名（网址）网络接入环境服务器硬件平台网站服

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

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

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

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

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

14、ize：文字大小，17号属性例：红色黑体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 表示红色 r

15、ed一、网页设计制作基础超文本标记语言HTML几个重要标记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，左对齐

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

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

18、语言HTML几个重要标记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=n