1、XB1 在互聯網上演示資訊 P. 1XB1 在互聯網上演示資訊1. 建立網站網站是一個資訊中心,互聯網將不同的網站連結,形成現今互聯網上的資訊寶庫。網站必須要有萬維網伺服器存貯網頁及相關檔案,網站也必須要經常更新,使瀏覽者獲得最新資訊。2. 建立網站的步驟1. 架設萬維網伺服器或借用他人的萬維網伺服器2. 選擇一個域名(申請新域名使用他人伺服器的域名)3. 設計網頁4. 上載網頁及有關檔案5. 維護網頁(更新修改)3. 籌劃及設計網頁的檔案結構a) 首頁 - 網站的首頁是最重要的一頁,因為它是連結站內其他網頁的地方,一般會以 index.htm 或 index.html 檔案存貯。index
2、的意思是目錄,所以首頁多數是一頁的目錄。b) 兩層式檔案結構 - 首頁裡有所有其他頁的連結,一步到位。c) 多層次式檔案結構 - 首頁只連結到下一個子目錄,然後再連結下去,直到所要的網頁。d) 資料夾運用 - 將同類型的檔案以資料夾存貯,方便管理。e) 語言選擇 - 每一種語言要編寫一組不同的網頁。f) 網站指南 有系統提供所有站內網頁的超連結,一步到位。4. 建立網頁時實際的考慮因素a) 內容目的在網站首頁,一般會有超連結連至內容目的,其作用是概括地介紹網站的目的。內容目的對瀏覽者有何幫助?以決定是否繼續瀏覽。b) 觀眾的注意力要吸引瀏覽者注意力,網站可使用 _圖像_、_動畫_、_聲音_和_
3、跳出式視窗_等等。c) 顏色的調配. . . . .XB1 在互聯網上演示資訊 P. 2 顏色的調配要配合網頁的內容; 顏色可分為_(紫、藍、青、綠)和_(黃、橙、紅),冷色給人一種嚴肅的感覺,而暖色給人一種溫暖的感覺; 在紫、藍、青、綠、黃、橙、紅之間,相鄰的顏色,稱為_,近似色會有一種小對比的感覺; 個別顏色的用途:_色代表危險、注意;_色代表環保、自然;_色代表純潔、整齊;_色代表哀傷。 HTML 標籤:d) 網頁的版面運用瀏覽以下網站,分析它們的版面運用。www.hku.hk , www.gov.hke) 各項元素在屏幕上的配置瀏覽以下網站,分析它們各項元素的配置。 , f) 將資訊編
4、集成表單或列表 表單是以_和_ 來展示資訊,表單的第一列一般用來展示欄名稱。顯示 HTML 標籤班別 班號 姓名 5A 3 陳大文 5C 16 李志成 班別班號姓名5A3陳大文5C16李志成 _用於表示一些相關項目,但先後次序並不重要;顯示 HTML 標籤入選校隊名單: 陳大文 李志成 尹亮燦 入選校隊名單:陳大文李志成尹亮燦 _用於表示一些相關項目,但要按先後次序列出;顯示 HTML 標籤校隊後備名單: 1. 陳大文 2. 李志成 3. 尹亮燦 校隊後備名單:陳大文李志成尹亮燦XB1 在互聯網上演示資訊 P. 3g) 使用框架框架可以把瀏覽器視窗分割為幾部份,每部份(框架)會顯示不同的網頁內
5、容。因此網站內的選單或導覽列可以放在一框架內,而內容可以放在另一個框架內,當瀏覽不同網頁時,瀏覽者仍可使用選單。不過有些瀏覽器不支援框架,在這情況下,網站要用標籤來提醒瀏覽者,另外也需要編寫不用框架的網頁來滿足該批用家的需求。h) 提供可供下載檔案的詳情當網頁連結到 _時,應提供詳細的資料說明 (例如:_) ,讓瀏覽者可以預計_下載所需時間_、決定是否有_軟件、插件_來開啟。i) 使用有意義並能配合內容的連結網頁上提供連結的用意是讓瀏覽者按自己的需要去連結,所以連結時所用的文字或圖形必須要_有意義_ 並能 _反映實況_。例如:連結至本校網頁,應該用_作連結,而不該用_。j) 硬件限制一些電腦處
6、理能力較弱及頻寛較弱的環境,瀏覽網頁需要 _。電腦處理能力取決於: 。k) 平台的兼容性平台是指_,平台上的_與_的兼容性,可影響瀏覽網頁的效果,例如:在 IOS 平台上的 Safari 瀏覽器不能播放 Flash 動畫。l) 為方便瀏覽者列印而把網頁內容安排在合適的結構中不適當地安排網頁時,列印會造成一頁內容分兩頁列印、列印了一些不必要的文字或圖形等等;要解決列印問題,可以製作專供列印的網頁版本,即是長闊的顯示剛剛適宜列印,而且沒有框架。m) 適當地嵌入圖形、聲音檔案及動畫在頻寬不足的環境,網頁應盡量使用文字表達,減少圖形、聲音檔案及動畫;在頻寬充足的情況(例如:10Mbps) ,網絡不算太
7、繁忙(例如:100台以下客戶接達) ,網頁可以適量地使用圖形、聲音及動畫(當然,仍然要考慮檔案本身的大小及檔案的類別) 。如何衡量檔案質素和下載時間?XB1 在互聯網上演示資訊 P. 4n) 提供回饋的渠道網頁若只是顯示資訊,是一種單向和靜態顯示。若要使網頁能與瀏覽者有雙向互動的交流,必須加入一些回應渠道,例如:_、_、_和_。優點 缺點電郵 設定簡單 不能公開、瀏覽者之間沒有互動留言板/討論區 所有人皆可閱讀 建立較困難5. 顧及不同的使用者a) 其他可取得互聯網上資訊的方法i) 掌上電腦(Palm, Pocket PC)上的瀏覽器可瀏覽網頁,只是屏幕較細小。ii) 手提電話(WAP 的全名
8、是 Wireless Application Protocol ,即是無線通訊應用協定,這種技術能讓手提電話與互聯網結合起來)iii) 其他家庭電器(智能家居)b) 視障人士的協助工具i) 點字顯示器 將屏幕上的文字轉化成盲人凸字。ii) 屏幕閱讀軟件 - 將屏幕上的文字轉化成聲音。iii) 屏幕放大軟件 將屏幕上的資訊放大顯示,適合弱視的人士。c) 無障礙網頁設計指引 (http:/www.w3.org/WAI/ )互聯網協會屬下的分支互聯網可達性創制權(WAI)已發表了無障礙網頁的設計指引,指引是提醒網頁設計者顧及傷殘人士的需要。i) 網頁上的連結或選單可完全用鍵盤操作ii) 網頁不能只靠某特定硬件來瀏覽iii) 如果網頁是以圖形作連結,必須提供相應的文字連結iv) 若網頁要求用戶在特定時間內輸入,也要提供另一組網頁是不限時間v) 在網頁提供提示,幫助用戶瀏覽vi) 背景應當保持單一的純色色彩vii) 背景與文字有適當的對比viii) 確保在黑白屏幕瀏覽時,也能分辨文字與圖片ix) 網頁使用相對字體x) 為網頁上的圖形加上文字描述(ALT)xi) 避免用引起混亂的框架xii) 為不能讀取框架的用戶,提供框架的文字內容xiii) 若有非 HTML 的元件,便要提供相應的純 HTML 的網頁xiv)保證表單可在純文字瀏覽器中正確顯示