《第二章 静态网页制作基础.doc》由会员分享，可在线阅读，更多相关《第二章 静态网页制作基础.doc（6页珍藏版）》请在三一文库上搜索。
1、静态网页制作基础一、静态网页概述初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的Web页面的核心是HTML(一种标记语言)，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在HTML已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver等。最初的Web是完全的静态，仅仅提供大量的信息服务，没有服务器端客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的HTTP (Hyper text Transfer Protocol)协议向Web服务器请求提
2、供网页内容时，服务器仅仅是将原已设计好的静态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 Markup Language(超文本标志语言)的缩写，它是构成Web
4、页面(Page)的主要工具，是用来表示网上信息的符号标志语言。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的母语。WWW(World Wide Web)所使用的出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，就是现在所见到的网页。1、HTML的功能 1)出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。 2)通过超链接检索在线的信息。 3)为获取远程服务而设计表单，可用于检索信息、定购产品等。 4)在文档中直接包含
5、表格数据、视频剪辑、声音剪辑以及其他的一些应用。学习HTML的意义便于优化专用工具生成的代码；为编写ASP等网络程序奠定基础。2、HTML的编写工具可以通过编写修改代码的工具很多，如：记事本；写字板等多种工具，但大多数静态网页都是由Dreamweaver(常用,有设计视图)、EditPlus(好用,有颜色区分)等专业编辑网页软件进行编辑的，软件中有自动生成代码与代码错误检测等功能，在编写上能带来很多方便。3、html文件的基本格式 网页的标题 网页的内容 其中省略号部份是网页的内容,其实每个标记都是一一对应的。每个网页文件都是以开始和以结束。与之间的内容是网页的标题。会显示在浏览器的标题栏上。
6、与之间放的是网页内容。标志（tag）的结构特点1、用包围。2、多数是以成对标签书写，这种成对标签在网页中都可称为盒子。3、结束标记用/。4、标签是嵌入式的。5、标签可有多种属性和属性值。6、标签用西文半角字符，对大小写不敏感。4、文件标题标志文件标题标志为。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加入要显示的文本即可。当然在seo优化中，标题是很重要的，他代表的是网页的门面，好的关键词句能被搜索引擎更大范围的搜索到。5、颜色表示方法HTML用#RRGGBB字符串代表色彩，成为R
7、GB值。RGB值中的RR、GG和BB分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围在00和FF（即十进制的0和255）之间，即一个字节存储一种原色。每种原色都有256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。rgb值可以表示出（256*256*256）种颜色。网页中存在着网页安全色，不同浏览器对非安全色的颜色显示也有不同，在一些情况下会影响网页的美观。#后的字符串两两相同的都为安全色、例：#ff0044；#112233；#aa66cc二、HTML基础1、列表标签；无序列表ul 有序列表 无编号列表 因为不同浏览器在列表类型上识别不同，所以网页中的列表符号都
8、是由背景图片做成的。在做网页时我们都会把ul、ol列表类型通过css改成无，给盒子内边距，让背景图片不重复现实，位置是通过背景图片的水平和垂直位置进行调整的。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格式。图像标志图像在网页制
10、作中担任着非常重要的角色。HTML语言也专门提供了标志来处理图像的输出。标志并非真正地将图像融入到HTML文档中，而是标明图像文件的存放位置。src属性是标志中不可缺少的一部分,必须赋值，其值是图形文件的存放位置和文件名。align是图像的对齐方式。border属性是图像的边框，可以取大于或者等于的整数，默认单位是像素 Width和height属性是图像的宽和高，默认单位也是像素。alt属性是当鼠标移动到图像上时显示的文本。图像实例4、水平线标志 标志是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性：size是设置水平线的厚度。widt
11、h是设定水平线的宽度，默认单位是像素。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（目标）属性相对应。