相對于那些為單一媒介(諸如印刷)創(chuàng)建的文檔而言,我們?yōu)榫W(wǎng)頁制作的文檔擁有更為復(fù)雜的用途及功能。在某一環(huán)境中發(fā)揮良好作用的文檔,可能在另一個(gè)環(huán)境中就變得不可用了。例如,為大的顯示屏設(shè)計(jì)的網(wǎng)頁在打印時(shí)或者在小屏手機(jī)上顯示時(shí)的效果可能不會(huì)太好。在考慮頁面設(shè)計(jì)的時(shí)候,要將視野拓寬至代表性的顯示屏之外,并為包括打印和手機(jī)在內(nèi)的其他環(huán)境預(yù)先提出相應(yīng)的設(shè)計(jì)。
適應(yīng)性設(shè)計(jì)
操作適當(dāng)?shù)脑?,網(wǎng)頁則可以適用于不同的環(huán)境而無需同一文檔的多個(gè)版本。使用了適應(yīng)性設(shè)計(jì)的網(wǎng)頁文檔可以順利地應(yīng)用于電影院或手機(jī)屏幕、電視或投影儀屏幕、油墨打印或盲文印刷,也可以被閱讀或使用軟件應(yīng)用程序進(jìn)行瀏覽。從設(shè)計(jì)師的角度而言,需要關(guān)注兩大要素以便讓這一多用途系統(tǒng)更有效地發(fā)揮它的功能,即,源文檔和媒體樣式表。有了適應(yīng)性設(shè)計(jì),源文檔便包含了所有必要的信息和功能;媒體樣式表可以對源文檔進(jìn)行更改以適應(yīng)于不同的環(huán)境。
樣式定義
可以通過很多種方式對樣式進(jìn)行定義:在元素標(biāo)簽、頁面的頭元素或者在外部樣式表中使用樣式屬性。一般而言,外部樣式表是最有效的方法,例如,使用該方法可以通過在某一位置定義主體背景顏色屬性,來輕易地修改整個(gè)網(wǎng)站的主體背景顏色。使用適應(yīng)性設(shè)計(jì),我們可以為每個(gè)環(huán)境創(chuàng)建不同的外部樣式表,并隨后使用<link>標(biāo)簽的“媒體”(media)屬性引用該樣式表。盡管在HTML規(guī)范中有很多媒體屬性,但此處我們集中關(guān)注使用最廣和最受支持的媒體類型:顯示屏、打印以及手持設(shè)備。
在實(shí)際操作中,我們總是在既定事實(shí)之后才會(huì)考慮到媒體樣式。我們往往先為傳統(tǒng)的計(jì)算機(jī)顯示屏進(jìn)行設(shè)計(jì),然后再為打印和手機(jī)的使用進(jìn)行修改。使用這一方式所產(chǎn)生的設(shè)計(jì)效果不是那么理想,因?yàn)槲覀兺鶝]有考慮到其他媒體以及查看設(shè)備。為了充分開發(fā)網(wǎng)絡(luò)環(huán)境,我們需要從一開始就考慮得更全面,并創(chuàng)建出適用于多種環(huán)境的源文檔。
文檔順序
文檔順序是指諸如網(wǎng)站形象、導(dǎo)航、主要內(nèi)容、相關(guān)內(nèi)容以及出處信息等元素在文檔源代碼中顯示的順序。文檔順序盡管在視覺環(huán)境中不明顯,但其對網(wǎng)頁的機(jī)讀性具有重大意義。很多搜索引擎賦予了文檔頂部內(nèi)容更多的權(quán)重。顯示屏閱讀者們在閱讀網(wǎng)頁的時(shí)候會(huì)從網(wǎng)頁的起始處開始,然后按順序進(jìn)行瀏覽。很多網(wǎng)頁瀏覽器在小顯示屏上會(huì)將多欄布局折疊為一欄,以方便瀏覽。打印樣式往往使用單欄樣式來適應(yīng)網(wǎng)頁的縱橫比。這些環(huán)境的效果極大地取決于文檔順序。
順序是文檔順序的一個(gè)重要方面。如果內(nèi)容元素?zé)o法按一個(gè)邏輯順序進(jìn)行排列,那么信息就會(huì)被歪曲。例如,當(dāng)相關(guān)鏈接和廣告與頁面主要內(nèi)容混在一起的時(shí)候,各元素必須按照-定的邏輯順序在文檔源代碼中排列,并且各個(gè)元素之間必須充分連接,而不能被其他元素打斷。
HTML代碼 (左側(cè))中的代碼順序,以及使用樣式表后每個(gè)代碼塊是如何排列的此外,考慮元素的相對重要性以及將最重要的信息置于網(wǎng)頁起始位置也是必的。這一方法被稱為“前置”,它有很多好處。當(dāng)主要內(nèi)容在源代碼中位于較前的置時(shí),盲人用戶以及使用小顯示屏的用戶能更直接地訪問這些內(nèi)容,而鍵盤用戶能更直接地訪問頁面的功能性元素。若相關(guān)內(nèi)容位于文檔頂部,搜索引擎在對頁進(jìn)行索引時(shí)便可以發(fā)揮更好的功效。
選擇性顯示
文檔設(shè)計(jì)的另一方面在于,吸收與不同環(huán)境相關(guān)的元素并對文檔進(jìn)行編碼,這樣元素就可以根據(jù)情況顯示或者不顯示了。例如,盡管對任何顯示屏設(shè)計(jì)而言,導(dǎo)航鏈接是基礎(chǔ),但當(dāng)打印到紙面上時(shí),它們就沒有多大幫助了。
另外,當(dāng)我們打算集中為電腦屏幕設(shè)計(jì)文檔時(shí),絕大多數(shù)文檔內(nèi)容解決的是視覺瀏覽需求,其中某些元素對其他環(huán)境會(huì)有用。在打印時(shí),頁面URL有助于返回頁面或引用文章。而在顯示屏上,頁面URL則可以便捷地獲得,因而沒必要顯示該信息。在這一實(shí)例中,可以使用CSS來隱藏顯示屏樣式表中的URL。
文本替代物
網(wǎng)頁設(shè)計(jì)涉及提供視覺和非視覺方式以訪問信息和功能。我們之所以能夠滿足如此廣泛且各異的在線觀眾的需求,主要原因在于可以使用軟件閱讀文本。當(dāng)然。并非網(wǎng)頁上所有的信息和功能都是文本格式:事實(shí)上,網(wǎng)頁正不斷地被諸如圖像、
視頻以及交互性等其他內(nèi)容豐富著。要想在一個(gè)復(fù)雜且視覺上豐盛的環(huán)境中獲得普遍的可用性,需要為所有相關(guān)的非文本元素提供文本替代物。
替代文本可以有很多形式。描述性標(biāo)題是一種替代方式,它可以顯示包含圖像的信息。很多網(wǎng)站會(huì)在頁面的腳注中使用文本鏈接,以便為基于圖片的鏈接是供只由文本組成的替代物。你可以在頁面代碼中提供替代文本。例如,使用<img>標(biāo)簽的“alt"屬性,可以為圖像提供替代文本。音頻和視頻展示往往使用標(biāo)題和文本記錄來進(jìn)行展示。核心概念不在于提供了多少,而在于替代文本被提供給源代碼,以便頁面中必要的內(nèi)容和功能具有機(jī)讀性,并因此具有可訪問性和通用可用性。
人們通過不同的方式來進(jìn)行網(wǎng)頁體驗(yàn)。對某些人來說,網(wǎng)絡(luò)是頁面在線閱讀的直接媒介一在大的電腦顯示屏上,使用小型便攜式設(shè)備 .或使用軟件進(jìn)行有聲閱讀。對其他人來說,網(wǎng)絡(luò)是一個(gè)發(fā)送媒介,使用它可以離線獲取信息,即將信息下載到光盤或者打印到紙面上。對人們普遍使用網(wǎng)站的方式的預(yù)期將主導(dǎo)你對頁面設(shè)計(jì)的決定。在線閱讀的文檔將為在線閱讀這目的進(jìn)行書寫,使用可以完全適應(yīng)不同屏幕大小和訪向方式的頁面設(shè)計(jì)。那些很可能用于打印或離線閱讀的文檔,則應(yīng)當(dāng)好地呈現(xiàn)在一個(gè)
網(wǎng)站制作頁面上,并且應(yīng)當(dāng)使用打印樣式表以確保設(shè)計(jì)適應(yīng)于最理想的打印樣式,例如,去掉打印頁中無關(guān)的網(wǎng)站導(dǎo)航鏈接。那些可能面向移動(dòng)用戶的文檔應(yīng)當(dāng)能夠在混合移動(dòng)環(huán)境中工作,可以在經(jīng)過拆分的頁面閱讀,同時(shí)也可以通過小但完備的移動(dòng)瀏覽器進(jìn)行常規(guī)瀏覽。
本文題目:網(wǎng)站文檔設(shè)計(jì)
文章網(wǎng)址:http://jinyejixie.com/news19/122869.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、微信小程序、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)