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

出版时间：2012-9  出版社：清华大学出版社  作者：陈益材　等编著  页数：363  字数：602000  

内容概要

网站的建站技术近几年得到迅速的发展，网页的布局与特效动画技术层出不穷，网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代。但如何使设计的网页高人一筹，达到让人过目不忘的境界，如何追求以最简单的特效让网页“亮”起来，这些都是新一代网页设计者最关注的话题。本书详细介绍了使用网页DIV-+CSS布局的方法，详解了国内外站点关于网页特效实现的精华案例，并由资深设计师结合实际开发经验，加以归纳、综合而成网页布局设计中特效实现的精彩实例。
《网页DIV+CSS布局和动画美化全程实例(附光盘)》由陈益材、何楚斌编著，《网页DIV+CSS布局和动画美化全程实例(附光盘)》涉及Web出编程的基础知识、开发技术以及高级动画特效的制作技巧，无论是具有Web编程经验的中高级开发人员，还是网页设计的初学者，本书都能成为其设计网页时的好帮手。同时，本书也适用于网页设计与制作人员、网站建设与开发人员阅读，也可以作为高等院校相关专业和相关培训机构的教学用书。

书籍目录

第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 滑动的导航菜单

章节摘录

版权页：   插图：   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所示。

编辑推荐

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

用户评论 (总计32条)

•   网页DIV+CSS布局和动画美化很不错
•   很多实例动态效果，跟着能做出很漂亮的网页！给新手很多启发，更能晋级，更深一成应用！
•   稍微看了一下目录，很多实例教学。
•   实例比较充足，适合有基础的看
•   书还不错 是CS3版本的 讲解的也挺详细
•   这本书也很不错，虽然还没来得及细细看，但大体看了下，非常适合想做前段的童鞋看~~~
•   一次买了3本书，很便宜，书浏览了一下，蛮好的。送货相当快，晚上下单，第二天中午就到了，很给力！
•   同理说法一样
•   一句话就是好，一句话就是好
•   东西讲解的很全 包括切片 js dreamweaver flash ....很全
•   还没看过,不过纸张质量不错,很喜欢
•   大概看下讲解的还是比较全面的，比较不错
•   书是我想要的，会好好利用。
•   刚收到，看了几页，很好，很不错，接下来会认真学习的。
•   看了一下。。内容还行，可惜不是彩色印刷的
•   帮同事买的。《网页DIV+CSS布局和动画美化全程实例(附光盘)》涉及Web出编程的基础知识、开发技术以及高级动画特效的制作技巧，无论是具有Web编程经验的中高级开发人员，还是网页设计的初学者，本书都能成为其设计网页时的好帮手。本书也适用于网页设计与制作人员、网站建设与开发人员阅读。也可以作为高等院校相关专业和相关培训机构的教学用书。
•   刚看了一章，感觉还行，后面的要加速学完
•   大概看了一下目录，感觉挺全
•   书还没看，希望能够物超所值
•   先看了一下，感觉还不错，
•   还没来得急读，就是书里面的图片是黑白的有点失望
•   感觉不错，知识面很齐全。好好学学
•   不知道是不是我浏览器不支持，它的光盘中的很多网页都不能正常显示。
•   光盘没有内容。怎么办呢？
•   很好的一根本书,将的很详细
•   看到第七页就发现一个错误。
•   写书的 要有品德 才行啊。你老 写的 代码 能运行吗？我是买书学东西的，总是替你 修改代码 也不好吧。此书光盘内的 代码 都不能正常运行，实际案例 都是 有缺陷的哦。哎，建议 下次 本书修改的 时候 先把代码 检查 修正一下吧。书本里面的代码 不能 正常运行。亏了。
•   内容没有深度，误导初学者！书中都是罗列代码，不讲原理！！！！书中例子质量粗糙！很失望！
•   非常棒的一本网页前端书籍非常棒的一本网页前端书籍
•   光盘里面的网站很多打开了都看不到全部，有的是不显示的，比较不满意，但这本书还是值得学习的。
•   买来了两本书，刚到，这本的质量还不错，另一本就有些不给力了，回头看了再说！！！
•   只运行了示例代码，示例页面都乱了真悲剧。不建议各位买