当前位置：首页 → 问答吧 → ※※ FAQ ※※

※※ FAQ ※※

时间：2010-04-20

来源：互联网

=====================
基本篇：
=====================

如何「设计」网页? #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 编辑 ]

作者: zero_man 发布时间: 2010-04-20

Cookie 呢 ?
SEO 呢 ?
FORUM 制作呢 ?

作者: Asian_Kung_Fu 发布时间: 2010-04-20

多谢楼主，请继续更新内容，我再加此标题入精华
如果会update好内容，将会置顶

Thanks

作者: InitialZ 发布时间: 2010-04-20

引用:

原帖由 InitialZ 於 2010-4-20 09:14 PM 发表
多谢楼主，请继续更新内容，我再加此标题入精华
如果会update好内容，将会置顶

Thanks

帮手张我d好post放上去

作者: 258123 发布时间: 2010-04-20

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

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

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

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

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

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

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

作者: 258123 发布时间: 2010-04-20

Web page Template:

http://www.freecsstemplates.org/

http://www.free-css.com/

http://www.freewebsitetemplates.com/

http://www.mytemplatebox.com/

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

Flash Template:

http://www.flashmo.com/

http://www.flashvillage.com/

http://www.massivetemplates.com/

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

作者: zero_man 发布时间: 2010-04-21

不如update第一个帖，
会易搵D

Thank you

作者: InitialZ 发布时间: 2010-04-21

咩唔系版主你做滙集咩 ?

我地系咁队晒 d 野上黎咪得囉~

作者: Asian_Kung_Fu 发布时间: 2010-04-21

引用:

原帖由 InitialZ 於 2010-4-21 07:35 PM 发表
不如update第一个帖，
会易搵D

Thank you

我系第一个帖, 个问题侧面加左 #6 (with hyperhink)
因为我想其他ching 都可以帮手答下问题

作者: zero_man 发布时间: 2010-04-21

引用:

原帖由 Asian_Kung_Fu 於 21-4-2010 09:37 PM 发表
咩唔系版主你做滙集咩 ?

我地系咁队晒 d 野上黎咪得囉~

多谢哂你既建议.
一对手只能做这么多, though

给我点时间. 最近好忙呀

作者: InitialZ 发布时间: 2010-04-21

设计师在设计网页时，往往以不同的颜色的组合、配搭来特显主题。
好的配色能使网页焕然一新，提高观赏性，给人的感觉截然不同。
当然，即使没有觉过色彩相关知识，很多人还是能做出优秀的配色效果。不过，事实证明，被认为是好的配色作品中，有许多都能以设计理论来解释的。

为什么要学配色？
让使用者初次造访网站就能产生好印象、让好的内容能顺利地传达而做的装饰、让使用者能顺利在网站中游走、让使用者按下「购买」等等．．．色彩的功能就是如此大！

试想，若为了达成网站目的，必须决定这些色彩，而进一步要选择哪些是必要的色彩。
看看这里去学习别人的配色吧！
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 编辑 ]

作者: zero_man 发布时间: 2010-04-26

如何把整个网页垂直置中呢?

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

弹性宽度如果你的网页宽度想依视窗宽度调节（例如订为视窗宽的 80%），那么便可以采用这种方式。首先我们必须先把整个网页内容用一个 div 标签包起来，例如：

引用:

我们指定这个 div 标签的 id 属性为 container
（依据规范，id 属性的值在整个页面里必须是独一无二的，不可以重复）。设定完毕以后，在 head 标签之中插入此段 CSS 程式码：

引用:

这代表此样式要套用至 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 编辑 ]

作者: 258123 发布时间: 2010-04-26

简单来说，网页设计的目的就是产生网站。

正如一般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 编辑 ]

作者: zero_man 发布时间: 2010-04-26

=========================
注意事项:
=========================
一般人都会用以下方法去将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 等

引用:

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 内容

引用:

<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 编辑 ]

作者: zero_man 发布时间: 2010-05-03

加入GOOGLE
http://www.google.com/addurl/

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

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

仲有其他14个免费search engines
http://www.addme.com/submission/free-submission-start.php

作者: zero_man 发布时间: 2010-05-03

EXAMPLE:

表单制作, 很简单, 只要将需要的栏放好就得

引用:

<form action="mailer.php" 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>

用户填完form 后, 会send 去mailer.php, code :

引用:

<?php
// 拿回form 的内容
$subject = $_POST["subject"];
$message = $_POST["message"];
$from = $_POST["from"];

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

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

完成!!!!

===================================================
如果你使用正常的<form>, spammer 会用来自动发送垃圾电邮,

有两种方法可以防止灌水
(一)Captcha image validation 图片验证码
就是用图片去显示一个random 出来的数字/数字+字母, 用户需要输入图片的内容作为验证码
由於电脑看不懂图片内的验证码, 所以可以防止用程式来灌水/spam

表格包含一个验证码图像，图像实际上是连至一个 PHP所产生的图像，用户必须填写表格内的验证码及其他邮件内容（subject，email，等），然后send，如果验证码不正确，就不会发送，再要求用户再次填写，其他内容不变

Generate 验证码的php: (verificationimage.php)

引用:

<?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);
?>

原本将form 就要改一改

引用:

<form action="mailer.php" method="post" name="form1" id="form1">

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

Type verification image:<br />
<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" /><br />
<br />


<?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 ;}?>

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

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

mailer.php 都要改, 需要检查验证码

引用:

<?php

$subject = $_POST["subject"];
$message = $_POST["message"];
$from = $_POST["from"];
$verif_box = $_POST["verif_box"];

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

// 检查验证码
if(md5($verif_box).'a4xn' == $_COOKIE['tntcon']){
// 验证码正确, send mail
mail("[email protected]", '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;
}
?>

(二)第二个方法就是利用session 的特性去限制用户
由於所有form都要经过mailer.php, 所以,我们可以加入一个session 去check下个人系唔系短时间内尝试send email

引用:

<?php
//开始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();

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

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

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

?>

[ 本帖最后由 zero_man 於 2010-5-3 03:58 PM 编辑 ]

附件

form_preview.jpg(41.4 KB)

2010-5-3 03:48 PM

form_preview.jpg(41.4 KB)

2010-5-3 03:48 PM

作者: zero_man 发布时间: 2010-05-03

设计好, 以及制作好网页之后, 就可以将你的网页s 及图片s 放上网, 供其他人浏览。
放上网, 其实就系将你d 网页放去web hosting (网页寄存), 然后其他人就可以透过网页寄公司来存取你所寄存的网页

=============================================
当选择网页寄存时, 除了考虑网存公司的背景、信誉、收费等因素外, 还要留意:

储存空间容量
- 不同规模网站需要不同的网页寄存.一般的网站,大概300MB-500MB就差不多

每月资料传送量
- 商业用户的网站一般很少超出每月 2G 的流量, 面向消费者的，则 10G 或以上比较好

同一帐户多个域名
- 如果可以用同一帐户设定 www.abc.com 和 www.xyz.com 2个网站, 而你又有需要, 可减少网存开支

可使用的编程技术
- 即是网存是否支援php/mysql, asp/asp.net, Python, RoR 等等的开发lanuguage

控制台
- 网页寄存都提供一个控制台, 可以设定电邮, FTP, DNS,database等等,最普遍的控制台是 cpanel, Direct Admin 和 Plesk

基本电邮功能
- 以下的电邮功能我觉得是需要有的：imap, SMTP, webmail, 电邮转寄, 电邮自动回覆, 垃圾电邮过滤。

免费域名
- 有些网存商的服务计划是附送服务期内的域名注册费用,最紧要小心了解你是否取得域名的拥有权和控制权,以免因小失大
===================================================

还有一点要注意的, 通常你会在自己的电脑中设计及制作好你的网页才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" 或 "网页寄存"

[ 本帖最后由 zero_man 於 2010-6-11 12:15 PM 编辑 ]

作者: zero_man 发布时间: 2010-06-10

除了可以将你的网页放上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)

亦可以在「我的电脑」 --> 右键 --> 内容去确认

2. 安装

开始 --> 控制台 --> 新增或移除程式, 点选「新增/移除Windows 元件」

点选后会出现下列资料

请找出 Internet Information Services (IIS) , 选择 tick

按「下一步」, 并开始安装iis

完成

3. 设定

安装完之后,还要做些设定才能正式运作
server 的预设路径为: C:\Inetpub\wwwroot
现在可以将你的网页档放入路径的folder 中

设定资料夹读取权限
我的电脑 --> 工具 --> 资料夹选项点选「检视」，将使用简易档案共用（建议使用）取消tick

回到C:\Inetpub\wwwroot, 选择wwwroot, 右键 --> 内容 --> 开启安全性 --> 点进阶, 出现下列画面

按「新增」后,按「进阶」

按「立即寻找」

因为我的电脑安装时,使用者为Lanc, 因资料夹的名称,每部电脑都不同
找到IUSR_你的电脑名称后点选按下确定。

再按「确定」

出现下图,先选下列权限

按「确定﹞后,新权限规则会出现, 按「确定」

出现下图,按「确定」(只有资料夹名称可继承的权限才会生效)

回到下图, tick「修改」, 按「确定」

IIS 资料夹设定

「我的电脑」右键 --> 管理

服务及应用程式展开 --> 进入IIS → 网站→ 预设的网站

将你的folder右键 --> 内容

点选应用程式名称「建立」

到「目录安全设定」 --> 编辑

选择「匿名存取」,使用者名称会因本机电脑名称不同改变, 不用修改

设定完成

在IE 或浏览器中输入 localhost 或127.0.0.1, 出现下图示代表IIS 设定成功

[ 本帖最后由 zero_man 於 2010-6-11 01:59 PM 编辑 ]

作者: zero_man 发布时间: 2010-06-10

利用open source CMS (Wordpress) 制作网站
除了可以自己编写程式来制作网页外, 也可以不用自己写程式, 利用Content Management System (CMS) 来开发网站.

什么是CMS - Content Management System - 内容管理系统?

CMS 就是一个网上的系统, 你可以先安装在自己的hosting 之上, 然后做几个简单的设定, 精美的网页就出现在你的网站内了!
你可以透过CMS 的控制台去作出多种网站内的修改(包括加入图片、加入网站内容、修改版面、颜色等等), 令到你的网站与别不同.
CMS的功能并不只限於文字处理，它也可以处理图片、Flash动画、声音、video streamming、电子邮件档案等

CMS 的基本概念就是将一个网站的「内容」及「设计」分开处理. 网页设计存储在Template 里; 而内容则存储在database中. 每一版都是由server-side language 将设计及内容结合在一起再显示成网页

好处:
● 简单易学, 不用设计, 不用coding, 不用design database, 这些都有人早已经你预备好了
● 这其中最大的好处是能够使用template, 透过common elements的设计, 以确保整个网站设计一致完整
● 可同时有几个备用template, 须要转换时, 只要登入管理员并按几下便可切换成不同的版面设计
● 网站作者只需在内容中使用少量的template coding, 然后即可把精力集中在设计之上, 方便以后添加内容,产品,新闻等
● 完善的plugin: 站内搜索、投票、论坛、留言板等
● 提高安全性, 越少动态页面, 威胁就越小, 速度也提高
● 大量template 提供
● 可多於一个user 使用

坏处:
○ 难於使用seo
○ html 灵活度不够
○ 难於转换网页储存(web hosting)
○ 使用template 时, 欠缺「个人化」design
○ 新version , 要update, 要时间
○ 需要较多资源去运作 (ram, cpu, 网路流量)

总括来说, CMS 不是最好, 但至少多一个选择, 每个人, 每个网站都有不同的取向, 所以在开发网站时, 应更清楚的计划及考虑自己适合的方案

[ 本帖最后由 zero_man 於 2010-6-28 04:01 PM 编辑 ]

作者: zero_man 发布时间: 2010-06-10

留位........

作者: zero_man 发布时间: 2010-06-10

留位........

作者: zero_man 发布时间: 2010-06-10

留位........

作者: zero_man 发布时间: 2010-06-11

留位........

作者: zero_man 发布时间: 2010-06-11

留位........

作者: zero_man 发布时间: 2010-06-11

留位........

作者: zero_man 发布时间: 2010-06-11

楼主介绍了很多关於PHP的用途和web hosting的资料，让小弟也补充一下吧，如果各位未找到好用的free web hosting，又或者只是抱著尝试的心态去试试写PHP程式，可以尝试在自己的电脑中架设伺服器和资料库，令大家不必每次都上载到网存空间去测试自己的PHP程式，以下我会帮忙介绍一下如何用appserv去架设这个伺服器和资料库：

(1.)  各位先去官方网页 www.appservnetwork.com/ 下载appserv(2.5.10)

(2.) 然后安装该软件

(3.) 选择安装的路径(**我选择了预设的路径)

(4.) 选择要安装的项目 (第一项是安装伺服器，第二项是安装资料库，第三四项是安装PHP，建议勾选所有项目)

(5.) 设置伺服器资料(**如果伺服器是用来自己作测试/练习php程式之用，请按下列输入资料，如果是真正想存放自己的网站，建议使用网存公司的web hosting服务，比较安全和稳定。)
   Server Name : localhost
   E-mail Address : 随意输入即可(不一定要使用真正的e-mail)
   http port : 80

(6.) 设置资料库资料(**如果资料库是用来自己作测试/练习php程式之用，请输入简单密码即可，如果是真正想存放自己的网站，建议使用网存公司的web hosting服务，比较安全和稳定。)

在这我设置密码为1234，其他设置为预设设定即可，密码要自己能记得，因为日后如须使用到资料库会用的到

(7.) 开始安装

(8.) 安装完成 (第一项为启动伺服器**必须勾选，第二项为启动资料库**随意勾选，在这我两项都勾选)

(9.) 测试是否成功安装，开启浏览器，并输入http://localhost/ ，如果出现下列画面，恭喜你安装成功了，不过大家仍要看下去喔，还有一点点要注意。

(10.) 如果大家已经一早把php程式写好了，并储存为.php格式，你一定急不及待按下去，可是应该会出现下列情况令不知应该选择怎样去开启，**虽然预设了用notepad，但大家不要被误以为要按确定喔。

(11.) 大家把自己做好的php档，剪下并贴到步骤(3.)所设定的路径里面的www资料夹。

(12.) 然后开启浏览器，并输入网址
http://localhost/档案名称.php，由於我的php档名为testing.php，所以我会输入网址http://localhost/testing.php，就可以测试到自己的php程式了!

最后，谢谢大家的观看，这篇教学的内容和图片都是自创的，如有雷同，实属巧合