淺談網頁架構

分類:學習交流   2023/04/30

 

文/曾老師

相信有很多人每天都在上網,上網要做什麼呢?那就各取所需了。有的上網看新聞、有的上網查資料、有的上網聽音樂、有的上網收發郵件,亦或是上網追劇。透過網路無遠弗界和地球另一端的人們聯絡感情,網絡真是無處不在,少了它,生活在21世紀的你一定很不自在,甚而手足無措。

 

但是,只要一上網就要接觸到「網頁」,而網頁的架構、格式五花八門,內容包羅萬象,讓人眼花撩亂應接不暇。對視覺有缺陷的朋友們,在瀏覽起來更是備覺艱辛,故藉此一角聊聊網頁的架構,期能讓初學者能瞭解一般的網頁架構進而順利的在網頁上擷取所需資訊。※本文介紹之內容以目前台灣常見之網頁架構為之。

 

一、跳到主要內容區連結:這個連結在網頁的最上方,點此連結,焦點會直接移至本頁面的中間主要內容區的開始位置。此位置可能因各網站的設計有所不同,故所停位置稍有不同,但都會是在本頁所要顯示的內容上方,故跳到此位置之後,以方向鍵向下移動就可讀取到本頁所要顯示的內容。

二、橫幅區:此區就在網頁上方第二列,此區左側通常會有本機構的Logo或名稱,且有連結回網站首頁的功能;右側則有上方功能區清單,通常設有定位點「Alt+U」,並且有「網站導覽」、「首長信箱」、「常見問答」、「註冊」、「登入」等項目。※「網站導覽」106年9月1日公告「政府網站服務管理規範」之網站親和性原則,其中中文版「網站地圖」超連結,請統一使用「網站導覽」超連結,且「網站導覽(SITE MAP)連結」建議設置在鍵盤移動三個游標內就能到達的位置。

三、主要導覽區:此區位於橫幅區之下,本區呈現本網站提供的主要服務項目,如:「機構介紹」、「訊息公告」、「各大類服務」、「表單下載」等本站的各大主要業務項目。

以上三個區塊只要進入本站任一頁面,皆會呈現在各頁面的固定位置。

四、左側導覽區:本區塊位於頁面的左邊區塊,也設有定位點「Alt+L」,其下的選項會因點選主要導覽區不同項目而顯示各主要導覽項目的子導覽項目,供使用者選擇。如:點選主導覽區的「訊息公告」,於切換畫面後,此區塊會顯示「最新消息」、「活動訊息」、「媒體消息」、「得獎記錄」等屬於「訊息公告」類別的子導覽項目。故此區塊是會跟隨點選主要導覽區之不同項目而呈現各個主導覽項目之下的子導覽項目。

五、中央主要內容區:通常以「Alt+C」為定位點,此區塊位於左側區塊的右邊,顯示所點選之子導覽項目的內容。如:點選主要導覽區的「公告訊息」,然後點選子導覽區的「最新消息」,在畫面刷新後,主要內容區將會呈現機構最近發佈的各類訊息連結清單,供使用者點選,其路徑為:首頁 > 訊息公告 > 最新消息。
使用者可點選清單內的連結,畫面再次刷新,則主要內容區就顯示出所點選的該項目內容。其路徑為:首頁 > 訊息公告 > 最新消息 > xxx消息連結。

六、資訊列:通常以「Alt+B/Alt+Z」為定位點,位置就在中間主要內容區下方,也就是整個網頁的下方區塊。也有直接與中間主要內容區合併為同一區塊,但會設置地標(Landmark)作為區隔。資訊列一般呈現機構地址、聯絡資訊、隱私權與資安政策、無障礙網頁標章等項目。

以上為目前我國常見的網頁架構。當然,各網站之規劃並非如此一成不變,如果就依此一成不變,那網頁也就不會如此迷人,讓人們樂此不疲了,你說是嗎?

 

在此,特別推薦「網站導覽」這個連結,在各網站的「網站導覽」頁面之中間主要內容區,會詳細介紹本站之各區塊名稱、使用之快捷鍵,並列出本網站各主要導覽項目清單,且在各主要導覽項目之下列出各歸屬之子導覽項目,清楚的呈現本網站的架構,並可直接點選超連結進入頁面,十分方便,值得大家一起體驗看看。

 

下回筆者要來談談如何認識未到訪過的網站、NVDA 之單鍵瀏覽功能之應用。