【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《Dreamweaver网页设计案例教程》白煜编著清华大学出版社。 4、《Dreamweaver MX 2004完美网页设计与制作》姜楠编著中国青年出版社。 【新课内容】 一、框架入门
所谓框架就是把屏幕分成几个部分,如左右型框架,T字型框架,在框架的不同部位分别显示不同的网页,一个框架的网页,一定包括N+1张网页,如左右型框架包含左右二张网页和一张总的框架页。框架是由框架集和单个框架组成的,框架集定义一组框架的布局和属性,包括框架的数目、大小和位置以及在每个框架中初始显示的页面的URL。 框架实例 二、创建框架
练习一:做一个最简单的左右型框架网页(如网页) 第一步:打开DW软件,新建一张空白网页
第二步:选择“文件”——“框架”或者直接单击框架面板 第三步:拖动框架左边框,向右拖,把屏幕分成左右二半(一般左小右大)
第四步:分别在左右二个框架内输入文字
注意如何删除框架?
答:将光标放在框架的边框上,当光标分为双向箭头时按住鼠标左键,将框架的边框拖出父框架或页面之外。 三、保存框架
练习二:保存框架,每个框架页代表一个单独的网页,所以在保存文件时必须保存各个子框架。
第一步:保存左框架,鼠标移入左框架内,单击“文件”——“保存”,选择“保存框架”,可保存为D:\\lx\\left.htm。
第二步:保存右框架,鼠标移入右框架内,单击“文件”——“保存”,选择“保存框架”,保存为D:\\lx\\right.htm。
第三步:保存框架页,鼠标点击框架的边框线,即选中框架组,然后单击“文件”——“保存”,保存为D:\\lx\\index.htm。
第四步:打开总的框架页index.htm,就会自动打开相关的框架子页。 四、框架属性
练习三:创建刚才创建好的框架属性,按住ALT键的同时,单击某边框架页,即可以选中此框架页
第一步:把左框架页名称设置为leftfm,框架边框颜色为蓝色,边界宽度为30像素
第二步:把右框架页名称设置为rightfm,当框架内的内容显示不下时要求有滚动条
第三步:设置框架集边框设置为有,边框宽度为3,左框架列宽为
180像素
五、链接框架内容
练习四:做一个有链接的左右型框架网页,要求单击左边的链接后,内容在右边显示。(只有已经命名的框架才能正确设置链接。) 第一步:做好三个链接网页a1.htm,a2.htm,a3.htm
第二步:选中左边的“第一章”链接文字,把它链接到a1.htm,并把“目标”设为右框架的名称rightfm
第三步:依次设置其它,第二章链接到a2.htm,第三章链接到a3.htm,并目标设为右框架名称rightfm 第四步:保存各个框架和框架页
第五步:也可以选择“保存全部”来进行总的保存
六、学生练习(练习下载)练习一:做一个T字型框架,把它保存在d:\\kj文件夹中
练习二:练习做书本上的实例 P273图10.2
练习三:建立如下所示的第一张网页,特别要注意一定要把左边栏目的链接全部设置好,再修改右边的内容后,另存为第二、第三??网页。
这样做的一组网页有一个缺点,如果想修改左边栏目中的文字,必须修改全部网页,所以说网页更新不太方便。
【课后小结】
了解动态网页的含义,本节详细的介绍了如何在Dreamweaver MX 2004中实现与数据库的连接。动态网页是当今的主流,学好动态网页的制作是必须的。
第17、18课时 Dreamweaver综合性网页设
计案例
【教学内容】
实例讲解利用Dreamweaver进行留言本的制作。 【教学目的】
使学生掌握利用Dreamweaver作出简单的动态站点。
【教学重点】 动态站点的制作流程。 【教学难点】
数据库的创建、连接与显示。 【教学方式】
讲授式、项目模块式、演示教学。 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《Dreamweaver网页设计案例教程》白煜编著清华大学出版社。 4、《Dreamweaver MX 2004完美网页设计与制作》姜楠编著中国青年出版社。 【新课内容】
1、制定网站设计方案。 2、建立数据库。
3、在Dreamweaver MX 2004中创建站点。 4、在Dreamweaver MX 2004中连接数据库。 5、发表、编辑、删除留言部分制作。 6、管理留言
在一个网站中,往往会有好多张子页会用同一种风格来制作,此时往往用模板是最有效,并且也是最快的方法。模板实质上就是作为创建其他文档的基础文档。