|
|
網頁設計是指使用標記語言(Markup Language),通過一系列設計、建模、和執行的過程將電子格式的信息通過網際網路傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。 (資料來源:Wiki)
(1)確認對象( 網頁要給誰看的?)
(2)主題與網頁架構(風格、版形、樣式、想法),多看別的山上的石頭
gogle.com 美國雅虎 us.yahoo.com 台灣雅虎 tw.yahoo.com 我的 Wix 網站 tsaiwn.wixsite.com/tsaiwn
育達 ydu, 台大 ntu, 交大 nctu, 清大 nthu, 中央氣象局 cwb
MIT 麻省理工學院 www.mit.com.tw 哈佛大學 http://www.harvard.edu/
小米台灣官網 mi.com IBM 公司 ibm.com HP 惠普公司 hp.com
(3)網頁內容(圖文、編排),根據內容設計版面
參考以下這篇看看別人經驗:
第二十課 怎麼開始網頁設計?
http://ithelp.ithome.com.tw/articles/10133833
23 steps to the perfect website layout
http://www.creativebloq.com/web-design/steps-perfect-website-layout-812625
These principles will help you to avoid common mistakes and refine your workflow when designing website layouts
新的做法是儘量利用 <DIV> 搭配 CSS 樣式來規劃版面 ! ! !
原文出處: http://kimix.name/design-to-rwd/
--- by Kimix 2014/12/03 摘要:
... 切版雖死,取而代之也有很多新的工具,可以不需要懂代碼,和過去的一些網頁編輯工具一樣,拖拉一下就可以輸出HTML而且還可以支援RWD,很簡單的畫面那倒是不錯的,假設你想要設計比較複雜和多功能的網頁,那麼還是好好的學習代碼,畢竟泡麵只是代餐,不能長期吃的。
該文章參見 http://kimix.name/design-to-rwd/
蔡神註:
其實也不能說網頁切版已死,如果一定要說則應該說切圖做法已很少人使用。
因為現在規劃網頁版面也算一種切版,
就是說規劃網頁版面的做法隨著網頁技術的進步,
從以前的Frame簡單分割版面、再到利用Table結合切割圖片、一直到現在最流行的DIV+CSS切版。
不過,如果你堅持要用切割圖片的切版做法,
這有詳細教學影片(by lin chinlu):
DW網頁設計基礎觀念+網頁切版+CSS模版套用入門教學_2.45小時版(lin chinlu)
https://youtu.be/hyfKFj9Plqw
(包括用 PhotoImpact 切圖 和 用 PhotoShop 切圖)
以前所謂網頁的切版(割圖),簡單的說就是要把由設計師所編排出的設計圖轉換成網頁,
或者說轉換成可讓瀏覽器(Browser)閱讀的排版文本(就是HTML文件)。
用網頁技術的觀點來說,就是把整張圖片切割成許多小圖片,
然後使用沒縫隙的表格(Table)把它們接起來(利用表格的TR列和TD欄標籤)。
設計師通常使用PhotoShop(Adobe的)或PhotoImpact(台灣友立資訊開發後來2005年被美商英特維 InterVideo併購,之後InterVideo在2006年又被Corel以1.96億美元併購,大約台幣六十億), 所以在PhotoShop和PhotoImpact都有支援網頁切版的功能,切圖之後都可生出HTML網頁檔案, 然後你可以用文字編輯器如Notepad或網頁編輯器如DreamWeaver把HTML網頁檔案匯入修改。
自適應網頁設計/響應式網頁設計
所謂的RWD(Responsive Web Design)直接翻譯是「響應式網頁設計」,又稱為「自適應網頁設計」, 是一種能同時支援電腦與行動裝置的網頁設計技術。
RWD主要是透過CSS、畫面寬度百分比計算的概念來製作一個網站, 使得該網站會依據使用者使用裝置的瀏覽器尺寸來調適版面的配置和排版方式, 讓不同裝置平台的使用者都能正常且正確地瀏覽網站。
其實用 WeeBLY.com 製作的網頁就是符合 RWD 設計的網頁, 你可以用手機開啟瀏覽器連入看看WeeBLY的網頁, 或是 在 PC 上把瀏覽器拉小拉大看看有何變化 ? !
參看維基百科(Wikipedia) https://zh.wikipedia.org/wiki/回應式網頁設計
讓您的專業知識有行有市
2016年的新興網路媒體,只要動動手指頭,幾分鐘內馬上打造出您的專屬媒體王國
任何人都可以使用。Bootstrap不是只有好看,它在目前主流桌面瀏覽器上有極佳的表現(包含IE7!)。在平板電腦與智慧型手機瀏覽器經由 嚮應式CSS 一樣不錯。
豐富的特色。
12列嚮應式 網格 、豐富的元件、JavaScript外掛 、佈局、表單控制項、還有 基於網頁客製化 工具。
更多基於Bootstrap建立的網站範例可看以下網址:
https://kkbruce.tw/bs2/GettingStarted#examples