现在的网页分为两种,一种是静态网页,一种是动态网页,它们都有各自的特点,比如动态网页在吸引用户注意力方面,更加有优势,而静态网页可以说是网页制作的起步,它的制作方法相对动态网页来说,并不是很复杂,但是很多新手朋友不知道如何去设计静态网页,下面福昕知翼就给大家具体介绍一下静态网页设计步骤是怎样的?静态网页的布局模式有哪些等问题｡

静态网页设计步骤是怎样的?

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

基础的静态网页代码写出来了,下面在中间添加网页需要的数据内容(文字､图片､表格､视频等),然后将txt文本文档的后缀名.txt修改为.html｡

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

在桌面上新建一个文件夹“web”,把index.html文件放进去,然后在web文件件里面新建一个txt文本文档,修改为“css.css”｡

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

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

在web文件下面新建一个images文件夹,然后打开软件Fireworks,设计自己需要的图片,把设计好的图片存入web文件夹下面的images文件夹里面｡现在我们在body中放入图片,让图片在网页里面居中｡

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

静态网页的布局模式有哪些?

静态网页的布局模式主要有:

1､表格布局;

2､层布局;

3､div+css样式表布局;

4､布局表格等;

备注:

1､表格布局容易把握,是最简单的一种总局方式,适用于初学者｡

设计网页的第一步是设计版面布局｡所谓布局,就是以最适合浏览的方式将图片､文字以及表单等元素排放在页面的不同位置｡网页设计常用布局方法是表格布局｡另外一种方便的工具,就是使用框架｡框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页｡

案例:①在网页中插入表格,不显示边框只用来布局;

②在单元格内插入文字､·图片,设置丰富的效果;

③通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局｡

2､层布局较难把握,经常会受屏幕的分辨率影响,网页中很少用,主要用于浮动广告｡

3､div+css样式表布局,难度较大,作者需了解一定数量的html代码｡是应用较广泛的一种,也是最难的一种布局｡

静态网页设计步骤是怎样的?大家在做静态网页设计的时候,就可以按照上面的步骤去操作,在操作的过程中,还需要熟悉一些代码,这些代码的作用比较重要,同时还需要做好静态网页的布局,它有多种局部模式,我们可以根据实际情况,选择合适的布局模式,如有疑问,建议来福昕知翼网站咨询｡