《第二章 静态网页制作基础》由会员分享，可在线阅读，更多相关《第二章 静态网页制作基础（6页珍藏版）》请在金锄头文库上搜索。
1、静态网页制作基础一、静态网页概述初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的 Web 页面的核心是 HTML(一种标记语言)，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在 HTML 已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver 等。最初的 Web 是完全的静态，仅仅提供大量的信息服务，没有服务器端客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的 HTTP (Hyper text Transfer Protocol)协议向
2、 Web 服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态 HTML 文档传送给用户浏览器。其页面的内容使用的是标准 HTML 代码，再加上 GIF 格式的动态图片。二、静态网页制作概括：1、网页素材搜集与制作（图像处理与动画制作）经常需要在网页中应用一些图像与动画，一方面是由于实际内容的需要，一方面是为了增加网页吸引力。在 WWW 上通常采用 jpeg、gif、png 格式的图片和flv、flash 等格式的动画。2、网页版式设计规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方、同时也要注意访问者的观看习惯，布局的比例也很重要。3、文本编写在
3、字体上需要注意，网页文本在浏览器中默认字体都是为宋体，特殊的字体虽然好看，但如果对方没有这种字体，浏览器会将字体就变默认。三、静态网页的制作工具1、图像处理与动画制作工具：Photoshop、Fireworks、Flash 等。2、网页编辑工具：1）纯文本编辑工具，如 Notepad 等；2）转换工具，如 word 等；3）专用工具，如 EditPlus、Dreamweaver 等。3、网页上传工具：1)FTP 工具，如 WS-FTP，CuteFTP 等；2)专用网页编辑软件的文件传输功能。4、网页优化工具：网页减肥茶、网页优化大师等。HTML 简介HTML 是 Hypertext Marku
4、p Language(超文本标志语言)的缩写，它是构成Web 页面(Page)的主要工具，是用来表示网上信息的符号标志语言。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的母语。WWW(World Wide Web)所使用的出版语言就是 HTML 语言。通过 HTML，将所需要表达的信息按某种规则写成 HTML 文件，通过专用的浏览器来识别，并将这些 HTML翻译成可以识别的信息，就是现在所见到的网页。1、HTML 的功能1)出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。2)通过超链接检索在线的信息。3)为获取
5、远程服务而设计表单，可用于检索信息、定购产品等。4)在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。学习 HTML 的意义便于优化专用工具生成的代码；为编写 ASP 等网络程序奠定基础。2、HTML 的编写工具可以通过编写修改代码的工具很多，如：记事本；写字板等多种工具，但大多数静态网页都是由 Dreamweaver(常用,有设计视图)、EditPlus(好用,有颜色区分)等专业编辑网页软件进行编辑的，软件中有自动生成代码与代码错误检测等功能，在编写上能带来很多方便。3、html 文件的基本格式网页的标题网页的内容其中省略号部份是网页的内容,其实每个标记都是一一对应的。每个网页
6、文件都是以开始和以结束。与之间的内容是网页的标题。会显示在浏览器的标题栏上。与之间放的是网页内容。标志（tag）的结构特点1、用。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加入要显示的文本即可。当然在 seo 优化中，标题是很重要的，他代表的是网页的门面，好的关键词句能被搜索引擎更大范围的搜索到。5、颜色表示方法HTML 用#RRGGBB 字符串代表色彩，成为 RGB 值。RGB 值中的 RR、GG 和 BB 分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围在 00
7、和FF（即十进制的 0 和 255）之间，即一个字节存储一种原色。每种原色都有 256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。rgb值可以表示出（256*256*256）种颜色。网页中存在着网页安全色，不同浏览器对非安全色的颜色显示也有不同，在一些情况下会影响网页的美观。#后的字符串两两相同的都为安全色、例：#ff0044；#112233；#aa66cc二、HTML 基础1、列表标签；无序列表 ul有序列表无编号列表因为不同浏览器在列表类型上识别不同，所以网页中的列表符号都是由背景图片做成的。在做网页时我们都会把 ul、ol 列表类型通过 css 改成无，给盒子内边距
8、，让背景图片不重复现实，位置是通过背景图片的水平和垂直位置进行调整的。2、标题格式标志HTML 语言提供了一系列对文本中的标题进行操作的标志对：，即一共有 6 对标题的标志对。是最大的标题，而则是最小的标题，也即是标志中 h 后面的数字越大标题文本就越小。如果 HTML 文档中需要输出标题文本，就可以使用这 6 对标题标志对中的任何一对。文本标志用来使文本以黑体字的形式输出。用来使文本以斜体字的形式输出。用来使文本以下加一划线的形式输出。下标上标删除线字体变大层字体变小将指定范围内的内容居中显示用来输出打字机风格字体的文本。用来输出引用方式的字体，通常是斜体。用来输出需要强调的文本(通常是斜体
9、加黑体)。则用来输出加重文本(通常也是斜体加黑体)。设定文本的字体大小、颜色、字体名等，通过属性 size、color、face的控制来实现。size 属性用来改变字体的大小，它可以取值：-N、N 和+N；而 color 属性则用来改变文本的颜色；face 属性值为系统中现有的字体，如“楷体_GB2312”。为保证在客户端浏览器中显示正确字体的网页，不要使用非系统自带的特殊字体，如“华文彩云繁”等。特殊字符 copy； ®； 153; plusmn; 空格 nbsp; yen;3、网页图像格式JPEG、GIF、PNG 格式。图像标志图像在网页制作中担任着非常重要的角色。HTML 语言也专
10、门提供了标志来处理图像的输出。标志并非真正地将图像融入到 HTML 文档中，而是标明图像文件的存放位置。src 属性是标志中不可缺少的一部分,必须赋值，其值是图形文件的存放位置和文件名。align 是图像的对齐方式。border 属性是图像的边框，可以取大于或者等于的整数，默认单位是像素Width 和 height 属性是图像的宽和高，默认单位也是像素。alt 属性是当鼠标移动到图像上时显示的文本。图像实例4、水平线标志标志是在 HTML 文档中加入一条水平线，它可以直接使用，具有size、color、width 和 noshade 属性：size 是设置水平线的厚度。width 是设定水平线
11、的宽度，默认单位是像素。noshade 属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性，水平线将有阴影)。5、表格标志表格标志对于制作网页是很重要的，很多网页都可以通过使用多重表格建立，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。虽然简单，但建立表格所生成的代码太多对网页影响太大。标志对用来创建一个表格，有如下属性：属性 用途bgcolor 设置表格的背景色border 设置边框的宽度，若不设置此属性，则边框宽度默认为 0bordercolor 设置边框的颜色bordercolorlight设置边框明亮部分的颜色
12、(当 border 的值大于等于 1 时才有用)bordercolordark 设置边框昏暗部分的颜色(当 border 的值大于等于 1 时才有用)cellspacing 设置表格的单元格之间的空间大小cellpadding 设置表格的单元格边框与其内部内容之间的空间大小width 设置表格的宽度，单位用绝对像素值或总宽度的百分比align 表格在网页中的位置表格的定义顺序是先定义行，再定义该行中的单元格。标志对用来创建表格中的每一行。此标志对只能放在标志对之间使用，而在此标志对之间加入文本将是无用的，因为在之间只能紧跟标志对才是有效的语法。标志对用来创建单元格，此标志对只有放在标志对之间才
13、是有效的，输入的文本也只有放在标志对中才有效(即才能够显示出来)。具有 width、colspan、rowspan 和 nowrap 属性：width 是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan 设置一个表格单元格跨占的列数(缺省值为 1)。rowspan 设置一个表格单元格跨占的行数(缺省值为 1)。6、超级链接a、网页内部链接 点击链接热点，网页跳转到资源片段：定义链接热点到资源片段定义资源片段资源片段b、相对路径、站内绝对路径、绝对路径相对路径：相对于当前文档 ./的用法站内绝对路径：相对于网站根 /的用法绝对路径：资源在网上完整的存放地址，网址。c、网页间链接链接文字例：中文主页d、网站间链接网站间的链接，必须使用目标资源的绝对路径，从协议开始。如新浪网e、链接到电子邮件地址语法格式：给我写信，打开客户浏览器设定的默认电子邮件程序，收件人为 mailto 后的地址。f、将图像作为超级链接的锚点语法：7、内嵌网页说明：src 属性为窗口载入的初始网页；width 是宽，100%代表整个网页宽度；height 网页的高；scrolling 是内嵌网滚动条，aoto 自动，是根据内嵌的内容高度进行显示，no 不显示，默认为显示；name 属性指明窗口的名称，它和标签的 target（目标）属性相对应。
