网站设计与页面布局技术.pptVIP

补充阅读： 网站设计与页面布局技术 本章任务 本章目标 能使用网站设计流程分析简单网站的设计 能使用DIV层技术进行页面整体布局 能使用表格进行图文内容的布局 网站开发的流程介绍 网站开发的4个步骤： 1、需求分析 网站开发的流程介绍 2、网站制作 3、测试网页 4、发布网站 需求分析 客户需求 业务背景 一个商品展示、在线购物、交互服务和管理的平台 设计风格 鲜明、亮丽、明快、时尚 网站内容 公司简介 、商品分类 、商品展示 、价格信息 、商品搜索 、网上订单 、会员注册 、客户服务等 确认需求 给客户提供一个前期静态Demo(可用photoshop制作) 创建站点 使用Dreamweaver创建站点的步骤： 1、 新建站点 2、选择“是否”使用服务器技术 3、选择“编辑我的计算机上的本地副本…” 4、选择用于存储网站文件的文件夹 5、选择连接到远程服务器的选项 6、在“文件”面板中创建images、css等文件夹 页面内容 页面布局之框架布局 框架布局 框架布局 框架布局的优缺点和应用场合 小结1 使用Dreamweaver制作如下图所示框架布局 页面布局之表格布局 表格布局 表格布局 表格布局的优缺点和应用场合 小结2 使用Dreamweaver制作如下图所示表格布局 页面布局之DIV布局 绘制层2-1 DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。 创建DIV的步骤如下： 1、新建一个空白文档 2、选择“插入” ?“布局对象” ?“层” 或者 在“布局”插入栏?使用“绘制层”按钮进行绘制层 绘制层2-2 插入DIV标签 通过菜单栏： 选择“插入” → “布局对象” →“Div标签” 通过工具栏： 在“布局”插入栏→ 点击“插入Div标签”按钮 DIV层布局 DIV布局的优缺点和应用场合 最佳布局 最佳布局 小结3 使用Dreamweaver制作如下图所示布局页面 本章任务 本章目标 会用Dreamweaver制作模板页并应用到其他页面 会用Dreamweaver制作样式文件并绑定到各页面 会使用网站开发流程制作并发布网站 为什么需要模板 为什么需要模板 制作模板 制作模板页两种方式： 第一种：将现有文档保存为模板 1、打开HTML文档 2、选择“文件” ?“另存为模板” 3、设置相关属性，然后“保存” 制作模板 第二种：新建空白模板 1、选择“窗口” ?“资源” 2、在“资源”面板上新建模板 3、设置相关属性，然后“保存” 制作模板 定义可编辑区域 添加基本可编辑区域 1、在模板文档中选择要设置为可编辑的区域 2、“插入” ?“模板对象” ?“可编辑区域” 删除可编辑区域 1、选择要编辑的区域 2、“修改” ?“模板” ?“删除模板标记” 应用模板 将模板应用于页面的步骤如下： 1、新建要应用模板的空白文档 2、在“资源”面板找到要应用的模板 3、将模板拖到空白“文档”中 4、在可编辑区域添加或编辑数据 应用模板 应用模板 应用模板 小结1 用模板页制作登录、注册页面 制作样式表 制作样式表 创建样式文件 教员演示创建样式文件的步骤： 1、选择“文件” ?“新建” 2、选择“基本页” ?“CSS” 3、单击“创建” 制作样式表 演示定义样式规则的步骤： 1、选择“窗口” ?“CSS样式” 2、在“CSS样式”面板中，右击?新建 3、分别新建标签body、a等的样式 4、分别新建ID样式#head、 ID样式#search_form等 5、分别新建类样式.fontcolor_white、 类样式.tableBorder等 制作样式表 演示两种方式应用样式文件： 1、打开要应用样式的网页 2、在属性面板中单击“样式”下拉框 3、选择附加样式 4、选择要引入的样式文件 应用样式文件 设置页面间的链接 设置页面间的链接 教员演示如下操作： 1、将“首页”和“登录页”、“注册”页链接 2、将宝贝分类栏目中的“装备”和“商品”展示页链接 3、将“商品展示”页和“快乐幻想去神愿石”商品详细介绍页链接 4、将“快乐幻想去神愿石”商品详细介绍页中的“立刻购买”和“购 买页”链接 测试并发布网站 测试内容 页面效果是否美观 链接是否完好 测试不同浏览器的兼容性 发布站点 安装IIS 1、打开“控制面板” 2、双击“添加或删除程序”图标 3、单击“添加／删除Windows组件”按钮 4、选中“应用程序服务”并单击“详细信息”按钮 5、选中“Internet信息服务(IIS)”，然后单击“确定” 6、单击“下一步”进行安装，最后单击“完成” 发布站点 上传网站 发布站点 访问网站 由于我