查看完整版本 : ※※ FAQ ※※

zero_man 2010-4-20 10:15 AM

※※ FAQ ※※

=====================
基本篇:
=====================

如何「設計」網頁? [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid248961666][color=Red]#13[/color][/url]

如何「製作」網頁? [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid248961666][color=Red]#13[/color][/url]

如何由photoshop (.psd) 轉成 html? [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid249733682][color=Red]#14[/color][/url]

如何利用web hosting建立網站? [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=2#pid254311223][color=Red]#17[/color][/url]

在家中自建網站 (IIS [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=2#pid254311337][color=Red]#18[/color][/url] , Apache [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=2#pid254727272][color=Red]#26[/color][/url])

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

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

如何製作網上商店?

售買屬於自己的域名

哪裏下載template? [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid248237111][color=Red]#6[/color][/url]

網頁配色你識唔識? [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid248872242][color=Red]#11[/color][/url]

如何將網站加入搜尋器中? [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid249762533][color=Red]#15[/color][/url]

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

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

「設計」網頁的software [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid248961666][color=Red]#13[/color][/url]

「製作」網頁的software [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid248961666][color=Red]#13[/color][/url]

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

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

HTML

JAVASCRIPT

CSS

PHP

ASP

JSP

php + mysql

AJAX?

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

彈出警告框

整個網頁垂直置中 [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=1#pid248880003][color=Red]#12[/color][/url]

自動轉頁

固定HEADER 或 FOOTOR

Menu 製作

onMouseOver 轉圖

圖片 slide show with fade effect (javascript)

在網頁中插入Flash file

圖片瀏覽 (light box)

表單製作及email 出去 (php) [url=http://computer.discuss.com.hk/viewthread.php?tid=11997982&page=2#pid249790177][color=Red]#16[/color][/url]

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

upload files (php)

人數統計 (text 檔 / database)

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

抓取天氣資料 (php)

簡單留言板 (php)

Text field AJAX Auto-complete

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

Wordpress.org

webs.com

google 協作平台

[url]www.emailmeform.com[/url]






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

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

Asian_Kung_Fu 2010-4-20 01:17 PM

Cookie 呢 ?
SEO 呢 ?
FORUM 制作呢 ?

InitialZ 2010-4-20 09:14 PM

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

Thanks :smile_40: :smile_40: :smile_40:

258123 2010-4-20 09:17 PM

[quote]原帖由 [i]InitialZ[/i] 於 2010-4-20 09:14 PM 發表 [url=http://computer.discuss.com.hk/redirect.php?goto=findpost&pid=248169380&ptid=11997982][img]http://computer.discuss.com.hk/images/common/back.gif[/img][/url]
多謝樓主,請繼續更新內容,我再加此標題入精華
如果會update好內容,將會置頂

Thanks :smile_40: :smile_40: :smile_40: [/quote]幫手張我d好post放上去

258123 2010-4-20 09:19 PM

我d好post呀
[url=http://computer.discuss.com.hk/viewthread.php?tid=11767151]http://computer.discuss.com.hk/viewthread.php?tid=11767151[/url]

[url=http://computer.discuss.com.hk/viewthread.php?tid=11899589]http://computer.discuss.com.hk/viewthread.php?tid=11899589[/url]

[url=http://computer.discuss.com.hk/viewthread.php?tid=11904303]http://computer.discuss.com.hk/viewthread.php?tid=11904303[/url]

[url=http://computer.discuss.com.hk/viewthread.php?tid=11908400]http://computer.discuss.com.hk/viewthread.php?tid=11908400[/url]

[url=http://computer.discuss.com.hk/viewthread.php?tid=11909219]http://computer.discuss.com.hk/viewthread.php?tid=11909219[/url]

[url=http://computer.discuss.com.hk/viewthread.php?tid=11343758&highlight=%2B258123]http://computer.discuss.com.hk/viewthread.php?tid=11343758&highlight=%2B258123[/url]

[url=http://computer.discuss.com.hk/viewthread.php?tid=11299350&highlight=%2B258123]http://computer.discuss.com.hk/viewthread.php?tid=11299350&highlight=%2B258123[/url]

zero_man 2010-4-21 11:20 AM

答:哪裏下載template?

Web page Template:

[url]http://www.freecsstemplates.org/[/url]

[url]http://www.free-css.com/[/url]

[url]http://www.freewebsitetemplates.com/[/url]

[url]http://www.mytemplatebox.com/[/url]

===============================

Flash Template:

[url]http://www.flashmo.com/[/url]

[url]http://www.flashvillage.com/[/url]

[url]http://www.massivetemplates.com/[/url]

[url]http://www.templatesbox.com/free-flash-templates/index.htm[/url]

InitialZ 2010-4-21 07:35 PM

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

Thank you :)

Asian_Kung_Fu 2010-4-21 09:37 PM

咩唔係版主你 做滙集咩 ?

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

zero_man 2010-4-21 09:39 PM

[quote]原帖由 [i]InitialZ[/i] 於 2010-4-21 07:35 PM 發表 [url=http://computer.discuss.com.hk/redirect.php?goto=findpost&pid=248291928&ptid=11997982][img]http://computer.discuss.com.hk/images/common/back.gif[/img][/url]
不如update第一個帖,
會易搵D

Thank you :) [/quote]

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

InitialZ 2010-4-21 09:51 PM

[quote]原帖由 [i]Asian_Kung_Fu[/i] 於 21-4-2010 09:37 PM 發表 [url=http://admin.discuss.com.hk/redirect.php?goto=findpost&pid=248307901&ptid=11997982][img]http://admin.discuss.com.hk/images/common/back.gif[/img][/url]
咩唔係版主你 做滙集咩 ?

我地係咁隊晒 d 野上黎咪得囉~
:smile_30: [/quote]

多謝哂你既建議.
一對手只能做這麼多, though :smile_o03:

給我點時間. 最近好忙呀 :smile_o09:

zero_man 2010-4-26 10:40 AM

網頁配色你識唔識?

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

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

試想,若為了達成網站目的,必須決定這些色彩,而進一步要選擇哪些是必要的色彩。
看看這裏去學習別人的配色吧!
[url]http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/[/url]
[url]http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/[/url]

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

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

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

258123 2010-4-26 11:58 AM

答:整個網頁垂直置中

[color=#8B0000][size=3]如何把整個網頁垂直置中呢?[/size][/color][color=#8B0000]
[/color]
[color=#8B0000][size=3]引用[/size][font=Arial, Helvetica, sans-serif][url=http://blog.roodo.com/webdev/archives/160145.html][size=3]http://blog.roodo.com/webdev/archives/160145.html[/size][/url][/font]
[/color][color=#8B0000]
[/color]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3]彈性寬度[/size][size=3]如果你的網頁寬度想依視窗寬度調節(例如訂為視窗寬的 80%),那麼便可以採用這種方式。首先我們必須先把整個網頁內容用一個 div 標籤包起來,例如:[/size][/size][/font][/color][/size][quote]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3]
[/size][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3]<html>[/size][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3]<head>[略]</head>[/size][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3]<body>[/size][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3][color=blue][size=3]<div id="container">[/size][/color][size=3][網頁內容][/size][color=blue][size=3]</div>[/size][/color][/size][/size][/font][/color][/size]
[size=3][size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][color=blue][size=3][/size][size=3]</body>[/size][/color][/size][/font][/color][/size]
[size=3][size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3]</html>[/size][/size][/font][/color][/size]
[font=Arial, Helvetica, sans-serif][color=#8B0000]
[/color][/font]
[/quote][/size][/size]


[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3]我們指定這個 [/size][size=3]div[/size][size=3] 標籤的 [/size][size=3]id[/size][size=3] 屬性為 [/size][size=3]container[/size][size=3] [/size][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3](依據規範,[/size][size=3]id[/size][size=3] 屬性的值在整個頁面裡必須是獨一無二的,不可以重複)。設定完畢以後,在 [/size][size=3]head[/size][size=3] 標籤之[/size][i][size=3]中[/size][/i][size=3]插入此段 CSS 程式碼:[/size]
[font=Tahoma, Verdana][size=3][color=#000000][size=13px][quote][/size][/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][font=Tahoma, Verdana][size=3][color=#000000][size=13px][size=3]
[/size][/size][/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][font=Tahoma, Verdana][size=3][color=#000000][size=13px][size=3]<style type="text/css">#container {  [/size][color=blue][size=3]margin: 0 auto;  width: 80%;[/size][/color][size=3]}</style>[/size][/size][/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][font=Tahoma, Verdana][size=3][color=#000000]
[/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][font=Tahoma, Verdana][size=3][color=#000000][size=13px][size=3][/size][/quote][/size][/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3][/size][size=3]這代表此樣式要套用至 [/size][size=3]id[/size][size=3] 屬性為 [/size][size=3]container[/size][size=3] 的區塊([/size][size=3]#container[/size][size=3]),區塊寬度為視窗寬的 [/size][size=3]80%[/size][size=3],上下邊界為零、左右邊界則由瀏覽器自動調節([/size][size=3]auto[/size][size=3])。如此一來,頁面就會自動置中了。[/size][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px]
[size=3]固定寬度[/size][size=3]如果你的版面寬度固定(如 760 像素),則可以把前例的 [/size][size=3]width[/size][size=3] 特性值修改為 [/size][size=3]760px[/size][size=3]。此外對於固定寬度的版面,我們還有另一種設定方式:[/size]
[font=Tahoma, Verdana][size=3][color=#000000][size=13px][quote][/size][/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][font=Tahoma, Verdana][size=3][color=#000000][size=13px][size=3]
[/size][/size][/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][font=Tahoma, Verdana][size=3][color=#000000][size=13px][size=3]#container {  [/size][color=blue][size=3]position: relative;  left: 50%;  margin-left: -380px; /* 760 除以 -2 */[/size][/color][size=3]  width: 760px;}[/size][/size][/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][font=Tahoma, Verdana][size=3][color=#000000]
[/color][/size][/font][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][font=Tahoma, Verdana][size=3][color=#000000][size=13px][size=3][/size][/quote][/size][/color][/size][/font][size=3]這個方式比較奇妙點,[/size][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3][/size][size=3][b]position: relative;[/b] [/size][/size][/font][/color][/size]
[size=3][color=#8B0000][font=Arial, Helvetica, sans-serif][size=12px][size=3][/size][size=3]代表此區塊將以相對方式,依其母元素(在此例為 [/size][size=3]body[/size][size=3])的位置來定位。加上這條特性後,由於尚未指定位置,[/size][size=3]container[/size][size=3] 會依照預設值擺在母元素的左上角,如圖一所示。[/size]
[size=3][img]http://blog.roodo.com/webdev/e6b33ff5.gif[/img][/size]
[size=3]加上 [/size][size=3]left: 50%;[/size][size=3] 之後,此區塊左緣將移至母元素的中線,如圖二。[/size]
[size=3][img]http://blog.roodo.com/webdev/14e63a11.gif[/img][/size]
[size=3]第三條 [/size][size=3]margin-left: -380px;[/size][size=3] 比較難解釋,簡單說就是把整個元素的左邊界往[/size][i][size=3]回[/size][/i][size=3]拉 [/size][size=3]380px[/size][size=3](區塊寬度 [/size][size=3]760px[/size][size=3] 的一半,負值就是往回拉)。如圖三所示,我們可以看到整個版面置中了。[/size]
[size=3][img]http://blog.roodo.com/webdev/22e10e96.gif[/img][/size]





[/size][/font][/color][/size]

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

zero_man 2010-4-26 10:53 PM

什麼是網頁設計?

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

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

[b][u]1. Plan 計劃[/u][/b]

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

[b][u]2. Design 設計[/u][/b]

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

[b]軟件[/b]
PhotoShop, Fireworks, GIMPS


[b][u]3. Implement 製作[/u][/b]

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

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


[b][u]4. Manage 管理[/u][/b]

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


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

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

zero_man 2010-5-3 12:43 AM

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

=========================
注意事項:
=========================
一般人都會用以下方法去將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)
[img]http://img1.hidemyass.com/img/79LTA.gif[/img]



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

[img]http://img1.hidemyass.com/img/38hTT.gif[/img]


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

[img]http://img1.hidemyass.com/img/olq2e.gif[/img]


3. 將navigator 切片

[img]http://img1.hidemyass.com/img/a925l.gif[/img]


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

[img]http://img1.hidemyass.com/img/gi18B.gif[/img]

不用太多, 這樣就夠了

[img]http://img1.hidemyass.com/img/biy3Q.gif[/img]


5. 將footer 切片

[img]http://img1.hidemyass.com/img/xMzLl.gif[/img]

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

>>>[img]http://img1.hidemyass.com/img/SxYuR.gif[/img]<<<

7. 得出以下圖片, 將他們放入folder /images/ 入面
[img]http://img1.hidemyass.com/img/BpUkA.gif[/img]

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

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

  <div id="[color=Red]header[/color]">
<!--HEADER INFO WILL GO HERE -->
    </div>

    <div id="[color=Red]menu[/color]">
<!--NAVIAGTION HERE -->
    </div>

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

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


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

  <div id="[color=Red]footer[/color]">
<!--FOOTER HERE -->
  </div>

<!-- wrap ends here -->
</div>
</body>[/quote]

9. 在<head>與</HEAD> 中間加入<link rel="stylesheet" href="styles.css" mce_href="styles.css" type="text/css" />

並用建立一個styles.css 的CSS 檔
並加入BODY 的style
[quote]
/********************************************
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; /*行高*/
}
[/quote]

10. 開始放逐個區域放入圖片及排位, 注意, 暫時用的是css, 不是html

[quote]
/********************************************
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;
}
[/quote][img]http://img1.hidemyass.com/img/UXtLI.gif[/img]

11. 跟住 style navigation
[quote]/********************************************
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*/
}[/quote]
[img]http://img1.hidemyass.com/img/57XhT.gif[/img]


12. CONTENT, SIDEBAR, FOOTER
[quote]/********************************************
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;
}
[/quote]
[img]http://img1.hidemyass.com/img/gJ5Fv.gif[/img]


13. 改完晒d style, 可以返去html入面, 加返d 內容就得喇
navigation 內容
[quote]<!-- navigation -->
<div id="[color=Red]menu[/color]">
<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>
[/quote]
[img]http://img1.hidemyass.com/img/HRTlg.gif[/img]

14. 其他的都是這樣
[img]http://img1.hidemyass.com/img/ra89a.gif[/img]


完成!!!!!!

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

zero_man 2010-5-3 11:29 AM

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

加入GOOGLE
[url]http://www.google.com/addurl/[/url]

加入YAHOO
[url]http://rds.yahoo.com/search/submit/free/[/url]*-[url]http://submit.search.yahoo.com/free/request[/url]

加入MSN Search
[url]http://search.msn.com.sg/docs/submit.aspx[/url]

仲有其他14個免費search engines
[url]http://www.addme.com/submission/free-submission-start.php[/url]

zero_man 2010-5-3 03:40 PM

表單製作及email 出去 (php)

EXAMPLE:
[img]http://i1.hk/d/attachments/day_100503/20100503_ef66a7512428b33842b3YIwIcuDWdXcv.jpg[/img]
表單製作, 很簡單, 只要將需要的欄放好就得[quote]
<form action="[color=Red]mailer.php[/color]" method="post" name="form1" id="form1">
Your e-mail:<br />
<input name="from" type="text" id="from" />
<br />
<br />
Subject:<br />
<input name="subject" type="text" id="subject" />
<br />
<br />
Message:<br />
<textarea name="message" cols="6" rows="5" id="message"></textarea>
<br />
<input name="Submit" type="submit" value="Send Message"/>
</form>[/quote]

用戶填完form 後, 會send 去mailer.php, code :
[quote]<?php
// 拿回form 的內容
$subject = $_POST["subject"];
$message = $_POST["message"];
$from = $_POST["from"];

// 如果有" 或', 移除 backslashes
$message = stripslashes($message);
$subject = stripslashes($subject);
$from = stripslashes($from);

// send email
mail("your_email@email.com", 'Form: '.$subject, $_SERVER['REMOTE_ADDR']."\n\n".$message, "From: $from");
?>[/quote]

完成!!!!


===================================================
如果你使用正常的<form>, spammer 會用來自動發送垃圾電郵,

有兩種方法可以防止灌水
(一)Captcha image validation 圖片驗證碼
就是用圖片去顯示一個random 出來的數字/數字+字母, 用戶需要輸入圖片的內容作為驗證碼
由於電腦看不懂圖片內的驗證碼, 所以可以防止用程式來灌水/spam

表格包含一個驗證碼圖像,圖像實際上是連至一個 PHP所產生的圖像,用戶必須填寫表格內的驗證碼及其他郵件內容(subject,email,等),然後send,如果驗證碼不正確,就不會發送,再要求用戶再次填寫,其他內容不變

Generate 驗證碼的php: (verificationimage.php)
[quote]<?php
header('Content-type: image/jpeg');

$width = 50;
$height = 24;

$my_image = imagecreatetruecolor($width, $height);

imagefill($my_image, 0, 0, 0xFFFFFF);

// 加入noise
for ($c = 0; $c < 40; $c++){
        $x = rand(0,$width-1);
        $y = rand(0,$height-1);
        imagesetpixel($my_image, $x, $y, 0x000000);
        }

$x = rand(1,10);
$y = rand(1,10);

$rand_string = rand(1000,9999);
imagestring($my_image, 5, $x, $y, $rand_string, 0x000000);

setcookie('tntcon',(md5($rand_string).'a4xn'));

imagejpeg($my_image);
imagedestroy($my_image);
?>[/quote]



原本將form 就要改一改
[quote]<form action="mailer.php" method="post" name="form1" id="form1">

Your e-mail:<br />
<input name="from" type="text" id="from" value="[color=Red]<?php echo $_GET['from'];?>[/color]"/>
<br />
<br />
Subject:<br />
<input name="subject" type="text" id="subject" value="[color=Red]<?php echo $_GET['subject'];?>[/color]"/>
<br />
<br />

Type verification image:<br />
[color=Red]<input name="verif_box" type="text" id="verif_box"/>
<img src="verificationimage.php?<?php echo rand(0,9999);?>" alt="verification image, type it in the box" width="50" height="24" align="absbottom" />[/color]<br />
<br />

[color=Red]<!-- 驗證碼錯誤, 顯示以下warning -->
<?php if(isset($_GET['wrong_code'])){?>
<div style="border:1px solid #990000; background-color:#D70000; color:#FFFFFF; padding:4px; padding-left:6px;width:295px;">Wrong verification code</div><br />
<?php ;}?>[/color]

Message:<br />
<textarea name="message" cols="6" rows="5" id="message">[color=Red]<?php echo $_GET['message'];?>[/color]</textarea>

<input name="Submit" type="submit" value="Send Message"/>
</form>[/quote]


mailer.php 都要改, 需要檢查驗證碼
[quote]<?php

$subject = $_POST["subject"];
$message = $_POST["message"];
$from = $_POST["from"];
[color=Red]$verif_box = $_POST["verif_box"];[/color]

$message = stripslashes($message);
$subject = stripslashes($subject);
$from = stripslashes($from);

[color=Red]// 檢查驗證碼
if(md5($verif_box).'a4xn' == $_COOKIE['tntcon']){
        // 驗證碼正確, send mail
        mail("your_email@email.com", 'TheWebHelp.com Form: '.$subject, $_SERVER['REMOTE_ADDR']."\n\n".$message, "From: $from");
        // 清除cookies, 禁止refresh 重send
        setcookie('tntcon','');
} else if(isset($message) and $message!=""){
        // 驗證碼錯誤, 返回form, 顯示錯誤message
        header("Location:".$_SERVER['HTTP_REFERER']."?subject=$subject&from=$from&message=$message&wrong_code=true");
        exit;
} else {
        // 如果沒有message
        echo "不能直接進入";
        exit;
        }
?>[/color][/quote]


(二)第二個方法就是利用session 的特性去限制用戶
由於所有form都要經過mailer.php, 所以,我們可以加入一個session 去check下個人係唔係短時間內嘗試send email

[quote]<?php
[color=Blue]//開始SESSION
if (!isset($_SESSION)) {
        session_start();
}
// 禁止重複發言
if($_SESSION['last_session_request'] > time() - 2){
    // 如果 兩 秒內再發言, 轉去flood.html
    header("location: /form.php");
    exit;
}
$_SESSION['last_session_request'] = time();[/color]

// 拿回form 的內容
$subject = $_POST["subject"];
$message = $_POST["message"];
$from = $_POST["from"];

// 如果有" 或', 移除 backslashes
$message = stripslashes($message);
$subject = stripslashes($subject);
$from = stripslashes($from);

// send email
mail("your_email@email.com", 'Form: '.$subject, $_SERVER['REMOTE_ADDR']."\n\n".$message, "From: $from");
?>[/quote]
?>

[[i] 本帖最後由 zero_man 於 2010-5-3 03:58 PM 編輯 [/i]]

zero_man 2010-6-10 09:42 PM

設計好, 以及製作好網頁之後, 就可以將你的網頁s 及圖片s 放上網, 供其他人瀏覽。
放上網, 其實就係將你d 網頁放去web hosting (網頁寄存), 然後其他人就可以透過網頁寄公司來存取你所寄存的網頁

=============================================
當選擇網頁寄存時, 除了考慮網存公司的背景、信譽、收費等因素外, 還要留意:

[color=Red]儲存空間容量 [/color]
- 不同規模網站需要不同的網頁寄存.一般的網站,大概300MB-500MB就差不多

[color=Red]每月資料傳送量 [/color]
- 商業用戶的網站一般很少超出每月 2G 的流量, 面向消費者的,則 10G 或以上比較好

[color=Red]同一帳戶多個域名[/color]
- 如果可以用同一帳戶設定 [url]www.abc.com[/url] 和 [url]www.xyz.com[/url] 2個網站, 而你又有需要, 可減少網存開支

[color=Red]可使用的編程技術  [/color]
- 即是網存是否支援php/mysql, asp/asp.net, Python, RoR 等等的開發lanuguage

[color=Red]控制台 [/color]
- 網頁寄存都提供一個控制台, 可以設定電郵, FTP, DNS,database等等,最普遍的控制台是 cpanel, Direct Admin 和 Plesk

[color=Red]基本電郵功能[/color]
- 以下的電郵功能我覺得是需要有的:imap, SMTP, webmail, 電郵轉寄, 電郵自動回覆, 垃圾電郵過濾。

[color=Red]免費域名[/color]
- 有些網存商的服務計劃是附送服務期內的域名註冊費用,最緊要小心了解你是否取得域名的擁有權和控制權,以免因小失大
===================================================

還有一點要注意的, 通常你會在自己的電腦中設計及製作好你的網頁才upload 上web hosting
在你製作的時候, 有些人會用上自己電腦中的 Absolute Paths (絶對路徑), 例如係:
<img src="file:///D|/myWeb/image/logo.jpg" />
↑指定了圖片的位置是在D drive下..的某個位置

就算你upload 左你個web page, 同埋個image, 都是不能顯示圖片
因為這個檔案upload 到網存,它去找server中的"file:///D|/myWeb/image/"..指定位置的檔案,..當然找不到...
網存內跟本沒有"file:///D|/myWeb/image/" 這個路徑
這個路徑只是在你的電腦上用的


因此, 你就要使用「相對路徑」, 就是彼此間互相對應的關係
例如:
<img src="logo.jpg" />
代表將要顯示的圖片, 是放在這個網頁檔同一層目錄之下
這樣, 無論你的網站搬到哪裏, 只要相對路徑一樣, 就所有圖片都可以看到了
還有其他技巧:
<img src="logo.jpg" />     同一層目錄
<img src="images/logo.jpg" />         圖片在網頁檔所在目錄之下的images folder 之中
<img src="../logo.jpg" />       圖片在在網頁檔的上一層目錄
<img src="../../logo.jpg" />    圖片在在網頁檔的上一層, 再上一層目錄
<img src="/pic/logo.jpg" />    圖片在根目錄(root directory)之下的pic folder 之中

通常我們用「.」代表現在目錄,而用「..」代表上一層目錄
一般而言,除非有特殊需求,否則在 HTML 文件中,我們都盡量用相對路徑來表示網址。使用相對路徑的好處是:當我們將包含許多網頁的目錄轉移到另一個位置時,雖然絕對位置改變,但是在此目錄下的網頁相對位置並沒有改變,因此我們並不需要大幅修改網頁內的網址。

因不能貼出free hosting company, 請自行到Google search "web hosting" 或 "網頁寄存"

[[i] 本帖最後由 zero_man 於 2010-6-11 12:15 PM 編輯 [/i]]

zero_man 2010-6-10 09:43 PM

除了可以將你的網頁放上web hosting 公司寄存之外, 你還可以選擇在你的電腦中setup 一個web hosting
就是用windows 所提供的Internet Information Services (IIS) 去設立一個web server
IIS 預設可以執行.html, .htm, 及.asp 的網頁檔案

1. 架設local IIS 網站伺服器

首先得確定電腦是Windows XP Pro(XP 專業版)
開機時的開機讀取條藍色就是專業版(pro), 綠色是一般家用版(home)
[attach]564894[/attach]

亦可以在「我的電腦」 --> 右鍵 --> 內容  去確認
[attach]564895[/attach]

2. 安裝

開始 --> 控制台 --> 新增或移除程式, 點選「新增/移除Windows 元件」
[attach]564896[/attach]

點選後會出現下列資料
[attach]564897[/attach]

請找出 Internet Information Services (IIS) , 選擇 tick
[attach]564898[/attach]

按「下一步」, 並開始安裝iis
[attach]564899[/attach]

完成
[attach]564900[/attach]


3. 設定

安裝完之後,還要做些設定才能正式運作
server 的預設路徑為: [color=Blue]C:\Inetpub\wwwroot[/color]
現在可以將你的網頁檔放入路徑的folder 中

[size=4]設定資料夾讀取權限[/size]
我的電腦 --> 工具 --> 資料夾選項   點選「檢視」,將使用簡易檔案共用(建議使用) 取消tick
[attach]564901[/attach]

回到C:\Inetpub\wwwroot, 選擇wwwroot, 右鍵 --> 內容 --> 開啟安全性 --> 點進階, 出現下列畫面
[attach]564902[/attach]

按「新增」後,按「進階」
[attach]564903[/attach]

按「立即尋找」
[attach]564904[/attach]

因為我的電腦安裝時,使用者為Lanc, 因資料夾的名稱,每部電腦都不同
找到IUSR_你的電腦名稱後點選按下確定。
[attach]564905[/attach]

再按「確定」
[attach]564906[/attach]

出現下圖,先選下列權限
[attach]564907[/attach]

按「確定﹞後,新權限規則會出現, 按「確定」
[attach]564908[/attach]

出現下圖,按「確定」(只有資料夾名稱可繼承的權限才會生效)
[attach]564909[/attach]

回到下圖, tick「修改」, 按「確定」
[attach]564910[/attach]

[size=4]IIS 資料夾設定[/size]

「我的電腦」右鍵 --> 管理
[attach]564921[/attach]

服務及應用程式展開 --> 進入IIS → 網站→ 預設的網站
[attach]564922[/attach]

將你的folder右鍵 --> 內容
[attach]564923[/attach]

點選應用程式名稱 「建立」
[attach]564924[/attach]

到「目錄安全設定」 --> 編輯
[attach]564925[/attach]

選擇「匿名存取」,使用者名稱會因本機電腦名稱不同改變, 不用修改
[attach]564926[/attach]

設定完成
[attach]564927[/attach]

在IE 或 瀏覽器中輸入 localhost 或127.0.0.1, 出現下圖示代表IIS 設定成功
[attach]564928[/attach]

[[i] 本帖最後由 zero_man 於 2010-6-11 01:59 PM 編輯 [/i]]

zero_man 2010-6-10 09:45 PM

利用 CMS (Wordpress) 製作網站

利用open source CMS (Wordpress) 製作網站
除了可以自己編寫程式來製作網頁外, 也可以不用自己寫程式, 利用Content Management System (CMS) 來開發網站.

[size=6][color=DarkRed]什麼是CMS - Content Management System - 內容管理系統? [/color][/size]

CMS 就是一個網上的系統, 你可以先安裝在自己的hosting 之上, 然後做幾個簡單的設定, 精美的網頁就出現在你的網站內了!
你可以透過CMS 的控制台去作出多種網站內的修改(包括加入圖片、加入網站內容、修改版面、顏色等等), 令到你的網站與別不同.
CMS的功能並不只限於文字處理,它也可以處理圖片、Flash動畫、聲音、video streamming、電子郵件檔案等

CMS 的基本概念就是將一個網站的「[color=Red][size=5]內容[/size][/color]」及「[color=Red][size=5]設計[/size][/color]」分開處理. 網頁設計存儲在Template 裏; 而內容則存儲在database中. 每一版都是由server-side language 將設計及內容結合在一起再顯示成網頁

[size=6][color=DarkRed]好處: [/color][/size]
● 簡單易學, 不用設計, 不用coding, 不用design database, 這些都有人早已經你預備好了
● 這其中最大的好處是能夠使用template, 透過common elements的設計, 以確保整個網站設計一致完整
● 可同時有幾個備用template, 須要轉換時, 只要登入管理員並按幾下便可切換成不同的版面設計
● 網站作者只需在內容中使用少量的template coding, 然後即可把精力集中在設計之上, 方便以後添加內容,產品,新聞等
● 完善的plugin: 站內搜索、投票、論壇、留言板等
● 提高安全性, 越少動態頁面, 威脅就越小, 速度也提高
● 大量template 提供
● 可多於一個user 使用


[size=6][color=DarkRed]壞處: [/color][/size]
○ 難於使用seo
○ html 靈活度不夠
○ 難於轉換網頁儲存(web hosting)
○ 使用template 時, 欠缺「個人化」design
○ 新version , 要update, 要時間
○ 需要較多資源去運作 (ram, cpu, 網路流量)


總括來說, CMS 不是最好, 但至少多一個選擇, 每個人, 每個網站都有不同的取向, 所以在開發網站時, 應更清楚的計劃及考慮自己適合的方案

[[i] 本帖最後由 zero_man 於 2010-6-28 04:01 PM 編輯 [/i]]

zero_man 2010-6-10 09:46 PM

留位........

zero_man 2010-6-10 09:46 PM

留位........

zero_man 2010-6-11 09:01 AM

留位........

zero_man 2010-6-11 10:07 AM

留位........

zero_man 2010-6-11 10:59 AM

留位........

zero_man 2010-6-11 11:19 AM

留位........

thenewhand 2010-6-14 03:17 PM

LocalHost教學

樓主介紹了很多關於PHP的用途和web hosting的資料,讓小弟也補充一下吧,如果各位未找到好用的free web hosting,又或者只是抱著嘗試的心態去試試寫PHP程式,可以嘗試在自己的電腦中架設伺服器和資料庫,令大家不必每次都上載到網存空間去測試自己的PHP程式,以下我會幫忙介紹一下如何用appserv去架設這個伺服器和資料庫:

(1.)  各位先去官方網頁 [url=http://www.appservnetwork.com/]www.appservnetwork.com/[/url] 下載appserv(2.5.10)

[img]http://img69.imageshack.us/img69/9185/29129838.png[/img]
(2.) 然後安裝該軟件

[img]http://img44.imageshack.us/img44/9186/89485044.png[/img]
[img]http://img529.imageshack.us/img529/2213/34369951.png[/img]

(3.) 選擇安裝的路徑(**我選擇了預設的路徑)

[img]http://img266.imageshack.us/img266/6667/73766887.png[/img]

(4.) 選擇要安裝的項目 (第一項是安裝伺服器,第二項是安裝資料庫,第三四項是安裝PHP,[color=Blue][b]建議勾選所有項目[/b][/color])

[img]http://img404.imageshack.us/img404/4605/32767632.png[/img]

(5.) 設置伺服器資料(**如果伺服器是用來自己作測試/練習php程式之用,請按下列輸入資料,[color=Blue][b]如果是真正想存放自己的網站,建議使用網存公司的web hosting[/b][/color][color=Blue][b]服務,比較安全和穩定。[/b][/color])
       Server Name : localhost
       E-mail Address : 隨意輸入即可(不一定要使用真正的e-mail)
       http port : 80
[img]http://img714.imageshack.us/img714/9413/73139976.png[/img]

(6.) 設置資料庫資料(**如果資料庫是用來自己作測試/練習php程式之用,請輸入簡單密碼即可,[color=Blue][b]如果是真正想存放自己的網站,建議使用網存公司的web hosting[/b][/color][color=Blue][b]服務,比較安全和穩定。)
   
[/b][color=Black]在這我設置密碼為1234,其他設置為預設設定即可,密碼要自己能記得,因為日後如須使用到資料庫會用的到
[img]http://img4.imageshack.us/img4/7227/80193489.png[/img]

(7.) 開始安裝

[img]http://img249.imageshack.us/img249/3936/41020536.png[/img]
[/color]
[/color]
(8.) 安裝完成 (第一項為啟動伺服器**必須勾選,第二項為啟動資料庫**隨意勾選,在這我兩項都勾選)

[img]http://img64.imageshack.us/img64/9734/93347353.png[/img]

(9.) 測試是否成功安裝,開啟瀏覽器,並輸入[url=http://localhost/]http://localhost/[/url] ,如果出現下列畫面,恭喜你安裝成功了,不過大家仍要看下去喔,還有一點點要注意。
[img]http://img215.imageshack.us/img215/319/24925945.png[/img]

(10.) 如果大家已經一早把php程式寫好了,並儲存為.php格式,你一定急不及待按下去,可是應該會出現下列情況令不知應該選擇怎樣去開啟,**雖然預設了用notepad,但大家不要被誤以為要按確定喔。

[img]http://img12.imageshack.us/img12/4030/p10vj.png[/img]
[img]http://img203.imageshack.us/img203/4497/p11.png[/img]

(11.) 大家把自己做好的php檔,剪下並貼到步驟(3.)所設定的路徑裡面的www資料夾。

[img]http://img217.imageshack.us/img217/2112/p12.png[/img]
[img]http://img23.imageshack.us/img23/6853/p13e.png[/img]

(12.) 然後開啟瀏覽器,並輸入網址
http://localhost/檔案名稱.php,由於我的php檔名為testing.php,所以我會輸入網址[url=http://localhost/testing.php]http://localhost/testing.php[/url],就可以測試到自己的php程式了!

[img]http://img192.imageshack.us/img192/5949/p14u.png[/img]

最後,謝謝大家的觀看,這篇教學的內容和圖片都是自創的,如有雷同,實屬巧合:smile_o05::smile_o05:
頁: [1]
查看完整版本: ※※ FAQ ※※