网页制作教程—项目5.pptVIP

项目5 设计个人网站 项目5 设计个人网站 【项目目标】 了解AP Div和Spry 掌握AP Div的基本操作方法 掌握Spry菜单栏的制作 掌握Spry选项卡式面板的制作 掌握Spry折叠式的制作 熟练掌握AP Div和Spry在网页上的应用 个人网站规划 任务1 制作个人网站的首页 【任务说明】 在Dreamweaver CS4中，用户可以在网页上随意创建和定位AP Div，还可以创建嵌套样式的AP Div。AP Div的使用在前面已经有所接触，本任务将详细介绍AP Div的插入方法和基本属性的设置。 【任务分析】 本任务在首页上首先制作一个垂直菜单，通过此菜单可以预览并访问网站中的其它网页。 对本次任务分解如下： 1.绘制和设置AP Div； 2.编辑AP Div； 3.利用Spry菜单栏制作网页菜单。 AP Div 1.绘制AP Div 2.设置AP Div 3.编辑AP Div 利用Spry菜单栏制作网页菜单 1.插入AP Div 2.在AP Div中插入Spry菜单栏 3.设置Spry菜单栏属性 任务2 制作“关于自己”子页 【任务说明】 Spry选项卡式是一种可在一个页面中互相切换多个显示网页内容的一个区域，在网页制作上非常普遍。Spry折叠式显示的效果是在单击某个选项后，该选项就会打开或隐藏，运用在网页中效果很好。 【任务分析】 本次任务中，将建立一个与首页的“关于自己”菜单项链接的子页。在“关于自己”子页中，用“Spry选项卡式面板”制作一个用选项卡分类的个人简介，再使用“Spry可折叠面板”制作导航栏。 对本次任务分解如下： 1、Spry选项卡式面板的制作 2、Spry折叠式的制作 Spry选项卡式面板的制作 1.插入Spry选项卡式面板 2.设置Spry选项卡式面板属性 Spry折叠式的制作 1.插入Spry折叠式 2.设置Spry折叠式属性 任务3 制作“我的作品”子页 【任务说明】 AP Div在网页制作中有很多使用技巧，如果与一些脚本程序结合使用，会达到意想不到的动画效果。 【任务分析】 本次任务中，将创建“我的作品”子页，利用AP Div的设计技巧，在网页上制作了一个简单的动画，当鼠标指向小狗时，图片上会出现文字“汪汪！”。 对本次任务分解如下： 1、绘制AP Div 2、添加行为 AP Div的应用 1.绘制嵌套AP Div 2.添加行为 知识拓展 （1）AP Div和Spry （2）AP Div和表格的相互转换 相关知识点 插入并设置AP Div AP Div的基本操作 Spry菜单栏的制作 Spry选项卡式面板的制作 Spry折叠式的制作 想一想 ① 在Dreamweaver CS4中提供了四种Spry，包括： 、 、 和 。 ② 在保存包含有Spry的网页时，Dreamweaver系统会自动生成脚本文件和CSS样式文件，并保存至自动创建的文件夹 中，所以会弹出“复制相关文件”的对话框，用户只需单击“确定”按钮即可。 ③ 将表格互转换为AP Div，需要选择“ ” →“ ” →“ ”命令。 * * 首页浏览效果 “关于自己”子页浏览效果 “我的作品”子页浏览效果