• 瀏覽: 59,488
  • 回覆: 25
  • 追帖: 7
[隱藏]
=====================
基本篇:
=====================

如何「設計」網頁? #13

如何「製作」網頁? #13

如何由photoshop (.psd) 轉成 html? #14

如何利用web hosting建立網站? #17

在家中自建網站 (IIS #18 , Apache #26)

利用open source (Wordpress/joomla/SMF) 製作網站

利用open source (vbulletin/phpbb3/discuz) 製作論壇

如何製作網上商店?

售買屬於自己的域名

哪裏下載template? #6

網頁配色你識唔識? #11

如何將網站加入搜尋器中? #15

=====================
軟件篇:
=====================

什麼是FTP 及FTP client software 上載你的網站

「設計」網頁的software #13

「製作」網頁的software #13

=====================
Language 篇:
=====================

有什麼language 要學? (分做server-side, client-side)

HTML

JAVASCRIPT

CSS

PHP

ASP

JSP

php + mysql

AJAX?

=====================
實作篇:
=====================

彈出警告框

整個網頁垂直置中 #12

自動轉頁

固定HEADER 或 FOOTOR

Menu 製作

onMouseOver 轉圖

圖片 slide show with fade effect (javascript)

在網頁中插入Flash file

圖片瀏覽 (light box)

表單製作及email 出去 (php) #16

表單製作及save 低去 database (php)

upload files (php)

人數統計 (text 檔 / database)

會員登入 (php)
http://net.tutsplus.com/tutorials/php/user-membership-with-php/
http://www.phpeasystep.com/phptu/6.html

抓取天氣資料 (php)

簡單留言板 (php)

Text field AJAX Auto-complete

=====================
懶人篇:
=====================

Wordpress.org

webs.com

google 協作平台

www.emailmeform.com






寫好問題先, 煩請各師兄加減, 日後還需要各位解答呢!

[ 本帖最後由 zero_man 於 2010-6-15 09:01 AM 編輯 ]




photo by http://www.fotop.net/shanshan

回覆 引用 TOP

熱賣及精選
Cookie 呢 ?
SEO 呢 ?
FORUM 制作呢 ?



回覆 引用 TOP

多謝樓主,請繼續更新內容,我再加此標題入精華
如果會update好內容,將會置頂

Thanks



回覆 引用 TOP

引用:
原帖由 InitialZ 於 2010-4-20 09:14 PM 發表

多謝樓主,請繼續更新內容,我再加此標題入精華
如果會update好內容,將會置頂

Thanks
幫手張我d好post放上去



回覆 引用 TOP

[隱藏]

回覆 引用 TOP


photo by http://www.fotop.net/shanshan

回覆 引用 TOP

不如update第一個帖,
會易搵D

Thank you



回覆 引用 TOP

咩唔係版主你 做滙集咩 ?

我地係咁隊晒 d 野上黎咪得囉~



回覆 引用 TOP

引用:
原帖由 InitialZ 於 2010-4-21 07:35 PM 發表

不如update第一個帖,
會易搵D

Thank you
我係第一個帖, 個問題側面加左 #6 (with hyperhink)
因為我想其他ching 都可以幫手答下問題




photo by http://www.fotop.net/shanshan

回覆 引用 TOP

[隱藏]
引用:
原帖由 Asian_Kung_Fu 於 21-4-2010 09:37 PM 發表

咩唔係版主你 做滙集咩 ?

我地係咁隊晒 d 野上黎咪得囉~
多謝哂你既建議.
一對手只能做這麼多, though

給我點時間. 最近好忙呀



回覆 引用 TOP

設計師在設計網頁時,往往以不同的顏色的組合、配搭來特顯主題。
好的配色能使網頁煥然一新,提高觀賞性,給人的感覺截然不同。
當然,即使沒有覺過色彩相關知識,很多人還是能做出優秀的配色效果。不過,事實証明,被認為是好的配色作品中,有許多都能以設計理論來解釋的。

為什麼要學配色?
讓使用者初次造訪網站就能產生好印象、讓好的內容能順利地傳達而做的裝飾、讓使用者能順利在網站中游走、讓使用者按下「購買」等等...色彩的功能就是如此大!

試想,若為了達成網站目的,必須決定這些色彩,而進一步要選擇哪些是必要的色彩。
看看這裏去學習別人的配色吧!
http://www.smashingmagazine.com/ ... e-meaning-of-color/
http://www.smashingmagazine.com/ ... ts-and-terminology/

網上有不少配色工具和配色收集網站,絕對可以在配色的時候作為參考。
http://www.defencemechanism.com/color/
http://kuler.adobe.com/
http://www.colourlovers.com/
http://www.colorschemer.com/online.html
http://www.colorotate.org/
http://colorschemedesigner.com/

===================
顏色決定了網站帶給瀏覽者的視覺印象
配色不對 感覺就會不對
傳遞的訊息也會失真
===================



[ 本帖最後由 zero_man 於 2010-4-26 10:43 AM 編輯 ]




photo by http://www.fotop.net/shanshan

回覆 引用 TOP

如何把整個網頁垂直置中呢?

引用http://blog.roodo.com/webdev/archives/160145.html


彈性寬度如果你的網頁寬度想依視窗寬度調節(例如訂為視窗寬的 80%),那麼便可以採用這種方式。首先我們必須先把整個網頁內容用一個 div 標籤包起來,例如:
引用:


<html>
<head>[略]</head>
<body>
<div id="container">[網頁內容]</div>
</body>
</html>




我們指定這個 div 標籤的 id 屬性為 container
(依據規範,id 屬性的值在整個頁面裡必須是獨一無二的,不可以重複)。設定完畢以後,在 head 標籤之插入此段 CSS 程式碼:
引用:



<style type="text/css">#container {  margin: 0 auto;  width: 80%;}</style>



這代表此樣式要套用至 id 屬性為 container 的區塊(#container),區塊寬度為視窗寬的 80%,上下邊界為零、左右邊界則由瀏覽器自動調節(auto)。如此一來,頁面就會自動置中了。

固定寬度如果你的版面寬度固定(如 760 像素),則可以把前例的 width 特性值修改為 760px。此外對於固定寬度的版面,我們還有另一種設定方式:
引用:



#container {  position: relative;  left: 50%;  margin-left: -380px; /* 760 除以 -2 */  width: 760px;}


這個方式比較奇妙點,

position: relative;
代表此區塊將以相對方式,依其母元素(在此例為 body)的位置來定位。加上這條特性後,由於尚未指定位置,container 會依照預設值擺在母元素的左上角,如圖一所示。

加上 left: 50%; 之後,此區塊左緣將移至母元素的中線,如圖二。

第三條 margin-left: -380px; 比較難解釋,簡單說就是把整個元素的左邊界往380px(區塊寬度 760px 的一半,負值就是往回拉)。如圖三所示,我們可以看到整個版面置中了。








[ 本帖最後由 258123 於 2010-4-26 12:00 PM 編輯 ]


回覆 引用 TOP

簡單來說,網頁設計的目的就是產生網站。

正如一般Project 一樣,一個成功Product (即是網頁)的製成,整個過程方成四個階段。

1. Plan 計劃

即是要計劃一下網頁的目的是什麼? 有什麼內容? 主要給觀眾什麼的感覺? 有沒有其他功能? 等等...

2. Design 設計

即是設計網頁的外觀, 這個階段, 用一些圖像編輯工具(不是網頁工具) 去設計網頁的外表

軟件
PhotoShop, Fireworks, GIMPS


3. Implement 製作

即是將之前設計好的外表, 用HTML + css 製作成一個網頁形式, 這時候, 就需要有網頁編輯工具及些programming 的技巧

軟件
有WYSIWYG: Dreamweaver, kompozer(free), CKEditor(free), openWYSIWYG(free)
For coding: notepad++, Bluefish, visual development


4. Manage 管理

即是網頁管理, 定期更新, 加入新功能


p.s. 如果使用網頁template 的話, 就可以取代第二階段(design)及第三階段(implement), 但因為你仍雖然修改網頁內容或圖片等,所以仍需要programming skills

[ 本帖最後由 zero_man 於 2010-7-9 12:49 PM 編輯 ]




photo by http://www.fotop.net/shanshan

回覆 引用 TOP

=========================
注意事項:
=========================
一般人都會用以下方法去將psd 轉成html
方法一:打開 fireworks 將圖片切割, export 為html
方法二:直接在 dreamweaver 之類的「製作」工具去拉出layout,導入圖片
方法三:先在 photoshop 中完成切圖後,在dreamweaver / notepad 中看着效果圖一步步的製作

以上是一般人的做法,但都不好:
第一種方法最差,generate 出來的code 根本難以修改
第二種方法也不好,會有多餘的code,做出來要再整理
第三種方法也不好,因為需要看效果來寫,即是寫html的時候,要不斷諗這個tag 要怎樣顯示

正確的做法是:
1.設計好 psd 後,什麼都不做,直接在dreamweaver/notepad中將網頁的框架寫出來,完全html,不加任何的 css
2.寫完之後在各個browser測試以確保大致定位都沒有問題
3.加入整體 css,這個 css 只負責各個分區(如HEADER, FOOTER, CONTENT等)的定位及樣式(STYLE)
4.在PHOTOSHOP中,一塊塊的切出需要的圖片,在先前寫好的框架中一點點的加入去(即是製造),真的需要不斷的嘗試
5.最後,在CODE 之中加入COMMENT




=========================
實作
=========================
設計from photoshop(.PSD)




1. 首先, 規劃整個網頁的架構, 將整個網頁分為不同的區域, 方便設計style




2. 將header 切片
揀選header 的範圍, copy and paste at new document




3. 將navigator 切片




4. 將content 切片
注意, 不用整個範圍都要, 只要足夠就得, 因為可以用css 不斷地重複, 好似舖牆紙咁



不用太多, 這樣就夠了




5. 將footer 切片



6. 最後是background
留意, 切的時候, 要上面可以接到下面, 左面可以接到右面, 否則拼出不致的背景

>>>
<<<

7. 得出以下圖片, 將他們放入folder /images/ 入面


8. 跟住, 就先建立一個好的html 架構, 主要分header, content, footer 等
引用:
<body>

<!-- wrap starts here -->
<div id="wrap">

  <div id="header">
<!--HEADER INFO WILL GO HERE -->
    </div>

    <div id="menu">
<!--NAVIAGTION HERE -->
    </div>

   <div id="content-wrap"><!-- content-wrap starts here -->

    <div id="main">
<!--MAIN CONTENT HERE -->
    </div>
   
    <div id="sidebar">
<!--SIDE BAR LINKS HERE -->
    </div>


  </div><!-- content-wrap ends here -->

  <div id="footer">
<!--FOOTER HERE -->
  </div>

<!-- wrap ends here -->
</div>
</body>
9. 在<head>與</HEAD> 中間加入<link rel="stylesheet" href="styles.css" mce_href="styles.css" type="text/css" />

並用建立一個styles.css 的CSS 檔
並加入BODY 的style
引用:
/********************************************
HTML ELEMENTS
********************************************/

* { margin: 0; padding: 0; outline: 0; }

body {
background-color: #fff; /*背景顏色*/
background-image: url(images/bg.gif); /*背景圖案*/
background-repeat: repeat; /*不斷重複*/
color: #333333; /*文字顏色*/
margin: 15px 0; /*set margin*/
font-family: Verdana, Tahoma, arial, sans-serif; /*字型*/
font-size: 70%; /*字型大小*/
line-height: 1.5em; /*行高*/
}
10. 開始放逐個區域放入圖片及排位, 注意, 暫時用的是css, 不是html
引用:
/********************************************
WEBSITE LAYOUT
********************************************/
#wrap {
width: 790px; /*限制整頁的闊度*/
background: #CCC url(images/content.jpg) repeat-y center top; /*背景, 並只有單方向重覆*/
margin: 0 auto; /*網頁置中*/
text-align: left; /*文字靠左*/
}

#content-wrap {
clear: both; /*不容許左右兩旁有別的div*/
width: 760px; /*content 的闊度*/
margin: 5px auto; /*set margin*/
padding: 0; /*set padding*/
}

#header {
position: relative; /*relatve: 根據原本的位置作為0,0*/
height: 131px; /*header 的高度 = image的高度*/
background: #caced1 url(images/header.jpg) no-repeat center top; /*以圖片為背景*/
padding: 0;
}


11. 跟住 style navigation
引用:
/********************************************
WEBSITE NAVIAGTION
********************************************/

#menu {
clear: both; /*兩旁不容許有float object*/
margin: 0 auto; /*置中*/
padding: 0;
background: #81C524 url(images/menu.jpg) no-repeat; /*以圖片為背景*/
height: 40px; /*圖片高度*/
width: 790px; /*menu闊度*/
font-family: Verdana, Arial, Helvetica, sans-serif; /*字型*/
font-size: 14px; /*文字大小*/
line-height: 40px; /*行高*/
}

#menu ul {
float: left; /*靠左*/
list-style: none;
margin:0; padding: 0 0 0 20px;
}

#menu ul li {
display: inline; /*強制在element 後沒有line break*/
}

#menu ul li a {
display: block;
float: left;
padding: 0 12px;
color: #fff; /*Font color*/
text-decoration: none;
}

#menu ul li a:hover {
color: #E00000; /*Mouseover hover color*/
}



12. CONTENT, SIDEBAR, FOOTER
引用:
/********************************************
MAIN COLUMN
********************************************/
#main {
float: right; /*靠右*/
width: 555px; /*content 闊度*/
margin: 0; padding: 20px 0 0 0;
display: inline;
}

#main h2 { /*標題*/
padding: 0;
margin-bottom: 0;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 180%;
font-style: normal;
font-weight: bold;
}

#main h2 a {/*標題中的連結*/
color: #2666c3;
text-decoration: none; /*消除連結中的底線*/
}

#main p, #main h1, #main h2, #main h3, #main ol, #main ul,
#main blockquote, #main table, #main form {
margin-left: 25px;
margin-right: 20px;
}

/********************************************
SIDEBAR
********************************************/
#sidebar {
float: left; /*靠左*/
width: 195px; /*SIDEBAR 闊度*/
padding: 0;
color: #333333;
margin-top: 5px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

#sidebar h2 { /*sidebar 中的標題*/
margin: 15px 5px 10px 5px;
font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
color: #333333;
}

#sidebar p {
margin-left: 5px;
}
#sidebar ul.sidemenu { /*sidebar中的menu*/
list-style: none;
text-align: left;
margin: 7px 10px 8px 0; padding: 0;
text-decoration: none;
border-top: 1px solid #A9D4EF;
}
#sidebar ul.sidemenu li {
list-style: none;
padding: 4px 0 4px 5px;
margin: 0 2px;
color: #333333;
border-bottom: 1px solid #D2E8F7;
}

* html body #sidebar ul.sidemenu li {
height: 1%;
}

#sidebar ul.sidemenu li a {
text-decoration: none;
color: #FF0000;
}

#sidebar ul.sidemenu li a:hover {color: #333;}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { border: none; }

/********************************************
FOOTER
********************************************/

#footer {
color: #333333;
background: #caced1 url(images/footer.jpg) no-repeat center top;
clear: both;
width: 790px;
height: 57px;
text-align: center;
font-size: 90%;
}

#footer p {
padding: 10px 0;
margin: 0;
}

#footer a {
color: #FF0000;
text-decoration: none;
}



13. 改完晒d style, 可以返去html入面, 加返d 內容就得喇
navigation 內容
引用:
<!-- navigation -->
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Archives</a></li>
<li><a href="index.html">Downloads</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
11
</div>


14. 其他的都是這樣



完成!!!!!!

[ 本帖最後由 zero_man 於 2010-5-4 05:06 PM 編輯 ]




photo by http://www.fotop.net/shanshan

回覆 引用 TOP

[隱藏]

photo by http://www.fotop.net/shanshan

回覆 引用 TOP

提示:支持鍵盤翻頁左 右
[按此隱藏 Google 建議的相符內容]