01_网页制作基础.

网页与动画制作吴彬[e-mail]:68918471星期（第2周）一二三四五日期（9月14日～9月20日）1415161718上午第二大节（9:50-12:15）-上课-上课-下午第三、四大节（13:20-17:35）-上机-上机-课程日历•课程内容：网页与动画制作•上课地点：良乡1-401•上机地点：图书馆机房（机房6）网页与动画制作一．网页制作基础二．使用Dreamweaver制作网页三．Flash动画基本原理一、网页制作基础网页：Web（Page），构成网站的基本元素，它是网站中的任何一张“页面”，也就是在浏览器中看到的一幅画面；网页是什么？一、网页制作基础每个网页通常对应着一个文件，文件名常以htm或html后缀结尾，称为HTML文件，或称为网页源文件。不同的文件名后缀，代表不同类型的网页，除htm或html后缀外，其它如：cgi、asp、jsp、php等；网页是什么？一、网页制作基础构成网页的基本元素文字：承载信息和交流的工具图片（静态、动态）：修饰网页、提供信息视频、音频：多媒体信息超级链接：实现网页间快速跳转表格：列表化数据、精确定位网页元素的位置表单：输入数据，提交服务器处理扩展元素：Flash插件、Java小程序、滚动字幕等一、网页制作基础网页文件（HTML）存放在与互联网相连的某台计算机（服务器）中，并通过网址（URL）来识别与读取，当用户在浏览器中输入网址后，浏览器通过HTTP协议从服务器上获取网页文件，并经过分析处理后显示在计算机屏幕上。网页工作原理互联网一、网页制作基础网页工作原理输入网址（URL）HTTP请求HTTP响应客户端服务器网页文件网页HTTP协议一、网页制作基础关键技术标准统一资源定位器（URL）超文本标记语言（HTML）超文本传输协议（HTTP）一、网页制作基础统一资源定位器（URL）•URL：UniversalResourceLocator，用于完整地描述Internet上网页及其它资源所在位置的一种标识方法，称为“网址”。关键技术标准一、网页制作基础统一资源定位器（URL）•URL的基本结构：通信协议://域名或IP[:端口号]/路径/文件名?查询参数#信息片段例：=123#top关键技术标准一、网页制作基础超文本标记语言（HTML）•HTML：HypertextMarkupLanguage；•HTML是一种规范，一种标准，它通过标记符号标记网页中的各部分内容（如：文字、图片、视频、动画等），以便浏览器识别显示；•之所以称为“超文本”，是因为文本中包含了被称为“超级链接”的标记，通过点击超链接可以让浏览器获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。关键技术标准一、网页制作基础超文本传送协议（HTTP）•HTTP：HypertextTransferProtocol•是客户端与服务器端之间进行请求和应答的一种标准，它采用请求/响应模型；•客户端向服务器发送一个请求，称之为请求消息，消息的内容包括请求的方法、URL、协议版本等。服务器根据请求作出响应，称之为响应消息，消息的内容包括协议版本、成功或错误代码、服务器信息、实体信息等。关键技术标准一、网页制作基础超文本传送协议（HTTP）GET:download.abc.cnAccept:*/*Pragma:no-cacheCache-Control:no-cacheReferer::Mozilla/4.04[en](Win95;I;Nav)Range:bytes=554554-……典型的请求消息关键技术标准请求行消息报头消息正文空行一、网页制作基础超文本传送协议（HTTP）HTTP/1.0200OKDate:Mon,31Dec200104:25:57GMTServer:Apache/1.3.14(Unix)Content-type:text/htmlLast-modified:Tue,17Apr200106:46:28GMTEtag:a030f020ac7c01:1e9fContent-length:39725426Content-range:bytes554554-40279979/40279980……典型的响应消息关键技术标准状态行消息报头消息正文空行一、网页制作基础超文本传送协议（HTTP）关键技术标准•课后阅读参考静态网页是实实在在保存在服务器上的文件，每个网页都对应着一个独立的文件，都由一个固定的网址（URL）进行访问；动态网页实际上是能在服务器上运行的程序，用户每次看到的网页并不对应着服务器上存放的某个文件。动态网页会根据用户每次提交的参数，相应地生成静态网页；一、网页制作基础静态网页vs动态网页编号1的文章文章2文章1一、网页制作基础静态网页vs动态网页文章2文章3文章1静态网站服务器我要看文章1我要看文章2编号作者内容…1xxxxxx…2xxxxxx……………数据库动态网站服务器读文章编号1的文章表（Table）一、网页制作基础网站：Website，众多网页的集合提供某种网络服务（如：资讯、搜索、BBS等）网站网站?a.htmb.htmc.htme.htmd.htm...…一、网页制作基础域名（网址）网络接入环境服务器硬件平台网站服务器操作系统应用服务环境（IIS、Apache）众多的网页（一定规则、逻辑结构的集合）一、网页制作基础目标规划系统分析网站设计网站实现网站发布网站调试维护与管理建设网站的一般流程网站生命周期一、网页制作基础超文本标记语言HTMLHTML标准由万维网联盟（W3C）制定发布；HTML4.01为目前常见版本，于1999年12月发布；HTML5.0为最新版本，于2014年10月发布；一、网页制作基础HTML5的第一份正式草案于2008年1月公布，用于取代HTML4.01和XHTML1.0；HTML5的设计目的是为了在移动设备上更好地支持多媒体内容，以及人机交互，为此定义了许多新的标记符号，如video、audio。超文本标记语言HTML一、网页制作基础支持Html5的浏览器包括：Firefox火狐浏览器、IE9及其更高版本Chrome谷歌浏览器、Safari苹果系统浏览器Opera欧朋浏览器课后体验Html5游戏超文本标记语言HTML一、网页制作基础超文本标记语言HTMLHTML文件包含两部分内容：（1）表达信息的文字（2）称为“标记”的特殊字符一、网页制作基础超文本标记语言HTML这是一行有下划线的文字读入HTML文档浏览器解释显示HTML标记本身（u/u）不显示在浏览器中u/u一、网页制作基础超文本标记语言HTMLhtmlheadtitle我的第一个网页/title/headbody这是我的第一个网页！/body/html创建简单的HTML文件1.打开记事本，输入右侧的代码，保存时输入含后缀htm的完整的文件名，如hello.htm，保存退出；2.在“我的电脑”中找到hello.htm并双击。一、网页制作基础超文本标记语言HTMLhtmlheadtitle我的第一个网页/title/headbody这是我的第一个网页！/body/html文档标记文档头文档标题文档主体基本文档结构一、网页制作基础超文本标记语言HTML1.标记HTML文档由标记和被标记的内容组成，标记（Tag）用于定义信息的类型，格式为：标记名被标记的内容/标记名例如：title我的第一个网页/title——语法规则一、网页制作基础超文本标记语言HTML双标记：成对出现的，例如：title我的第一个网页/title头标记尾标记单标记：只有头标记的标记，例如：br，表示换行。1.标记两种结构的标记——语法规则一、网页制作基础超文本标记语言HTML1.标记HTML是一种嵌套语言，一个标记的外面可以再嵌套另外一个标记。例如：headtitle我的第一个网页/title/head——语法规则一、网页制作基础超文本标记语言HTML2.属性标记规定了信息是什么，但怎样控制这些信息的显示，就需要使用属性。格式为：align属性的值为left，表示文字靠左对齐。例如：h1align=left欢迎！/h1——语法规则标记名属性名=属性值被标记的内容/标记名一、网页制作基础超文本标记语言HTML2.属性一个标记可以有多个属性，例如：hrsize=3align=leftwidth=200——语法规则含义：粗细为3个像素，宽度为200像素，左对齐显示的水平线。一、网页制作基础超文本标记语言HTML——几个重要标记1.文档头标记head.../headHTML文档头描述网页的基本信息，主要被浏览器所用，不会显示在网页里。另外，搜索引擎会查找网页中的文档头信息，提取文档标题等作为关键词进行收录。嵌套在head里常见的标记有：title、link、style、meta一、网页制作基础超文本标记语言HTML——几个重要标记1.文档头标记head.../headtitle：文档标题，显示在浏览器标题栏中link：链接资源文件，如样式表style：定义CSS样式meta：网页元数据，如：浏览器控制信息一、网页制作基础超文本标记语言HTML——几个重要标记2.文档主体标记body.../body文档主体中包含了所有要在浏览器中显示的文字、表格、图片等内容元素，网页中大部分标记都嵌套在body.../body内。body标记的属性可对网页的整体显示效果进行控制。一、网页制作基础超文本标记语言HTML——几个重要标记2.文档主体标记body.../body•bgcolor：网页背景色•background：网页背景图片•text：文字颜色•link：超级链接的颜色•alink：当链接被点中时文字颜色•vlink：访问过的链接的文字颜色•leftmargin：网页的左边距，单位：像素•topmargin：网页上边距，单位：像素属性一、网页制作基础超文本标记语言HTML——几个重要标记3.字体标记font.../font用于设定文字的大小，颜色和字体格式。face：字体格式，如：宋体，黑体color：文字颜色，如：red，#FF0000size：文字大小，1~7号属性例：红色黑体5号字fontface=黑体color=redsize=5一、网页制作基础超文本标记语言HTML——几个重要标记4.标题文字标记hn（n=1、2、3……6）用于将文字设置为标题格式。标题共分六级，n值越大级别越小,显示的字号也就越小。例：h11这是第1级标题/h1h21.1这是第2级标题/h2h31.1.1这是第3级标题/h3……一、网页制作基础超文本标记语言HTML——几个重要标记4.标题文字标记hn（n=1、2、3……6）例：h1align=center居中大标题/h1属性align：left，左对齐，默认值center，居中right，右对齐一、网页制作基础超文本标记语言HTML——几个重要标记5.段落标记p.../p用于将大篇幅的文字划分为一个一个的段落，段落间自动产生一个空行。属性align：left，左对齐，默认值center，居中right，右对齐一、网页制作基础超文本标记语言HTML——几个重要标记5.段落标记p.