高级技巧之网页设计中的文字运用

 更新时间:2016年9月20日 19:02  点击:1371

如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现,无非就是通过文本、图像、Flash动画等,其中, 文本是网页中最为重要的设计元素。对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见。

  文字的格式化

  1.字号、字体、行距

  字号大小可以用不同的方式来计算,例如磅#quotel.quoter#或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅,所以,建议采用磅为单位。

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

  网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。例如:粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

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

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

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

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

  文字的整体编排

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

  1.文字的图形化

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

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

  2.文字的叠置

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

  3.标题与正文

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

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

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

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

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

  左对齐或右对齐:左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线,很容易与图形配合。这种编排方式有松有紧,有虚有实,跳动而飘逸,产生节奏与韵律的形式美感。

做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。

  方法一:用图片制作圆角表格

  这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法。

  ①先用Photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分(如图1),复制它。  



  保护自己的成果,为自己的网页上把锁,今天就让大家了解一下如何给自己的网页加上一把密码锁……

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

  一、常用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://www.popunet.com/,' 大众网络报')}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>

对一个电子商务网站来说,需要运用最少的带宽和服务器资源,为更多的客户提供更快捷的服务。而用户对Web站点的满意度,主要以访问速度来衡量。

??从用户角度来说,Web站点只有“快”和“慢”之分;用户往往并不要求实现大容量数据传输,而是希望网站在保证性能的同时,能够容纳更多的访问者。Web用户所关心的问题的实质是访问时间。从网络维护角度说,导致时延的潜在因素是多方面的,大致来讲,可以从5个方面改进Web站点的性能:缓冲、压缩、CPU优化、运用内容分发网络(CDN)及客户端软件。

??当一个站点访问用户过多时,服务器会超载,站点速度也会随之降低。若增加服务器并运用负载均衡或群集方案,可增加网站访问量,站点的性能也能达到可以接受的水平。但往往出现的情况是,终端用户能够获取较快的访问速度,而预期的访问容量达不到,因此应首先考虑改进网站性能。通过限制对服务器的访问量、避免服务器出现全面缓冲,或者采用纯CDN模式,可以提高页面提交速度,站点能容纳更多的用户。

??优化服务器配置

??运用更快速的磁盘和更好的网络存取机制,能明显改进网站访问速度。可以运用特定网卡(如Akamba公司的Velobahn)来改进服务器的速度,或是采用相关技术优化网络接口卡的性能。这类方案的核心是设法减轻Web服务器CPU的负荷,使其从繁琐的网络协议处理中“解脱”出来,而集中于页面处理和服务提供。

??要尽可能地提升服务器性能,运用成熟的Web服务器加速软件必不可少,在未来几年中,成本低廉、具备高度优化、嵌入式操作系统的Web服务器工具将会出现。

??运用缓冲机制

??优化网络可升缩性和性能的另一方法是在服务器外围增加缓冲机制。比较流行的方案是为Web服务器增加反向缓冲代理,使服务器能够顺利实现已创建页面的传输,同时在创建动态页面过程中减轻服务器负荷。

??缓冲机制比较容易实现,可以自行构建代理程序,也可采用其它基于硬件的产品,如Cobalt Networks的产品CacheRaQ、CacheFlow公司的高端缓冲工具CacheOS。不过购买时须注意,很多硬件缓冲产品实际上是在Linux服务器中运行相关软件来实现缓冲功能的。由于缓冲机制通常不能很好地处理动态生成内容,现在运用已呈下降趋势。对于实时动态页面,若运用缓冲,显示速度会明显减慢。


  一、Internet服务功能的扩展

  在基本实现Internet功能的基础上,你可以再安装E-Mail服务器端软件以实现电子邮件收发功能;安装News服务器端软件以实现Newsgroups新闻讨论组功能……这些软件都可以在Internet上下载,在众多的此类服务器端软件中,笔者推荐Microsoft的BackOffice系列综合网络服务软件包Exchange。该服务包括的支持软件包如下:

  ·Exchange Server 5.5评估版(三个月):文件名exch55i.exe;文件大小23MB。

  ·Windows NT Server Pack 3运行Exchange所必需的WinNT升级服务包:文件名Nt4sp3_ i.exe;文件大小18MB。

  ·Active Server Pages Release在Exchange下实现WWW网页方式E-Mail、News功能所必需的服务包:文件名Asp_ i386.exe;文件大小29MB。

  以上文件均可在Internet上自由下载,也可登录到我网站的FTP服务器上下载。然后再进行以下的安装、设置等工作。

  二、Windows NT Server Pack 3(SP3)的安装

  Windows NT Server Pack 3是Windows NT 4.0的升级服务包,除修正了原有错误外,它还包括Windows NT Server 4.0发布之后的新技术支持。

  以管理员身份登录后,在Win NT资源管理器中双击SP3的安装文件Nt4sp3_ i.exe,即开始SP3的安装。首先提取文件到临时目录D:TEMP中,然后进入安装向导界面。按照提示,每一步都取默认值,然后开始复制SP3升级文件到D:WINNT目录,最后显示Win NT已经被更新。选择“确定”来重新启动计算机,会看到操作系统管理器OS Loader的版本已经由4.0变为4.01,原来的WinNT版本号“Build 1381 Server Pack 1”变为“Build 1381 Server Pack 3”。至此该部分安装结束。

  三、Active Server Pages(ASP)的安装

  如果要应用Exchange Server 5.5的基于WWW网页方式的E-Mail、News等功能,必须安装ASP服务包,否则可不必安装此部分。

  以管理员身份登录后,在Win NT资源管理器中双击ASP的安装文件Asp_ i386.exe,即开始ASP的安装。首先提取文件到临时目录D:TEMP中,然后进入安装向导界面。在许可协议窗口点击“I Agree”按钮表示接受许可协议,然后按照提示,每一步都取默认值,直至ASP安装结束。

  四、Exchange Server 5.5的安装

  以管理员身份登录后,在WinNT资源管理器中双击Exchange的安装文件Exch55i.exe,即开始此部分的安装。首先进行解包提取文件到临时目录,提取完毕后,在WinNT资源管理器中双击D:TEMPMicrosoft Exchange Server 5.5ServerI386目录中的安装文件SETUP.EXE进入实际安装过程。单击中间的完全安装按钮,勾选所有选项,并根据提示进行一系列选择后,完成Exchange Server 5.5的安装。

     五、Exchange Server 5.5的设置

  在Exchange Server 5.5安装完毕后,在WinNT桌面顺序单击“开始”-“程序”-“Microsoft Exchange”-“Microsoft Exchange Administrator”,即进入Exchange Server的设置。

  在首次运行时,出现连接到服务器的对话框,输入服务器的名字“DAMUGE”单击“OK”,然后在提示版本过期窗口单击“确定”,即出现Microsoft Exchange Administrator主菜单画面。

  1.Internet Mail服务的添加和设置

  在主菜单中,顺序选择“”-“New Other”,运行Internet Mail Service添加向导,除了在E-Mail地址生成格式处输入“@mail.webfree.com”之外,所有对话框全部取默认值。

  2.Internet Newsgroups新闻讨论组的设置

  在主菜单下,展开“Folders”-“Public Folders”,点选“Internet Newsgroups”,然后按“Alt+ENTER”键,弹出“Internet Newsgroups Properties”属性窗口,单击“Client Permissions”按钮,出现客户许可窗口。默认的(Default)许可和匿名访问者(Anonymous)的许可(Permissions)是相同的。

<
[!--infotagslink--]

相关文章

  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • Photoshop设计商务名片的5种常见思路分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • php语言中使用json的技巧及json的实现代码详解

    目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 基于PHP给大家讲解防刷票的一些技巧

    刷票行为,一直以来都是个难题,无法从根本上防止。但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制。基于 PHP,下面介绍防刷票的一些技巧:1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24
  • 图解Sublime Text3使用技巧

    通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
  • photoshop安卓和苹果界面设计之尺寸规范详解

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范,各位想知道的使用者们,那么下面就快来跟着小编一起看看吧。 给...2016-09-14
  • 分享12个非常实用的JavaScript小技巧

    这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,需要的朋友可以参考下...2016-05-14
  • Python爬虫必备技巧详细总结

    本篇文章介绍了我在爬虫过程中总结的几个必备技巧,都是经过实验的,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下...2021-10-22
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • photoshop设计重影效果具体制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程,各位想知道具体制作方法的软件使用者们,那么大家就来看下小编带来的教...2016-09-14
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来...2016-09-14
  • PS怎么设计T恤 PS制作T恤教程

    PS怎么设计T恤?很多人都想要在T恤上有自己喜欢的图案,那么自己设计T恤的图案是方法之一,本次为大家带来了详细的ps设计T恤教程,有兴趣的同学快来看看吧。 1、打开PS,新...2016-12-31