Dreamweaver CS6网页设计实例教程

项目1网页设计基础/1 任务1.1认识网页1 1.1.1网页的分类1 1.1.2网页设计常用术语2 1.1.3网站开发流程5 任务1.2了解HTML5 1.2.1什么是HTML5 1.2.2用HTML编写自己的**个网页6 1.2.3HTML中的常用标签符号7 任务1.3Dreamweaver CS6的安装与使用11 1.3.1安装Dreamweaver CS611 1.3.2使用Dreamweaver CS615 1.3.3用Dreamweaver CS6建立一个网页16 项目小结20 项目实训20 实训1.1用HTML建立欢迎页面20 实训1.2用Dreamweaver CS6建立欢迎页面21 项目2建立及管理网站/22 任务2.1在计算机上建立本地网站22 2.1.1建立“我的**个网站”23 2.1.2本地站点的管理24 2.1.3管理和编辑本地站点文件27 任务2.2发布网站29 2.2.1网站空间29 2.2.2设置远程服务器30 2.2.3上传网站33 任务2.3网站的更新和维护33 2.3.1本地和远程文件夹的结构33 〖2〗〖3〗〖4〗2.3.2下载站点中的文件34 2.3.3本地文件和远程文件的同步34 项目小结35 项目实训35 实训2.1为站点申请空间35 实训2.2建立并上传网站“我的家”35 项目3向网页中添加各种元素/37 任务3.1向网页中添加文本37 3.1.1案例导入——建立“班级简介”网页37 3.1.2在Dreamweaver 中创建普通文本38 3.1.3一些特殊文本的输入41 3.1.4文本的常用格式设置41 3.1.5观察文本对应的代码44 任务3.2向网页中添加图像45 3.2.1案例导入——建立“汽车之家”网页45 3.2.2网页中常用的图像格式45 3.2.3插入图像46 3.2.4给无法显示的图像加注释48 3.2.5图像的编辑48 3.2.6观察图像对应的代码50 任务3.3向网页中添加声音50 3.3.1案例导入——建立“音乐播放”网站51 3.3.2向网页中插入可控制播放的声音51 3.3.3在网页中应用背景声音54 任务3.4向网页中添加视频55 3.4.1案例导入——建立“视频播放”网页56 3.4.2向网页中添加Flash动画56 3.4.3向网页中添加FLV视频59 3.4.4向网页中添加其他视频文件60 3.4.5观察各种插入视频的方法对应的代码60 项目小结62 项目实训63 实训3.1建立文字编辑网页63 实训3.2建立“香香美食”网63 项目4实现网页的超链接/64 任务4.1认识超链接64 4.1.1超链接的分类64 4.1.2超链接的路径64 任务4.2创建内部超链接65 4.2.1案例导入——设置“九寨沟四季”系列页面的内部超链接65 4.2.2创建文字超链接65 4.2.3创建图像超链接66 4.2.4鼠标经过图像链接69 4.2.5观察链接对应的代码71 4.2.6设置“九寨沟四季”系列页面的内部超链接72 任务4.3创建锚记链接73 4.3.1案例导入——设置“插花艺术”网页的锚记链接73 4.3.2创建命名锚记73 4.3.3链接到命名锚记74 4.3.4创建虚链接74 4.3.5观察锚记链接对应的代码74 4.3.6设置“插花艺术”网页的锚记链接74 任务4.4创建其他超链接76 4.4.1案例导入——向“九寨沟四季”网页添加超链接76 4.4.2创建外部超链接76 4.4.3创建Email链接77 4.4.4创建下载文件超链接77 4.4.5创建脚本链接78 4.4.6为“九寨沟四季”网页添加外部和电子邮件等链接78 任务4.5编辑超链接80 4.5.1设置超链接的外观80 4.5.2删除超链接80 项目小结81 项目实训81 实训4.1制作“犬类美容”网页的导航条81 实训4.2制作“黄山四绝”系列页面81 项目5用表格布局页面/82 任务5.1表格的基本操作82 5.1.1案例导入——制作“经典电影TOP 10”网页82 5.1.2创建表格82 5.1.3调整表格的结构84 5.1.4表格输入内容87 5.1.5利用属性面板设置表格的外观效果87 5.1.6观察表格对应的代码88 5.1.7制作“经典电影TOP 10”网页89 任务5.2表格中的数据处理91 5.2.1案例导入——制作“各专业毕业生统计”网页91 5.2.2数据的导入与导出92 5.2.3数据的排序94 5.2.4制作“各专业毕业生统计”网页96 任务5.3使用表格布局网页100 5.3.1案例导入——制作“毕业生就业信息网”首页100 5.3.2嵌套表格100 5.3.3表格制作技巧101 5.3.4表格布局网页的设计要点102 5.3.5制作“毕业生就业信息网”首页103 项目小结107 项目实训107 实训5.1制作“信息工程系图形图像112班课程表”网页107 实训5.2制作“花影袭人”网站中“菊花简介”的网页108 实训5.3制作“信息工程系教学评估网”首页108 项目6用框架布局页面/110 任务6.1创建框架网页110 6.1.1案例导入——制作“信息系课程表”网页110 6.1.2认识框架网页110 6.1.3创建框架网页111 6.1.4保存框架网页112 6.1.5观察框架集文件对应的代码116 6.1.6制作“信息系课程表”框架网页117 任务6.2框架和框架集的基本操作119 6.2.1案例导入——制作“花卉护理——牡丹”网页119 6.2.2选择框架和框架集120 6.2.3编辑框架集的属性120 6.2.4编辑框架的属性121 6.2.5调整框架的大小122 6.2.6删除框架（合并框架）122 6.2.7制作“花卉护理——牡丹”网页122 任务6.3设置框架网页的链接125 6.3.1框架内的链接125 6.3.2关键字的链接126 项目小结127 项目实训128 实训6.1制作“暗香盈袖”网站的系列网页128 实训6.2制作“心情驿站”个人博客首页129 项目7用CSS美化网页/130 任务7.1认识CSS130 7.1.1案例导入——对“影迷俱乐部”网站中的网页应用CSS130 7.1.2打开“新建CSS规则”的几种方法133 7.1.3CSS常用属性134 任务7.2建立和管理CSS样式140 7.2.1建立可应用于任何HTML元素的CSS样式140 7.2.2建立应用于一个HTML元素的CSS样式142 7.2.3建立应用于指定标签的CSS样式144 7.2.4建立应用于指定范围内标签的CSS样式146 7.2.5建立应用于多个标签的CSS样式147 7.2.6建立定义超链接的CSS样式149 7.2.7观察CSS样式对应的代码151 7.2.8用“CSS样式”面板管理CSS样式151 任务7.3建立并应用外部CSS样式154 7.3.1建立外部CSS样式定义页面文字和背景154 7.3.2在一个网页中应用已建好的外部样式157 任务7.4CSS常见应用158 7.4.1用CSS控制段落样式158 7.4.2用CSS控制图片样式160 7.4.3用CSS控制背景图片的样式162 7.4.4用CSS美化列表163 7.4.5应用CSS滤镜164 项目小结166 项目实训167 实训7.1为“影迷俱乐部”网站中的网页设置格式167 实训7.2设置“茶文化”网页167 实训7.3设置“新闻公告”网页168 项目8用CSS DIV布局页面/169 任务8.1认识DIV与CSS盒模型169 8.1.1标签169 8.1.2CSS盒模型171 任务8.2应用CSS实现定位175 8.2.1CSS的定位方式175 8.2.2相对定位175 8.2.3绝对定位177 8.2.4固定定位178 8.2.5浮动180 8.2.6清除浮动181 任务8.3CSS DIV布局实例183 8.3.1案例导入——个人博客页面183 8.3.2用CSS DIV布局网页的步骤183 8.3.3用CSS DIV布局个人博客网页184 任务8.4实现响应式网页设计194 8.4.1案例导入——响应式网页设计： 佳莓生态食品194 8.4.2Dreamweaver CS6中的流体网格布局194 8.4.3制作“佳莓生态食品”网页196 项目小结204 项目实训204 实训8.1了解Dreamweaver CS6中的预设布局204 实训8.2用CSS DIV布局“园林设计”网页205 实训8.3实现响应式页面设计205 项目9向网页添加行为/206 任务9.1了解行为206 9.1.1认识行为206 9.1.2附加行为207 任务9.2使用Dreamweaver CS6内置的行为209 9.2.1用“行为”面板实现交换图像行为209 9.2.2制作页面打开时弹出广告信息210 9.2.3“打开浏览器窗口”行为211 9.2.4制作可移动的面板212 9.2.5下拉菜单的制作213 9.2.6为元素添加特殊的动画效果215 任务9.3JavaScript行为的应用216 9.3.1认识JavaScript216 9.3.2调用JavaScript216 9.3.3单击按钮背景颜色变换217 9.3.4添加到收藏夹和设为首页219 9.3.5在网页中嵌入JavaScript脚本220 9.3.6JavaScript脚本在文档中的位置221 9.3.7实现悬浮广告特效222 9.3.8实现滚动图片特效223 9.3.9实现鼠标跟随特效225 项目小结226 项目实训226 实训9.1制作下拉菜单226 实训9.2实现JavaScript特效226 实训9.3给校园新闻网添加行为226 项目10制作表单/228 任务10.1认识表单228 10.1.1案例导入——制作“注册会员申请”页面228 10.1.2插入表单和表单对象228 10.1.3设置常用表单对象的属性231 10.1.4用CSS美化表单238 任务10.2使用Spry构件241 10.2.1案例导入——制作“驴友会员申请”页面241 10.2.2Spry构件的基本操作242 10.2.3设置常用Spry构件的属性243 任务10.3练习布局页面时常用的Spry构件249 10.3.1案例导入——制作“QQ好友”页面249 10.3.2使用Spry选项卡式面板250 10.3.3使用Spry折叠式面板251 10.3.4Spry可折叠面板252 10.3.5使用Spry菜单栏252 项目小结254 项目实训254 实训10.1利用表单制作个人简介页面254 实训10.2利用Spry验证表单制作个人注册页面254 实训10.3利用Spry页面布局构件制作页面导航255 项目11模板和库的应用及资源管理/256 任务11.1模板的应用256 11.1.1案例导入——制作“毕业生就业信息网”就业指导系列网页256 11.1.2认识模板256 11.1.3创建模板258 11.1.4定义模板区域259 11.1.5使用模板制作“毕业生就业信息网”就业指导系列网页262 11.1.6更新模板及模板的其他操作268 任务11.2定制库项目270 11.2.1案例导入——定制毕业生就业信息网的库项目270 11.2.2认识库270 11.2.3库项目的应用270 11.2.4定制毕业生就业信息网库项目272 任务11.3资源管理274 11.3.1资源类型274 11.3.2“资源”面板275 项目小结275 项目实训275 实训11.1为“中原在线”网站设计模板，并应用模板创建系列网页275 实训11.2自行设计创建所在院系网站275 项目12网站制作实例/277 任务12.1网站布局规划分析277 12.1.1案例导入——制作海南旅游网站277 12.1.2网页布局规划277 任务12.2制作主页279 12.2.1页面的全局布局279 12.2.2制作logo部分282 12.2.3制作上部导航栏282 12.2.4制作主体内容区284 12.2.5制作弹出式子菜单287 12.2.6制作图片循环播放效果288 12.2.7制作版权信息部分并使用分隔线289 任务12.3制作子页290 12.3.1进行页面的全局布局290 12.3.2布局主体内容区292 12.3.3制作主体内容区左侧图片链接292 12.3.4制作主体内容区右侧链接294 参考文献/296