科大学生个人主页制作ABCWei WANG, USTC1003, ww2010@mail.ustc.edu.cn

前期准备: html语言学习(推荐:w3school)软件准备:filezilla, dreamweaver(for windows), bluefish(for linux)具体操作:说明：图片是直接屏幕截图制作后复制到 word里面的，所以很小，但是图片中步骤写得很详细，所以自己放大后看。。。1. 前期工作：home.ustc.edu.cn->下载 FileZilla->安装之，主机名字是 home.ustc.edu.cn，用户名是自己的科大邮箱用户名，密码是邮箱的密码，然后点快速链接。本地站点随便建一个文件夹，里面装有自己的网页和网页中的附件，远程链接是一个叫做public_html的文件，里面装有你上传到服务器之后的文件。

2. 本地文件夹建一个叫做 public_html的文件夹，里面必须有个 index的网页，这个是别人访问你的 home.ustc.edu.cn/~xxx 之后看到的主页面。比如：

3. 制作网页下载一个制作网页的软件，我用的是Dreamweaver CS6,然后新建一个站点，里面就是 Public_html的东西，这样方便你一个一个打开网页安装 chrome（当然 ie什么也可以,ie貌似是鼠标右键->查看源），这样方便查看源代码和下载整个网页。随便浏览网页，觉得比较好的，把整个网页下载下来，然后用 dreamweaver打开，解析一下源代码和 CSS文件，就可以吸取人家网页的精华了。比如：

点击拆分，于是可以同时看到源代码和网页的样子，可以看出每一个区域对应的代码，这样方便修改。一般我们做个人主页都是一个 Index，很多其他的网页，共用一套 header和footer, navagation，所以可以单独建一个 CSS，将 footer, header、字体啊、框框的格式放在那个 CSS里面。之后就是看人家的代码自己学，或者下个模板改来改去了，后面是我随意想到的一些小知识。i.背景图片：渐进色图片的制作方法(我做的是两色渐变)

安装 Photoshop->新建文件

具体步骤如图，先是选择渐变，然后选择灰色-白色的那个图标的渐变，然后在 3的位置设置前景色和背景色，在 4的位置自己选个方向就作出了渐变图，最后再图像中调节图片的大小，以得到符合自己要求的图。ii.公式插入：网址是 http://www.codecogs.com/eqnedit.php?latex

iii.文件对应的位置：相对地址与绝对地址之前已经建立了站点，我们选择相对于文档，然后选择对应的文件即可，这时 href=”research4.html”，我觉得要添加的链接太多的时候，这样做很方便。图片也是一样的，比如说，你要插入的图片放在一个叫做 image的文件夹，图片名是 1.png，于是你就<img src="image/1.png" title="background">就可以了(title是你鼠标放在那个位置的时候，它会显示的名字)

另一种位置是绝对位置，我先把整个 public_html文件夹上传到服务器，然后找到我的文件的位置，比如说某个文件在 home.ustc.edu.cn/~ww2010/TA/quantumphysics 这个地址，那么我只需要把这个地址放在 href=””里面就可以了，这个方法显然更加恶心一点。iv.表格的格式首先是表格的代码，比如

<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0"> /*这里的 border是表格的框框的粗细，align是文字的位置*/

<tr><td width="20"><img src="image/index_03.gif" width="20"

height="36"></td><td width="959" background="image/index_05.gif"

id="navigation"> /*一个 td表示一行中的一小列*/</tr> /*一个 tr表示一行*/

</table>然后是表格的格式默认的是蓝色字且蓝色下划线，很难看，可以这样子，在 head里面加入一段代码

<style> table,table tr td{

color: black; /*改成黑色的字了*/font-size: 12pt; /*把字体大小改了*/font-family: Georgia, "Times New Roman", Times, serif;

} a:link {COLOR:black;text-decoration:none;}

a:hover{TEXT-DECORATION:underline} /*这一段的意思是鼠标放在那里的时候是黑色下划线，离开了就没有下划线了*/</style>

v.框框代码和格式<div id=”xxx”>代码</div>，id的格式在 CSS中定义。vi. head字体标题字体从 h1-h6，默认的有一套格式，也可以自己修改，而且每一种都可以定义很多 class,比如 h1.black,h1.yellow 等等。用的时候就<h1 class=”yellow”>文字</h1>,段落字体默认为 p,也可以自己定义很多 class

vii.页面书签有的时候一个页面太长，需要制作页面书签，点击某行文字，自动链接到页面中某处。比如说某个教授的文章很多，从 2014-2010 年归为一类，从2010-2006 年归为一类，我们将它们放在同一页面，可以这样<h6 class="bookmark1"><a href="paper.html#2014-2010">2014-2010</a>|<a href="paper.html#2010-2006">2010-2006</a></h6>后文中在<a name="2014-2010 ">2014-2010</a>便会前文的 2014-2010相呼应，于是我们点击前面的 2014-2010，便会定位到这里。viii.插入邮箱： <a href="mailto:xxx@mail.ustc.edu.cn">xxx@mail.ustc.edu.cn</a>

ix. 统计访问量信息的Google地图，网址 http://www.clustrmaps.com/zh/index.htm, 申请一个号，把代码拷到你的index.html里面就可以了。貌似要人家访问了你的 index页面才会有效。 x.常用符号<br>是换行，&nbsp;是空格，文字加粗<b>文字</b>，斜体<strong>文字</strong>

ix.一系列图片按某个方向滚动我常用的是<div>+<span>这种方式代码为：<div id="scrollobj" style="white-space:nowrap;overflow-y:hidden;overflow-x:hidden;width:890px;margin-left:10px" ><span>要滚动的所有内容</span></div>

<script language="javascript" type="text/javascript"> function scroll(obj) { var tmp = (obj.scrollLeft)++; //当滚动条到达右边顶端时 if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML; //当滚动条滚动了初始内容的宽度时滚动条回到最左端

if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0; } setInterval("scroll(document.getElementById('scrollobj'))",20);

</script> 注：<div></div>之间是滚动的内容以及 style，<script></script>之间是滚动的函数的定义X:最后一点是，px is different from pt, in order to adapt to different devices, we would rather use px when writing programs.XI: What's more, be careful about float: left, center, and right; 如何将整个页面居中，然后左右两端留空白？首先把整个页面装到一个 div里面（比如说whole这个 div），然后定义 body和#whole的格式，如下：

body｛text-align：center； margin：0 auto；｝#whole {

MARGIN: 0px auto; WIDTH: 900px;

}