相关文章
网站制作网页制作风格之细边框制作方法两则
企通互联带有图片预览功能的上传表单的完整HTML
企通互联网页设计配色基础 色彩三属性与实例剖析
网站设计从Fireworks看设计软件的色彩使用方式
网站设计网页设计中HTML常犯的五个错误
网站建设提高网页用户体验：字体大小的设计
网站建设Adobe Photoshop CS3 扩展版新功能
北京网站设计Photoshop简单打造逼真的火焰
网站设计技巧篇]菜鸟建站全攻略-从入门到精通
北京网站建设网页加速之网页结构篇
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网站设计企通互联利用PHP和CSS改变网页文字大小
北京网站设计企通互联利用PHP和CSS改变网页文字大小
在设计网站的时候，要牢记一点：并不是所有的访问者都是神采奕奕的年轻人，而且他们也不一定完全熟悉Web浏览器的各种使用方法。聪明的设计者了解这一点，他们常常将各种特殊的可访问特性融入网站的设计中，这样，即使是年长者或是残疾人士都可以方便舒适地使用网站，而不必花费额外的力气。
文本大小调节器是最有效的可访问特性中的一个，任何网站都可能需要它，简而言之，这是一个用于改变网页文字大小的工具，通常用于将文本变大从而易于阅读，很多浏览器已经自带了这一特色，但是网络浏览器的初学者并不知道如何使用这一功能，因此，网站的设计者经常将更易于使用的按钮放在每个网页上来实现这一功能。
这篇指南将向您介绍如何使用PHP和CSS在网页上添加具备这种功能的文本大小调节器，因此，赶快向您的网站添加这一可访问性，这样从年纪大于50岁的用户那里获得赞誉的积分，继续向下读，您将学会使用它的方法。
Www@Chinaz@com
注意：这篇指南假定您已经安装了Apache和PHP Chinaz
它是如何工作的？ 北京网站设计
在写代码之前，花一些时间来理解文本大小调节器的工作方式是非常有益的。网站中的每个网页都包含一系列控制按钮，他们允许用户选择页面的文字大小：小号、中号和大号，每种字号都对应于一种CSS样式表，这些样式表保存了用于渲染网页文本大小的规则。 北京网页设计
Chinaz@com
当用户做出选择的时候，PHP将用户选定的字号存储在一个会话变量中，然后重新加载网页，该页面将从会话变量中读取选定的字号，并动态调用相应的样式表以更小的字号或更大的字号来重新渲染网页。 Chinaz@com
过程
第一步：创建网页 中国站长_站,为中文网站提供动力 北京网站制作
从创建HTML文档开始，首先完成占位符的内容，列表A是一个例子： 中.国.站.长.站
列表A：
Text size: small | href="resize.php?s=medium">medium | large
Chinaz
Loremipsum dolor sit amet, 网站建设
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore 网站制作
magna aliqua. Utenim 企通互联
ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea 北京网站建设
commodoconsequat. 北京网站建设 www.qitongnet.com
Duisauteirure dolor in reprehenderit in 北京网站制作
voluptatevelitessecillumdoloreeufugiatnullapariatur. 网站建设
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui 北京网站建设
officiadeseruntmollitanim id estlaborum.
对页面顶部的文字超链接要特别注意，每个超链接都指向了名为resize.php的脚本文件，并通过URL GET方法将选定的字体大小传递给它。 Chinaz^com
在您的Web服务器目录中以.php的扩展名来保存这个文档，例如，index.php。 中国站长_站,为中文网站提供动力
第二步：创建样式表
接下来，为每种文字大小创建样式表文件：small.css, medium.css和large.css，这是small.css的文件内容：
body { 北京网页设计
font: 10px 北京网站设计
} Chinaz^com
同样，可以创建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']中，然后将浏览器重新定向到原来打开的哪个页面。 北京网站制作
北京网站设计
当然，这里还缺少一个组件：智能化得让网页自动检测现在用户现在选定的文本大小并加载相应的样式表，为加入这一功能，打开您的网页文件index.php，并将以下语句加入到文件的开头（参见列表C）： Chinaz_com
列表C 北京网站制作
// start session 北京网站建设
// import variables 网站设计
session_start(); 北京网站设计
// set default text size for this page 网站建设
if (!isset($_SESSION['textsize'])) { 企通互联
$_SESSION['textsize'] = 'medium'; 企通互联
} 北京网页设计
?> 北京网页设计
北京网站设计
You should also add a stylesheet link between the ... elements, as follows: 北京网站设计
type="text/css"> 北京网站设计
北京网页设计
这是列表D，完整的index.php文件应该是这样的： 中国. 网站建设站长站
列表D: 北京网站设计
// start session 北京网站制作
// import variables 北京网页设计
session_start(); 北京网站建设
// set default text size for this page 北京网站制作
if (!isset($_SESSION['textsize'])) { 北京网站设计
$_SESSION['textsize'] = 'medium'; 北京网站设计
} 网站设计
?> [中国站长站]
type="text/css"> 中.国站长站
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.
中.国.站.长.站
理解这种工作方式应该很简单了，当载入网页的时候，它恢复当前的会话，并检查$_SESSION['textsize']变量是否与当先选择的字号相符，然后通过元素动态加载相应的样式表，这将导致网页以正确的大小自动重新渲染。
联合使用PHP和CSS与传统的方式略有不同，传统方式是使用JavaScript来动态改变CSS样式表，相对于JavaScript 北京网站设计方法，PHP方法的优势在于您不需要依赖客户端对JavaScript的支持，您也不需担心专门创建针对某个浏览器的工作，也许下一次您坐下来设计网站的时候会发现这种方法很有效，祝编程愉快！
