专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »PHP教程 » 文字大小代码:PHP中改变网页文字大小代码 »正文

文字大小代码:PHP中改变网页文字大小代码

来源: 发布时间:星期四, 2009年2月12日 浏览:169次 评论:0


  今天给大家介绍点基础东西PHP中改变网页文字大小实现其实实现起来很简单熟悉点PHP和CSS就能很快实现我们想要效果

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

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

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

  它是如何工作

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

  当用户做出选择时候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.
Excepteursoccaecatcupidatat non proident, sunt in culpa qui
officiadeseruntmollitanim id estlaborum.



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

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

  第 2步:创建样式表

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

body {
font: 10px
}

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

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

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

  列表B

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

[Page]


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

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

  列表C

// start session
// import variables
session_start;
// default text size for this page
(!is($_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;
// default text size for this page
(!is($_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.
Excepteursoccaecatcupidatat non proident, sunt in culpa qui
officiadeseruntmollitanim id estlaborum.





  理解这种工作方式应该很简单了当载入网页时候它恢复当前会话并检查$_SESSION[\'textsize\']变量是否和当先选择字号相符然后通过元素动态加载相应样式表这将导致网页以正确大小自动重新渲染联合使用PHP和CSS和传统方式略有区别传统方式是使用JavaScript来动态改变CSS样式表相对于JavaScript思路方法PHP思路方法优势在于您不需要依赖客户端对JavaScript支持您也不需担心专门创建针对某个浏览器工作是不是比其他语言方便啊 呵呵



1

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: