第五周学习笔记:HTML CSS/DIV ---BY 王骁

这周一直都在学做网站,经过几天的学习也初步做出了一个比较脑残的网页出来....

有关于HTML语言的使用其实非常简单,类似于1+1=2,这里有一个网址有比较详细的教程:

http://www.gzsums.edu.cn/webclass/html/html_design.html

个人感觉写的还是比较全的,非常简单.

不过貌似现在为了实现更加复杂漂亮的效果,也为了优化代码,一般来说都是用CSS来写的,事实上CSS是对HTML的扩展与延伸.

事实上网页的制作很简单,但是也很不简单,因为困难的地方其实不在于代码,而在于设计.设计好想要的效果然后用相应的代码表示出来,期间注意一下网页设计的一些潜规则,最后不断调试,步骤就是这么几个,但是真正做起来确实比较头疼,很多时候代码对了效果不对,这就需要一些经验,当然也就需要经常练习,做网页调试的时候个人不推荐用可视化程序,最好是新建一个html文件然后右键用记事本打开编写,因为只有这样你看到的效果才是在浏览器里看到的效果,还要注意火狐和IE有一些差别,比如在标准字体大小的划分上.

网上现在有很多辅助工具,比如帝国网站管理系统,用起来很方便(下载地址: http://www.phome.net/OpenSource/ ),这些软件极度的简化了网站的制作过程,实用价值很高,但是不利于学习CSS...因为我自己还没完全搞懂使用方法就不介绍怎么使用了...

举例:

1.第一步 CSS排版这要求设计者对网站有一个整体规划,比如一个简单的BOLG,需要banner 顶端菜单栏,右侧的导航,以及正文版块组成,那么我们可以这样用div来分块

(#container (#banner) (#leftlinks(.side .friends .article)) (#content(.blog .date .blogcontent .page .update)) )

这样明确了父子层级关系我们就能比较容易的将它们写出来

2.整体代码

<html>

<head><title>我的博客</title>/*这个是显示在你IE菜单栏的文字*/

body{background-color:#000000;/*背景颜色*/ margin:0px/*间隔*/ padding/*间隙*/ text-align:center;/*整体内容居中*/}/*对于整个页面的定义*/

#containner{position:relative;/*containner的内容的位置的定义方式为相对位置*/ margin:1px auto 0px auto;/*这个不能忘记因为我们要做的是固定宽度永远居中的网页四个数值分别是上左下右的间隔 auto意思是自动调整*/ width:800px;/*整个页面固定宽度800px*/ text-align:left;/*文字对齐方式重新更改为左对齐*/}/*ID选择器*/

....................

.side{font-size:12px; color:purple; ....}/*这是类选择器*/

}

</head>/*head之间是声明类的代码,可以把这部分和C里面的头文件联系一下理解*/

<body>

<div id="containner">/*我们用一个div把整体包起来,这样#containner中的设置就对全局有效*/

</div>

</body>

</html>

中间的内容比较繁琐就不详细的叙述了如果想仔细学的话可以去这个网址看一下: http://www.hongen.com/pc/homepage/css/css0101.htm

自学很快就能上手~

posted on 2009-03-29 23:33 中大信息中心数媒部阅读(418) 评论(0) 收藏举报