利用PHP和CSS改变网页文字大小

2016-01-29 12:53 34 1 收藏

利用PHP和CSS改变网页文字大小,利用PHP和CSS改变网页文字大小

【 tulaoshi.com - PHP 】

  用PHPCSS改变网页文字大小——在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法。

  在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法。聪明的设计者了解这一点,他们常常将各种特殊的可访问特性融入网站的设计中,这样,即使是年长者或是残疾人士都可以方便舒适地使用网站,而不必花费额外的力气。

  文本大小调节器是最有效的可访问特性中的一个,任何网站都可能需要它,简而言之,这是一个用于改变网页文字大小的工具,通常用于将文本变大从而易于阅读,很多浏览器已经自带了这一特色,但是网络浏览器的初学者并不知道如何使用这一功能,因此,网站的设计者经常将更易于使用的按钮放在每个网页上来实现这一功能。

  这篇指南将向您介绍如何使用PHP和CSS在网页上添加具备这种功能的文本大小调节器,因此,赶快向您的网站添加这一可访问性,这样从年纪大于50岁的用户那里获得赞誉的积分,继续向下读,您将学会使用它的方法。

  注意:这篇指南假定您已经安装了Apache和PHP

  它是如何工作的?

  在写代码之前,花一些时间来理解文本大小调节器的工作方式是非常有益的。网站中的每个网页都包含一系列控制按钮,他们允许用户选择页面的文字大小:小号、中号和大号,每种字号都对应于一种CSS样式表,这些样式表保存了用于渲染网页文本大小的规则。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/php/)

  当用户做出选择的时候,PHP将用户选定的字号存储在一个会话变量中,然后重新加载网页,该页面将从会话变量中读取选定的字号,并动态调用相应的样式表以更小的字号或更大的字号来重新渲染网页。

  过程

  第一步:创建网页

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/php/)

  从创建HTML文档开始,首先完成占位符的内容,列表A是一个例子:
列表A:

Text size: small | href="resize.php?s=medium"medium | large

Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua. Utenim
ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiadeseruntmollitanim id estlaborum.

  对页面顶部的文字超链接要特别注意,每个超链接都指向了名为resize.php的脚本文件,并通过URL GET方法将选定的字体大小传递给它。

  在您的Web服务器目录中以.php的扩展名来保存这个文档,例如,index.php。

  第二步:创建样式表

  接下来,为每种文字大小创建样式表文件:small.css, medium.css和large.css,这是small.css的文件内容:

body {
font: 10px
}

  同样,可以创建medium.css和large.css,分别使用17px和25px,将这些样式表文件和上一步创建的网页保存在同一个目录中。

  第三步:创建文本大小的改变机制

  正如上文介绍的,网页通过查找预先定义的会话变量可以"知道"加载哪个样式表文件,会话变量是通过脚本文件resize.php来控制的(参见列表B),该文件是在用户点击了网页顶部改变文字大小的按钮时激活的,这是resize.php的内容:

  列表B

// start session
// import selected size into session
session_start();
$_SESSION['textsize'] = $_GET['s'];
header("Location: " . $_SERVER['HTTP_REFERER']);
?


  这很简单,当用户选择了一种新的文本大小,resize.php通过GET方法来获得字号的值,并将其存储在会话变量$_SESSION['textsize']中,然后将浏览器重新定向到原来打开的哪个页面。 [next]

  当然,这里还缺少一个组件:智能化得让网页自动检测现在用户现在选定的文本大小并加载相应的样式表,为加入这一功能,打开您的网页文件index.php,并将以下语句加入到文件的开头(参见列表C):

  列表C

// start session
// import variables
session_start();
// set default text size for this page
if (!isset($_SESSION['textsi

来源:http://www.tulaoshi.com/n/20160129/1487974.html

延伸阅读
标签: 浏览器
Firefox减小文字大小的快捷键是什么 Firefox减小文字大小的快捷键是Ctrl+Scroll up。
标签: Web开发
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 上一篇介绍了:CSS3教程(3):border-color网页边框色彩 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y...
手机遨游浏览器设置文字大小方法   手机遨游浏览器设置文字大小方法,小伙伴们经常在浏览器里面查找资料吧?最近好多小伙伴跟小编说浏览器里默认的文字大小看不习惯,那么小伙伴们知道怎么设置文字大小吗?不知道怎么设置文字大小也没关系,现在小编就教小伙伴们手机遨游浏览器设置文字大小方法。 1)打开手机遨游浏览器,点击右...
标签: windows10
Win10系统下调整图标和文字大小的方法   大家在使用电脑的时候似乎很少关注图标和文字的size,一般在电脑系统设置好的情况下不会轻易的改动,除非是因为某些因素改变了图标和文字的大小,被逼无奈之下需要改动才会特地的去修改。win10系统中的图标和文字大小是可以单独调节的,但是单独调节的时候很难找出一个标准的大小,经常是图标...
标签: PHP
  多年前本人开始从事三维动画方面的学习,后学习了PHP,发现可以通过PHP动态生成VRML文档,有点类似于Generator动态生成Flash的方式。   由于VRML博大精深,这里只介绍一个简单的例子,还可以将各种VRML结点存入数据库中,这样的虚拟现实网页将……,爽!   下面是源程序。注意:在服务器上,要将让PHP处理wrl格式的...

经验教程

748

收藏

19
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部