网页设计课件PPTnew.pptVIP

* * * * * * * * * * * * * * * * * * * * 第二章 使用表格布局页面 —— 理论部分 * 课程回顾 为什么要学习制作网页？ 如何在网页中插入一个图像？ 如果要设置一个新闻标题的字体大小为16px，字体颜色为红色，并且加粗显示，该如何设置？ 如何创建一个站点？ * 技能展示 掌握嵌套表格的应用 了解常见网页布局形式 会使用表格布局并制作淘宝网首页 了解网页设计配色原则 所需学时 3学时 * * 本章结构 网页中使用表格 使用层布局页面 表格的应用 层布局优点 嵌套表格的使用 网页布局概述 创建超链接 使用表格和层布局页面 使用表格布局页面 常见网页布局形式 布局淘宝网首页 网页设计配色原则 什么是层及如何创建层 制作淘宝网登录页面 表单在网页中的应用 * 网页中使用表格 * 表格的应用 制作淘宝网中的淘宝大学 案例分析 表格布局和表格嵌套 图像与文字的对齐方式 图像与文本间距 设置超链接 * 创建淘宝大学页面 新建网页 布局页面 插入一个3行1列的表格 在属性检查器中设置表格对齐方式 在这3个单元格中编辑各部分的内容 标题及相关超链接 图像及内容介绍 帮助部分超链接的制作 教师演示操作过程 * 表格嵌套 在单元格中插入一个新的表格 就好像在word文档中的单元格中插入表格 嵌套表格 * 创建超链接 创建超链接的方式 使用菜单栏：插入记录→超级链接 插入栏：常用→超链接图标 在属性检查器中设置 链接地址 打开页面的方式 * 设置超链接 设置超链接的字体颜色 a:link：未访问的链接 a:visited：已访问的超链接 a:hover：当有鼠标悬停在链接上 a:active：被选择的链接 超链接文本 是否有下划线 * 演示制作淘宝大学 制作淘宝大学 在表格中嵌套表格 制作各部分的内容 统一页面的字体大小 设置图像与文本的对齐方式 设置超链接及超链接文本颜色 教师演示操作过程 * 页面布局 页面布局效果 条理清晰 主次分明 色彩对比度适当 布局疏密适当 * 网页布局形式 常见网页布局形式 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型 “国”字型 * 网页布局形式 拐角型 * 网页布局形式 封面型 * 网页布局形式 Flash型 * 使用表格布局淘宝网页面 页面分析 三大部分：导航、中间内容、版权 中间又分为13个部分：人气宝贝、3个图片广告、快速注册、宝贝类目、热点部分、闲置拍卖、精彩资讯、社区精华、公告栏、淘宝大学、热买单品 页面布局呈“国”字型 * 页面布局 使用表格布局页面 网站导航 热卖单品 网站版权 人气宝贝 图片广告 快速注册 宝贝类目 热点部分 图片广告 图片通栏广告 闲置拍卖 精彩资讯 社区精华 公告栏 淘宝大学 教师演示操作过程 * 小结 请思考： 如何给一个文本增加超链接？ 单击一个超链接时，弹出一个新的页面，该如何设置其超链接？ 如何实现表格嵌套？ * 本章总结 网页中使用表格 使用层布局页面 表格的应用 层布局优点 嵌套表格的使用 网页布局概述 创建超链接 使用表格和层布局页面 使用表格布局页面 常见网页布局形式 布局淘宝网首页 网页设计配色原则 什么是层及如何创建层 制作淘宝网登录页面 表单在网页中的应用 第二章 使用表格布局页面 —— 上机部分 * 实验案例1：使用表格布局拍拍网首页 需求描述 使用表格布局 页面对应模块的内容由图片代替 实现思路 分析页面的布局 分析页面由哪些内容组成 * 实验案例1：使用表格布局拍拍网首页 使用表格布局效果 页面实现效果 导航部分 热卖单品 社区 版权部分 拍拍色告 Flash广告 手机充值专区 买东西、卖东西 宝贝类目 裳品廊、热卖、品牌 数码 手机 15分钟完成 * 实验案例2：制作拍拍网商品展示页 需求描述 使用表格布局 导航和版权部分使用部片代替 本例只编辑中间的商品展示部分 商品标题增加超链接 * 实现思路 使用表格布格表格，导航和版权部分用图片代替 设置图片对齐方式 图片与文字间距的设置 实验案例2：制作拍拍网商品展示页 * 学员练习 插入一个3行1列的表格 插入导航和版权部分 在中间商品展示部分使用嵌套表格的方式布局 设置字体大小、颜色、超链接等 实验案例2：制作拍拍网商品展示页 35分钟完成 * * * * * * * * * * * * * * * * * * * * * * * * * *