HTML网页设计与制作-实训案例集【完整版】(包含js交互效果).doc

Web前端开发入门实训案例 Web前端开发入门实训案例 PAGE 60 PAGE PAGE 59 目录 TOC \o 1-2 \h \z \u 第1章 4 Web前端开发入门实训案例一 4 双列布局 4 ? 一、要求 4 ? 二、案例背景 4 ? 三、预备知识 4 ? 四、实现过程 5 ? 五、项目实训案例评分标准 6 第2章 7 Web前端开发入门实训案例二 7 滑动门与css精灵综合应用 7 ? 一、要求 7 ? 二、案例背景 7 ? 三、预备知识 7 ? 四、实现过程 8 ? 五、项目实训案例评分标准 9 第3章 10 Web前端开发入门实训案例三 10 Css下拉弹出菜单 10 ? 一、要求 10 ? 二、案例背景 10 ? 三、预备知识 10 ? 四、实现过程 11 ? 五、项目实训案例评分标准 12 第4章 13 Web前端开发入门实训案例四 13 脚本入门学习之下拉菜单 13 ? 一、要求 13 ? 二、案例背景 13 ? 三、预备知识 14 ? 四、实现过程 14 ? 五、项目实训案例评分标准 15 第5章 16 Web前端开发入门实训案例五 16 选项卡效果解析 16 ? 一、要求 16 ? 二、案例背景 16 ? 三、预备知识 16 ? 四、实现过程 17 ? 五、项目实训案例评分标准 19 第6章 20 Web前端开发入门实训案例六 20 弹窗和表单布局与校验 20 ? 一、要求 20 ? 二、案例背景 21 ? 三、预备知识 21 ? 四、实现过程 21 ? 五、项目实训案例评分标准 24 第七章 25 Web前端开发入门实训案例七 25 Jquery跑马灯插件效果解析 25 ? 一、要求 25 ? 二、案例背景 25 ? 三、预备知识 25 ? 四、实现过程 25 ? 五、项目实训案例评分标准 28 第八章 29 Web前端开发入门实训案例八 29 QQ相册图片切换及其扩展 29 ? 一、要求 29 ? 二、案例背景 29 ? 三、预备知识 30 ? 四、实现过程 30 ? 五、项目实训案例评分标准 34 第9章 35 Web前端开发入门实训案例九 35 图文排版特效 35 ? 一、要求 35 ? 二、案例背景 35 ? 三、预备知识 35 ? 四、实现过程 36 ? 五、项目实训案例评分标准 39 第10章 40 Web前端开发入门综合实训案例八 40 综合整站 40 ? 一、要求 40 ? 二、案例背景 40 ? 三、预备知识 40 ? 四、开发过程 40 ? 五、项目实训案例评分标准 49 Web前端开发入门参考手册 50 常用html标签基本格式 51 选择符 53 标签规范 55 样式引用及其常见样式 56 常用结构样式 56 盒模型所有元素都可以看成一个盒子 57 常用文本样式： 57 css高级 01第 01 第6章 Photoshop CS2基础知识 第1章 Web前端开发入门实训案例一 双列布局 一、要求 在页面上创建一个居中并且带有外部边框的双列布局，左侧宽度200px,右侧宽度780px， 请认真分析题目要求完成实例。 二、案例背景 双列布局在网页制作中很常见，更进一步的应用有双列等高布局、双列全屏布局等。运用浮动实现双列布局，双列之间的间距完全可控，能更精确的达到项目的要求。本例的实训重点在于加强浮动知识点进一步的理解与应用。 三、预备知识 html元素盒模型的理解 浮动与清浮动的基本概念 四、实现过程 结构分析 通过题目要求可以得到简单的html结构如下 div class=wrap clear div class=leftleft/div div class=rightright/div/div 布局思路分析 （1）居中效果 设置过元素宽度的前提下，用 margin:0 auto 的属性实现。此处宽度检验盒模型知识点的理解，内容共为980px的宽度，而最外层元素的宽度不能小于980，否则浮动也不能实现双列布局效果。若