怎么用css布局网页?具体步骤,各位高手指点迷津啊,初学网页制作,谢谢了!

html-css016

怎么用css布局网页?具体步骤,各位高手指点迷津啊,初学网页制作,谢谢了!,第1张

第一步,先在纸上或ps里画出你的网页框框

第二步,用dreamweaver进行<div class=''></div>。每个框框用div限定,谁包含谁要清楚

第三步,分别对每个div进行css定义

最好的方法就是你去找一些非常不错的css模板,进行学习,然后顺便学一些css的基础知识

祝你顺利

百度‘css网页模板‘ 你会找到的

光是CSS是做不了网页的,CSS是样式表,简单说就是控制网页里所有元素的表现形式,比如背景,比如字体大小,颜色.他需要和你html一起组成网页.网页主要是内容的体现,最好用div的写法,就是层+样式,网页里标签都可以设置id,就像人取了一个名字,id不能重复,然后在css里用

#id {样式代码}的方式就能控制这个id了.

如果多个内容相同,可以看做他们是一组的,就是class,设置class

.class名称 {样式代码} 就可以设置这个组的样式了,class名可以重复,主要应用就是这二个,还有更多资料相信你可以在很多地方找到教程.

方法/步骤

1、新建一个txt文本文档,先不要急着修改文件后缀名,有基础的朋友手动输入HTML代码,不会也没有关系,百度搜索“网页HTML代码”。

代码:

<!Doctype html>

<html>

<head>

<title>静态网页制作教程</title>

<meta charset="gbk" />

<link href="css.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>

</body>

</html>

2、基础的静态网页代码写出来了,下面在<body></body>中间添加网页需要的数据内容(文字、图片、表格、视频等),然后将txt文本文档的后缀名.txt修改为.html。现在点击打开看看效果!小编在body中间加入的文字:静态网页制作教程。

3、这样的文字太单调了,需要用CSS样式定义,小编在桌面上新建一个文件夹“web”,把index.html文件放进去,然后在web文件件里面新建一个txt文本文档,修改为“css.css”。

4、使用鼠标右键“打开方式”,选择txt文本文档编辑css.css文件。用CSS定义网页字体大小12像素,网页背景色为红色,字体颜色为白色。

代码:

body{font-size:12pxbackground:redcolor:white}

保存,然后打开web文件夹中的index.html文件,查看效果。

5、下面在web文件下面新建一个images文件夹,然后打开软件Fireworks,设计自己需要的图片(没有就去百度搜索自己需要的图片,使用QQ截图功能,截取自己需要的图片),把设计好的图片存入web文件夹下面的images文件夹里面。现在我们在body中放入图片,让图片在网页里面居中。

代码:

<div align="center">

<img src="images/pic.png" alt="logo" title="静态网页制作教程" />

</div>

把上面的代码放入index.html的body中,保存后打开看看效果!

小编在这里省略了表格和视频的制作,小伙伴不知道的话,可以百度搜索一下。

整个简单的静态网页制作完毕。