网页的版式设计—文字的格式化

　　网页的版式设计---文字的格式化

　　编者按:很多从事网页设计的计算机专业人员，对于网页的制作技术驾轻就熟，但对于网页富有艺术性和个性的设计却感到力不从心。特别是没有经过艺术设计专业训练的网页制作者，在掌握了网页制作技术的情况下，都渴望将自己的网页制作得更具创意和美感。目前关于网页制作的讨论和介绍，多以讲解软件的技术性操作为主要内容，侧重艺术方面的非常之少。

　　文字的格式化

　　1.字号、字体、行距

　　字号大小可以用不同的方式来计算，例如磅(point)或像素(pixel)。因为以计算机的像素技术为基础的单位需要在打印时转换为磅，所以，建议采用磅为单位。

　　最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。

　　网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。

　　粗体字强壮有力，有男性特点，适合机械、建筑业等内容;细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感;字体种类多，则版面活跃，丰富多采。关键是如何根据页面内容来掌握这个比例关系。

　　从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。

　　行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。

　　除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。

　　行距可以用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。例如:{line-height:20pt｝、{line-height:150%｝。

　　2.文字的整体编排

　　页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。

　　(1)文字的图形化

　　字体具有两方面的作用:一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。

　　将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。

　　(2)文字的叠置

　　文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的版式设计，在网页设计中也被广泛采用。

　　(3)标题与正文

　　在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的版式来打破旧有的规律。

　　(4)文字编排的四种基本形式

　　页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。

　　两端均齐:文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观。

　　居中排列:在字距相等的情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美感。

　　现在专业性的网站越来越多，许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事，所以大家都想保护自己独创的作品，为自己的网页上把锁，今天就让我带大家了解一下如何给我们的网页加上一把密码锁。

　　一、常用JavaScript密码锁

　　1. 了解javascript

　　JavaScript是一种新的网页描述语言，是由Sun公司以及网景Netscape公司开发的，此一语言可以被嵌入HTML的文件之中，使用它可以让你设计交互性的网页内容。

 　　2. javascript特点

　　使用javascript非常简单，只是一小段代码，就可以让网页发生千奇百怪的效果，而且使用javascript来加密的方法是网络中加密最常用的方法。

　　3. 使用javascript加密

　　使用javascript加密最简单的结果就是让浏览者不能使用鼠标右键，当他点击右键想对图片进行保存或者复制文字的时候就会弹出一个警告窗口或是弹出收藏夹等。

　　实现方法：

　　（1）利用弹出窗口封锁鼠标右键

　　将下面这段代码放在网页HTML代码的＜head＞＜/head＞标志中，就可以实现封锁右键，给网页加密。

＜script language="javascript"＞
function click() {if (event.button==2) {alert('本站不准使用右键，
使用左键吧！^_^') }}
document.onmousedown=click＜/script＞

　　（2）弹出“添加收藏夹”封锁鼠标右键

　　将下面这段代码放在网页的HTML代码的＜head＞＜/head＞标志中。实现点击右键出现“添加到收藏夹”选项。

＜script language="javascript"＞
function click() {if (event.button==2) {window.external.addFavorite
('http:///,' 网页教学网')}}
document.onmousedown=click＜/script＞

　　（3）彻底封锁鼠标右键

　　将下面这段代码放在网页的HTML代码的＜head＞＜/head＞标志中能够实现彻底封锁鼠标右键的效果，由于这个脚本在右键按下时调用一个函数，所以可以改为很多种类型。即使按下左键，再按下右键，放开左键，再放开右键的方法也还是破解不了。

＜script＞
function DM(e){if(!ns){if(event.button＞1)window.external.addFavorite
('http:///,' 网页教学网')}else{if(e.which＞1)return false}}ns=navigator.appName=="Netscape";if(ns)document.captureEvents
(Event.MOUSEMOVE|Event.MOUSEDOWN);document.onmousemove=DM;document.
onmousedown=DM;＜/script＞

　　（4）禁止查看源文件
　　将下面这段代码放在网页的HTML代码的＜head＞＜/head＞标志中则可以实现禁止利用IE浏览器查看源文件。

＜script language="JavaScript"＞
＜!--
document.onmousedown=click
function click() {
if ( event.button==2) {alert('不准查看源文件') }
if ( event.button==3) {alert('不准查看源文件') }
}
//--＞
＜/script＞

　　（5）用乱码显示链接、调用地址加密。
　　利用某些函数把URL字符转换成ASCII码，从而达到隐藏链接Frame页面和*.js,*.asp等脚本的目的。返回ASCII码escape(character),ASCII码为%XX格式,XX是十六进制，如空格键为%20。返回字符unEscape(string)如：

＜!—var Words=" %3Cframeset%20BORDER%3D%220%22%20FRAMEBORDER%3D%220%22
%20FRAMESPACING%3D%220%22%20rows%3D%22100%25%22%3E%0D%0A%20%20%3Cframe
%20SRC%3D%22http%3A//XXX.XXX.COM/XXX/XXX/%22%20NAME%3D%22oos1%22%20"//
--＞
＜/script＞