Re: [綜合] 學習做網頁?
※ 引述《e04ckymadam (ckymadam)》之銘言：
: 現在有關設計的行業幾乎每一個都要求要有網頁能力
: ,以前有去補習班學過一點,就是Dreamweaver.....但
: 說實在的那只是教你拖拖拉拉排個版就叫做網頁了...
: 當然我也知道網頁沒那麼容易,拖拖拉拉那種是小朋友的做法
: 但想到網頁的相關技術還蠻多的...常常看到一些像
: ASP,PHP,Flash,JAVA,Vbscript,DHTML,資料庫.....
: 媽呀!連最基本用FrontPage做網頁都要try來try去了
: 何況上述那些技術...
: JAVA有上過幾堂,發現完全聽不懂在講什麼..狀況就像
: 統計學整學期只有最後一堂去上課時的情況...Flash.
: ..做到設簡單的action就差不多了...官方的那本ActionScript
: 雖然是中文的,但沒有幾頁看得懂...
: 我想問的是...現在"學做網頁",應該怎麼入門比較好
: 有沒有推薦的書可以參考一下?還是說應該就"技術"本
: 身去學習,例如現在有很多網頁是完全用Flash打死的
: (當然有一定的技術才能這樣搞)....
嗯…入行快三年，從小職員變成自己在家當SOHO，
應該可以說說自己的心得。
網頁設計，基本上是手工藝一般的行業，切勿與程式設計搞混。
你所說要學的那些東西，其實大概只有Flash會比較需要學到中等程度，
HTML要看得懂(未必要記，跟視覺版面對照著，可以自己檢查錯在哪即可)，
但特別是CSS需要學精，而這點你好像沒有認知到。
其他跟程式有關的，沾點邊即可——
以我而言，只需要做到要修改網頁內容或排版時，
不要搞砸了程式設計師寫好的部分就好XD
所以這時候CSS樣式格外重要吶！
因為這是讓視覺歸視覺，程式歸程式的最好方式。
全Flash的網站，視覺很炫，但Google大神神不到，這是一個致命的缺陷。
這對於講求搜尋排前、網路曝光率的商業網站來講是很傷的，
所以大部分商業網站都還是只在Banner這區塊做Flash動畫效果。
而Banner整塊用Flash沒啥不好，也很方便更新，
只要記得在footer的地方重置一份主選單的連結。
阿～對了，SWFObject是個好物！千萬要學會怎麼用。
加上從HTML設定變數ex:設定Num=1，Flash當中就可以寫當_root.Num=1時，
選單第一項會變換效果，並且呈現第一單元的主圖…之類的用法。
越說越亂@@~
有些人稱呼網頁設計為美工，聽到是會不爽，
但有些網頁設計師自甘當美工，不對自己設計的版面多費點心思，也是沒辦法。
做網頁時不能只顧慮到視覺美感，
要依據網站主題、LOGO標準色，去延伸整個色系、風格；
還要設想網路使用者慣例、視覺動線，以及網站內容主次要性，
去設計排版，切割各個功能區塊。
不過假如是要做很藝術的網站，上面這些考量都可以不管，
但就真的只是自己做了爽而已囉～
排版重點：
1.切記不要用框架頁。
目前使用者上網找資料已慣於"搜尋"，
而搜尋到的頁面，假如只是框架頁的內容部分，
他根本不會也不能回到選單去看網站其他單元。
加上框架頁好像對於視障同胞有礙，政府機關和學術單位的網站都會規範。
當不使用框架頁時，一頁網頁中，就要包含每一頁都會重複要看到的區塊ex:
Banner、主選單、copyright...etc. 不管是搜尋到哪一頁，都可以連回首頁。
2.少用table排版，多用div搭配CSS。
http://www.hsiu28.net/ 這個網站的CSS教學很好，
教觀念、教重點、教技巧，沒有多餘的廢話。
我現在可以很自豪地說，我做的網站版面撤掉CSS樣式後，
是一個結構完整，語意(HTML語法的語意)明確的純文字網站。
沒有一堆意義不明的表格跟瑣碎切割的圖片，
有助視障人士閱讀，較符合W3C規範，也比較符合搜尋邏輯的喜好。
3.使用HTML語法時，語意要正確。
比如<h1>~<h6>是表示標題的語法，
在我還不會用CSS時，我覺得這些標題太大，行距也太高，所以都棄而不用，
把一段文字用<font>改大小顏色，權充為標題；
但會CSS之後我才了解，視覺樣式都可以從CSS重新設定的，
HTML語法都是有其語意存在，不能亂用的。
雖然，我到現在還是偶爾會亂用…
版面區塊定義：
1.Banner：
我通常會把LOGO、網站名稱、主圖、Slogan、Menu都放在Flash當中。
當然還是必須要有配套措施，重覆隱藏一份主選單放在HTML碼當中。
3.Submenu：
這邊是預留給各單元的單元選單，可能只有一層架構，可能有兩層，不要超過；
若有三層架構的選單，建議第三層選單放在內文區塊置頂。
4.Content：
內文區塊，主要放置內容，但也要標示出目前所在的單元。
Title要與目前所在的Menu項目對應，Subtitle要與目前所在的Submenu項目對應。
5.其他區塊：
依據不同的網站可能會有不同的功能區塊，最常見的應該是會員登入吧～
圖示連結，常放在左選單之下做裝飾，同時也把重要內容做成成圖示連結方便點選；
功能選單，常放在Banner上方單獨一排的小連結，放Home/Contact/EN...etc.；
索引，也有人翻譯麵包屑@@~常放在內文標題之上，一小排連結，標示所在位置。
版權宣告區，我通常會重放一次主選單連結，方便使用者捲到底部可直接切換單元，
當然還會放copyright、地址電話電郵、Suggestion並提供更新Player或IE的網址。
網站建置流程：
1.洽談簽約：
主要談好網站架構、程式需求、以及軟硬體系統規格。
並依據這些需求估價，開出詳細明細。
同時也在這時就探聽好客戶喜好的風格，
甚至客戶提供幾個參考網站，可以讓我拿捏設計方向更好。
2.製作版型：
主要先依據網站架構，在紙本上排好版面各個區塊；
再依據客戶喜好風格，以及客戶的LOGO造型與色系，開始使用繪圖軟體製作版型。
大部分的人是用photoshop，可是我從以前就習慣用fireworks，好用。
希望Adobe併掉Macromedia後出的這套CS3，色彩處理可以更細膩點，濾鏡多一些，
之前fireworks比較不好的就是這兩點。
3.切割版型：
調整好所有細節之後，就可以開始切割版型啦～
這個階段其實才是考驗設計師的功力的時候。
假如隨便用table切一切，大概3個小時內可以切完吧！
用CSS的話，我自己大概會花5~8個小時。
4.製作Flash Banner：
我通常是在這階段，才區分出首頁以及內頁不同的版面配置。
首頁Banner高，意象圖大，視覺動態多；內頁Banner短，視覺動態少。
這裡就要會用CSS樣式以及SWFObject了。
5.開始製作各頁內容。
嗯…說的很亂，其實我也還要多多努力啦～
網頁設計的門檻實在很低，各行各業也都可以自己做網頁，
所以才會有老闆要求員工會做網業者佳，加上開個部落格比泡碗泡麵還方便…
因此真正要專職於網頁設計的人，要學的雜之外，還要有方向，有想法，
才能讓老闆們真正感受到何謂「閃開，讓專業的來～」，進而找上你來做網站；
而不是在徵人條件當中隨便附註一項：「會網頁設計者優先錄取」之類的方法。
目前我是獨立接案，負責PM和網頁設計兩部分，唯一不通的是程式，
所以會依據客戶主機的需求，找會寫相關程式的程式設計師合作。
嗯，繼續努力吧
--
U.Cafe 個人網站 http://unas.com.tw/
U.Design 作品集網站 http://unas.com.tw/U_Design/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 125.231.233.232
推
01/30 20:39, , 1F
01/30 20:39, 1F
→
01/30 21:52, , 2F
01/30 21:52, 2F
→
01/30 22:39, , 3F
01/30 22:39, 3F
討論串 (同標題文章)