网页美工-实训报告

《网页美工-实训报告》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、计算机系网络技术专业网页美工-----项目（实训）指导书项目六网站后台管理网页一、项目（实训）名称网站后台管理网页。时间：11月9日二、项目（实训）学时数本实训项目预计实训学时数为6课时。三、项目（实训）目标1、能够制作框架网页。2、能够使用JavaScript脚本制作导航菜单。3、能够常见风格的后台管理网页。四、项目（实训）中的具体任务1、创建框架网页。2、创建顶部网页。3、创建左边导航网页。4、制作折叠导航效果。五、教师知识和能力要求教师应具备网页美工的项目实践经验，对网页美工有深刻的认识和独特的见解，能够熟练运用各种网页设计技术实现网页的效果。还应该认真准备该实训项

2、目所需要的实训素材，并能够在实训过程中给学生准确的提示和解答，指导学生进行项目设计与创新，促进学生出色地完成实训项目。六、学生知识和能力准备计算机系网络技术专业网页美工-----项目（实训）指导书1、理解框架网页的制作方法。2、理解常见的HTML标签。3、掌握JavaScript基础语法。4、理解网站后台的设计方法。5、掌握DIV+CSS网页设计技术。一、工具与设备实训环境要求：安装网页设计三剑客软件，具有Internet网络连接。二、辅助教学资料《网页制作综合技术教程》，温谦，人民邮电出版社，2009年。《美工与创意——网页设计艺术（1DVD）》，徐延章，科学出版社，2

3、009年。三、实施步骤与技术要点9.1创建模板（1）创建站点，把准备好的图像素材放在网站根目录的images文件夹中，新建CSS样式表，保存为style.css。（2）创建一个网页文件，保存为index.html，把新建的CSS新式表导入网页中，代码为：。Index.html作为后台网站的框架网页，其源代码如下：

4、c="top.html"frameBorder=0noResizescrolling=no>（2）新建顶部网页，保存为top.htm计算机系网络技术专业网页美工-----项目（实训）指导书l，设置网页边距属性为0p

5、x，宽度为100%，添加修改口令和退出系统的链接，网页布局效果如图6-1所示。图6-1顶部网站（3）为退出系统链接添加JS脚本，源代码如下：退出系统（4）新建左侧导航网页，保存为left.html，采用DIV和列表元素布局，网页如图6-2所示。每一个模块单独放在一个div中，包括父级标题菜单和子级菜单，父级标题菜单使用标签存放；子级菜单使用另一个div存

6、放，并且设置其id值。例如关于我们的子级菜单divrid设置为child1，新闻中心的子级菜单divr的id设置为child2，以此类推，依次递增。图6-2左侧导航（5）在每一个父级菜单的链接上添加JS脚本，例如“关于我们”的源代码为：关于我们；“新闻中心”的源代码为：新闻中心，以此类推，其他标题菜单调用expa

7、nd()函数的参数依次递增。（6）设置子级菜单的链接地址，链接目标全部设置为target=”main”。（7）在left.html网页的之间，编写JS脚本，代码如下所示：functionexpand(el){计算机系网络技术专业网页美工-----项目（实训）指导书childObj=document.getElementById("child"+el);if(childObj.style.display=='none'){childObj.style