静态网页制作PPT课件

.,1,网站建设与维护第3章WWW和静态网页制作,沈阳理工大学现代教育技术中心,.,2,主要内容,WWW(WorldWideWeb)WWW如何工作浏览器如何读取并显示页面WWW标准由谁制定网页制作什么是HTML文件静态网页制作(学习HTML基本语法),.,3,Q3-2WWW如何工作?,Web信息存储于被称为网页(webpage)的文档中网页是存储于被称为Web服务器(webserver)的计算机上读取网页的计算机称为Web客户端(webclient)Web客户端通过称为浏览器(Browser)的程序来查看网页主要的浏览器有InternetExplorer和MozillaFirefox,.,4,Q3-2WWW如何工作?续浏览器简介,浏览器（Browser）浏览器是一个把在互联网上找到的文本文档（和其它类型的文件）翻译（编译）成网页。网页可以包含图形、音频、视频、文本等。浏览器是一个非常普通的应用软件，就象字处理程序一样（如MicrosoftWord）。,.,5,Q3-2WWW如何工作?续浏览器简介,常见的浏览器软件InternetExplorer（IE浏览器,它随着微软公司windows操作系统销售是目前用户数量最多的浏览器软件）Netscape（早期浏览器之一2008.3停止开发）Opera（在移动终端发展的较好）Firefox（Mozilla公司产品免费吸引了大量用户）GoogleChrome谷歌浏览器（2008年最新推出google）,.,6,Q3-2WWW如何工作?,.,7,Q3-2WWW如何工作?,WWW,Browser,软件,信息服务,想象一下我们是如何接受互联网的服务的？,.,8,Q3-2WWW如何工作?,超链接(HyperLink),Hyperlink,.,9,Q3-2WWW如何工作?,关键词keywords网页(webpage)*Web服务器(webserver)*Web客户端(webclient)*浏览器(Browser)*超链接(HyperLink)*,.,10,Q3-3浏览器如何读取并显示页面,浏览器如何读取页面?浏览器可通过向服务器发送HTTP请求(request)来表明自己想要获取哪一个页面(类似于到图书馆借书)请求是一个URL的标准HTTP请求例如:,.,11,Q3-3浏览器如何读取并显示页面,浏览器如何显示页面？所有的网页都含有其如何被显示的标签(tag)浏览器通过阅读这些标签来决定如何显示页面最常用的标记规则称为HTML用于段落的HTML标签类似这样：在HTML中像这样定义段落：ThisisaParagraph粗体,.,12,Q3-3浏览器如何读取并显示页面,关键词keywordsHTTP请求(request)*URL*超文本标记语言HTML*标记(tag)*,.,13,Q3-4WWW标准由谁制定,WWW标准并不是完全由厂商制定的WWW的规则制定主体是W3CW3C指的是万维网联盟（WorldWideWebConsortium）W3C将各种规范订立为WWW标准最核心的WWW标准是HTML、CSS、XML最新的HTML标准是XHTML1.0,.,14,Q3-4WWW标准由谁制定,W3C指万维网联盟（WorldWideWebConsortium）W3C创建于1994年10月W3C由TimBerners-Lee创建W3C是一个会员组织W3C的工作是对web进行标准化W3C创建并维护WWW标准W3C标准被称为W3C推荐（W3CRecommendations）,.,15,分界页面,接下来学习制作静态网页推荐一个重要网站,.,16,Q3-5什么是HTML文件,HTML(HypertextMarkupLanguage)指超文本标记语言HTML文件是包含一些标签(tag)的文本文件这些标签告诉WEB浏览器如何显示页面HTML文件使用htm或者html作为文件扩展名HTML文件可以通过简单的文本编辑器来创建。,.,17,Q3-5什么是HTML文件,HTML演示使用windows记事本编写简单的HTML文件例子解释:HTML文件中的第一个标签是。这个标签告诉浏览器这是HTML文件的开始点。文件中最后一个标签是。表示这是HTML文件的结束点。位于标签和标签之间的文本是头信息。头信息不会显示在浏览器窗口中。标签中的文本是文件的标题。标题会显示在浏览器的标题栏。标签中的文本是将被浏览器显示出来的文本。和标签中的文本将以粗体显示。,.,18,Q3-5什么是HTML文件,应该注意的细节小写标签(尽管HTML不严格限制大小写),下一代xhtml规定要严格限制使用小写标签扩展名推荐使用.html推荐使用纯文本编辑器来学习HTML(pspad)推荐使用IE和firefox两种浏览器来调试网页,这样可以获得更强的网页效果兼容性,.,19,Q3-5什么是HTML文件,关键词keywords超文本标记语言(HTML)*标签(tag)*,.,20,Q3-6静态网页制作(HTML),HTML标签（tag）HTML标签是用来标记HTML元素(element)的HTML标签被符号包围绝大部分HTML标签是成对出现的。例如和,也有单个标签例如位于起始标签和终止标签之间的文本是元素的内容HTML标签对大小写不敏感，和的作用的相同的，但是推荐使用小写标签,.,21,Q3-6静态网页制作(HTML),HTML元素（element）此文本是粗体的。这就是一个HTML元素，HTML文件就是由HTML元素组成的，就像组装汽车一样。每个HTML元素都有一个元素名（比如body、p、br）开始标签是被尖括号包围的元素名结束标签是被尖括号包围的斜杠和元素名元素内容位于开始标签和结束标签之间某些HTML元素可以没有内容某些HTML元素可以没有结束标签,.,22,Q3-6静态网页制作(HTML),基本的HTML标签在网页上，文章经常由标题和段落组成标题一级标题x:16段落换行符水平线HTML注释空格(HTML会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在HTML中，一个空行也被当作一个空格。),.,23,Q3-6静态网页制作(HTML),HTML属性属性名和属性值属性值要是用引号(单引号或者双引号),.,24,Q3-6静态网页制作(HTML),.,25,Q3-6静态网页制作(HTML),字符实体一些字符在HTML中拥有特殊的含义，比如小于号()用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入字符实体。例子:空格等等,.,26,Q3-6静态网页制作(HTML),超链接(锚和href属性)(锚标签)网易target属性name属性(给锚命名,在一个页面内部跳转)href=“url#锚名称”href=“mailto:aaa”电子邮件链接,.,27,Q3-6静态网页制作(HTML),列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记无序列表始于标签。每个列表项始于标签有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于标签。每个列表项始于标签,.,28,Q3-6静态网页制作(HTML),网页中插入图片图片是非常占用网页空间的，在实际设计中应该谨慎使用图片,.,29,Q3-6静态网页制作(HTML),颜色HTML中，颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组