用PHP和CSS改變網(wǎng)頁(yè)文字大小——在設(shè)計(jì)網(wǎng)站的時(shí)候，要牢記一點(diǎn)：并不是所有的訪問(wèn)者都是神采奕奕的年輕人，而且他們也不一定完全熟悉Web瀏覽器的各種使用方法。

在設(shè)計(jì)網(wǎng)站的時(shí)候，要牢記一點(diǎn)：并不是所有的訪問(wèn)者都是神采奕奕的年輕人，而且他們也不一定完全熟悉Web瀏覽器的各種使用方法。聰明的設(shè)計(jì)者了解這一點(diǎn)，他們常常將各種特殊的可訪問(wèn)特性融入網(wǎng)站的設(shè)計(jì)中，這樣，即使是年長(zhǎng)者或是殘疾人士都可以方便舒適地使用網(wǎng)站，而不必花費(fèi)額外的力氣。;

文本大小調(diào)節(jié)器是最有效的可訪問(wèn)特性中的一個(gè)，任何網(wǎng)站都可能需要它，簡(jiǎn)而言之，這是一個(gè)用于改變網(wǎng)頁(yè)文字大小的工具，通常用于將文本變大從而易于閱讀，很多瀏覽器已經(jīng)自帶了這一特色，但是網(wǎng)絡(luò)瀏覽器的初學(xué)者并不知道如何使用這一功能，因此，網(wǎng)站的設(shè)計(jì)者經(jīng)常將更易于使用的按鈕放在每個(gè)網(wǎng)頁(yè)上來(lái)實(shí)現(xiàn)這一功能。

這篇指南將向您介紹如何使用PHP和CSS在網(wǎng)頁(yè)上添加具備這種功能的文本大小調(diào)節(jié)器，因此，趕快向您的網(wǎng)站添加這一可訪問(wèn)性，這樣從年紀(jì)大于50歲的用戶那里獲得贊譽(yù)的積分，繼續(xù)向下讀，您將學(xué)會(huì)使用它的方法。

注意：這篇指南假定您已經(jīng)安裝了Apache和PHP

它是如何工作的？

在寫(xiě)代碼之前，花一些時(shí)間來(lái)理解文本大小調(diào)節(jié)器的工作方式是非常有益的。網(wǎng)站中的每個(gè)網(wǎng)頁(yè)都包含一系列控制按鈕，他們?cè)试S用戶選擇頁(yè)面的文字大?。盒√?hào)、中號(hào)和大號(hào)，每種字號(hào)都對(duì)應(yīng)于一種CSS樣式表，這些樣式表保存了用于渲染網(wǎng)頁(yè)文本大小的規(guī)則。

當(dāng)用戶做出選擇的時(shí)候，PHP將用戶選定的字號(hào)存儲(chǔ)在一個(gè)會(huì)話變量中，然后重新加載網(wǎng)頁(yè)，該頁(yè)面將從會(huì)話變量中讀取選定的字號(hào)，并動(dòng)態(tài)調(diào)用相應(yīng)的樣式表以更小的字號(hào)或更大的字號(hào)來(lái)重新渲染網(wǎng)頁(yè)。

過(guò)程

第一步：創(chuàng)建網(wǎng)頁(yè)

從創(chuàng)建HTML文檔開(kāi)始，首先完成占位符的內(nèi)容，列表A是一個(gè)例子： 列表A：

Text size: small | href='http://www.gepszalag.com/bcjs/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.

對(duì)頁(yè)面頂部的文字超鏈接要特別注意，每個(gè)超鏈接都指向了名為resize.php的腳本文件，并通過(guò)URL GET方法將選定的字體大小傳遞給它。

在您的Web服務(wù)器目錄中以.php的擴(kuò)展名來(lái)保存這個(gè)文檔，例如，index.php。

第二步：創(chuàng)建樣式表

接下來(lái)，為每種文字大小創(chuàng)建樣式表文件：small.css, medium.css和large.css，這是small.css的文件內(nèi)容：

body { font: 10px }

同樣，可以創(chuàng)建medium.css和large.css，分別使用17px和25px，將這些樣式表文件和上一步創(chuàng)建的網(wǎng)頁(yè)保存在同一個(gè)目錄中。

第三步：創(chuàng)建文本大小的改變機(jī)制

正如上文介紹的，網(wǎng)頁(yè)通過(guò)查找預(yù)先定義的會(huì)話變量可以'知道'加載哪個(gè)樣式表文件，會(huì)話變量是通過(guò)腳本文件resize.php來(lái)控制的（參見(jiàn)列表B），該文件是在用戶點(diǎn)擊了網(wǎng)頁(yè)頂部改變文字大小的按鈕時(shí)激活的，這是resize.php的內(nèi)容：

列表B

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

這很簡(jiǎn)單，當(dāng)用戶選擇了一種新的文本大小，resize.php通過(guò)GET方法來(lái)獲得字號(hào)的值，并將其存儲(chǔ)在會(huì)話變量$_SESSION['textsize']中，然后將瀏覽器重新定向到原來(lái)打開(kāi)的哪個(gè)頁(yè)面。

當(dāng)然，這里還缺少一個(gè)組件：智能化得讓網(wǎng)頁(yè)自動(dòng)檢測(cè)現(xiàn)在用戶現(xiàn)在選定的文本大小并加載相應(yīng)的樣式表，為加入這一功能，打開(kāi)您的網(wǎng)頁(yè)文件index.php，并將以下語(yǔ)句加入到文件的開(kāi)頭（參見(jiàn)列表C）：

列表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文件應(yīng)該是這樣的：

列表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='http://www.gepszalag.com/bcjs/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.

理解這種工作方式應(yīng)該很簡(jiǎn)單了，當(dāng)載入網(wǎng)頁(yè)的時(shí)候，它恢復(fù)當(dāng)前的會(huì)話，并檢查$_SESSION['textsize']變量是否與當(dāng)先選擇的字號(hào)相符，然后通過(guò)元素動(dòng)態(tài)加載相應(yīng)的樣式表，這將導(dǎo)致網(wǎng)頁(yè)以正確的大小自動(dòng)重新渲染。 聯(lián)合使用PHP和CSS與傳統(tǒng)的方式略有不同，傳統(tǒng)方式是使用JavaScript來(lái)動(dòng)態(tài)改變CSS樣式表，相對(duì)于JavaScript方法，PHP方法的優(yōu)勢(shì)在于您不需要依賴客戶端對(duì)JavaScript的支持，您也不需擔(dān)心專門創(chuàng)建針對(duì)某個(gè)瀏覽器的工作，也許下一次您坐下來(lái)設(shè)計(jì)網(wǎng)站的時(shí)候會(huì)發(fā)現(xiàn)這種方法很有效，祝編程愉快！