10焦点大图切换教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt
( 4.5 )《10焦点大图切换教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt》由会员分享，可在线阅读，更多相关《10焦点大图切换教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、10焦点大图切换教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）焦点大图切换静态网站制作教学资源课件静态网站制作教学资源课件 当前网页经常用到的左右滑动切换焦点大图的特效，也是用JavaScript特效实现的，切换滑动效果良好，如图5.35所示。实例实例11：制作如图5.35所示的淘宝网站首页的焦点大图左右切换特效1、在练习站点中新建html文件“js2.html”。2、将素材包中的图片文件复制到练习站点的“images”文件夹中，将样式表文件“du.css”复制到“styles”文件夹中，将JavaScript特效文件“du.js”复制到“js”文件夹中。3、单击“C
2、SS”面板中的“附加样式表”按钮，打开如图5.36所示的“链接外部样式表”对话框，为当前文件链接素材中提供的外部样式表文件“du.css”。4、单击“插入”工具栏“常用”选项卡中的“插入Div标签”按钮，打开如图5.37的“插入Div标签”对话框，在“ID”框中输入“tu”，单击“确定”按钮，在网页中插入一个ID为“tu”层。5、在层“tu”中，单击如图5.38所示“插入”菜单“HTML”中“文本对象”里的“项目列表”，插入一个无序项目列表。6、在列表符后插入“tu1.jpg”，按回车键。重复第六步将5个焦点大图插入网页中。7、在任务栏中选中我们刚插入的无序列表标签“”，在如图5.39所示的“属性”面板“ID”列表框中输入“inner”，给此处的无序列表命名为“inner”。8、在任务栏中选中我们刚命名的标签“”，按一下向右的光标键，在无序列表的后面依次插入层，“ID”为“left”，层中的内容为“”的图层。9、切换到代码视图，在“right”层的后输入：注意：注意：1、将放在焦点图层的后面，无序列表项的数量是JavaScript程序读取。2、tu是焦点图层；inner是焦点图片的列表；left、right是左右两侧的按钮，样式表文件中的nav是焦点图切换按钮（1、2、3），按钮是js生成的，可以读取 html文件中的li的数量来生成。
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 10焦点大图切换教学课件 高教版 中职 网页设计与制作Dreamweaver CS5 10 焦点 大图 切换 教学 课件 高教 网页 设计 制作 Dreamweaver CS5
淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
链接地址：https://www.taowenge.com/p-90589035.html
限制150内