现在的位置: 首页 > 综合 > 正文

网页布局

2014年06月09日 ⁄ 综合 ⁄ 共 1756字 ⁄ 字号 评论关闭

                                                                ----------------2014.03.03-------------------
一、网站开发的4个步骤:
1、需求分析
·客户需求
 -业务背景
 -设计风格
 -网站内容

 ·确认需求
-提供给客户一个前期静态的设计样板(可PhotoShop制作)

2、网站制作

创建站点 ---> 制作首页 ---> 制作模板 ---> 制作样式

3、测试网页

4、发布网站

 

二、Div的概念
标记:<div></div>
·一行始终只有一个div标记
·没有特性,css更容易控制

 

三、页面水平居中效果
1)Margin{0 auto}
2)必须要有类型声明

 

四、流式布局
1)Float:left right none
2)Clear:both left right none

 

五、定位
1)绝对定位
  ·position:absolute
  ·top bottom left right
  ·当多个div在同一位置时,显示哪个层由Z-index的值决定

2)相对定位
·position:relative
·相对于正常位置的top bottom left right

 

六、页面布局
1)导航部分
2)广告部分
3)商品分类部分
4)版权声明部分

 

七、页面布局
1)框架布局
·框架布局的优缺点和应用场合

                        优点                                                         缺点                                                 应用场合

            支持滚动条,方便导航,                            兼容性不好,保存时不方便,                          小型商业网站,论坛、
            节省页面下载时间等                              应用范围有限等   后台管理、                        学习教程等

2)表格布局
 
                       优点                                                          缺点                                                    应用场合

           方便排列有规律、                                产生垃圾代码、影响页面下载时间、               内容或数据整齐
            结构均匀的内容或数据                          灵活性不大,难以维护                                        的页面

 

3)DIV布局
·DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素
·创建DIV的步骤如下:
 a、新建一个空白文档
 b、选择 "插入" ---> "布局对象" --->"层"

·DIV布局的优缺点和应用场合
  

                           优点                                                             缺点                                                   应用场合

      代码精简、提高页面下载速度、                                   比较灵活,                                          复杂的不规则页面、
      表现和内容相分离等                                                    难以控制                                        业务种类较多的大型商业网站

 

八、总结
1)简述网站开发的流程

2)说明框架布局使用的场合

3)简述表格布局的优点和缺点

4)详述DIV布局的优点以及使用场合

 

 

 

 

 

 

 

【上篇】
【下篇】

抱歉!评论已关闭.