首页 / 办公指南 / 静态网页设计有哪些步骤

图片名称

现在的网页分为两种,一种是静态网页,一种是动态网页,它们都有各自的特点,比如动态网页在吸引用户注意力方面,更加有优势,而静态网页可以说是网页制作的起步,它的制作方法相对动态网页来说,并不是很复杂,但是很多新手朋友不知道如何去设计静态网页,下面福昕知翼就给大家具体介绍一下静态网页设计步骤是怎样的?静态网页的布局模式有哪些等问题。静态网页设计步骤是怎样的?新建一个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代码。是应用较广泛的一种,也是最难的一种布局。静态网页设计步骤是怎样的?大家在做静态网页设计的时候,就可以按照上面的步骤去操作,在操作的过程中,还需要熟悉一些代码,这些代码的作用比较重要,同时还需要做好静态网页的布局,它有多种局部模式,我们可以根据实际情况,选择合适的布局模式,如有疑问,建议来福昕知翼网站咨询。