Flash Player將於2020年12月31日結束生命週期,Google Chrome與微軟Edge/IE瀏覽器將同時不再支持Falsh,HTML5時代全面來臨!
Adobe公司的Flash曾是網路多媒體創作的重要工具。過去20年來,許多網路影音、遊戲、互動媒體都依靠Flash開發,Flash也曾是幾乎每台機器必裝的軟體。微軟在2007年曾試圖推出Microsoft
...
Adobe公司的Flash曾是網路多媒體創作的重要工具。過去20年來,許多網路影音、遊戲、互動媒體都依靠Flash開發,Flash也曾是幾乎每台機器必裝的軟體。微軟在2007年曾試圖推出Microsoft
...
NotePad++ 是一套自由軟體的純文字編輯器用來取代 Windows 記事本的工具,由台灣人侯今吾獨力研發基於同是開放原始碼小巧且有效率的代碼編輯器。該軟體以GPL 許可證下的自由軟體開發專案採用 win32 api 和 STL 以 C++ 程式語言撰寫成,並且選用功能強大的編輯模組 Scintilla,有完整的中文化介面及支援多國語言撰寫的功能(採用萬國碼 UTF-8 技術)。
它的功能比 Windows 中內建的記事本(Notepad)強大,除了可以用來製作一般的純文字的說明文件,也十分適合用作撰寫電腦程式的編輯器。操作方式與記事本幾乎相同。而它並不僅僅只是一套記事的工具而已,還可以替許多的程式語言的語法上色,且有半透明視窗的效果,是撰寫程式的好幫手。而此軟體支援 Unicode,也可以開啟大型檔案,幾乎不太會
...
BlueGriffon 支援了最新穎的網頁技術,包括 HTML5 版面設計、表單及媒體標籤、ARIA、CSS3;以及 SVG 的過場動畫(transition)、變形、陰影等效果……總之族繁不及備載啦!支援HTML5/CSS3的其中一個好處是可插入視頻和音頻檔案,也可支援可縮放向量圖形(Scalable Vector Graphics,
...
一個資料表有一個唯一名稱,並有行和列組成。
使用 MySQLi 和 PDO 創建 MySQL 資料庫的資料表
CREATE TABLE 語句用於創建 MySQL 資料表。創建表前,我們需要使用 use myDB 來選擇要操作的資料庫:
use myDB;
我們將創建一個名為 "MyGuests" 的表,有 5 個列: "id", "firstname", "lastname", "email" 和 "reg_date":
CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date
... 範圍:十進制0-127,十六進制0020-007F。
字符集與原來的ASCII 字符集相同。
如果您想要在HTML 中顯示一個特殊的字符,您可以使用下表中的HTML 實體。
如果字符沒有HTML 實體,您可以使用十進製或十六進制引用。
實例
<p>我的名字是 Johnny "Bang" Johnson<p>
<p>我的名字是 Johnny "Bang" Johnson<p>
結果如下:
我的名字是 Johnny "Bang" Johnson
我的名字是 Johnny "Bang" Johnson
字元 | 十進位 | 十六進位 | 實體 | 名稱 |
---|---|---|---|---|
32 | 0020 | 空格(SPACE) | ||
! | 33 | 0021 | 感嘆號(EXCLAMATION MARK) | |
" | 34 | 0022 | " | 引號(QUOTATION MARK) |
# | 35 | 0023 | 數位記號(NUMBER |
在 HTML 4.01 中,ISO-8859-1 是預設的字元。
ISO(全稱 International Standards Organization)為不同的字母/語言定義了標準的字元集。
在本頁面底部列出了 ISO-8859 的不同變體。
ISO-8859-1 的第一部分(實體編號 0-127)是原來的 ASCII 字元集。它包含數位、大小寫英文字母和一些特殊字元。
在 ISO-8859-1 中,未使用從 128 到 159 的編碼,但是很多瀏覽器會顯示 ANSI(Windows-1252)字元集的字元,而不是什麼都不顯示。
ISO-8859-1 的第二部分(編碼 160-191)包含了常用的特殊字元。
字元 | 實體編號 | 實體名稱 | 描述 |
---|---|---|---|
  | | 非間斷空格(non-breaking space) | |
¡ | ¡ | ¡ | 倒置感嘆號(inverted exclamation |
在這一章中,我們將講解Bootstrap 底層結構的關鍵部分,包括我們讓web 開髮變得更好、更快、更強壯的最佳實踐。
HTML 5 文檔類型(Doctype)
Bootstrap 使用了一些HTML5 元素和CSS 屬性。為了讓這些正常工作,您需要使用HTML5 文檔類型(Doctype)。因此,請在使用Bootstrap 項目的開頭包含下面的代碼段。
<!DOCTYPE html>
<html>
....
</html>
如果在Bootstrap 創建的網頁開頭不使用HTML5 的文檔類型(Doctype),您可能會面臨一些瀏覽器顯示不一致的問題,甚至可能面臨一些特定情境下的不一致,以致於您的代碼不能通過W3C 標準的驗證。
移動設備優先
移動設備優先是 Bootstrap 3 的最顯著的變化。在之前的Bootstrap
...
PHP 中的$_GET
和$_POST
變量用於檢索表單中的信息,比如用戶輸入。
PHP 表單處理
有一點很重要的事情值得注意,當處理HTML 表單時,PHP 能把來自HTML 頁面中的表單元素自動變成可供PHP 腳本使用。
實例
下面的實例包含了一個HTML 表單,帶有兩個輸入框和一個提交按鈕。
form.html 文件代碼:
<html>
<head>
<meta charset="utf-8">
<title>PHP表單和用戶輸入教程</title>
</head>
<body>
<form action="welcome.php" method="post">
名字: <input type="text"
...
什麼是Bootstrap?
Bootstrap是一組用於網站和網路應用程式開發的開源前端(所謂「前端」,指的是展現給終端使用者的介面。與之對應的「後端」是在伺服器上面執行的程式碼)框架,包括HTML、CSS及JavaScript的框架,提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件,旨在使動態網頁和Web應用的開發更加容易。
Bootstrap 歷史
Bootstrap原名Twitter Blueprint,由Twitter的Mark Otto和Jacob Thornton編寫,本意是製作一套可以保持一致性的工具和框架。在Bootstrap之前,開發介面需要使用不同的程式碼庫,這樣很容易導致不一致的問題,從而增加了維護的負擔。Twitter開發者Mark
...
GET 與 POST 有寫過網頁表單的人一定不陌生,但你了解什麼是 GET 與 POST 嗎!? 現今的網頁設計工具相當的發達,甚至不需要接觸 HTML 語法就能完成一個規模不小的網站,漸漸地很多人都忘記了 HTTP 底層的實作原理,造成在發生錯誤的情況下無法正確進行偵錯。
早期在撰寫 HTML 表單語法時,都會寫到以下的寫法,然而大部分的程式設計師都會採用 POST 進行表單傳送。
<form action="" method="POST/GET">
</form>
然而在我們的網頁程式中要獲取表單的變數只需要呼叫系統已經封裝好的方法即可,像是 PHP 使用 $_REQUEST、JAVA 使用 getParameter()、ASP 使用 Request.Form() 這些方法等等。
由上述的方法看來,似乎用 POST 或 GET 好像不是很重要。許多網頁程式設計師對於表單 method 用法的記憶為"POST可以傳送比較多的資料"、"表單傳送檔案的時候要使用
...
色彩的運用在網頁中的作用真是太重要了,有些網頁看上去十分典雅、有品位,令人賞心悅目,但是頁面結構卻很簡單、圖像也不複雜,這主要是色彩運用得當,因此我特地將本來屬於圖像製作內的色彩作為一個獨立攔目來介紹。
一、色彩基本概念
自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色,而其他所有顏色均屬於彩色。任何一種彩色具有三個屬性:
Responsive
...
目前雙欄式佈局仍然是網頁常見的佈局之一,其他還有像是單欄式、三欄式。這個概念在很早之前就有了,屬於設計領域,不過隨著技術的演變,實做也有些不同,比如之前提到的article、header、footer、aside
等等就是在語義上有意義的標籤。header、body、footer也就是從縱面來看,分成頭部、身體和腳部,不只是在網頁主體上(Document),表格(table)有th、tr之分,Bootstrap的CSS框架中也有不少小物件可拆分成這三個部分。
從橫軸面來看,最簡單的是單欄是佈局,也就只有一個主體,手幾等螢幕較小的裝置也可以顯示。多含有邊框訊息(aside)的訊息的雙欄式佈局,是我目前個人最常見到的,於電腦等較大型顯示裝置下的佈局方式。此外,還有三欄、多欄式佈局,在這以外的佈局方式也有不少。舉幾個例子:知名內容管理軟體(CMS)WordPress的預設初始佈局(主題),當前應該是雙欄是佈局;另一個值名項目管理工具Trello,就有點多欄式的感覺;Google
...
網頁程式是指使用網頁程式語法互動式的網頁,一般又稱動態網頁,動態網頁是指網頁的內容是否可根據某種條件的改變而自動改變。 如計數器就是動態的,當有人點擊我們的網頁時,計數器的數值會自動累計增加;論壇也是動態的,當用戶在論壇上發佈訊息時,網頁內容會自動更新,顯示出新發佈的信息及相關回覆等等..。 需要注意的是GIF動畫和Flash動畫是靜態的。因為,這些動畫一旦製作完成後,就不會再改變了,儘管Flash動畫可以響應用戶的事件。
在WebServer端,有:
有很多理由都能說明為什麼我們應該寫出清晰、可讀性好的網頁設計程式。最重要的一點,程式您只寫一次,但以後會無數次的閱讀。當您第二天回頭來看您的網頁設計程式碼時,您就要開始閱讀它了。當您把程式碼拿給其他人看時,他必須閱讀您的程式碼。因此,在編寫時多花一點時間,您會在閱讀它時節省大量的時間。現在,讓我們把每個小點展開來詳細講一下。
在網站尚未規劃前,需先想清楚公司或品牌的定位再來選擇最有效的網站類型,每一種類型往後皆有不同的 網路行銷 策略要走,如能在開始設想前好好地思考並加以掌握,在網路上將會少走很多的冤枉路喔!以下我們提出與整理幾種網站類型,提供給想架設網站的老闆們參考。
一、個人網站
依照自己的興趣、喜好建立起自己專屬與人分享交流的網站,類型相當廣泛,可以是教學網站、個人工作室、小型商業交易網站...等。
二、企業形象網站
此類型的網站主要是以依建立的企業標準CIS規範來設計或客戶想在網路上嚐試作創新設計,多半是以服務或商業貿易型的類別為主要業務範圍,無主要實體商品販售,用自己的專業知識來與客戶建立起關聯。需在網路上建立起自己的專業形象與個案研究,來取得大眾的認同與信賴感。例如:翻譯社、法律事務所、專業諮詢顧問公司、金融、保險、法務、財會、醫療、美容、徵信、房仲等行業。 網頁設計 方面需以建立良好的視覺動線,以及注重簡約大氣的形象設計表現出企業特色。
......
SEO網站優化細節決定成敗!網站SEO優化做得好不好,對一個網站的瀏覽量影響很大,別人做網站,您也做網站,特別是企業網站建設,差異就在於瀏覽量,網上的生意就決定於此。
為什麼別人花與您一樣的錢去架設網站能有接不完的訂單,而您的網站卻無人訪問?原因就在於細節沒有做好。特別是您的網站沒有按照搜尋引擎的友好度進行設計網站!
wedo網頁設計公司作為網站架設、網路行銷、搜尋引擎優化整體服務的專業設計公司,多年的經驗總結出網站設計時程式設計師應注意SEO網站優化的十個細節,切實可行,如果您還有更多的需要諮詢,請您來信或來電,我們竭誠為您服務。
下面您就瞭解這十個SEO細節,相信對您有好處!
一、連結的一致性
搜尋引擎排名最主要的因素就是網站內容和連結,假如網站內部連結不一致,在很大程度上直接影響著網站在搜尋引擎中的排名。例如長沙自助公寓網巡覽列中的“首頁”連結,程式師在開發時可能會有以下幾種連結代碼;
1、<a href="http://www.wedo.com.tw">首頁</a>;
2、<a
隨著CSS3和HTML5建站技術的發展,動效在網頁設計中的作用越來越顯著。與靜態界面相比,動態的轉變更符合人們的認知體系,可以有效降低用戶認知負載。這是因為,在網站界面使用動畫效果能讓元素的變化、界面的轉變、層次結構之間的關係更加清晰自然。從某種程度上來說,動效還是用戶交互的基礎。那麼,什麼樣的動效才是有效的呢?小飛瀏覽了不少網站,總結出了5個核心準則,現在一起來看一下吧。
一、自然流暢
響應式網頁設計已經是如今當之無愧的標準配置了,我們需要響應式網站的技術來應對日漸碎片化的屏幕尺寸,網頁設計師也力圖做好這件事情。而網頁中的圖片和圖庫的響應式設計,也是其中的重點難點。它們是網頁中最常見,也是最直觀可見的元素。打開一個漂亮精緻的網站,然而其中的圖片和圖庫看起來怎麼都和頁面不匹配,這樣的情況恐怕是最讓人抓狂的了。
如果要設計好響應式的圖片和圖庫,今天接下來要聊的7個技巧,興許能給你提供一個明確而係統的思路。它們並不涉及到具體代碼實現,更多牽涉到設計過程和處理手法,做好了這些工作,具體實現起來就不難了。
......
什麼叫做響應式佈局?
也即是響應式Web設計。響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式佈局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,隨著現在各種終端的快速發展,做出一些能夠適應不同分辨率、不同平台、不同屏幕大小的網頁尤為重要,這不僅使得自己的網站適應不同終端的能力更強,同時也為用戶帶來了良好的體驗。而且隨著目前大屏幕移動設備的普及,用大勢所趨來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。
怎樣實現響應式佈局?
對於這個問題,我們可以通過CSS3中的Media
...
對於Web開發者來說,不管什麼細分方向,比如數據可視化、網站系統、電商網站等等,都會涉及到一個難題“動畫”。因為動畫關係到Web開發的兩個比較重要的點,一是視覺效果,二是用戶體驗,通過酷炫動畫效果可以給視覺加不少分,同樣,恰到好處的微動效也會給用戶體驗帶來不錯的驚喜,基於此,我們的Web動畫該如何實現,他有哪些實現方式呢?
動畫形式大概梳理了下,動畫有不止以下幾種形式:
一、CSS3動畫
二、JS動畫
三、Canvas動畫
四、SVG動畫
五、以Three.js為首的3D動畫
針對以上動畫形式,我們來簡單介紹下吧。
愛也好,恨也好,視差效果已經遍布web之上了。當你用的巧妙的時候,它可以給應用增加深度和隱喻效果。但問題在於實現一個高性能的視差效果是一個很有挑戰的工作。在這篇文章裡,我們將討論如何構造一個高性能的視差效果,當然同樣重要的是還得跨瀏覽器。
摘要
...
網站的內容是網站訪問者停留時間的決定要素,內容空泛的網站,訪客會匆匆離去;只有內容充實豐富的網站,才能吸引訪客細細閱讀,深入瞭解企業的產品和服務,進而產生洽詢訂單。
一般人容易過度重視如何提高網站的點擊量而忽略了提高網站投資報酬率的另一個同等重要因素 - 內容最佳化。 讓您花費在發展線上行銷的時間、金錢和努力值回票價。 設計一個會令訪客採取行動的網站。
每個人都有理性與感性的兩面,換句話說,每個用戶都有其理性需求與感性需求,網站內容要想打動訪客,歸根結底,無非是8個字:曉之以理,動之以情。
一、 曉之以理
曉之以理,即以理性的語言向客戶透徹介紹產品與服務,並清晰地指出企業的優勢所在,讓客戶可以明確地選擇。然而,“理性”不等於枯燥,要讓客戶信服,採用以下方法,可以更好地來向客戶講“理”。
1、 圖片說話。
俗話說,一圖勝千言,以其大篇幅地介紹公司的規模、架構、企業文化,不如採用圖片來與客戶溝通,同時配合flash動畫展示。好的圖片/動畫可以令客戶更真實地瞭解企業,並產生信賴。
2、
Google Web Fonts(簡稱webfont)亦Google網頁字體,網頁字體的快速和易於使用的每個人,包括專業的設計師和開發商。
我們認為,不應該有任何作出了巨大的網站障礙。
Google的目標是創建一個世界的核心Web字體的目錄,並提供API服務,使任何人都可以帶來質量的排版的網頁。
API服務Google的服務器上運行。
他們快速,可靠和測試。
Google提供免費的服務。
它可以在幾秒鐘內的網站加入Google的Web字體。
網頁字體建一個網站,是一個更美觀,更具可讀性,更容易和更加開放的網絡。
所有的字體都是開源的。這意味著你可以自由與朋友和同事分享您的收藏夾。
您甚至可以改善或定制,並與原設計者。您還可以使用在每一個您想要的方式,私人或商業– 打印,您的計算機上,或在您的網站。
Google正與世界各地的設計師,出版質量為Web字體的設計。
如果您設計的字體,想貢獻自己的設計,請與我們聯繫。
在目錄中的字體,可以成為非常受歡迎,百萬計的人們每天看到的。
以前的網頁字型只能設定為電腦通用的字體例如Arial,
現在部落格普及率時在是高的嚇人,幾乎是人手一個,甚至除了有部落格外,也有其他類型的網站,但是有些人總是會讓自己的網站變得更優秀,而去學習別人網站,當然學習是一種正確的態度,但若當使用者熱情與積極的學習態度發揮過頭時,這是不是變成了模仿呢?若是更嚴重一點,是不是變成了抄襲?
學習是一件好事。
同一個的class選擇符可以在一個文檔中重複出現,而id選擇符卻只能出現一次;對一個標籤同時使用class和id進行CSS定義,如果定義有重複,id選擇符做的定義有效,是因為ID的權值要比CLASS大。
一個相容性調整(IE和Mozilla)的笨辦法:
初學可能會碰到這樣一個情況:同樣一個標籤的屬性在IE設置成A顯示是正常的,而在Mozilla裡必須要設成B才能正常顯示,或者兩個倒過來。臨時解決方法:選擇符 {屬性名:B !important ; 屬性名:A;} 。
如果一組要嵌套的標籤之間需要些間距的話,那就留給位於裡面的標籤的margin屬性吧,而不要去定義位於外面的標籤的padding,li 標籤前面的圖示推薦使用background-image 而不是list-style-image,IE分不清繼承關係和父子關係的差別,全部都是繼承關係。
在給您的標籤瘋狂加選擇符的時候,別忘了在CSS裡給選擇符加上注釋。等您以後修改您的CSS的時候就知道為什麼要這麼做了。
...
色彩的運用在網頁中的作用真是太重要了,有些網頁看上去十分典雅、有品位,令人賞心悅目,但是頁面結構卻很簡單、圖像也不複雜,這主要是色彩運用得當,因此我特地將本來屬於圖像製作內的色彩作為一個獨立攔目來介紹。
1、色彩基本概念
自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色,而其他所有顏色均屬於彩色。任何一種彩色具有三個屬性:
(1)色相(Hue):也叫色澤,是顏色的基本特徵,反映顏色的基本面貌。
(2)飽和度(Saturation):也叫純度,指顏色的純潔程度。
(3)明度(Brightness或Lightness或Luminousity):也叫亮度,體現顏色的深淺。
非彩色只有明度特徵,沒有色相和飽和度的區別。
2、色彩的三原色
...
Cascading Style Sheets(層疊樣式表/串樣式列表),簡寫為CSS,由W3C定義和維護的標準,一種用來為結構化文檔(如HTML文檔或XML應用)添加樣式(字體、間距和顏色等)的計算機語言。本文說明我開始使用CSS佈局方法以來所有的技巧和相容方案,我願意把這些與您分享,我會重點解釋一些新手容易犯的錯誤(包括我自己也犯過的),如果您已經是CSS高手,這些經驗技巧可能已經都知道,如果您有更多的,希望可以幫我補充。
一. 使用css縮寫
使用縮寫可以幫助減少您CSS檔的大小,更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫語法總結》,這裡就不展開描述。
二. 明確定義單位,除非值為0
忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中您可以只寫width="100",但是在CSS中,您必須給一個準確的單位,比如:width:100px
人常常感受到色彩對自己心理的影響,這些影響總是在不知不覺中發揮作用,左右我們的情緒。色彩的心理效應發生在不同層次中。有些屬直接的刺激,有些要通過間接的聯想,更高層次則涉及到人的觀念、信仰,對於藝術家和設計者來說,無論哪一層次的作用都是不能忽視的。
對於網頁設計者來說,色彩的心理作用尤其重要,因為用網路是在一種特定的歷史與社會條件的環境下,即高效率、快節奏的現代生活方式的條件,這就需要做網頁時把握人們在這種生活方式用網路的一種心理需求。
作為網頁設計師來說,做到有針對性的用色是相當重要的,因為網站往往是各種各樣的,大公司的、政府組織、體育組織、聊天的、新聞的、個人主頁等等,不同內容的網頁的用色應是有較大的區別,所以要合理的使用色彩來體現出網站的特色,這是高明的做法。
例如:做公司的網頁,就不能僅僅使用一些不著邊際的顏色來吸引人,而要讓人一看到這個網站的用色就立即明確該公司的主題。
...
樣式分類的重要性
網頁可以被視為是用來呈現資訊的文件集,也能被視為一套複雜的應用程式。 這兩種面像都需要具語意的HTML標籤來描述要呈現的內容,也都能從 功用型的樣式設定法(intent-based styling) 上獲益。功用型樣式設定法有助於創建出更好的架構,將樣式組織成不同的分類能讓樣式碼更容易複用,也更容易達到預期的效果。
樣式正規化
瀏覽器有其內建的預設樣式表(stylesheet),稱之為 使用者代理人樣式表(user agentstylesheet) ,瀏覽器會將這些預設樣式套用到HTML文件上。
樣式正規化(normalizing styles) 提供不同元素的屬性預設值,若沒有預設值的話不同的瀏覽器會為網頁中的元素套用不同的樣式預設值。
基底樣式
基底樣式(base styles) 用來做為其他特定度更高之樣式的建構基點,他們會套用到只帶單一類型選擇器的元素上,或是由類型選擇器、組合器以及任何套用到其上的虛擬類別所形成的簡單組合上。
...
科技進步,架設網站和十幾年前比起來已經不是什麼太難的事情,但是有一個不是所有網站都可以達成的目標,就是如何建置一個真正有效用的網站。建置一個好網站是真的可以帶來商機及效益的(花多少錢反而不是重點),即使不是多麼漂亮的網站,只要是內容豐富、專業,網站的核心有注意到SEO的處理,自然搜尋引擎就會幫您很多的忙,讓您的網站曝光,而且日積月累,不用一兩個月便可看到成效。不過,這只是第一步。本文主要敘述建置網站,不論是購物網站、貿易網站或是工商服務的形象網站,從最初開始申請網址,一直到完全上線之後的所有過程,所要建立的觀念及工作重點,您可以將這篇文章視為「網站心法」。
申請網址
申請網址的重點,首要在於簡短好記,至於是多簡短,並無定論,有人說10個單字以內,有人說8個單字以內,這是見仁見智的問題。但是「好記」這是一定要的,例如: ilovekitty.com,名字還滿長的,但卻十分好記,而且一看就知道可能和Hello kitty相關的網站。還有,最好不要用到 '-'
...
「無障礙網頁」, 就是遵循無障礙網站設計之規範,提供網頁導盲磚、鍵盤快速鍵(Access Key)、網站導覽(Site Navigator)等無障礙網頁之設計,為使對滑鼠操作有障礙之人士,亦可快速瀏覽網站之任何資訊。
一、無障礙網頁可及性設計原則
網頁開發人員在規劃網站的架構、資源內容的整理和呈現的處理、網頁相關技術的取捨等相關因素時,應該依循下列四個無障礙網頁可及性設計原則。
原則一:多媒體相關資訊的可及性
每個人因為成長的過程不同,對「視覺的美」這件事的觀感也有很大的差異。
通常設計網站很大的一關會卡在視覺畫面提案這個階段,這個問題的肇因主要是因為設計師跟客戶之間的「視覺的美」溝通不良,溝通之所以不良通常是因為雙方對於視覺語言與文字的認知不同導致的,所以有時候客戶希望網站活潑、清新,這兩個名詞聽在設計師耳朵裡跟客戶的認知就有所不同,再加上設計師對您的網站所應呈現出來的視覺會有自己的認知,因此畫面提案就跟您想像的不太一樣。
假設您選擇了一個口碑不錯、值得信任的設計師,「溝通」是下一個難題。有些人會以為直接跟設計師說「我想要做一個什麼樣的網站」,設計師就能按照需求精準地做出來。許多紛爭都出現在設計師覺得已經努力認真做網站,但客戶卻覺得跟他的想法完全不同。跟設計師表達需求之前,您應該先注意以下事情:
先決定您的網站功能類型?是否使用架站軟體?
...
網站設計中有哪些關鍵技巧?在這裡告訴你:
01. 明確內容
如果你想成為一個網站設計者,並正想建一個網站的話,首先應該考慮網站的內容,包括網站功能和你的使用者需要什麼。你的整個設計都應該圍繞這些方面來進行。
02. 抓住用戶
如果用戶不能夠迅速地進入你的網站,或操作不便捷,網站設計就是失敗的。不要讓用戶失望而轉向你的對手的網站。
03. 優化內容
內容是核心。企業網站就像一本廣告冊子,網站不要使用太多大的圖片,似乎要幾個世紀才能下載完。
04. 快速下載
沒有什麼比要花很長時間下載頁面更槽糕的了。作為一條經驗,一個標準的網頁應不大於60K,通過56K數據機載入花30秒的時間。有的設計者說網頁載入應在15秒內。
05. 網站主機適時升級
...
很多朋友都想學習如何做網頁,我知道他們的意思就是說要如何用做網頁的軟體,如dreamweaver、flash、firework、photoshop等等,這些純技術的東西我不想多談,因為如今技術的發展一日千里,就是這種應用軟體也是發展升級得非常的快。
今天的很多認為是較難實現的功能也許經過軟體升級之後就可以很方便的實現。我想強調的是關於網頁排版佈局方面的必要的知識,很多初學者都忽視這方面,以為技術就能代表一切,能夠知道怎麼用這個做網頁的工具就能夠做出品質較高的網頁來。其實不然,因為軟體知識只是一種工具,就像你有了筆,但不一定能作出好的文章來一樣。很多人對技術很熟練但是做出來的網頁卻通常是照搬人家的東西,並沒有體現做網頁的水準的提高。
...
正如上面所說的,在Web網站開發中經常犯的一個錯誤是為設計者而設計網站,所考慮的是設計者的需求而不是實際使用者的需求。如果設計者忽略使用者的需求,進程模型就不能保障一個網站的品質。一定要記住Web網站設計的重要原則:
規則:設計者不是使用者。
設計者所理解的並不是使用者所理解的。作為一個設計者,您擁有Web網站的直接知識。您道資訊在哪裡以及如何安裝插入功能元件。您有最佳的螢幕解析度及瀏覽器的設置等等。您必須接受以下的事實,很多使用者並不像您一樣理解您認真設計的網站,他們的興趣甚至也與您不盡相同。考慮到使用者的興趣和期望的重要性,表面上直接讓使用者以他們希望的方式進行設計仿佛很合適。但如果您考慮到了另一個基本原則,那就不是一個好主意:
規則:使用者不是設計者。
...
如果您在網際網路上發現一個對您的工作有幫助或有參考價值的網站,您一定會將其網址告訴您的同事;如果找到您的朋友需要的資訊,您同樣記下網址告訴您的朋友;要是在飆網時偶然遇到特別有興趣的網站,您肯定加入到自己瀏覽器的書簽中,每一個上網者都會這樣做的。有許多人員設計過網站和個人主頁,這在技術實現上已十分容易,有許多幾乎不用程式設計的所見即所得的工具軟體可以利用。但是讓人們從浩如煙海的網站中,訪問瀏覽您的網站甚至為您宣傳,就不是那麼簡單,因為滑鼠和鍵盤是永遠掌握在上網者手中的。設計者如何設計出達到預期效果的網站和網頁,是需要深刻理解使用者的需求並對人們上網時的心理進行認真的分析研究。
網際網路正在改變世界,它促成了網路經濟雛形的形成,特別是電子商務正由新概念走向實用化。由於網際網路具有傳播資訊容量極大、形態多樣、迅速方便、全球覆蓋、自由和交互的特點,已經發展成為新的傳播媒體,所以全球幾乎各個企業、機構紛紛建立自己的Web網站。並且由此產生了一個新的工作崗位——網站設計者(Website
首先我們先從文章的標題來思考,選擇適合您的「網站設計公司」,而不是定義選擇適合您的「網站製作個人」或「平面設計公司」或「廣告公司」、「公關公司」、「網頁設計工作室」、「電腦公司」,條件當然是能與您直接配合網站設計公司業者,而非個人SOHO或是非網站設計主業的公司。網頁設計的產業是一個很速成的產業,充滿了很多非專業的正規網站設計公司,網站設計公司越來越多,就連做網頁設計的SOHO族都越來越多,一個人一台電腦就能做製作網頁,他們的製作費通常很便宜,但並不能提供完整的規劃與設計服務。要如何選擇適合您網站設計公司很重要,這關析的您的網站是否成功營運,因為有可能網站做不了多久,哪個網頁設計公司就倒了或是設計者已經改行做別的工作了,這樣的情況您能接受嗎?
先了解您自己的需求,也就是您建置網站主要目標為何?大致上網站類型主要有:
企業形像網站
...
家有家規,國有國法,網頁設計的價格標準,似乎是有了家規,尚無國法。每個公司、工作室開出的價格單都不同,沒有統一的標準。沒有規範,沒有對照,甚至連小小的頁字也統一不了,比如有人是以一個HTML頁面為一頁,有人則是A4紙大小為一頁。在同一地區,不同的兩個設計公司中,對網頁設計的報價往往也是不一樣的。這就導致競爭,競爭是有良性和惡性之分的。如果兩個公司之間競爭的是設計水平,那就是良性的競爭;如果兩個公司之間是爭相競低價,那就是惡性的競爭。
不管是客戶業主或是同行間最好奇的就是網站設計的報價,通常學生接案或是SOHO接案可能價格比較起伏不定,但是其實大概都會有一個範圍在,通常的收費也可以用以下標準略為計算。首先從大部分客戶角度上劃分,網站大致可分為企業形象類型、程式功能類型或兩者綜合類型。企業形象類型則是打造企業形象品牌,使產品品牌在網上傳播到世界各地;程式功能類型就是實現會員管理、產品資訊管理、線上訂購、線上討論互動等功能。
...
線上諮詢
諮商委託設計項目、屬性、數量與範圍。了解網頁製作用途,與其他廣告媒體之搭配等相關事宜。由客戶提供網頁製作相關資訊、文件、描述內容等,全盤性了解網頁製作事宜。
瞭解客戶需求,建立製作共識並報價
根據諮詢議題,確立網站架構,網頁製作設計屬性、規模、數量與程式元件功能品項。
簽訂委託網站設計製作正式合約
根據雙方議定委任內容與事項,線上簽立合約,客戶給付網頁設計製作費用訂金。
網站資料準備與彙整
根據合約中的網站架構,將所需的內容文稿及圖檔資料蒐集整合,並確定網域名稱。
確立網站主版型設計風格
...
設計一個網站首先遇到的問題就是定位網站主題,所謂主題也就是您的網站的題材。網路上的網站題材千奇百怪琳琅滿目,只要您想的到就可以把它製作出來。下面是美國《個人電腦》雜誌(PC Magazine)評出的排名前100位的全美知名網站的十類題材,對我們有一些參考價值。
第1類:網上求職
第2類:網上聊天/即時資訊 / ICQ
第3類:網上社區/討論 / 郵寄清單
第4類:電腦技術
第5類:網頁/ 網站開發
第6類:娛樂網站
第7類:旅行
第8類:參考 /資訊
第9類:家庭/教育
第10類:生活/時尚
每個大類都可以繼續細分,比如娛樂類再分為體育 / 電影 / 音樂大類,音樂又可以按格式分為MP3、VQF、Ra,按表現形式分古典、現代、搖滾等。以上都只是最常見的題材,還有許多專業的、另類的、獨特的題材可以選擇,比如中醫、熱帶魚、天氣預報等等,同時各個題材相聯繫和交叉結合可以產生新得題材,例如旅遊論壇(旅遊+討論),經典入球播放(足球+影視)按這樣分下去,題材可以有成千上萬個,您不會再為題材重複,難以選擇而煩惱了吧!
...
網站設計是一門專業的工作需要眾多人員的分工合作才能成就一個完整而實用的網站,製作網站除了找尋委託專業的網頁設計公司、將製作與設計交由專業人員執行之外,自己企業本身也應於先前對自己企業本身的網站內容有所規劃與準備。
對網際網路應有基本認識
就算您打算聘用網頁設計公司替您設計網站,並不代表可以完全放心把工作交給別人,您需要對網際網路應有基本認識。
絕對擁有網域名稱註冊權,網址註冊時網域名稱註冊單位不會核實登記者的身份,只以登記人填寫的資料為準。如果別人替您登記時用了自己而非您的資料,若您想取回網址的擁有權便要對方同意才可以。當您想取回擁有權,99% 都是不滿意對方吧,有多少麻煩不難想像。所以即使委請他人註冊網址,必定要確認登記註冊擁有人是您自己的身份。
釐清網頁需要為您達到的目的
一般來說,我們做了一些網頁的分類,如形象網站、購物網站...建議您可以先逛一下我們的網站,看一下哪些網站是您比較偏向的類型?哪些網站是您喜歡的風格?
...
任何公司行號或機構,在架設網站之前,都應該認真想想,究竟為什麼要建一個網站?希望從網站上得到什麼呢?不是您今天做,明天就一定會為營運銷售做出巨大貢獻。想做一個復合您需求的好網站,而且想把她長久的經營下去。那應該如何思考這個網站企劃呢?這個網站整體定位與架構內容呢?
首先第一點,我覺得您要有您的idea,就是您的想法,也是您的服務內容,您要做什麼內容的網站。有了這個想法後,就可以把您的網站的服務定位確定下來。那現在是不是就可以進入網站製作開發階段了呢?不是,在您有了您的idea後,您還需要有了個plan(計劃),誠心的建議您參考以下的步驟來思考您的建站計劃。
一、了解自己(公司的文化背景及產業優勢)
• 請進行貴公司的產業概況的描述。
• 請進行對市場競爭者和對他們網站的了解。
• 請對網站建置專案小組進行任務指派及網站目標的說明。
• 請分析貴公司進行此網站建置的資源分析。
二、網站整體定位與服務任務
•
我們針對每一個客戶信賴的託付,提供最完善的規劃服務,從一開始客戶需求的聆聽、解決方案的建議、結構規劃、動線設計、程式與視覺的完美搭配、 一直到網路行銷的分析建議等等,在合理的預算提供最完整的服務,客戶的需求將可以得到最完整的解決。您不需要擔心要如何開始規劃網站、如何想單元、如何準備資料等等...,因為這都是WeDo網頁設計規劃公司的專業及工作範圍,何需您操心呢?您不需要花時間到處詢價,也不需要有任何的電腦技術,公司更不用花一筆預算聘請網頁設計的人才。一切只要交給WeDo網頁設計規劃公司,我們將提供您最專業的技術和豐富的經驗,讓您在有效的預算內完成理想中的好網站。
無障礙網站九十條相關的檢測要點
1.1:H101000圖片需要加上替代文字說明
說明:在瀏覽器無法顯示影像時,可以利用ALT屬性所指定的說明文字來代替影像。例如協助視覺障礙者增進網頁文字及影像視覺可讀性(visual readability)之螢幕閱讀器(screen reader);螢幕閱讀器可以自動將ALT屬性所指定的說明文字解譯至語音合成器(speech synthesis)作語音輸出,或解釋至點字顯示器(brsille display)顯示點字。
1.2:H101001對於applet提供替代文字說明
...
無障礙網站十四條規範
本規範為了讓網頁開發者能夠對網頁開發在可及性設計的考慮上有明確的規範條文,特參考 WAI 組織在相關無障礙網頁標準的設計,以 十四條規範來引導 網頁開發者設計可以讓所有人士都可以使用的無障礙網頁。
規範一:對於聽覺及視覺的內容要提供相等的替代文字內容
網頁開發者在網頁中遇到非文字的聽覺或視覺內容時,如果能同時提供同等內容的替代文字,將可使聽覺障礙或視覺障礙者能夠無礙地瀏覽和獲取這些資訊內容。
視覺的內容包括圖像、圖表、動畫等,而聽覺的內容則包括音樂、語言和各種音訊。本規範所指的同等內容是指能描述視覺或聽覺內容的一段文字敘述。譬如一個連接到下一頁的向右箭頭的圖像,「下一頁」是適當的替代性文字;譬如一個煙火的動畫,「有煙火聲效的煙火場景動畫」,則是適當的替代視覺與聽覺的內容。
...
認識無障礙網路空間
無障礙 您瞭解嗎?這字眼常常讓人誤解,一般人會認為「啊~這跟我無關!」,有這樣想法的您就錯了。您一定看過無障礙坡道吧!它不僅協助身障人士,對於其他人也是一項福利,怎麼說呢 ?
第 1 頁,共 2 頁
服務電話:07-3639297
傳真專線:07-3636450
服務信箱:service@wedo.com.tw
Line ID:wedo.com.tw