利用PHP和CSS改變網頁文字大小_PHP教程
推薦:PHP和MYSQL制作動態(tài)網站開發(fā)經驗之談一. 10個經驗 1.不要依賴register_global=ON的環(huán)境,從你剛懂得配置php運行環(huán)境甚至尚不明白register_global的ON/OFF會對自己有什么影響的那天起,就應該勇敢地把它設為OFF。 2.寫程序前看
用PHP和CSS改變網頁文字大小——在設計網站的時候,要牢記一點:并不是所有的訪問者都是神采奕奕的年輕人,而且他們也不一定完全熟悉Web瀏覽器的各種使用方法。
在設計網站的時候,要牢記一點:并不是所有的訪問者都是神采奕奕的年輕人,而且他們也不一定完全熟悉Web瀏覽器的各種使用方法。聰明的設計者了解這一點,他們常常將各種特殊的可訪問特性融入網站的設計中,這樣,即使是年長者或是殘疾人士都可以方便舒適地使用網站,而不必花費額外的力氣。
文本大小調節(jié)器是最有效的可訪問特性中的一個,任何網站都可能需要它,簡而言之,這是一個用于改變網頁文字大小的工具,通常用于將文本變大從而易于閱讀,很多瀏覽器已經自帶了這一特色,但是網絡瀏覽器的初學者并不知道如何使用這一功能,因此,網站的設計者經常將更易于使用的按鈕放在每個網頁上來實現(xiàn)這一功能。
這篇指南將向您介紹如何使用PHP和CSS在網頁上添加具備這種功能的文本大小調節(jié)器,因此,趕快向您的網站添加這一可訪問性,這樣從年紀大于50歲的用戶那里獲得贊譽的積分,繼續(xù)向下讀,您將學會使用它的方法。
注意:這篇指南假定您已經安裝了Apache和PHP
它是如何工作的?
在寫代碼之前,花一些時間來理解文本大小調節(jié)器的工作方式是非常有益的。網站中的每個網頁都包含一系列控制按鈕,他們允許用戶選擇頁面的文字大小:小號、中號和大號,每種字號都對應于一種CSS樣式表,這些樣式表保存了用于渲染網頁文本大小的規(guī)則。
當用戶做出選擇的時候,PHP將用戶選定的字號存儲在一個會話變量中,然后重新加載網頁,該頁面將從會話變量中讀取選定的字號,并動態(tài)調用相應的樣式表以更小的字號或更大的字號來重新渲染網頁。
過程
第一步:創(chuàng)建網頁
從創(chuàng)建HTML文檔開始,首先完成占位符的內容,列表A是一個例子:
列表A:
以下為引用的內容: Text size: small | href="resize.php?s=medium">medium | large Loremipsum dolor sit amet, |
對頁面頂部的文字超鏈接要特別注意,每個超鏈接都指向了名為resize.php的腳本文件,并通過URL GET方法將選定的字體大小傳遞給它。
在您的Web服務器目錄中以.php的擴展名來保存這個文檔,例如,index.php。
第二步:創(chuàng)建樣式表
接下來,為每種文字大小創(chuàng)建樣式表文件:small.css, medium.css和large.css,這是small.css的文件內容:
以下為引用的內容: body { |
同樣,可以創(chuàng)建medium.css和large.css,分別使用17px和25px,將這些樣式表文件和上一步創(chuàng)建的網頁保存在同一個目錄中。
第三步:創(chuàng)建文本大小的改變機制
正如上文介紹的,網頁通過查找預先定義的會話變量可以"知道"加載哪個樣式表文件,會話變量是通過腳本文件resize.php來控制的(參見列表B),該文件是在用戶點擊了網頁頂部改變文字大小的按鈕時激活的,這是resize.php的內容:
列表B
以下為引用的內容: // start session |
這很簡單,當用戶選擇了一種新的文本大小,resize.php通過GET方法來獲得字號的值,并將其存儲在會話變量$_SESSION['textsize']中,然后將瀏覽器重新定向到原來打開的哪個頁面。
當然,這里還缺少一個組件:智能化得讓網頁自動檢測現(xiàn)在用戶現(xiàn)在選定的文本大小并加載相應的樣式表,為加入這一功能,打開您的網頁文件index.php,并將以下語句加入到文件的開頭(參見列表C):
列表C
以下為引用的內容: // start session You should also add a stylesheet link between the ... elements, as follows: |
這是列表D,完整的index.php文件應該是這樣的:
列表D:
以下為引用的內容: // start session type="text/CSS"> Text size: small | href="resize.php?s=medium">medium | large Loremipsum dolor sit amet, |
理解這種工作方式應該很簡單了,當載入網頁的時候,它恢復當前的會話,并檢查$_SESSION['textsize']變量是否與當先選擇的字號相符,然后通過元素動態(tài)加載相應的樣式表,這將導致網頁以正確的大小自動重新渲染。聯(lián)合使用PHP和CSS與傳統(tǒng)的方式略有不同,傳統(tǒng)方式是使用JavaScript來動態(tài)改變CSS樣式表,相對于JavaScript方法,PHP方法的優(yōu)勢在于您不需要依賴客戶端對JavaScript的支持,您也不需擔心專門創(chuàng)建針對某個瀏覽器的工作,也許下一次您坐下來設計網站的時候會發(fā)現(xiàn)這種方法很有效,祝編程愉快!
分享:常見php頁面漏洞分析及相關問題解決從現(xiàn)在的網絡安全來看,大家最關注和接觸最多的WEB頁面漏洞應該是ASP了,在這方面,小竹是專家,我沒發(fā)言權。然而在PHP方面來看,也同樣存在很嚴重的安全問題,但是這方面的文章卻不多。在這里
- 相關鏈接:
- 教程說明:
PHP教程-利用PHP和CSS改變網頁文字大小。