电子教案 3__ch2.4_include（网页包含）.docxVIP

PAGE2/NUMPAGES2

《动态网页设计（JSP）》教案

章节

第2章JSP语法基础

2.3JSP指令元素

2.4JSP动作元素，

2.5案例ch2.5_include（网页包含）

学时

约3学时

知识

技能

基本掌握JSP指令元素、动作元素

掌握采用%@includefile=*%方式进行网页拼接（静态包含）

掌握采用ifame内联框架创建框架类型页面

重点

代码复用思想，网页框架技术

采用静态包含方式进行网页拼接

采用ifame内联框架技术

难点

从文件网页中不应有html、head、body等网页标签

ifame内联框架的属性配置

header2.jsp中的链接

教学过程：

下发课件、案例素材，展示网页效果图。

讲解理论：JSP指令元素page、include和taglib、动作元素jsp:include/等。

演示案例。创建Web项目ch2.4_include，将素材文件复制到WebRoot文件夹中。

讲解从文件header1.jsp、footer1.jsp的源代码，预览。以单边框形成水平分隔线效果。

应用静态包含技术，创建主文件网页contact2.jsp，应用CSS样式，预览。

应用ifame内联框架技术，创建页头文件header2.jsp、footer2.jsp，以及主文件网页contact2.jsp、introduction2.jsp，news2.jsp，预览。

图2-5联系方式页contact1.jsp

引导学生完成练习案例ch2.5ex_includeLeft（含左侧导航栏），关键完成left.jsp和contact.jsp。注意在主文件contact.jsp中，left.jsp所在div的宽度为150px，样式设置display:flex；contactContent.jsp所在div的宽度为640px，样式设置display:flex。

留意之处：

从文件网页中不应有html、head、body等网页标签。

相对于用html网页作为从文件，用jsp网页作为从文件拼接将会更容易控制。也可以用frameset+iframe技术实现框架网页。

尽可能用静态包含，少用动态包含。

课后作业：

完成练习案例ch2.5ex_includeLeft（含左侧导航栏）。

全部完成第2章的章末练习题。

预习第3章内容。

图2-13学校简介页1图2-14校徽简介页1B