静态网页制作教程(入门级)

第1章网页基础一.（worldwideweb，简称互联网），一直被人们称作internet的“杀手应用程序”。它可以显示普通文字和图像并访问其他页面，而信息子页则使得它成为internet上发展最快的部分。你可能已经掌握了在web上如何探索信息世界，但也有可能不太清楚如何向全世界发布你自己的信息——有关你自己的信息，如你个人的兴趣、你的工作等。要创建自己的页面，最基础技术就是html（hypertextmakeuplanguage，超文本标记语言），现在绝大多数web文档都是由html编写的。是一个全球性的、交互式的、动态的、多平台的、分布式的、图像超文本的信息系统。要能在web上四处遨游，首先必须安装一个web浏览器。有了自己的web浏览器后，在web上导航最简单的方法就是结合浏览器的各种性能在各页上移动。你可以通过选择指定的高亮度显示的文字、词或图像从一个页面移至另一页面，也可以利用该页的地址或url（uniformresourcelocator）统一资源定位器来直接移至该指定页。不受地域的限制，只要互联网保持连通就可以访问者和网站有交互的过程，提交信息、反馈信息网站上的信息可以随时随地进行更新不受操作系统平台的限制，如windows、linnux等系统平台一台服务器，多台客户机构成分布式可以在上发布多媒体信息，如图像和声音、视频等Web浏览器的选用现在可以得到许多web浏览器，他们遍及了几乎所有的计算机系统。Web浏览器的功能是充当与web的接口，它们在internet上对特定的web页面和文档发出请求，当它们接收到文件后，就将格式化后的版本返回html文件并显示到屏幕之上。安装了web浏览器的计算机还可以处理ftp等方法的信息请求。以下是常用的浏览器1.Mosaic：最早开始web研究时使用的浏览器，不过现在一般没人用了。2.Lynx：基于文本的浏览器，是web访问中仅限于文本访问的最佳选择。但无法通过该浏览器看到web页面的图像。3.Netscapenavigator：曾一度是最流行的浏览器，它通过开发html扩展来提高web页面的图形品质。4.Internetexplor：简称ie，已经拥有同netscapenavigator基本相同的特性，更由于其方便快捷、免费等特性而成了当今最流行的浏览器寻找一个web编写工具Html编辑器或编写工具是指不用进入html核心而为web页面创建html文档的程序。这些程序所使用的格式与允许人们在一页上输入文件或图形的字处理器或页面设计程序相似。许多字处理器，如microsoftword都具有html的编辑功能。一般的，人们都使用windows自带的文本编辑器——记事本程序来编写。还有一些软件，如microsoftfrontpage和dreamweaver都内置一web编写工具，这使得初学者在创建web页面时更简单。但是要学习更好的网页设计制作（如动态网页等），必须要掌握html的基本原理，所以这种情况下不宜使用frontpage和dreamweaver等可视化的网页开发工具。了解html的发展信息要掌握html，就必须了解它的发展。大家可以通过下面俩个链接了解html文档草案的现状、未来html的发展已经url的工作原理的升级文档等。1.:提供一个链接指向描述已被确认为internet标准及现在被所有浏览器支持的html特性的文档。2.:讲解url的各种类型和如何在web文档中使用它们。创建自己web页面的要点有了上诉基本知识以后，就可以开始学习创建自己的web页面了。不过，在创建自己的页面过程中，有一些非常有用的技巧，必须好好的记住。1.首先要搞清楚自己要说的东西。这看起来是很自然的，但是许多页面的不成功就是由于它们缺少重点，因为要展示给读者的观点一定要清楚明了。如果别人搞不懂你想说什么，就不会有兴趣去读你的主页和其他页面。2.确定好目标之后，就应该考虑页面应包括的内容。此时就应该按内容分割材料。材料可以分布在几页上，也可以组合在同一页面中，这取决于你的写作方式。3.除非页面非常短，否则编写一个简单介绍web站点的目标、可得到信息及途径的简单页面是很有帮助的。这一页面应包括内容介绍及目录，它可以使读者能对继续阅读哪一页做出迅速的判断。此外，这一页上还可包括指向有关所述论题的、更多信息的页面链接。4.如果可能，应该将每一页都设计的简短一些，每一页的文本及图形不应该超过一到两个屏幕。如果一页太长，则读者不得不来回滚动屏幕以阅读整份页面，这样就会打断文档的流畅性。如果页面必须很长，则应在文档中包括目录和指向特殊位置的链接，以使读者便于找到所需信息。5.不要在页面上设置太多的图形。图形文件很大，意味着浏览器装载一页包括图形的页面会非常费时。尽管你的网络连接可能非常的迅速，但是别人访问你网页可能相对很慢。6.在决定将自己的页面推向世界之前，应仔细检查一下是否有错误和不佳之处。二.网站和网页在我们开始学习网页制作之前呢，先让我们了解一下关于网页的一些知识。1.网页和网站2.动态网站和静态网站3.web1.0和web2.0三.Html基础及简单页面设计HTML的编写是指创制和定义html文档的过程。重要内容:1.Html标记2.Html的基本结构3.创建一个简单页面4.浏览自己的页面文档结构和格式的定义是由html元素来完成的。而html元素是由单个或一对标记定义的包含范围。一对标记是指一个起始标记和一个结束标记。一个起始标记是由一个元素名和后面的一个在小于号（）和大于号（）之间的属性/值对系列组成。结束标记在元素前有一个斜杠（/），此外，它并不包括属性/值列表。1.Html标记在html中，标记的语法如下：标记名称要控制的文字/标记名称当用一组html标记将一段文字夹在中间时，这段文字与夹文字的标记被称为一个组件。如：titlehehe/title这就是一个组件，其中的title即为元素名，title就是一个标记，hehe为该元素的内容，有时在元素名后面还有属性。因此，在html文件中某个组件的完整定义语法如下:标记名称属性1=“值1”属性2=“值2”属性3=“值3”……组件数据/标记名称由以上可知，标记元素有四种格式：空元素（没有内容的元素）带有属性的空元素带有内容的元素带有内容和属性的元素注意：在html标记中，英文大小写字母的意义是相同的，也就是说html和HTML标记是一样的。由于标记的存在和使用，html拥有层次极为分明的基本结构。这对页面的制作有很大的帮助。2.Html的基本结构由于在HTML语法中，每个由html标记与文字所形成的组件还可以包括另一组组件，因此，整个html文件就像一个大组件，还包含了许多小组件。其中，所有的html文件最外层的组件，是由html标记所建立的，在html标记所建构的组件中，还包含了两个主要的子组件，这两个子组件是由head标记与body标记建立的。head标记：建立的组件的内容为文件标题。其中并不放网页的任何内容，而是放置有关有关html文件的信息，例如：文件的标题、编辑方式……等等。这些信息大部分是提供索引、辨认和其他应用之使用。body标记：建立的组件是html文件的主体，也就是网页的主要内容。依照各种html的控制，这些内容将呈现在浏览器的窗口中。因此，所有文件的最基本结构如下：htmlhead……/headbody……/body/htmlHtmlheadbody从上图中，我们可以容易的了解到整个html文件中所有的数据均被建立为一个一个组件，并组织为一个层次化的结构。当利用html标记来定义组件时，定义标记不可交错，否则将造成错误。下面的语法中，head标记与body标记彼此交错，这样是不对的，如果标记交错时，我们无法区别两个组件的范围htmlhead……body/head……/body/html错误使用记事本程序3.创建一个简单页面创建一简单页面的基本步骤1.打开一个html编辑器2.编辑你的html文档3.保存html文档4.浏览你做的页面文件扩展名为.html格式两种方法：1.打开ie浏览可以通过ie的菜单选项打开.html文件htmlheadtitle我终于会自己设计页面了/title/headbody我终于会自己设计页面了哈哈/body/html四.Web页面的颜色通过body标记内属性的设置，来达到控制web页面的颜色的效果，主要内容：1.为web页面设置背景颜色2.为web页面设置文本颜色3.在web页面设置中为超文本链接设置颜色4.利用图像作为web页面使得背景1.为web页面设置背景颜色Html允许编写者为其web页面选择各种各样的颜色，包括背景、文本等等，这通过这种body标记的常用属性Bgcolor属性（用来控制页面的背景颜色）语法：bgcolor=“颜色”其中，颜色可以通过两种方式来表示，可以直接指定颜色的英文名称，常用的基本颜色名称如表：英文名称颜色英文颜色Black黑Purple紫While白Olive橄榄绿Gray灰Navy深蓝Sliver银灰Aqua水蓝Red红Lime青绿Green绿Maroon茶色Blue蓝Teal墨绿Yellow黄Fuchsia紫红另外，也可以利用十六进制数值方式来指定颜色，颜色的表示方法如下：#RRGGBB其中，RR代表红色、GG代表绿色、BB代表蓝色，我们以00到FF的值表示三种颜色成分的多少，以指定出三种原色以多少的成分组成新颜色。语法如下：bodybgcolor=“#00ff00”另外，ie支持3位数的颜色表示方法。与六位数的表示方法类似，不过就是位数少而已#RGB分别表示红绿蓝的成分。例如：绿色可以用“#0F0”表示（实例）2.为web页面设置文本颜色Text属性此属性用于控制网页中文字的颜色Text=“颜色值”有关颜色值的设定，与前面bgcolor属性的说明一样。（实例）3.在web页面设置中为超文本链接设置颜色Link属性、alink属性、vlink属性Link属性：控制的是网页中未被选择过的超链接的颜色vlink属性：控制的是网页中已经被选择过的超链接的颜色Alink属性：设置超链接在被选择时的颜色它们的语法分别为：Link=颜色值Vlink=颜色值Alink=颜色值有关颜色值的设定，与bgcolor的颜色值的设定完全相同4.利用图像作为web页面使得背景Background属性指定作为html文件背景的图片，可以使用的图文件格式为gif和jpg，其语法如下：Background=“文件名称与路径”假如引用c:/html/sub/目录下的bg.gif图文件作为html文件背景时，此属性的设置语法如下：Background=“c:/html/sub/bg.gif”五.给html文档加注释和一般的程序语言一样，html编辑者也可以对自己的语句进行注释。一般来说，注释是用来标示html语句的作用的，对程序的读写都有重要的作用。注释的格式如下:!—注释的内容--或!注释内容一般来说，注释有两个用途;1.在创建文档时，为编辑文档设计提供途径，此类注释将会对维护和修改极有帮助2.一些应用程序要利用注释在html中包括额外应用程序的特定信息注释的一般步骤如下：1.打开一个html文档2.确定要添加注释的位置3.将插入点移至该位置，插入注释语句4.保存文档为.html文档，在浏览器中查看显示效果（实例）第1章特殊字符、逻辑效果一.特殊字符二.字符的物理效果三.字符的逻辑效果一.特殊字符在网页中会看到许多特殊的符号标记，其