【实训概述】
1、要求运用DIV+CSS+JavaScript完成“web前端开发技术”实践教学网站，首页设计效果如下图所示。
2、网站设计软件：EditPlus、CSS3 Menu、SoThink Tree Menu。
【实训实施】
1、首页页面布局设计
|
Logo区
|
|
导航菜单区
|
|
主体左区（树状菜单）
|
主体右区（内嵌浮动框架）
|
|
Footer版权区
|
2、Logo区设计
Logo区插入一个flash动画（实践教学网站资料/logo/logo.swf），如下图所示。
3、下拉式导航菜单设计
采用CSS3 Menu设计下拉式导航菜单，如下图所示主菜单、实践项目子菜单、课程设计子菜单、教学资源子菜单。
网站首页超链接首页页面；
主讲教师超链接目的文件显示内容参考如下（填写学生自己的信息和图像），其内容在主体右区（内嵌浮动框架）中显示；
实践大纲超链接目的文件是实践教学网站资料/design/design.swf；
实践项目子菜单中的实验一指导书到实验六指导书超链接目的文件分别是实践教学网站资料/project文件夹中的chapter_1.swf、chapter_2.swf、chapter_3.swf、chapter_4.swf、chapter_5.swf、chapter_6.swf，其内容在主体右区（内嵌浮动框架）中显示；
课程设计子菜单中的设计任务一和设计任务二超链接目的文件分别是实践教学网站资料/design文件夹中的design1.swf、design2.swf，其内容在主体右区（内嵌浮动框架）中显示；
教学资源课程设计子菜单中的HTML教程超链接网址为http://www.w3school.com.cn/、CSS参考超链接网址为http://www.admin5.com/html/html_ref/css_prop_index.html、乐学网超链接网址为http://58.193.192.23/claroline-latest。
4、树状菜单设计
采用SoThink Tree Menu设计树状菜单，主菜单和子菜单分别如下图所示。
Web前端开发工具子菜单中的EditPlus、TextPad、TopStyle、CSS3Menu、Sothink TreeMenu、ColorImpact超链接目的文件在实践教学网站资料/webtools文件夹中；
实践教学项目成果子菜单中的实验具体内容自行编写（至少完成一个实验的具体内容）；
课程实际课题子菜单中的课题1和课题2超链接目的文件内容自行编写；
网络资源的HTML教程超链接网址为http://www.w3school.com.cn/、网络课程管理平台超链接网址为http://58.193.192.16、乐学网超链接网址为http://58.193.192.23/claroline-latest。
5、版权区域设计
版权区域设计如下图所示。
【实训结果】
1、首页页面截图
2、主讲教师界面截图
3、首页页HTML代码（代码为五号字，单倍行距）
4、主讲教师HTML教程代码（代码为五号字，单倍行距）
