网页DIV+CSS布局和动画美化全程实例

章节摘录

版权页：   插图：   30 执行菜单栏上的“插入”|“新建元件”命令或者按Ctrl+F88R合键，在打开的“创建新元件”对话框中输入名称“line5shan”，选择“影片剪辑”下拉列表项，具体设置如图7—96所示。 31 单击“确定”按钮，进入“line5shan”影片剪辑文档编辑窗口，从“库”面板中把“line5”图形元件拖放在文档编辑区内，具体设置如图7—97所示。 32 执行菜单栏上的“插入”|“新建元件”命令或者按下Ctrl+F8组合键，在打开的“创建新元件”对话框中输入名称为shan，选择“影片剪辑”下拉列表项，具体设置如图7—98所示。 33 单击“确定”按钮退出。接着进入shan影片剪辑文档编辑窗口，从“库”面板中拖入以上制作的图形和影片剪辑元件，制作出一个发光的动画效果。由于此步骤较繁琐，因此这里就不做详细介绍，读者可以参考配书光盘中的相关文件，最后效果如图7—99所示。 34 制作按钮元件，首先执行菜单栏上的“插入”|“新建元件”命令或者按下Ctrl+F8组合键，在打开的“创建新元件”对话框中输入名称为“爿寺效图片”，选择“图形”下拉列表项，具体设置如图7—100所示。 35 单击“确定”按钮，进入“特效图片”图形元件文档编辑窗口，单击工具箱中的“矩形工具”按钮镰，然后在舞台中绘制一个矩形。在“属性”面板中设置“宽”为59.4像素、“高”为12.85像素、“颜色”为白色，其他保持默认，具体设置如图7—101所示。 36 然后再次执行菜单栏上的“插入”|“新建元件”命令或者按下Ctrl+F8组合键，在打开的“创建新元件”对话框中在“名称”文本框中输入“特效”，选择“按钮”下拉列表项，具体设置如图7—102所示。 37 单击“确定”按钮退出。接着进入“特效”按钮元件文档编辑窗口，从“库”面板中把“特效图片”图形元件拖放在该按钮元件的“弹起”帧状态上，并在“属性”面板中设置它的“透明度”为0，其他设置具体见图7—103所示。 38 选中“指针经过”帧，按下快捷键F6创建一个关键帧，在“属性”面板中设置它的“透明度”为30％，其他设置如图7—104所示。 39 选中“按下”帧，按下快捷键F6创建一个关键帧，在“样式，，下拉列表框中选择“色调”选项，设置RGB颜色值分别为：204、0、0、“色调”为100％，其他设置如图7—105所示。 40 选中“点击”帧，按下快捷键F6创建一个关键帧，在“样式”下拉列表框中选择Alpha选项，设置Alpha为100％，其他设置如图7—106所示。

书籍目录

第1章  动感网页动画的实现技术
  1．1 网页动画的重要性
    1．1．1 成功的网站所具备的特点
    1．1．2 快速发展的网页特效动画技术
    1．1．3 网页动画设计师必须掌握的技术
  1．2 掌握Web网页标准的基础
    1．2．1 网页标准化的好处
    1．2．2 现阶段使用的Web标准
    1．2．3 使用Web标准改善现有网站
  1．3 嵌入网页的动画技术
    1．3．1 GIF图片动画
    1．3．2 CSS样式动画
    1．3．3 JavaScript特效动画
    1．3．4 Flash动画
第2章  DIV+CSS网页布局基础知识
  2．1 DIV的基础知识和操作
    2．1．1 层的基础知识
    2．1．2 页面中插入层
    2．1．3 创建嵌套层
    2．1．4 层属性面板
  2．2 CSS层叠样式表
    2．2．1 CSS的作用、类型与冲突
    2．2．2 编辑CSS层叠样式表
    2．2．3 层叠样式表规则意义
  2．3 DIV+CSS布局方法
    2．3．1 DIV标签控制方法
    2．3．2 XHTML中的元素
    2．3．3 元素的样式设置
    2．3．4 网页宽度的设置
    2．3．5 水平居中的设置
    2．3．6 DIV的嵌套设置
    2．3．7 DIV的浮动方法
    2．3．8 网页布局的实例
  2．4 列表元素布局
    2．4．1 列表元素布局导航
    2．4．2 导航条的超级链接
    2．4．3 导航条的互动设计
  2．5 CSS盒模型
    2．5．1 CSS盒模型概念
    2．5．2 外边距的控制
    2．5．3 边框的样式设置
    2．5．4 内边距的设置
    2．5．5 盒模型兼容问题
  2．6 元素的非常规定位方式
    2．6．1 CSS绝对定位
    2．6．2 CSS固定定位
    2．6．3 CSS相对定位
    2．6．4 CSS程序简化
第3章  全程实例一：清新风格的摄影网站
  3．1 摄影网站的美工创意
    3．1．1 首页的功能模块
    3．1．2 规划首页的版面
  3．2 首页的布局设计
    3．2．1 Photoshop分割图片
    3．2．2 网站文件夹规划
    3．2．3 搭建网站服务器平台
    3．2．4 创建编辑站点
    3．2．5 转换首页布局结构
    3．2．6 CSS标准化网页
  3．3 实例的动画效果
    3．3．1 使用的动画技术
    3．3．2 链接注释动画
    3．3．3 状态栏跑马灯
    3．3．4 随机文本颜色
    3．3．5 滴水特效动画
第4章  全程实例二：个性化的博客网站
  4．1 博客网站美工设计
  4．2 网站的首页布局
    4．2．1 图片的分割
    4．2．2 配置本地站点
    4．2．3 创建编辑站点
    4．2．4 转换首页布局结构
    4．2．5 DIV+CSS布局首页
    4．2．6 二级页面的设计
  4．3 日记翻页的动画效果
    4．3．1 实现的动画技术
    4．3．2 素材图片的整理
    4．3．3 图形元件的制作
    4．3．4 按钮元件的制作
    4．3．5 日记页面的制作
    4．3．6 向右翻页的动画
    4．3．7 向左翻页的动画
    4．3．8  图层合成影片
    4．3．9 加入翻书的声音
    4．3．10 加入动作命令
    4．3．11 嵌入网页并应用
第5章  全程实例三：精致风格的美容网站
  5．1 雅丽美容网站的设计
    5．1．1 网站的栏目设计
    5．1．2 设计首页的版面
  5．2 网站首页布局设计
    5．2．1 切片网页图片
    5．2．2 搭建本地站点
    5．2．3 创建编辑站点
    5．2．4 转换布局结构
    5．2．5 DIV+CSS布局网页
  5．3 首页加入动画效果
    5．3．1 首页的动画效果
    5．3．2 滑动二级菜单
    5．3．3 Flash特效动画
第6章  全程实例四：天真的乐园网站
  6．1 天真乐园网站的设计
    6．1．1 网站的栏目设计
    6．1．2 首页的版面设计
  6．2 首页的布局设计
    6．2．1 使用Photoshop分割图片
    6．2．2 配置本地站点服务器
    6．2．3 创建编辑站点
    6．2．4 转换首页布局
    6．2．5 DIV+CSS布局网页
  6．3 加入的动画效果
    6．3．1 使用的动画效果
    6．3．2 DIV+CSS滑动菜单
    6．3．3 Flash特效动画效果
    6．3．4 显示访问时间
第7章  全程实例五：水墨风格的餐饮网站
  7．1 水墨风格的网站美工设计
    7．1．1 餐饮网站的栏目设计
    7．1．2 网站首页的设计
  7．2 网站首页的布局设计
    7．2．1 使用Photoshop切片图片
    7．2．2 配置本地站点服务器
    7．2．3 创建编辑站点
    7．2．4 转换首页布局结构
    7．2．5 DIV+CSS布局网页
  7．3 首页加入动画效果
    7．3．1 实例使用的动画效果
    7．3．2 逐字变化文本颜色
    7．3．3 变化菜品的动画效果
    7．3．4 发光灯笼和动画菜单
第8章  全程实例六：淳朴风格的办公用品网站
  8．1 办公用品网站的美工设计
    8．1．1 网站的栏目设计
    8．1．2 设计首页的版面
  8．2 网站首页的布局设计
    8．2．1 Photoshop切片图片
    8．2．2 配置本地站点
    8．2．3 创建编辑站点
    8．2．4 转换首页布局
    8．2．5 DIV+CSS布局首页
  8．3 加入的动画效果
    8．3．1 使用的动画效果
    8．3．2 状态栏时间显示
    8．3．3 壁灯的动画设计
    8．3．4 Flash滑动菜单
第9章  全程实例七：传统风格的酒业网站
  9．1 葡萄酒网站的美工设计
    9．1．1 设计酒业网站栏目
    9．1．2 设计首页的版面
  9．2 首页的布局设计
    9．2．1 Photoshop切片图片
    9．2．2 配置本地站点
    9．2．3 建立酒业编辑站点
    9．2．4 转换首页布局
    9．2．5 DIV+CSS布局首页
  9．3 首页加入动画效果
    9．3．1 实例使用的动画
    9．3．2 滚动字幕广告
    9．3．3 Logo发光动画
    9．3．4 发光酒杯动画
第10章  全程实例八：温馨风格的家俱网站
  10．1 温馨风格的家俱网站美工
    10．1．1 家俱网站的栏目设计
    10．1．2 设计首页的版面
  10．2 家俱首页的布局设计
    10．2．1 首页图片的切片
    10．2．2 配置家俱站点服务器
    10．2．3 创建编辑站点
    10．2．4 转换首页布局结构
    10．2．5 DIV+CSS布局网页
  10．3 首页加入动画效果
    10．3．1 使用的动画技术
    10．3．2 图片的自动切换
    10．3．3 滑动的导航菜单

编辑推荐

　　《网页DIV+CSS布局和动画美化全程实例》详细介绍了使用网页DIV+CSS布局的方法，详解了国内外站点关于网页特效实现的精华案例，并由资深设计师结合实际开发经验，加以归纳、综合而成网页布局设计中特效实现的精彩实例。

作者简介

《网页DIV+CSS布局和动画美化全程实例》讲述网站的建站技术近几年得到迅速的发展，网页的布局与特效动画技术层出不穷，网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代。但如何使设计的网页高人一筹，达到让人过目不忘的境界，如何追求以最简单的特效让网页“亮”起来，这些都是新一代网页设计者最关注的话题。《网页DIV+CSS布局和动画美化全程实例》详细介绍了使用网页DW+CSS布局的方法，详解了国内外站点关于网页特效实现的精华案例，并由资深设计师结合实际开发经验，加以归纳、综合而成网页布局设计中特效实现的精彩实例。

图书封面

---

 网页DIV+CSS布局和动画美化全程实例下载

---