网页发布到互联网尝试

         这两天分别学习了下HTML和CSS，虽没有制作精美的网页但将入门的元素和属性都用了下。并尝试发布到互联网上。

      我在《中国互联》申请了个可以免费使用4天的服务器，网址：http://www.163ns.com/err.asp   在本网站可以设置下自己的首页的名称是哪种类型，方便传我们的网页。我使用的FTP上传工具是FileZilla是一款免费的，地址：http://filezilla-project.org/。通过这个工具可以通过拖拽的方式将要上传的HTML和CSS文档以及相关图片传到服务器上。（我的4天试用网站：http://wodedz.c28.163ns.com/）

     在我的网站首页，我们通过浏览器中的查看菜单下的字体大小，调节字体，我们会发现首页中间部分的ABCDEFG等字不会像其他字体一样变，他们是不变的。这是因为我在CSS文件中设置这些字体的font-size属性时，使用的单位是px或pt，而其他能变的使用的是%或em。我们看到的现象就是这两者的本质区别。

      首页左上角有三张图片（没有显示出来，是因为我没有上传，因为上传后要想让他们显示出来速度很慢，还不能理解的话可以看下下一页中的图片显示情况，这下可以理解不要在网页中插入的太多图片的意义了）的摆放，在html中使用了span标记id，在CSS中使用了z-index进行层次堆叠。代码如下：

     html文件：

     <span id="p1"><img src="IMG_2417.JPG" alt="lp1" title="信息提高班1" width=300px height=300px></span>
<span id="p2"><img src="IMG_2418.JPG" alt="lp2" title="信息提高班2" width=300px height=300px></span>
<span id="p3"><img src="IMG_2419.JPG" alt="lp3" title="信息提高班3" width=300px height=300px></span>

     CSS文件：

 #p1{
 position:absolute;
 left:130px;
 top:130px;
 z-index:1;
}
#p2{
 position:absolute;
 left:200px;
 top:200px;
 z-index:2;
}
#p3{
 position:absolute;
 left:300px;
 top:300px;
 z-index:3;
}

      第二页中的所涉及的内容都在我的《html读书笔记》涉及到了。这个页面颜色，字体，样式等都是在html文档中设置的。而首页中除了新闻文字，链接，图片等内容是在html中添加的，其他效果（虽然不好看）都是在CSS中设置的。

      通过这个实验就可更好的理解CSS和HTML的作用了。很多效果其实在html文件中也是可以设置的（尤其是html4.0以后），不过使用CSS我们更容易集中管理网页的布局和样式等。而且在CSS中盒子模型的提出也使我们不必在使用HTML中的table元素来进行布局了。