详细讲解HTML网页设计方案中关于字体的设计方案_第1页
详细讲解HTML网页设计方案中关于字体的设计方案_第2页
详细讲解HTML网页设计方案中关于字体的设计方案_第3页
详细讲解HTML网页设计方案中关于字体的设计方案_第4页
全文预览已结束

下载本文档

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

文档简介

1、字体 (Font) 的设置是网页制作新手遇到的第一个难点。如何控制字体大小，如何取消超链接字体的下划线是网友来信问得最多的。好，我们来彻底研究一下字体的各个方面：字符集的设定。在查看 html 文件原代码时， 我们经常可以在文件头<head>和 </head>之间看到这么一句代码：<meta http-equiv="Content-Type" content="text/html; charset=gb2312">这段代码的作用是什么呢？是否可以删除呢？其 实这是 meta 标签的设定语句，是给浏览器看的。它的作用就是

2、告诉浏览器：这个 HTML文件是采用gb2312 字符集制作的。当浏览器读到这一代码，便以gb2312 字符集来解释和翻译网页原代码，然后我们就可以看到正确的网页。所以这个meta 语句是非常重要的，尽量不要删除。gb2312 就 是 我 们 最 熟 悉 的 GB 简 体 码 ， 英 文 是 iso-8859-1 字 符 集 。 其 它 还 有 BIG5,UTF-8,Shift-JIS,EUC,KOI8-2 等字符集，分别用于不同的字体显示。字体的使用。在网页里，字体的定义语句是：<font face="Arial">显示文字 </font>其中 A

3、rial 就是一种字体的名称。默认的浏览器定义的标准字体是中文宋体和英文times new Roma 字体。也就是说，如果你没有设置任何字体， 网页将以这两种标准字体显示。 同时， 着两种字体也可以在任何操作系统和浏览器里正确显示。windows 另外自带了40 多种英文字体和5 种中文字体。这些字体，你也可以在网页里自由使用和设置。凡是使用 windows 操作系统的浏览器都可以正确显示这些字体，但在其它操作系统里，如 unix 则不能完全正确显示。如果你需要用一种特殊的字体来体现你的风格， 那么如何让大家可以真正看到你的设计页面呢？解决的办法是：用图片。将需要用这种字体的地方用图片代替，以

4、保证所有人看到的页面是同一效果。字体的样式 (style)。字体的样式有四种：正常体 (regular), 斜体 (Italic), 粗体 (Bold), 粗斜体 (Bold Italic) 。设置方法很简单，阿捷就不多罗嗦了。字体的效果。这里指通过html 语言设定可以直接显示的效果，在html 里的语句设定为：<span style="text-decoration: overline"> 显示文字 </span>其中，overline是指上划线效果。其它常用的效果还有：underline( 下划线)， uppercase(大写 )等等。字体大小

5、的控制。字体大小的控制是本节的重点。一般字体默认的大小是 12pt(镑 ).用 <font size="+1"> 语句可以将文字增大 2pt。这种方法我们都已经掌握了。而现在网络上最流行的小中文字体大小为 9pt，是如何设定的呢？有三种方法：1.用 "<span style="font-size:9pt"> 显示文字 </span>" 语句来设定。显然这种方法非常麻烦，你必须为每段文字都设定大小。2.用 CSS 层叠样式表。 CSS 是 DHTML的一个组成部分，它可以定义整个页面的字体显示风格和大

6、小。是较为简便的方法。比如，这里需要设定整个页面文字大小为这段代码加入 html 代码的 <head>和</head>之间：9pt,只要将下面<style type="text/css"><-body FONT-SIZE: 9ptthFONT-SIZE: 9pttdFONT-SIZE: 9pt-></style>其中 FONT-SIZE:9pt 指字体的大小为9 镑3.第二种方法已经简化了许多步骤，但是仍然不是最理想的方法，因为你必须在每个页面的 head 区都放置这么一段代码，扩大了文件的字节。另外这样的做法还有

7、一个重大缺点，就是如果我需要修改整个站点的字体大小，就必须一页一页的改！所以推荐给你最终也是目前最好的方法-外部摸板文件调用法。“外部摸板调用 ”就是说你将css 的设定作成一个单独的文件，在每个页面里都调用它。一旦你需要修改字体大小，只要修改一个.css 文件，几百个页面就同时修改了。(这种方法类似子程序调用编写过程序的网友很容易理解:)调用的具体方法如下：(1) 将上面的css代码copy 成一个mycss.txt文件，然后修改后缀名为mycss.css(2) 在html文 件 的<head></head>之间插入<LINKhref="mycss.c

8、ss"rel=stylesheettype=text/css> ，语句调用mycss.css(注意有关路径的设置正确)OK!字体超链接样式的设定。通常在网页的<body> 中设置连接的颜色，如：<bodylink="#FF00FF"vlink="#FF0000"alink="#008080">其中： link - Hyperlink （连接）的颜色vlink- visited Hyperlink（已访问过的连接）颜色alink- active Hyperlink（当前活动的连接）颜色颜色用 rg

9、b 的 16 进制码表示如红色是#FF0000。同样用 CSS 可以更简便的设定网页超连接的样式，看下面这段代码<style type="text/css">A:link TEXT-DECORATION: none;COLOR: #0000FFA:visited TEXT-DECORATION: none;COLOR: #000000A:active TEXT-DECORATION: none;COLOR: #FF0000A:hover COLOR: #FF0000</style>将它插入 html 文件的 head 区就可以了。 其中 link 设定的是有超链接的颜色 ;visited 是访问过的 超 链 接 颜 色 ； active 是 鼠 标 移 上 去 的 颜 色 ； hover 是 鼠 标 点 击 时 的 颜 色 。 而"text-decoration:none" 是指取消超链接的下划线显示。关于 CSS 的设定还有更多的用法和技巧，比如在同一页中设定不同的字体大小和超链接颜色，请学习有关 CSS 的专门知识在这里我们不在冗述。上面已经介绍了字体在技术上的各个方面。有关字体的设计使用，目前还没有一个成熟的理论，下面是

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

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

最新文档

评论

0/150

提交评论