chapter6 网站设计和页面布局

回顾

·           使用Dreamweaver在网页中如何插入Flash？

·           使用表格如何对表单进行布局？

·           如何实现细边框样式？

 

 

预习检查

·           请简述网站开发的大致流程？

·           使用Dreamweaver创建站点有哪几步？

·           页面布局有哪几种？

 

 

本章任务

·           使用Dreamweaver创建淘宝网站点

·           使用Dreamweaver设计首页的整体布局

·           使用Dreamweaver制作首页的导航部分

·           使用Dreamweaver制作首页的广告部分

 

 

本章目标

·           能使用网站设计流程分析简单网站的设计

·           能使用DIV层技术进行页面整体布局

·           能使用表格进行图文内容的布局

 

网站开发的流程介绍

网站开发的流程介绍

需求分析

·           客户需求

·         业务背景

    一个商品展示、在线购物、交互服务和管理的平台

·         设计风格

    鲜明、亮丽、明快、时尚

·         网站内容

    公司简介、商品分类、商品展示、价格信息、商品搜索、网上订单、会员注册、客户服务等

·           确认需求

·         给客户提供一个前期静态Demo(可用photoshop制作)

 

 

创建站点

使用Dreamweaver创建站点的步骤：

1、 新建站点

2、选择“是否”使用服务器技术

3、选择“编辑我的计算机上的本地副本…”

4、选择用于存储网站文件的文件夹

5、选择连接到远程服务器的选项

6、在“文件”面板中创建images、css等文件夹

 

 

页面内容

页面布局之框架布局

框架布局

使用Dreamweaver创建如下图所示的框架集页面

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

小结1

使用Dreamweaver制作如下图所示框架布局

页面布局之表格布局

 

 

使用Dreamweaver创建如下图所示表格布局页面

表格布局

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

小结2

使用Dreamweaver制作如下图所示表格布局

页面布局之DIV布局

·                     DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。

·                     创建DIV的步骤如下：

1、新建一个空白文档

2、选择“插入”à“布局对象” à“层”

      或者在“布局”插入栏à使用“绘制层”按钮进行绘制层

 

 

<STYLE type="text/css">

#Layer1 {

  position:absolute;

  left:9px;

  top:12px;

  width:418px;

  height:58px;

  z-index:1;

  background-color: #FF0000;   }

……

</STYLE>

……

      <DIV id="Layer1"></DIV>

 

插入DIV标签

·           通过菜单栏：

·         选择“插入” → “布局对象” →“Div标签”

·            通过工具栏：

·          在“布局”插入栏→ 点击“插入Div标签”按钮

 

 

DIV层布局

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

最佳布局

创建如下图所示DIV+表格布局的页面

 

小结3

使用Dreamweaver制作如下图所示布局页面

 

总结

·               简述网站开发的流程

·               说明框架布局使用的场合

·               简述表格布局的优点与缺点

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

 

    1.框架

 

<FRAMESET rows="190,*" cols="*" frameborder="NO" border="0" framespacing="0">

  <FRAME src="top.html" name="topFrame" scrolling="NO" noresize title="topFrame" >

  <FRAMESET rows="*" cols="161,*" framespacing="0" frameborder="NO" border="0">

    <FRAME src="left.html" name="leftFrame" scrolling="NO" noresize="noresize" title="leftFrame">

    <FRAME src="right2.htm" name="mainFrame" title="mainFrame">

  </FRAMESET>

</FRAMESET>

 

    2.<A href="right1.htm" target="mainFrame">      子窗口跳转，对应主页面的name

 

    3.层样式

#Layer2 {

    position:absolute;

    background-color:#000000;

    width:600px;

    height:20px;

    z-index:2;

    top: 19px;

    left: 1px;

   

}