网页布局和制作.pptVIP

第二讲 网页布局与制作 边耐政 湖南大学 软件学院 nbian@hnu.cn 主题 软件学院首页布局分析 Dreamweaver布局HTML页面 Dreamweaver制作HTML页面 目的 利用Dreamweaver来布局HTML页面，并通过Dreamweaver来制作HTML页面 1 页面布局分析 软件学院首页原图 1 页面布局分析 软件学院首页框架精简图 1 页面布局分析 软件学院首页框架代码图 1 页面布局分析 软件学院首页框架分析（1） 1 页面布局分析 软件学院首页框架分析（2） 1 页面布局分析 软件学院首页框架分析（3） 1 页面布局分析 软件学院首页框架分析（4） 1 页面布局分析 软件学院首页框架分析（5） 2 Dreamweaver 进行页面布局 进入页面（1） 2 Dreamweaver 进行页面布局 插入表格（1） 2 Dreamweaver 进行页面布局 设置表格属性（1） 2 Dreamweaver 进行页面布局 设置表格属性（2） 2 Dreamweaver 进行页面布局 设置表格属性（3） 2 Dreamweaver 进行页面布局 页面布局（1） 2 Dreamweaver 进行页面布局 页面布局（2） 2 Dreamweaver 进行页面布局 页面布局（3） 2 Dreamweaver 进行页面布局 页面布局（4） 2 Dreamweaver 进行页面布局 页面布局（5） 2 Dreamweaver 进行页面布局 页面布局（6） 2 Dreamweaver 进行页面布局 页面布局（7） 2 Dreamweaver 进行页面布局 页面布局（8） 2 Dreamweaver 进行页面布局 页面布局（9） * * 此图去掉了网页上详细信息，只保留了其基本框架。在这里只是为了向大家说明网页的布局方法。 框架对应的HTML代码 由框架代码可知，整个页面的布局是通过表格来实现的，每个表格可以再进行详细的布局。通过几个总表格的组装便得到了整个页面的布局方式 对应区域的图片 左边是对应框架的代码。网站的最上面是由一个表格布局的，并指定宽度为776像素，高度为为101像素。(这里只给出了框架的代码，并没有给出里面详细实现代码) 对应区域的图片 这部分也是由一个表格布局的，他有两列，左边区域用来布局登陆框，右边布局一个Flash图标。其中指定整个表格高度为776像素，整个宽度为117像素，左边区域宽度为191个像素，高度为118个像素，右边区域自动设置成剩余的高度和宽度 对应区域的图片 这部分也是由一个表格布局的，他有三列，左边区域用来布局一些栏目信息，中间边布局新闻列表，最右边的区域对布局没有什么作用，主要是设置一下颜色，增加一下层次感。其高度和宽度的设置同上。其中每个部分的详细布局也是通过表格布局的，这里就省略了。 这部分是由一个表格布局的，它有两行，第一行有两列，第二行只有一列，其中的colSpan=2是设定第二行占了两列的宽度。其高度和宽度的设定同上 对应区域的图片 对应区域的图片 这部分是由一个表格布局的，它有只有一行，在这一行里再布局版权及相关信息 页面图形化显示区域 页面属性编辑区域 快捷工具栏 布局时设定边框的属性为0 指定宽度，一般显示器的宽度为1024个像素 表格是HTML页面最重要的布局元素，我们布局时可以设定边框粗细、单元格边距和单元格边距为0 网页logo区域，可以合并成一个单元格 左侧为导航区域 在面板上拖动刚刚生成的表格，设计一个你喜欢的布局样式，如下图所示，下面我将以我的喜好来介绍一下我的设计样式 中间为内容显示区域 右侧为功能连接区域 下面为版权声明区域，可以合并为一个单元格 选中这一行，右键-表格-合并单元格 这一部我先将上面设计实现，即合并单元格，同理我们也可以按照需要拆分单元格 合并后的效果。（选中多个单元格的方式为crtl键+单击你所要选中的单元格） 合并后的布局图 这一部我先将设置表格的背景图片，对齐方式等属性 设定背景图片路径 设定对齐方式 设置logo图标，将你选择的图片插入到logo区域。选中单元格-插入-图像-选择图像-确定，最后拖动图片，以设定图片的长度和宽度 将logo插入指定区域，当然我们也可以作为背景图片插入 左侧导航栏的布局，我们可以往左侧导航栏里继续添加表格来完成更加详细的布局 选中左侧单元格，插入/表格，设定表格属性，在这里我建立了一个三行一列的表格，简单模拟一下导航栏的布局。 继续对左侧导航栏进行布局，并设定所在单元格的属性 这里是刚刚插入的布局单元格，只有3行 将此表格所在的单元格的垂直对齐方式改为顶端对齐，这样就会出现上面的画面 设置该单元格的水平对齐方式 对左侧导航栏进行详细布局，这里我只是简单地添加了图片，我们也可以设置背景图片和文