经过前面一些章节的阅读，我想你已经迫不及待想试手建立一个网站了，虽然你还没有阅读后面关于网站建设的技术知识，然而，你更希望先看看自己是否真的很感兴趣。那么，好吧，就让你建立一个以个人信息展示为目的的个人网站吧！
第一步：制作静态页面 ↑
什么都不要想，将下面的代码拷贝到一个txt文档中，重命名该文档为index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>frustigor</title>
<link rel="stylesheet" type="text/css" href="http://kado.im/style/global.css" />
<link type="text/css" rel="stylesheet" href="http://kado.im/themes/default-01/theme.css" media="screen" />
</head><body>
<div id="c-wrapper">
<h1>frustigor</h1>
<ul id="c-nav" class="clr-fix">
<li id="c-nav-profile" class="current"><a href="#profile" class="profile">基本资料</a></li>
<li id="c-nav-intro"><a href="#intro" class="intro">个人简介</a></li>
<li id="c-nav-contact"><a href="#contact" class="contact">联系方式</a></li>
<li id="c-nav-websites"><a href="#websites" class="websites">我的网站</a></li>
</ul>
<ul id="c-main" class="vcard">
<li id="profile" class="c-main-item c-main-item-first clr-fix">
<dl class="i-photo"><dt>头像:</dt><dd><img class="photo" src="http://kado.im/images/user/avatars/avatar-373036919.png" /></dd></dl>
<dl class="i-nickname"><dt>网络昵称:</dt><dd class="nickname">frustigor</dd></dl><dl class="i-name"><dt>真实姓名:</dt><dd class="name">frustigor</dd></dl><dl class="i-title"><dt>个人头衔:</dt><dd class="title">花花公子</dd></dl><dl class="i-gender"><dt>性别:</dt><dd class="gender">男</dd></dl><dl class="i-bday"><dt>生日:</dt><dd><abbr class="bday" title="1987年5月2日">1987年5月2日</abbr></dd></dl><dl class="i-adr"><dt>所在地:</dt><dd class="adr"><span class="locality">北京</span> , <span class="region">北京</span> , <span class="country-name">中国</span></dd></dl><dl class="i-org"><dt>所在公司:</dt><dd class="org">好东东网络科技有限公司</dd></dl> </li>
<li id="intro" class="c-main-item clr-fix">
<p>人——天与地之间的过客！生活是你对生命态度的诠释！</p>
</li>
<li id="contact" class="c-main-item clr-fix">
<p>随意的联系方式，请不要用来尝试</p>
<dl class="i-email"><dt title="Email"><img src="http://kado.im/images/theme/contact/icon-contact-email.png" alt="Email" />Email:</dt><dd><a class="email" href="mailto:haodongdong2011@foxmail.com">haodongdong2011@foxmail.com</a></dd></dl><dl class="i-qq"><dt title="QQ"><img src="http://kado.im/images/theme/contact/icon-im-qq-logo.png" alt="QQ" />QQ:</dt><dd>1420155088</dd></dl><dl class="i-msn"><dt title="MSN"><img src="http://kado.im/images/theme/contact/icon-im-msn-logo.png" alt="MSN" />MSN:</dt><dd>haodongdong2008@live.cn</dd></dl><dl class="i-gtalk"><dt title="Gtalk"><img src="http://kado.im/images/theme/contact/icon-im-gtalk-logo.png" alt="Gtalk" />Gtalk:</dt><dd>haodongdong2006@gmail.com </dd></dl><dl class="i-skype"><dt title="Skype"><img src="http://kado.im/images/theme/contact/icon-contact-skype.png" alt="Skype" />Skype:</dt><dd>haodongdong518@tom.com</dd></dl><dl class="i-wangwang"><dt title="阿里旺旺"><img src="http://kado.im/images/theme/contact/icon-im-wangwang-logo.png" alt="阿里旺旺" />阿里旺旺:</dt><dd>我聚人力量</dd></dl></li>
<li id="websites" class="c-main-item clr-fix">
<dl class="i-mb-sina" title="新浪微博"><dt><img src="http://kado.im/images/theme/websites/icon-mb-sina-logo.png" alt="新浪微博" /></dt><dd><em>新浪微博</em><a href="http://weibo.com/hz184" rel="nofollow">http://weibo.com/hz184</a></dd></dl><dl class="i-mb-qq" title="腾讯微博"><dt><img src="http://kado.im/images/theme/websites/icon-mb-qq-logo.png" alt="腾讯微博" /></dt><dd><em>腾讯微博</em><a href="http://t.qq.com/frustigor" rel="nofollow">http://t.qq.com/frustigor</a></dd></dl> </li>
</ul>
</div><script type="text/javascript" src="http://kado.im/script/jquery.js"></script>
<script type="text/javascript" src="http://kado.im/script/theme/default.js"></script><script type="text/javascript" src="http://kado.im/script/cookie.js"></script>
<script type="text/javascript">
$(function(){if($.cookie("rgt_close")!=1)
$("#rgt").slideDown( 'slow');
$("#rgt_close").click( function(){
//设cookie
var date = new Date();
date.setTime(date.getTime() + (3600*1*1000));
$.cookie("rgt_close", '1', { path: '/', expires: date });
$("#rgt").slideUp('slow')
return false
});})
</script>
</body>
</html>
代码包含了一个.html文档应该有的部分：html标签，css外部链接，javascript代码。你将在这章中学习HTML代码的撰写，这章中学习CSS，这张中学习javascript。
通过学习，把你的个人页面做的更漂亮吧。如果你第一次搞，太麻烦，把javascript的东西全部去掉，你也可以看到效果哦，不过就没有动态效果了。
第二步：将html文件上传到网站空间 ↑
在这一章中学习网站空间和域名，使用FTP上传刚才制作的网页到你的网站空间。
要是你没有网站空间怎么办呢？？别着急，乌徒帮为你提供免费的测试站点。将你的自己制作的网页上传到乌徒帮的测试站点网站空间去吧，它能让你和你的所有朋友通过互联网看到你刚才制作的网页。
打开任意一款FTP客户端软件，在连接->主机 中填写dev.utubon.com，在用户名中填写dev.utubon.com，密码内填写[hide for="回复才能查看"]utubon.com[/hide]，连接。如果不会用FTP客户端软件，还有一个方法，用IE6访问ftp://dev.utubon.com 输入上面的用户名密码，也链接到网站空间文件管理了，就像操作文件夹一样，建立文件夹，把你的文件放进去吧。测试查看上面代码的效果
这时你已经连接到乌徒帮提供的网站空间，你能看到根目录下已经有一些文件夹，这或许就是其他乌友们的作品。右键点击创建一个文件夹，然后进入该文件夹，把你刚才制作的所有网页拖拽或上传到里面。好了，用http://dev.utubon.com/文件夹名称/ 访问你的网站吧，也可以访问看看别人做的效果哦！
第三步：修缮和学习 ↑
修改你制作的个人网页，以求更加精美。
这只是一次最简单的尝试，你可以继续学习了，不断的掌握HTML+CSS+Javascript的知识，到一定程度的时候，你就会有更高的学习需求。
上一章：建站工具快入门
下一章：主机和域名
回复查看内容