网页设计的几种版式
推荐文章
一、网页设计的几种版式
网页设计的几种版式
在现代互联网时代，网页设计的版式多种多样，通过不同的设计风格和排版方式，可以展现出不同的风格和特点，吸引用户的注意力并提升用户体验。下面将介绍几种常见的网页设计版式：
单栏布局
单栏布局是最简单也是最常见的网页设计版式之一。它由一个主要的内容区域组成，通常位于页面的中心。这种布局简洁明了，适合展示单一内容或产品。单栏布局使得页面结构清晰，易于阅读和导航。在移动设备上也能很好地适应屏幕大小，提供良好的用户体验。
双栏布局
双栏布局将页面分为两个主要区域，通常是主内容区域和侧边栏。主要内容区域通常用来展示核心内容，而侧边栏则用来展示相关信息或导航链接。这种布局适合需要展示多种信息的网站，能更好地组织内容，提供更丰富的信息展示方式。
三栏布局
三栏布局是在双栏布局的基础上增加了一个额外的栏目，通常位于页面的另一侧。这种布局适合展示更多的内容、功能或广告。主要内容区域保持核心内容，侧边栏可以放置导航链接或相关信息，而额外的栏目可以用来展示广告或其他补充信息。
响应式布局
响应式布局是一种针对不同设备和屏幕尺寸进行设计的网页布局方式。通过使用媒体查询和弹性网格布局等技术，使得网页能根据设备的不同自动调整布局和样式，确保在各种设备上都能提供良好的用户体验。响应式布局已经成为现代网页设计的标配，适应了移动设备普及的趋势。
分栏布局
分栏布局将页面分为多栏，每栏内容相对独立但又相互联系，可以通过纵向或横向排列的方式展示不同类型的内容。这种布局适合展示多样化的信息，可以更灵活地组织内容，使用户更容易地找到并浏览感兴趣的内容。
全屏滚动布局
全屏滚动布局是一种创新型的网页设计方式，页面内容通过全屏展示，并支持滚动浏览。这种布局适合展示图片和视觉效果，吸引用户眼球。全屏滚动布局通常通过动态效果和交互设计，提升用户体验，让用户沉浸在页面内容中。
瀑布流布局
瀑布流布局是一种动态加载方式，页面内容像瀑布一样流动展示。这种布局适合展示大量的图片或博文等内容，可以更好地利用页面空间，提升信息展示效率。瀑布流布局也是社交化网站常用的布局方式，能够吸引用户持续浏览。
以上介绍的几种网页设计版式各有特点，设计师可以根据网站的需求和风格选择合适的版式，以实现更好的用户体验和视觉效果。
二、几种常见网页布局设计？
一、简介：布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。二、网页布局有以下几种常见结构：【1】“国字”型布局：“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。【2】T型布局T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内【3】标题正文型标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。【4】左右框架型布局左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 .【5】上下框架型上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。【6】综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的 页面布局 技术【7】FLASH布局FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。
三、网页设计分几种设计，谢谢大家？
网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）形象型网页设计（品牌形象站）信息型网页设计（门户站）
四、网页设计的布局有哪几种？
网站建设中网页设计布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型这九种。
1、国字类型：也被称为同字型，顶部是网站的标题、横幅广告条，然后是网站的主体内容条，而左右分别是一些比较小的内容条，中间就是主要内容，最底部是网站的一些基本信息、联系方式、版权声明等。这也是现在网上见到的差不多最多的一种结构类型。
2、拐角型：这种类型其实与国字型很相近的，只是在形式上不一样，最上面的部分是网站的标题以及网站的横幅广告条，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
3、标题正文类型：上面是网站的标题，或者是类似的东西，接着就是网站的正文内容，例如是一些文章或者是注册登录页面。
4、左右框架类型：这是一种左右分别为两页的框架结构，一般布局是：左边是导航链接，最上面有时是一个小的标题或标志，而右面就是主要内容，最常使用是论坛网站，企业网站中的内页有很多是采用这种布局方式的；这种类型的布局的特点是结构清晰明了。
5、上下框架类型：与左右框架类型类似，只是这种类型是上下两页的框架。
6、综合框架类型：其实就是左右框架类型和上下框架类型的结合体。
7、封面型：这种类型基本上是出现在一些网站的首页，多是精美平面结合小动画，再加几个简单链接或仅是一个“进入”链接或无任何提示。
8、Flash型：其实这与封面型结构是类似的，采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
9、变化型：即上面几种类型的结合与变化，但所实现的功能的实质是那种上、左、右结构的综合框架型。
五、网页设计有哪几种分类？
布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构：
1.“同”字型结构布局
所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。
这种布局的优点是充分利用版面，页面结构清晰，左右堆成，主次分明，信息量大；缺点是页面拥挤，太规矩呆板，如果细节色彩上缺少变化调剂，很容易让人感到单调缺乏。
2.“国”字型布局
“国”字型布局是在“同”字型布局基础上演化而来的，在保留“同”字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型。一般最上面是网站标题及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是在网上见到的最多的一种结构类型。
这种布局的优点是充分利用版面，信息量大，与其他页面的链接切换方便，缺点是页面拥挤，四面封闭，令人感到憋气。
3.t型布局
这是一个形象的说法，是指页面的顶部是“网站标志+广告条”，左面是主菜单，右面是主要内容。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法；缺点是页面呆板，如果不注意细节上的色彩，很容易让人“看之无味”。
4.“三”字型布局
这种布局多用于国外站点，国内用得不多。特点是在页面上有横向两条色块，将页面整体分割为但部分，色块中大多放广告条、更新和版权提示。
5.对比布局
顾名思义，这种布局采用左右或者上下对比的方式：一半深色，一半浅色。一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机地结合比较困难。
6.pop布局
pop引自广告术语，是指页面布局像一张宣传海报，一一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页，如果处理得好的话，会给人
带来赏心悦目的感觉。
7.flash布局
这种布局是指整个或大部分幅面的网页本身就是一个flash动画，它本身就是动态的，画面一般不叫绚丽、有趣，是一种比较新潮的布局方式。其实这与封面型结构是类似的，只是这种类型才采用了目前非常流行的flash，与封面型不同的是，由于flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
六、网页设计中的表单有哪几种?
表单包含多种input类型，包括 hiiden类型 ,text类型，radio类型，checkbox类型，textarea类型，file类型，select类型等基础类型，手写表单就是累耗时耗力开发销量太低而且代码量大了还容易写出bug，每个页面的表单遇到改动的时候恨不得长十双手去改，于是我自己开发了一个php写的表单生成工具，在业务逻辑通过配置或者链式操作去初始表单结构和数据，不管有多少页面都只需要通过配置下就行，我写的这个表单工具 支持块表单，行内表单，table类型表单，支持表单美化 默认是layui效果，也支持jquery控制表单行为，只需要引入layui样式和js即可。在github主页demo目录也提供了示例代码运行查看效果，
Form介绍:
使用php编写的html表单生成工具，没有任何依赖可独立使用,支持链式操作和配置创建表单，支持表单美化(默认为layui风格)
特点:
- 没有任何依赖可独立使用
- 支持链式操作创建表单
- 支持数组配置创建表单
- 支持块表单
- 支持行内表单
- 支持table表单
- 支持表单美化(默认为layui风格)且方便扩展
项目主页链接:
github: https://github.com/mgckid/form
gitee:https://gitee.com/mgckid/form
安装方法:
composer require mgckid/form
快速使用:
链式操作创建块表单
<?php
require __DIR__ . '/../src/Form.php';
Form::getInstance()
->form_method(Form::form_method_post)
->form_action('/')
->input_text('姓名', '', 'name', '法外狂徒张三')
->radio('性别', '', 'male', ['male' => '男', 'female' => '女'], 'male')
->checkbox('爱好', '', 'interest', ['ktv' => 'K歌', 'dance' => '跳舞', 'movie' => '看电影', 'run' => '跑步'], 'ktv,run')
->input_inline_start()
->input_text('省份', '', 'sheng', '湖北省')
->input_text('市', '', 'shi', '武汉市')
->input_text('区', '', 'qu', '武昌区')
->input_text('街道', '', 'jie', '紫阳路36号')
->input_inline_end()
->input_hidden('id', '1')
->input_text('user name', '', 'user', 'admin')
->input_password('password', '', 'password', '123456')
->radio('is active', '', 'is_active', [
['value' => '1', 'name' => 'active'],
['value' => '0', 'name' => 'unactive']
], 1)
->checkbox('user role', '', 'role', [
['value' => '1', 'name' => 'boss'],
['value' => '2', 'name' => 'manager'],
['value' => '3', 'name' => 'employee'],
], '1,2')
->select('user department', '', 'department', [
['value' => '1', 'name' => 'sales'],
['value' => '2', 'name' => 'hr'],
['value' => '3', 'name' => 'secured'],
], 1)
->form_class(LayuiForm::form_class_pane)
->input_submit('确认保存', 'class="layui-btn" lay-submit lay-filter="saveBtn"')
//->input_date()
//->editor()
//->form_data()
//->table()
->create();
?>数组配置创建块表单
<?php
require __DIR__ . '/../src/Form.php';
$init = array(
0 => array(
'title' => 'Id',
'name' => 'id',
'description' => 'Id',
'enum' => array(),
'type' => 'hidden',
'widget_type' => '',
),
1 => array(
'title' => '用户id',
'name' => 'user_id',
'description' => '用户id',
'enum' => array(),
'type' => 'hidden',
'widget_type' => '',
),
2 => array(
'title' => '用户名',
'name' => 'username',
'description' => '用户名',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
3 => array(
'title' => '真实姓名',
'name' => 'true_name',
'description' => '真实姓名',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
4 => array(
'title' => '密码',
'name' => 'password',
'description' => '密码',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
5 => array(
'title' => '邮箱',
'name' => 'email',
'description' => '邮箱',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
6 => array(
'title' => '是否删除',
'name' => 'deleted',
'description' => '是否删除',
'enum' => array(
0 => '未删除',
1 => '已删除',
),
'type' => 'none',
'widget_type' => '',
),
7 => array(
'title' => '创建时间',
'name' => 'created',
'description' => '创建时间',
'enum' => array(),
'type' => 'none',
'widget_type' => 'date',
),
8 => array(
'title' => '修改时间',
'name' => 'modified',
'description' => '修改时间',
'enum' => array(),
'type' => 'none',
'widget_type' => 'date',
),
);
$data = array(
'id' => 2,
'user_id' => 'feac0fa3-3245-11e6-9b90-e03f49a02407',
'username' => 'admin',
'true_name' => '系统管理员',
'email' => '',
'deleted' => 0,
'created' => '2016-06-14 23:39:52',
'modified' => '2020-03-12 20:07:48',
);
\Form::getInstance()
->form_schema($init)
->form_data($data)
->input_submit('确认保存', 'class="layui-btn" lay-submit lay-filter="saveBtn"')
->create();行内表单
<?php
require __DIR__ . '/../src/Form.php';
$init = array(
0 => array(
'title' => 'Id',
'name' => 'id',
'description' => 'Id',
'enum' => array(),
'type' => 'hidden',
'widget_type' => '',
),
1 => array(
'title' => '用户id',
'name' => 'user_id',
'description' => '用户id',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
2 => array(
'title' => '用户名',
'name' => 'username',
'description' => '用户名',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
3 => array(
'title' => '真实姓名',
'name' => 'true_name',
'description' => '真实姓名',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
4 => array(
'title' => '密码',
'name' => 'password',
'description' => '密码',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
5 => array(
'title' => '邮箱',
'name' => 'email',
'description' => '邮箱',
'enum' => array(),
'type' => 'text',
'widget_type' => '',
),
6 => array(
'title' => '是否删除',
'name' => 'deleted',
'description' => '是否删除',
'enum' => array(
0 => '未删除',
1 => '已删除',
),
'type' => 'none',
'widget_type' => '',
),
7 => array(
'title' => '创建时间',
'name' => 'created',
'description' => '创建时间',
'enum' => array(),
'type' => 'none',
'widget_type' => 'date',
),
8 => array(
'title' => '修改时间',
'name' => 'modified',
'description' => '修改时间',
'enum' => array(),
'type' => 'none',
'widget_type' => 'date',
),
);
\Form::getInstance()
->input_inline_start()
->form_schema($init)
->input_submit('<i class="layui-icon"></i> 搜索', ' class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"', 'class="layui-btn layui-btn-primary"')
->input_inline_end()
->form_class(\LayuiForm::form_class_pane)
->form_method(Form::form_method_get)
->create();table表单
<?php
require __DIR__ . '/../src/Form.php';
$form_init = array (
'id' =>array (
'title' => '主键',
'name' => 'id',
'description' => '主键',
'enum' =>array(),
'type' => 'hidden',
'widget_type' => '',
),
'name' =>array (
'title' => '配置名称',
'name' => 'name',
'description' => '配置名称',
'enum' =>array(),
'type' => 'text',
'widget_type' => '',
),
'description' =>array (
'title' => '配置描述',
'name' => 'description',
'description' => '配置描述',
'enum' =>array(),
'type' => 'text',
'widget_type' => '',
),
'input_type' =>array (
'title' => '表单类型',
'name' => 'input_type',
'description' => '表单类型',
'enum' =>array (
'hidden' => '隐藏域',
'select' => '下拉',
'radio' => '单选按钮',
'text' => '文本',
'textarea' => '多行文本',
'file' => '上传',
'none' => '非表单',
'editor' => '富文本',
'checkbox' => '复选框',
'date' => '日期',
),
'type' => 'select',
'widget_type' => '',
),
'created' =>array (
'title' => '创建时间',
'name' => 'created',
'description' => '创建时间',
'enum' =>array(),
'type' => 'none',
'widget_type' => 'date',
),
'modified' =>array (
'title' => '修改时间',
'name' => 'modified',
'description' => '修改时间',
'enum' =>array(),
'type' => 'none',
'widget_type' => 'date',
),
'deleted' =>array (
'title' => '删除标记',
'name' => 'deleted',
'description' => '删除标记',
'enum' =>array (
0 => '未删除',
1 => '已删除',
),
'type' => 'none',
'widget_type' => '',
),
);
$form_data=array (
0 =>
array (
'id' => 73,
'name' => 'solution_introduction',
'value' => '111',
'description' => '解决方案介绍',
'input_type' => 'textarea',
'created' => '2018-12-07 11:44:40',
'modified' => '2022-03-08 00:32:08',
'deleted' => 0,
),
1 =>
array (
'id' => 72,
'name' => 'tese_product_introduction',
'value' => '222',
'description' => '特色产品介绍',
'input_type' => 'textarea',
'created' => '2018-12-07 11:43:52',
'modified' => '2022-03-08 00:32:09',
'deleted' => 0,
),
2 =>
array (
'id' => 71,
'name' => 'new_product_introduction',
'value' => '333',
'description' => '新产品介绍',
'input_type' => 'textarea',
'created' => '2018-12-07 11:41:37',
'modified' => '2022-03-08 00:32:09',
'deleted' => 0,
),
3 =>
array (
'id' => 70,
'name' => 'site_pinterest',
'value' => '',
'description' => 'Pinterest堪称图片版的Twitter链接',
'input_type' => 'text',
'created' => '2018-11-19 11:48:12',
'modified' => '2019-04-27 14:08:07',
'deleted' => 0,
),
4 =>
array (
'id' => 69,
'name' => 'site_twitter',
'value' => '',
'description' => 'Twitter（非官方汉语通称推特）链接',
'input_type' => 'text',
'created' => '2018-11-19 11:47:04',
'modified' => '2019-04-27 14:08:07',
'deleted' => 0,
),
5 =>
array (
'id' => 68,
'name' => 'site_facebook',
'value' => '',
'description' => 'Facebook（脸书）链接',
'input_type' => 'text',
'created' => '2018-11-19 11:46:07',
'modified' => '2019-04-27 14:08:07',
'deleted' => 0,
),
6 =>
array (
'id' => 67,
'name' => 'site_google_plus',
'value' => '',
'description' => 'Google+SNS社交网站链接',
'input_type' => 'text',
'created' => '2018-11-19 11:45:26',
'modified' => '2019-04-27 14:08:07',
'deleted' => 0,
),
7 =>
array (
'id' => 66,
'name' => 'site_linkedin',
'value' => '',
'description' => 'LinkedIn领英链接',
'input_type' => 'text',
'created' => '2018-11-19 11:43:53',
'modified' => '2019-04-27 14:08:07',
'deleted' => 0,
),
8 =>
array (
'id' => 65,
'name' => 'site_livechat_code',
'value' => '',
'description' => 'livezilla在线客服代码',
'input_type' => 'textarea',
'created' => '2018-11-15 16:45:15',
'modified' => '2019-04-27 14:08:07',
'deleted' => 0,
),
9 =>
array (
'id' => 64,
'name' => 'site_skype',
'value' => '',
'description' => '联系skype',
'input_type' => 'text',
'created' => '2018-11-15 16:44:40',
'modified' => '2019-04-27 14:08:07',
'deleted' => 0,
)
);
\Form::getInstance()
->table('扩展配置', '', 'site_config', $form_init, $form_data)
->create();七、ps网页设计布局有哪几种？
第一、靠前、无边框设计。
无边框设计在近几年比较流行，在设计页面的时候，将页面中的风格线、边框删掉，用间距来代替的一种设计方法。
无边框设计一般是以大图为主，图片本来就是一种分割元素。而内容基本是有规律的，留白间距之间的内容一定要相对一致、重复、紧密，这样用户在浏览的时候才会认为这些内容是一体的。
一般来说，小众垂直的产品更适合使用无边框设计。
第二、卡片设计。
卡片的设计打破了传统上固定的排版布局方式，提升了版面的使用率，可以给网站建设增加更多的惊喜。那么卡片设计有哪些优势呢？1、可以提高页面的使用率。
卡片就好像是一个容器，将类型不一样的内容设置在不一样的卡片中，这样就可以很好地区分内容，还能够统一页面的风格。
比如传统列表，内容一般是纵向滚动的方式，能够展示的内容比较有限，卡片式的设计采用的滑动方式，就可以有效地解决空间问题。
2、区分卡片上的内容。
卡片就好像是一个容器，将不同的内容放置在不同的卡片，更好地区分内容的类型。
卡片的维度是不一样的，而且相对独立、有互相有联系，所以通过卡片归纳网站的内容，整个网站就显得更有秩序。
3、卡片式设计可以提升可控性、提升体验度。
卡片式设计的使用范围比较广泛，可以覆盖、滑动、堆叠，有良好的扩展性和可操作性。
第三、分割线的设计。
这也是常见的一种页面布局设计方式，可以更好地帮助用户快速熟悉页面的布局，有良好的内容组织性。
分割线可以贯穿整个页面，将不同的内容进行分割，成为独立的信息。 网站建设中的页面布局，有不同的设计方式，而且设计的趋势不断在变化，在设计页面布局之前，就要考虑好合适的样式，不能一味地追求潮流，根据产品的实际需求，选择合适的设计方式。
而分割线的设计，想要做得出色，就要处理好线的间距、粗细、颜色等等
八、网页设计有几种风格
网页设计的不同风格
在当今数字时代，网页设计是非常重要的，无论是企业网站还是个人博客，一个吸引人的设计可以吸引用户的目光，提升用户体验和网站的知名度。但是，你是否知道网页设计有多种风格？在本篇文章中，我们将探讨网页设计的几种常见风格。
1. 平面设计
平面设计是最常见的网页设计风格之一。它强调简单和直接的视觉效果，使用平面的图像和颜色来传达信息。通过使用饱和度较高的颜色、简洁的排版和扁平化的图标，平面设计在页面上创建了清晰的层次结构。
2. 渐变设计
渐变是一种通过将两种或多种颜色逐渐过渡到彼此来创建流动效果的设计技术。在网页设计中，渐变可以用来增加页面的深度和现代感。通过巧妙地运用渐变色，设计师可以创建出引人注目的视觉效果和过渡效果。
3. 扁平化设计
扁平化设计是一种简化和去除冗余元素的网页设计风格。它强调简单、直观和现代的用户界面。扁平化设计通过使用明亮的颜色、简单的图标和清晰的排版来提供清晰的视觉效果。它还具有响应式设计的优势，可在不同尺寸的设备上提供一致的体验。
4. 材料设计
材料设计是由谷歌推出的一种视觉设计语言，旨在为现代数字界面提供真实且有层次感的外观。材料设计强调阴影、深度和移动效果，以创造出具有现实感的交互体验。它融合了平面和渐变设计的元素，并添加了触摸、动画和过渡效果。
5. 图标设计
图标设计在网页设计中起到了重要的作用。良好设计的图标可以增加页面的可读性和吸引力。图标设计可以采用不同的风格，如简单的线条图标、扁平化图标或逼真的插图。无论是在导航栏、按钮还是页面上的其他位置，图标设计都能帮助用户更好地理解和导航网站。
6. 响应式设计
在如今多设备时代，响应式设计已成为网页设计的重要组成部分。响应式设计能够根据用户的设备和屏幕尺寸自动调整网页的布局和元素大小，以确保在各种设备上都能提供良好的用户体验。这种设计风格需要考虑不同屏幕分辨率和设备能力的差异，并确保内容的可访问性和可用性。
总结
网页设计有多种风格可供选择，每种风格都有其独特的特点和用途。平面设计强调简单和直接的视觉效果，渐变设计通过色彩过渡增加了页面的深度和现代感，扁平化设计强调简洁和直观的用户界面。材料设计提供了现实且有层次感的外观，图标设计增加了页面的可读性和吸引力，响应式设计确保了在不同设备上的良好用户体验。选择适合你网页定位和目标受众的设计风格非常重要，它将直接影响到用户对网站的感知和体验。
九、网页设计中有哪几种常用的图片格式？
1、PDF格式，是Photoshop图像处理软件的专用文件格式，文件扩展名是．psd
2、GIF图片格式，GIF是一种调色板型（palette type）（或者说是索引型）的图片。它含有多达256种的颜色。每一个象素点都有一个对应的颜色值。因为这种格式不再存在专利权的问题。
3、 PNG图片格式，PNG的图片又分为 PNG-8 、 PNG-24 两种，其中，PNG-8 与 GIF 类似，支持 256 色调色板 ，而 PNG-24 只支持 48 位真彩色，凡是 GIF 拥有的优势 PNG-8 都拥有，GIF 所没有的优势 PNG-8 也有，同样的文件，PNG-8 格式比 GIF 要小
4、JPEG图片格式，是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式，在 Photoshop软件中以JPEG格式储存时，提供11级压缩级别，以0—10级表示。其中0级压缩比最高，图像品质最差。即使采用细节几乎无损的10 级质量保存时，压缩比也可达 5：1。
5、BMP图片格式，BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，在Windows环境下运行的所有图象处理软件都支持BMP图象文件格式。
6、TGA图片格式: TGA的结构比较简单，属于一种图形、图像数据的通用格式，在多媒体领域有着很大影响，在做影视编辑时经常使用,例如3DS MAX输出TGA图片序列导入到AE里面进行后期编辑。
十、网页按钮设计？
Web页面可用预定义模板来创建，也可不采用模板而在空白页上自己进行设计。创建新页面的步骤如下：
在网页视图下，选择“文件”菜单中的“新建”命令，再从其子菜单中选择“网页”命令，将弹出“新建”对话框，若用户要新建的网页是框架，则从“框架网页”选项卡中选择某种框架样式；否则，从“常规”选项卡中选择一种所需样式，然后单击“确定”按钮。若想建立一空白网页，可在对话框的“常规”选项卡中选择NormalPage项，或直接单击常用工具栏的“新建网页”按钮。
建议逐一试用FrontPage提供的各种模板以便熟悉它们，日后你就可以自如地利用模板创建常规Web页面，能够节省许多时间。
1．在网页中插入图形
图片往往比大量的文字讲述更具吸引力和说服力，在web页面中适当地添加图片会使网页丰富多彩，但过多地加入图片将降低页面的下载速度，特别是对通过调制解调器访问web页的用户。大多数图形都是采用压缩格式，有的调制解调器不具有压缩功能，这种调制解调器速度更慢。因此用户在加入图片时，应认真选择和进行规划。虽然图形可使web页更有趣味，但应适度使用（使用较少颜色，缩小高度和宽度或裁剪图形、降低图形的分辨率，尽可能地减少图形文件大小，如用压缩格式的文件类型）。
Web页面所使用的两种图片格式分别为GIF和JPEG，用户可选择“插入”菜单中的“图片”命令，再从其子菜单中选择“来自文件”命令，打开“图片”对话框，“图片”对话框提供了“扫描”、“使用您的web例览器来选择网页或文件”、“剪贴画”和“在您的计算机上选择一个文件”四种途径插入图片。
对于一些非GIF和JPEC格式的图片，FrontPage可以自动地将这些文件转换成GIF或JPEG格式。
2．在网页中插入水平线
水平线可以在网页上清晰地划分界限，而且对用户网页的布局起着重要的作用。添加一条水平线，可以通过“插入”菜单中选择“水平线”命令添加。在默认状态下水平线是灰色的，用户可以像改变文本颜色一样改变水平线的颜色。改变水平线的颜色有两种方法（必须在不加主题的情况下）：
（1）双击该水平线，将显示“水平线属性”对话框。在对话框的“颜色”项，选择下拉列表，从中选择合适的颜色，单击“确定”按钮。
（2）用鼠标右键单击这条水平线，从快捷菜单中选择“水平线属性”命令，再从对话框中选择一个合适的颜色。
使用框架
--------------------------------------------------------------------------------
框架是把Web浏览器的视窗分成几个部分，每个部分都是独立的Web页面，这样便可同时显示多个页面。
可以很容易地用FrontPage创建一个多框架的web页面。为了创建具有框架的Web页面，可从“文件”菜单的“新建”子菜单中选择“网页”命令，弹出“新建”对话框，选择“框架网页”选项卡。
在左边的列表中可选择不同类型的框架模板，选定模板后，按“确定”按钮即可创建一个具有框架的网页。
在创建有框架的Web页面时，应注意有些web浏览器不支持框架。虽然使用不能显示框架的浏览器的用户已很少，为确保这些用户仍然能够浏览到Web站点上的内容，可以填上要告诉那些低版本浏览器的使用者的话，例如请对方更换浏览器等。
在新建的框架的窗口中，单击“设置初始页”按钮将会弹出“创建超链接”对话框，可以链接到一个指定页面；单击“新建网页”按钮将创建一个新页面，然后在该页面内对该页进行编辑。在编辑页面时，若感觉页面被放在一个狭窄的框架中太拥挤，可选择“框架”菜单中的“在新窗口中打开网页”命令，这样便打开一个新的满屏窗口，可以自由地在页面中增加内容。
利用FrontPage的框架页面模板在Web页面上引入了框架布局，我们还可以在此基础上，根据需要进行进一步的设计。
1、增加新框架
要给框架页面增加新框架，就是像拆分表格的单元格一样，把一个框架分为两个框架。其操作如下：
（1）按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。
（2）也可以通过命令来操作：首先单击要拆分的框架内部，选“框架”菜单中的“拆分框架”命令，在弹出的“拆分框架”对话框中单击“拆分成列”或“拆分成行”单选按钮，单击“确定”按钮即可。
2．删除框架
若框架页面看起来太乱，可删除某些框架。要删除一个框架，可先单击该框架选择它，再选择“框架”菜单中的“删除框架”命令即可。
3．改变框架属性
在设置好框架的整体布局后，我们还可以对每一框架的具体属性进行设置，操作如下：
（1）单击需设置属性的框架，选择“框架”菜单中的“框架属性”，则弹出“框架属性”对活框。
（2）在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在例览器中可以调大小”复选框，则客户在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。
（3）在“框架大小”区域中，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。
（4）要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。
（5）单击“框架网页”按钮，则弹出“网页属性”对话框。
（6）在该对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。
（7）单击“确定”按钮，关闭“网页属性”对话框，再单击“确定”按钮，关闭“框架属件”对话框，完成框架属性设置。
动态网页
--------------------------------------------------------------------------------
DHTML是动态网页的意思，它其实并不是一个标准的术语。事实上没有一种技术叫作DHTML。DHTML是利用CSS(层叠样式表)，JavaScript，HTML等技术而建立的能与访问者产生互动的网页。比如在动态网页里，当访问者单击了某一张图片后，这张图片会自动的移动，这就是DHTML效果。也就是说，当网页下载完毕后，它无需再与服务器连接就能产生变化了。FrontPage2000提供了一套容易制作动态网页的方法，你可以建立起属于自己特色的动态网页。
1、使用DHTML的基本步骤
1).在页面点选需要使用DHTML的对象，比如文本，图片。对于文本需要拖曳鼠标选定；
2).在DHTML工具栏，选择通过开启的下拉列表选择一种事件，文本和图片所具有的事件是不同的；接下来再应用下拉列表选择一种效果；最后选择该效果的的实现方法；
3).当你为对象使用了DHTML后，保存该页面并预览，你会发现你选定的对象按照你设置的DHTML的效果出现；
4).如果想删除某一个对象的DHTML效果，先选定该对象，然后单击DHTML工具栏上的删除效果图标即可。
2、DHTML的事件
在DHTML制作中，我们听得最多的是“事件”这个术语。什么是“事件”呢，顾名思义，就是发生的一件事情，比如你用手打开门，那么这就是一个事件。换到网页制作中，开门变成了单击，也就是说，访问者单击了一个链接，那么出现了事件的结果，门被打开了。
在FrontPage2000中，当我们打开DHTML效果工具栏后，点选文本或者图片会产生不同事件。但它们的施用方法是一样的，下面我们以文本举例：
我们先在编辑器里输入一段文本，比如：网页陶吧，然后继续下面的三个步骤：
选定一段需要产生DHTML效果的文本，这里是：网页陶吧。从DHTML效果工具栏的开启下拉列表选择一个事件。这里对于文本我们只有“网页加载”这个事件。“网页加载”就是当网页第一次装入的时侯发生的事件，它不需要用户利用鼠标去触发它，而只需要访问者利用浏览器打开它的时侯就会产生预设的动态效果。
选择好事件后，我们要在应用下拉列表里选择一个该事件的应用效果。在该列表下有七种可以采用的效果，我们选择飞入。
对于应用效果会有不同的方法产生。比如当你选择的应用效果是“飞入”的时侯，文本可以从底部飞入，可以从左边飞入，也可以从右边飞入，这些就是方法。在这个下拉列表里并没有注明这个术语。有的应用效果是没有方法的，比如波动。我们这里选择从底部飞入。
最后保存该页面并预览，你会发现网页陶吧这个四个字在网页第一次加载后从底部飞入。当然，你也可以尝试其它DHTML效果。对于选定图片，你会在DHTML效果工具栏的开启下拉列表看到新的事件，单击和鼠标悬停，它们会有各自的应用效果和实现方法。你可以每一个尝试一下，这样你就能明白这些事件和应用效果和方法之间的关系。
3、DHTML的小技巧
DHTML兼容性
利用FrontPage2000制作的DHTML网页只能被InternetExplorer4.0或以上版本完全正常浏览。对于图片的DHTML效果，NetscapeCommunicator4.0或以上版本也可以浏览。
禁止DHTML
如果想禁用DHTML效果，点选菜单工具/网页选项，在打开的对话框里选择兼容性标签，取消动态HTML前的复选框里勾，这样DHTM效果被禁用。
快速使用DHTML
一般情况，在你没有选定某一个对象的情况下，你只需要把鼠标移动到对象的左边或者右边单击一下就可以使用DHTML效果了。
4、网页过渡
网页过渡是指当你进入或者离开一个网页的时侯所产生的效果的这个过程。比如你从某一页进入另一页，你会发现当前页慢慢向中间合拢，同时出现了另一个新的页面，直到当前页合拢消失而最后出现新的页面。如果你想使用网页过渡，可以按照以下步骤：
1).打开想使用过渡效果的页面，或者新建立一个页面。点选菜单格式/网页过渡，打开网页过渡对话框；
2).在事件下拉列表里选择一个事件，我们选择进入网页。大家要注意，当你为某页和站点都设置了过渡效果时，网页将比站点过渡效果优先；
3).在周期文本框里输入持续的时间，然后在过渡效果列表框里点选一个效果，单击确定。利用浏览器打开该页面，因为我们选择的网页过渡是进入网页，所以当你打开该页时你就能看到过渡效果了。
利用DHTML效果的确是吸引访问者的有力利器，但如果你不愿意和复杂的代码打交道，那么FrontPage2000为你预设了许多DHTML的效果。你要做的仅仅是选定需要动态效果的对象，比如文字，图片，然后利用“傻瓜”式的操作就可以让你的网页动起来。
Web页有自己的一组属性，通过选择“文件”菜单中的“属性”或通过鼠标右键单击页内任何位置，选择快捷菜单中的“网页属性”命令，可以打开“网页属性”对话框，在“常规”选项卡中，各项设置含义如下：
·位置：指出页的完整URL。
·标题：显示的页标题，即在HIML中显示在元素中的标签内。
·基位置：在此位置可输入一个URL，可将这页中使用的相对URL的超链接总指向同一正确的目标，通过对一个URL的说明，可以在不移动相对URL中所有目标的情况下，移动这个页。
·默认的目标框架：定义不规定框架的页中所有超链接的默认框架。
·背景音乐：加入背景音乐，当浏览器打开该页时，会同时播放音乐。
在其它选项卡中还可对页边距、语言等系统参数进行设置。
建立超链接
--------------------------------------------------------------------------------
超链接（HyperLink）的出现使网上浏览变得更加便捷，只须用鼠标轻轻点击，便能轻松地从一个页面跳转到另一个页面，从一个Web站点跳到另一个Web站点，从一个国家跳到另一个国家。超链接就是一些特殊的文本或图像，是其它页面的入口。
1．与当前web站点的页面建立超链接
（1）在FrontPage中打开要建立超链接的页面（若是新建页面，则要肯定该页面己被保存），选中超链接源，超链接源可以是一个字符、一个单词、一句话或一幅图片等。
（2）选择“插入”菜单中的“超链接”命令，或单击“常用”工具栏的“超链接”按钮，则弹出“创建超链接”对话框（如图），在该对话框中列出了当前FrontPage中打开的Web站点中的文件夹和文件。
（3）在该对话框的文件列表中，选择要建立链接的目标文件。
（4）单击“确定”按钮，超链接建成。
2．与本机中的其它文件建立超键接
（1）选择超链接源，打开“创建超链接”对话框。
（2）在该对话框中单击“制作一个链接到您计算机上文件的超链接”按钮，然后从弹出的对话框中找到自己所要链接的文件，选中它。
（3）单击“确定”按钮，超链接建成。
3．与worldwideweb上某一站点建立超链接
（1）在FrontPage中打开欲建超链接的页面，选定超链接源。
（2）选“插入”菜单中的“超链接”或单击常用工具栏的“超链接”按钮，弹出“创建超链接”对话框。
（3）在“URL”文本框中，输入超链接目标的URL。
（4）单击“确定”按钮。
格式化文本
--------------------------------------------------------------------------------
1．输入文本
从总体而言，文本仍是网页中的主体内容，在FrontPage中输入文本与在Word中输入文本非常类似。
(1).需要加入空行或换段时才使用Enter键，当输入文本达到所定义的右边界时，将自动换行。若录入文字有错可按Backspace键清除错误，重新录入。
(2).可在文本中任意位置处插入新文本内容，操作时把鼠标指针定位到欲加文本处即可添加文本。
(3).可进行覆盖式录入，即先用鼠标选中要替换的文本，然后直接录入文本。
(4).可通过单击常用工具栏的“显示所有”按钮，让段落标记在屏幕上显示或隐藏，借助段落标记可清楚地看到段与段之间的空行。
2．文本的选择
(1).选择一个单词或多个单词：选择一个单词只需在该单词上双击鼠标即可，按住鼠标左键在要选单词上拖动即可选择多个单词。选择字与选择多个单词的方法相同。
(2).选择一行文字：一行文字就是在屏幕上占据一行空间的文本。将鼠标箭头移到行的最左边，当光标箭头变为指向左边时，单击鼠标左键，便可选择该行。
(3).选择一个段落：将鼠标箭头移到该段落的最左边，当光标箭头变为指向左边时，双击鼠标左键，或按下ALT键，再用鼠标单击想要选择的段落，即可选择该段落。
3．删除、拷贝和移动文本或图片
(1).删除：删除插入点左侧的一个字符，按Backspace键；删除插入点右侧的一个字符，按Delete键；删除插入点右侧的一个单词，按Ctrl＋De1ete键；剪切所选内容并保行到“剪贴板”，按Ctrl＋X键；删除所选内容按De1e1e键或选择“编辑”菜单中的“删除”命令。
(2).拷贝：拷贝所选文本或图形到剪贴板，方法是：选中文本或图形，然后按Ctrl+C键或从菜单上选择“编辑”菜单中的“复制”菜单命令，也可直接单击工具栏中的“复制”按钮。
(3).移动文本或图片：选择想要移动的文本或图片，再拖曳到要插入的位置，释放鼠标，所选对象就移到目的地。如果先将选择的文本或图片“剪切”，然后再“粘贴”到指定区域，也可将其移动。
(4).通过“撤销”取消误操作：如果用户在不小心的情况下错误地执行操作，单击工具栏上的“撤销”命令按钮，可以取消用户执行过的操作，或从菜单栏选择“编辑”菜单中的“撤销”菜单命令，或按Cir1＋Z键。
4．加入标题
出于页面内容层次的需要，有时在页面中要加入一些小标题。HTML语言规范采用6级标题，各级标题采用文字不同字号来区分，其中标题1为大标题，其它依次为中小标题。要设定某一级标题，可以在FrontPage格式工具栏中的“样式”下拉列表中选中一个标题等级，然后在光标处输入标题文字即可；或者先输入文字，并选定该文字，然后在“样式”下拉列表中选定某一级标题。标题结束后，将下拉列表中的格式改回原来的“普通”，再进行其它内容的输入。
5．改变字体及设置字体效果
FrontPage在通常情况下，字体为“TimesNewRoman”。若用户的操作系统是中文Windows95／98或WindowsNT，中文默认字体为“宋体”，文字大小采用默认的字号。若要设定不同的字体，可先选择要改变的文字，然后在格式工具栏里的“字体”下拉菜单中选择一种字体，或从菜单栏选择“格式”菜单中的“字体”菜单命令，通过“字体”对话框来设置，并可设定字体样式、大小等。当字体改变后，形式将一直保持，直到用户又重新设置新的字体为止。
(1).设置字体颜色：选中文字，单击格式工具栏上的“文本颜色”按钮的下拉箭头，就会弹出其下拉列表，在“标准颜色”中选择所需颜色；若没有，可选择“更多的颜色”命令，然后从弹出的对话框中选择。
(2).设置字体样式：要对需要的文字进行粗体、斜体和下划线处理，只要选择要处理的文字，从格式工具栏上单击“加粗”、“斜体”或“下划线”按钮即可。想解除此效果，可以选中文字，再次按相应的按钮就可以解除效果，恢复到正常字体。在制作网页时，一般不采用“下划线”效果，因为下划线在一些网页中都表示有超链接。
(3).字体加线效果：共有两种:“下划线”可以在选中的文字下面划一条线；“删除线”在文字中间贯穿划一条线。
(4).特殊的文字风格：当选中的文字需要使用某些特殊风格，如“闪烁”风格，可通过选择“字体”对话框中“字体”选项卡（如图）的“效果”区域的所需选项，但有的文字特殊效果只有在浏览器中才能体现出来。
6．文本的缩进
文本的缩进就是使文本左边、右边显示空白，这种效果有利于对关键段落加强说明。要对一个已有的段落运用缩进的方式，首先选中段落，然后在格式工具栏上单击“增加缩进”按钮，段落左边和右边分别缩进一段距离，连续按“增加缩进”按钮，缩进将进一步加大。这种在文字两边同时缩进的方式也称之为双向缩进。若缩进的空间太大，可以通过单击“减少缩进”按钮来减少缩进的空间。
7．文本对齐方式
若输入的文字是从该页的左边距开始，并逐渐向右延伸，且到了行满以后又折回下行左边（左边距处）重新开始，这就是左对齐。有些文字需要居中方式，比如标题之类的文字；而有些文字需要放到右边，这些可通过格式工具栏上的“向左对齐”、“居中”和“向右对齐”按钮来实现：，不同的对齐方式可以使文本呈现不同的显示样式，而且可以清楚地表明用户想要说明的问题，使网页整体保持协调。要设定文本的居中、左齐或右齐方式，须先选择好要设置的文本，再单击相应按钮即可。如果用户想回到原始状态的对齐的方式，应先选定该文本，再单击格式工具栏上相应的对齐按钮。
8、加入项目符号或列表编号
有一些列表前面有加圆点的符号，说明一条条的列表内容，这在专业排版中称为项目符号，在Web页面中加入项目符号或列表编号可使内容有条理、更清楚，可以通过列表把大量内容简要地描述出来，便于读者抓住重点。还有另外一种形式即列表编号，可以用来描述一个问题的处理步骤和顺序，这两种处理形式在FrontPage中运用起来很方便。
加入项目符号或列表编号与在Word中的操作很类似。先选定文本，用户可以在格式工具栏按相应的按钮，或选“格式”菜单中的“项目符号和编号方式”命令，打开项目符号和编号方式对话框（如图），从中选定不同格式的列表项目。
在FrontPage中新建的两个文本行之间都有一个空行，如果用户在输入或添加项目时不想每两行之间都出现一个空行，可以在格式工具栏上单击“项目符号”或“编号方式”按钮。该按钮为下凹状后同时出现第一个项目符号，输入需要的文字后，按“回车”键，然后在自动出现的下一个项目符号后继续输入。
FrontPage还可以通过提供列表编号或项目符号的方式对列表项进行排列。操作方法与上一段所述相同。
如果在所有项目输入完毕后，以下的内容不再希望添加编号或项目符号，可两次回车，则停止编号或停止添加项目符号。若想改变编号的形式或不想从1开始，可通过在列表符号上单击鼠标右键，在弹出的快捷菜单上选择“列表属性”命令，在弹出的“列表属性”对话框中选择“号码”选项卡，选择所需的编号风格，再在右边的“初始号码”微调器中调整起始编号，在调好之后单击“确定”按钮即可。
制作网页是一个非常复杂的过程，你不仅需要懂得美工，还需要多少知道点程序,还有网上的：
网页制作和简单程序教程！