在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法。聪明的设计者了解这一点,他们常常将各种特殊的可访问特性融入网站的设计中,这样,即使是年长者或是残疾人士都可以方便舒适地使用网站,而不必花费额外的力气。
<--start banner ad--><--ba--> <--end banner ad--> |
过程
第一步:创建网页
从创建HTML文档开始,首先完成占位符的内容,列表A是一个例子:
列表A:
<-- font size buttons -->
Text size: small | href="resize.php?s=medium">medium | large
<-- dummy page content -->
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.
Excepteursintoclearcase/" target="_blank" >ccaecatcupidatat 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,将这些样式表文件和上一步创建的网页保存在同一个目录中。
第三步:创建文本大小的改变机制列表B
<--p <-->// 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):
列表C
<--p <-->// 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:
<--p <-->// start session
// import variables
session_start();
// set default text size for this page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medium';
}
?>
type="text/css">
<-- font size buttons -->
Text size: small | href="resize.php?s=medium">medium | large
<-- dummy page content -->
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']变量是否与当先选择的字号相符,然后通过