第三章 静态网页制作_第1页
第三章 静态网页制作_第2页
第三章 静态网页制作_第3页
第三章 静态网页制作_第4页
第三章 静态网页制作_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、第二章 静态网页制作基础 预备知识：静态网页概述初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的Web页面的核心是HTML(一种标记语言)，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在HTML已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver等。最初的Web是完全的静态，仅仅提供大量的信息服务，没有服务器端客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的HTTP (Hyper text Transfer Protocol)协议向W

2、eb服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的是标准HTML代码，再加上GIF格式的动态图片。二、工作内容静态网页制作概括起来，有如下几个部分：1、网页素材搜集与制作（图像处理与动画制作）经常需要在网页中应用一些图像与动画，一方面是由于实际内容的需要，一方面是为了增加网页吸引力。在WWW上通常采用jpeg、GIF格式的图片和gif89a、flash等格式的动画。2、网页版式设计规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方。3、文本编写自己的网页中需要大量的文字材料，这就要在网页编辑器中用

3、HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。4、处理网页之间的关联这主要是建立合理、高效的网页导航系统。 5、网页发布主要是将建设好的网页上传到服务器中供用户浏览。三、静态网页的制作工具1、图像处理与动画制作工具：Photoshop、Flash等。2、网页编辑工具：1）纯文本编辑工具，如Notepad等；2）转换工具，如word等；3）专用工具，如FrontPage、Dreamweaver等。3、网页上传工具：1)FTP工具，如WS-FTP，CuteFTP等；2)专用网页编辑软件的文件传输功能。4、网页优化工具：网页减肥茶、网页优化大师等。四、网页制作工

4、作步骤1、步骤：1）制作网页-> 2）浏览器预览-（满意）-> 4）发布个 L-(不满意)-| 2、工作台： 网页编辑器<=>网页浏览器第二章 静态网页制作基础 第一节 HTML基本知识第二节 HTML重要标签第三节 URL、路径、图像及超级链接一、HTML简介HTML是Hypertext Markup Language(超文本标志语言)的缩写，它是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标志语言。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的"母语"。WWW(

5、World Wide Web)所使用的出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML"翻译"成可以识别的信息，就是现在所见到的网页。HTML的功能1)出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。2)通过超链接检索在线的信息。3)为获取远程服务而设计表单，可用于检索信息、定购产品等。4)在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。学习HTML的意义便于优化专用工具生成的代码；为编写ASP等网络程序奠定基础。HTML的编写工具用HTML编写的文件(文档)的扩展

6、名是HTML或HTM。它们是供浏览器解释浏览文件的格式。可以使用记事本、写字板等编辑工具来编写HTML文件。HTML语言使用标志对(标签)的方法来编写文件，既简单又方便。它通常使用<标志名></标志名>来表示标志的开始和结束(例如<HTML></HTML>标志对)，因此在HTML文档中这样的标志对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个精彩的网页就出来了，HTML是否要学呢？答案是肯定的，因为工具就是工具，它们生成的代码是机械的，不够简洁，使网页打开的速度减慢。还有很多新的功能，工具是生成不了的。必需对代码进行编辑

7、。HTML文件的本质HTML文件的实质是以.htm或.html为扩展名的纯文本文件。html文件的格式查看网页源文件，可见html文件的格式如下：<html><head><title>网页的标题</title></head><body></body></html>其中省略号部份是网页的内容,其实每个标记都是一一对应的。每个网页文件都是以<html>开始和以</html>结束。<title>与</title>之间的内容是网页的标题。会显示在浏览器的标题栏

8、上。<body>与</body>之间放的是网页内容。标志（tag）的结构特点 1、用<>包围。2、多数成对出现。3、结束标记用/。4、标签是嵌入式的。5、标签可有多种属性和属性值。 6、标签用西文半角字符，对大小写不敏感。HTML文件的组成头部和主体标志和普通文本 文件标题标志文件标题标志为<title></title>。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的"主题"。要将网页的主题显示到浏览器的顶部其实很简单，只要在<title></titl

9、e>标志对之间加入要显示的文本即可。颜色表示方法HTML用#RRGGBB字符串代表色彩，成为RGB值。RGB值中的RR、GG和BB分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围在00和FF（即十进制的0和255）之间，即一个字节存储一种原色。每种原色都有256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。rgb值可以表示出（256*256*256）种颜色。常用颜色举例黑色白色绿色黄色红色蓝色#000000#FFFFFF#00FF00#FFFF00#FF0000#0000FF二、HTML基础页面格式标志在网页设置中，会用到HTML页面设置、列表设置等格式标

10、志。段落标志<p></p>预处理文本<pre></pre>换行标志<br>列表标志1、定义列表<dl></dl>用来创建一个定义列表，<dt></dt>用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。源代码效果 <HTML><head><title>一个普通列

11、表</title></head><body><dl><dt>中国城市</dt><dd>北京</dd><dd>上海</dd><dd>广州</dd><dt>美国城市</dt><dd>华盛顿</dd><dd>芝加哥</dd><dd>纽约</dd></dl></body></HTML> 中国城市 北京 上海 广州 美国城市 华盛顿

12、 芝加哥 纽约 2、有序列表和无序列表<ol></ol>标志对用来创建一个有序列表；<ul></ul>标志对用来创建一个无序列表；<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用，此标志对用来创建一个列表项。源代码效果 <HTML><head><title></title></head><body><p>中国城市</p><ol> <

13、;li>北京</li><li>上海</li><li>广州</li></ol><p>美国城市</p><ul> <li>华盛顿</li><li>芝加哥</li><li>纽约</li></ul></body></HTML>中国城市1. 北京 2. 上海 3. 广州 美国城市· 华盛顿 · 芝加哥 · 纽约 标题格式标志HTML语言提供了一系列对文本中的

14、标题进行操作的标志对：<h1></h1><h6></h6>，即一共有6对标题的标志对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，也即是标志中h后面的数字越大标题文本就越小。如果HTML文档中需要输出标题文本，就可以使用这6对标题标志对中的任何一对。文本标志<b></b>用来使文本以黑体字的形式输出。<i></i>用来使文本以斜体字的形式输出。<u></u>用来使文本以下加一划线的形式输出。<sub

15、></sub>下标<sup></sup>上标<tt></tt>用来输出打字机风格字体的文本。<cite></cite>用来输出引用方式的字体，通常是斜体。<em></em>用来输出需要强调的文本(通常是斜体加黑体)。<strong></strong>则用来输出加重文本(通常也是斜体加黑体)。<font></font>设定文本的字体大小、颜色、字体名等，通过属性size、color、face的控制来实现。size属性用来改变字体的大小，

16、它可以取值：-N、N和+N；而color属性则用来改变文本的颜色；face属性值为系统中现有的字体，如“楷体_GB2312”。为保证在客户端浏览器中显示正确字体的网页，不要使用非系统自带的特殊字体，如“华文彩云繁”等。特殊字符©copy；®&reg；153;±plusmn; 空格nbsp;¥yen;网页图像格式JPEG、GIF、PNG格式。1、可交换图像文件格式 (GIF)由于几乎所有的 Web 浏览器都支持 GIF 格式（文件扩展名为 .gif），因而该格式是万维网上最常用的两个图像文件格式之一。由于此格式最多仅可以显示 256 种颜

17、色，因而最适于黑白线条图形、彩色剪辑图片和具有大块实心颜色的图片。GIF89a 格式也同时支持透明和动画。GIF 文件用于：包含透明区域的图像。 有限的彩色，例如 256 色或更少。 离散区域中的彩色。 黑白图像。 小尺寸图像，例如站点上的按钮。 清晰度和边缘清晰度很重要的图形，例如线条图形或卡通。 包含文本的图像。 动画。2、联合摄影专家组 (JPEG)JPEG 格式（文件扩展名为 .jpg 或 .jpeg）是 Web 上的另一个最常用的图像文件格式。它不局限于 256 色，因此您可以使用它来显示高质量的照片或包含上百万种颜色的图片。由于它被设计为图像存储格式，因而可以有效地将高质量的大照片

18、压缩为非常紧密的文件，这在您用电子邮件发送大图像时很有用。然而，您将图像文件的大小压缩的越多（或修改并重新保存图像），图像信息的丢失也越多并且质量也会下降。此外，该格式不支持透明和动画。JPEG 文件用于：照片。 自然视觉效果图像。 大数量的颜色，例如上百万。 具有大量细节的图像，例如房地产站点上房屋的照片。 大尺寸的图像。3、可移植网络图形 (PNG)PNG 格式（文件扩展名为 .png）可以显示上百万种颜色。然而，由于它是一种新的格式，当前只有很少的浏览器可以支持（尽管它正快速获得支持）。以这种格式保存的图像，即便将文件压缩，其质量也不会降低。它支持透明，但不支持动画（因为它不能包含多个图

19、像）。图像标志图像在网页制作中担任着非常重要的角色。HTML语言也专门提供了<img>标志来处理图像的输出。<img>标志并非真正地将图像融入到HTML文档中，而是标明图像文件的存放位置。src属性是<img>标志中不可缺少的一部分,必须赋值，其值是图形文件的存放位置和文件名。align是图像的对齐方式。border属性是图像的边框，可以取大于或者等于的整数，默认单位是像素。width和height属性是图像的宽和高，默认单位也是像素。alt属性是当鼠标移动到图像上时显示的文本。图像实例<img src="cmu_cname.gif"

20、; width="101" height="22" alt="中国医科大学" border="1">水平线标志<hr>标志是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性：size是设置水平线的厚度。width是设定水平线的宽度，默认单位是像素。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性，水平线将有阴影)。表格标志表格标志对于制作网页是很重要的，现在很多网页都是使用多重表格，主要是因

21、为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。可见表格在网页排版中的作用。<table></table>标志对用来创建一个表格，有如下属性：属性用途bgcolor设置表格的背景色border设置边框的宽度，若不设置此属性，则边框宽度默认为0bordercolor设置边框的颜色bordercolorlight设置边框明亮部分的颜色(当border的值大于等于1时才有用)bordercolordark设置边框昏暗部分的颜色(当border的值大于等于1时才有用)cellspacing设置表格的单元格之间的空间大小cellpadding设置表格

22、的单元格边框与其内部内容之间的空间大小width设置表格的宽度，单位用绝对像素值或总宽度的百分比align表格在网页中的位置表格的定义顺序是先定义行，再定义该行中的单元格。<tr></tr>标志对用来创建表格中的每一行。此标志对只能放在<table></table>标志对之间使用，而在此标志对之间加入文本将是无用的，因为在<tr></tr>之间只能紧跟<td></td>标志对才是有效的语法。<td></td>标志对用来创建单元格，此标志对只有放在<tr></

23、tr>标志对之间才是有效的，输入的文本也只有放在<td></td>标志对中才有效(即才能够显示出来)。<td>具有width、colspan、rowspan和nowrap属性：width是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan设置一个表格单元格跨占的列数(缺省值为1)。rowspan设置一个表格单元格跨占的行数(缺省值为1)。表格实例：<table border="1"><tr> <td rowspan="2" bgcolor="#0033FF&qu

24、ot;><font color="#FFFFFF">1单元格跨越多行</font></td><td bgcolor="#999999"><font color="#FFFFFF">2</font></td><td bgcolor="#0066FF"><font color="#FFFFFF">3</font></td></tr><tr>

25、 <td bgcolor="#990000"><font color="#FFFFFF">4</font></td><td bgcolor="#009900"><font color="#FFFFFF">5</font></td></tr><tr> <td bgcolor="#006600"><font color="#FFFFFF">

26、;6</font></td><td colspan="2" bgcolor="#996600"><font color="#FFFFFF">7单元格跨越多列</font></td></tr></table>单元格跨越多行单元格跨越多列超级链接重点1、网页内部链接 点击链接热点，网页跳转到资源片段：定义链接热点<a href="#资源片段名">到资源片段</a> 定义资源片段<a name=&

27、quot;资源片段名"></a>资源片段2、相对路径、站内绝对路径、绝对路径相对路径：相对于当前文档 ./的用法站内绝对路径：相对于网站根 /的用法绝对路径：资源在网上完整的存放地址，网址。3、网页间链接<a href="文档位置+文件名">链接文字</a>例：<a href="/chn/index.htm">中文主页</a> 4、网站间链接网站间的链接，必须使用目标资源的绝对路径，从协议开始。如<a href="">新浪网</a>5、

28、链接到电子邮件地址语法格式：<a href="mailto:djtian">给我写信</a>，打开客户浏览器设定的默认电子邮件程序，收件人为mailto后的地址。将图像作为超级链接的锚点语法：<a href="cat.jpg"><img src="/images/cat.gif"></a> 活动字幕标记marquee参考资料活动字幕，也称为滚动看板、滚动字幕。活动字幕的使用使得整个网页更有动感，显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。用Javascript编程可以实现活动字幕效果；用Dreamweaver的图层

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论