WEB技术开发实训指导书基础篇(上).doc
《Web应用开发实习》实习指导书
计算机专业Web应用开发实习大纲及指导书计算机教研室2013.06一、实习目的1. 通过本课程实习及其前后的准备与总结，复习、领会、巩固和运用基于Web设计课堂上所学的基于Web开发方法和知识，初步掌握开发一个基于Web的系统分析、系统设计、系统实现、系统维护的方法，特别是快速原型开发、面向对象分析与面向对象设计。
2.了解软件工具与环境对于项目开发的重要性，并且重点深入掌握好一、两种较新或较流行的软件工具或计算机应用技术，为综合应用本专业所学习的多门课程知识（如：软件工程、程序设计语言、操作系统、数据库、网络编程等）创造实践机会。
3.通过参加小组团队的开发实践，为毕业后适应团队合作开发模式打下基础，了解项目管理、团队合作、文档编写、口头与书面表达的重要性。
并在课程设计实践中，提高自学能力，书面与口头表达能力，创造能力和与团队其他成员交往和协作开发软件的能力，提高今后参与开发稍大规模实际软件项目和探索未知领域的能力和自信心。
二、实习过程及具体要求1、分组并分工。
1~2人一组，并且明确每个学生在开发小组中扮演的角色及承担的职责(包括选出组长)。
2、小组自行选题，必须是基于Web的系统、网站的开发与设计，确定目标、方案，准备并试用开发环境与工具。
3、学习与搜集素材,借阅,购置必要的书籍与材料。
4、各阶段的开发工作:开发过程中，小组长应承担起领导责任，不定期召开小组开发工作研讨会（建议2－3次）。
会前有准备，会议最好有记录（包括日期、出席人员、主题、讨论纪要、结论与问题、计划与行动、分工），会后有分工和检查，保存好记录供老师检查（不强制要求）。
工作会议的可能内容是：1) 选题。
系统内容及开发方案研讨、小组成员分工、开发计划拟定。
2) 同类著名web系统浏览，分析，需求分析，原型及成员分工确认。
3) 原型主页设计及网页组织研讨。
4) 数据库设计及应用研讨。
5) 交互网页开发技术或其他专门开发技术或开发工具使用的研讨。
网页实训指导书
实训指导书目录第一部分实训指导书 (1)实训1 页面控制 (1)实训目的 (1)实训环境 (1)素材准备 (1)实训课时 (1)实训内容 (1)实训要求 (1)实训步骤 (1)实训过程注意事项 (2)实训思考 (2)书写实训报告要求 (2)页面效果图 (2)实训2 文本操作 (3)实训目的 (3)实训环境 (3)素材准备 (3)实训课时 (3)实训内容 (3)实训要求 (3)实训步骤 (3)实训过程注意事项 (4)实训思考 (4)书写实训报告要求 (4)页面效果图 (4)实训3 图像操作 (5)实训目的 (5)实训环境 (5)素材准备 (5)实训课时 (5)实训内容 (5)实训要求 (5)实训过程注意事项 (5)实训思考 (6)书写实训报告要求 (6)页面效果图 (6)实训4 表格布局 (6)实训目的 (6)实训环境 (6)素材准备 (7)实训课时 (7)实训内容 (7)实训要求 (7)实训步骤 (7)实训思考 (7)书写实训报告要求 (7)页面效果图 (7)实训5 布局表格 (8)实训目的 (8)实训环境 (8)素材准备 (8)实训课时 (8)实训内容 (8)实训要求 (8)实训步骤 (8)实训过程注意事项 (9)实训思考 (9)书写实训报告要求 (9)页面效果图 (9)实训6 框架网页 (9)实训目的 (9)实训环境 (9)素材准备 (10)实训课时 (10)实训内容 (10)实训要求 (10)实训步骤 (10)实训过程注意事项 (10)实训思考 (10)书写实训报告要求 (10)页面效果图 (11)实训7 层的布局 (11)实训目的 (11)实训环境 (11)素材准备 (11)实训内容 (12)实训要求 (12)实训步骤 (12)实训过程注意事项 (12)实训思考 (12)书写实训报告要求 (12)页面效果图 (12)实训8 模板和库 (13)实训目的 (13)实训环境 (13)素材准备 (13)实训课时 (13)实训内容 (13)实训要求 (14)实训步骤 (14)实训过程注意事项 (14)实训思考 (14)书写实训报告要求 (14)页面效果图 (14)实训9 超级链接 (15)实训目的 (15)实训环境 (15)素材准备 (15)实训课时 (15)实训内容 (16)实训要求 (16)实训步骤 (16)实训思考 (16)书写实训报告要求 (16)页面效果图 (16)实训10 动感网页 (17)实训目的 (17)实训环境 (17)素材准备 (17)实训课时 (17)实训内容 (17)实训要求 (18)实训步骤 (18)实训过程注意事项 (18)实训思考 (18)书写实训报告要求 (18)页面效果图 (18)实训11 表单网页 (19)实训环境 (19)素材准备 (19)实训课时 (19)实训内容 (19)实训要求 (20)实训步骤 (20)实训过程注意事项 (20)实训思考 (20)书写实训报告要求 (20)页面效果图 (20)实训12 HTML语言 (21)实训目的 (21)实训环境 (21)素材准备 (21)实训课时 (21)实训内容 (21)实训要求 (22)实训步骤 (22)实训过程注意事项 (22)实训思考 (22)书写实训报告要求 (22)页面效果图 (22)实训13 美化网页 (23)实训目的 (23)实训环境 (23)素材准备 (23)实训课时 (23)实训内容 (23)实训要求 (23)实训步骤 (24)实训过程注意事项 (24)实训思考 (24)书写实训报告要求 (24)页面效果图 (24)实训14 JavaScript技术 (25)实训目的 (25)实训环境 (25)素材准备 (25)实训课时 (25)实训内容 (25)实训要求 (25)实训步骤 (25)实训过程注意事项 (26)书写实训报告要求 (26)页面效果图 (26)实训15 网页设计 (27)实训目的 (27)实训环境 (27)素材准备 (27)实训课时 (27)实训内容 (27)实训要求 (27)实训步骤 (27)实训过程注意事项 (28)实训思考 (28)书写实训报告要求 (28)实训16 特效制作 (28)实训目的 (28)实训环境 (28)素材准备 (28)实训课时 (28)实训内容 (29)实训要求 (29)实训步骤 (29)实训过程注意事项 (31)实训思考 (31)书写实训报告要求 (31)页面效果图： (31)实训17 应用行为 (32)实训目的 (32)实训环境 (32)素材准备 (32)实训课时 (32)实训内容 (32)实训要求 (32)实训步骤 (33)实训过程注意事项 (33)实训思考 (33)书写实训报告要求 (33)页面效果图 (33)实训18 应用插件 (34)实训目的 (34)实训环境 (34)素材准备 (34)实训内容 (34)实训要求 (34)实训过程注意事项 (35)实训思考 (35)书写实训报告要求 (35)页面效果图 (35)实训19网站开发综合实训 (35)19.1实训意义 (35)19.2实训目的 (36)19.3实训要求 (36)19.4实训步骤 (37)19.5评分标准 (37)19.6实训参考题 (38)第二部分网站开发案例 (39)2.1规划网站 (39)2.2准备素材 (43)2.3创建网站 (44)2.4网站首页的设计与制作 (45)2.5制作二级栏目网页和内容网页 (53)2.6设置首页的超级链接 (59)2.7制作首页弹出式菜单 (60)2.8查看与设置站点地图 (63)2.9测试网站 (65)2.10发布网站 (65)第一部分实训指导书实训1 页面控制实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性、如何在网页中添加背景音乐等操作。
Web开发技术实验指导书
安徽农业大学《Web开发技术》JSP版课程配套教材《Web开发技术》实验指导书（JSP版）刘波编写安徽农业大学信息与计算机学院通信工程2008年2月目录实验一搭建JSP运行的实验环境 (1)实验二JSP页面 (3)实验三显示不同大小的“你好JSP” (7)实验四JSP指令和动作 (10)实验五Tag文件的代码复用 (12)实验六中文显示服务器端日期 (14)实验七JSP内置对象 (19)实验八session对象 (23)实验九简易留言板 (28)实验十JSP中使用Java Bean (31)实验十一JSP中的文件操作 (41)实验十二JSP中使用数据库 (48)实验十三Java Servlet (66)实验十四网上书店 (71)实验报告 (76)实验一搭建JSP运行的实验环境一、实验目的（1）掌握JSP运行环境的安装与配置（2）理解JSP与Servlet的关系（3）运行简单的JSP页面，理解JSP的运行原理二、实验工具（1）JDK1.4、JDK1.5或JDK1.6，可以从SUN公司的网站免费下载（2）编辑工具－记事本（3）Tomcat服务器，也可以从网上免费下载三、实验步骤（1）按教材中演示安装JDK（2）按教材中演示安装Tomcat（3）启动Tomcat服务器，在浏览器中输入：http://localhost:8080，观察主页内容（4）观察Tomcat安装目录下的各个子目录的内容（5）打开记事本，输入下列源代码并保存为exer1.jsp。
将此文件复制到Tomcat安装目录下的webapps\ROOT目录下，运行该页面，观察其对应的Servlet源代码。
exer1.jsp的代码：<%@ page contentType="text/html;charset=GB2312" %> <!-- jsp指令标签--><%@ page import="java.util.Date" %> <!-- jsp指令标签--><%! Date date; // 数据声明int sum;public int add(int m,int n) // 方法声明{ return m+n;}%><HTML><BODY bgcolor=cyan> <!—html标记--><FONT size=4><P>程序片创建Date对象：<% Date date=new Date(); //java程序片out.println("<BR>"+date);sum=add(12,34);%><BR>在下一行输出和:<BR><%= sum+100 %> <!-- Java表达式--></FONT></BODY></HTML>（6）将exer1.jsp文件复制到Tomcat安装目录下的webapps\examples目录下，运行该页面，观察其对应的Servlet源代码。
第1章 Web前端开发基础
目录第1章Web前端开发基础 (2)1.1 Web前端开发实训目标 (2)1.1.1实训知识目标 (2)1.2.2实训能力目标 (3)1.2.3实训素质目标 (3)1.2 Web前端开发实训项目概述 (3)1.2.1 WCMS项目概述 (3)1.2.2 WCMS项目前端界面分析 (5)1.3 Web前端开发技术 (7)1.3.1 HTML语言 (7)1.3.2 CSS语言 (8)1.3.3 JavaScript语言 (9)1.3.4 AJAX框架 (9)1.3.5 jQuery框架 (10)1.3.6 BootStrap框架 (10)1.3.7 EasyUI框架 (10)1.4 Web前端开发工具 (10)1.4.1 NotePad (10)1.4.2 EditPlus (11)1.4.3 Dreamweaver (12)1.4.4 HBuilder (12)1.4.4 浏览器工具 (15)1.5 Web前端开发规范 (19)1.5.1 Web前端项目开发实训工作流程 (19)1.5.2 Web前端项目开发流程 (19)1.5.3 Web前端开发代码规范 (21)1.5.4 文档与源码提交规范 (23)1.6 小结 (24)第1章Web前端开发基础Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。
在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
Web前端开发工程师是一个新的职业，在国内乃至国际上真正开始受到重视的时间很短。
随着Web2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。
(x)HTMl+CSS布局、DHTMl和AJAX像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各行各业的IT企业都对自己的网站进行了重构。
随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面解脱出来。
web技术实验指导书
web技术实验指导书Web技术实验指导书内容简介Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。
对于学生从事Web系统的研发、使用和维护有重要意义。
本课程概念多、内容涉及面广、系统性强。
通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。
本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。
通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。
实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。
在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。
中南大学信息科学与工程学院鲁鸣鸣制定上机实验要求及规范Web技术课程具有比较强的实践性。
上机实验是一个重要的教学环节。
一般情况下学生能够重视实验环节，对于编写程序上机练习具有一定的积极性。
但是容易忽略实验的总结，忽略实验报告的撰写。
对于一名大学生必须严格训练分析总结能力、书面表达能力。
需要逐步培养书写科学实验报告以及科技论文的能力。
拿到一个题目，一般不要急于编程。
正确的方法是：首先理解问题，明确给定的条件和要求解决的问题，然后按照自顶向下，逐步求精，分而治之的策略，按照面向对象的程序设计思路，逐一地解决子问题。
一、实验报告的基本要求：一般性、较小规模的上机实验题，必须遵循下列要求。
养成良好的习惯。
姓名班级学号日期题目i. 问题描述ii. 设计简要描述iii. 程序清单iv. 结果分析v. 调试报告：实验者必须重视最后这两个环节，否则等同于没有完成实验任务。
Web前端开发实习内容.doc
e)这个过程就是要形成开发过程中团队之成员之间更加有效的合作关系，使其灵活性更高，以适应不断变化的需求。
技术讲解
1)
讲解内容：HTML5、CSS、JAVASCRIPT技术
2)
HTML5
HTML5是一个描述用于帮助开发者创建下一代网站和应用的
c)可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
d)跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如
Windows、Linux、Mac、Android、iOS等）。
开发阶段
开发第一天
站立会议：8.00—8.15
会议内容：小组分工，制定站立会议时间，了解每个人的学习情况，交流学习的内容
发现，并且处理了这样的问题。
3总结
3.1网页游戏的认识
网页游戏又称Web游戏，无端网游，简称页游。是基于Web浏览器的网络在线多人互动游戏，无
需下载客户端，不存在机器配置不够的问题，最重要的是关闭或者切换极其方便，尤其适合上班族。
在那个网络泡沫经济高速扩张的年代，在那个大量菜鸟网民拥入网络的年代，在那个文字MUD已
HTML、CSS和
JavaScript规格的涵盖性术语。这个定义中最显眼的三个部分是：
HTML、CSS和
JavaScript。他们定义了开发者如何使用优化标记，风格更丰富的性能， 以及新Script
开心快乐每一天
API来制作最新的网络开发功能。简单而言，HTML5=HTML+CSS+JavaScript。
a)ECMAScript，描述了该语言的语法和基本对象。
b)文档对象模型（DOM），描述处理网页内容的方法和接口。
JavaWeb项目实训大纲及指导书.doc
JavaWeb项目实训大纲及指导书.docJavaWeb项目大纲及指导书二○一五年十一月教学建议与说明一、实训说明本次实训作为所学知识的总结，要求学生分组完成人事管理系统。
该实训课程中，会提供相关需求文档，及相关技术指导。
二、实训条件运行环境：Windows 7/XP平台、Eclipse、Oracle等。
教材及参考资料：需求规约——酒店客房管理系统。
三、考核方式1．考核方式及形式方式：项目答辩，以组为单位，结合PPT进行项目展示。
形式：机试。
未通过者，给一次补考机会。
2．成绩的计算考核通过，取得合格证书以上，获得相应学分。
第一部分：JavaWeb实训大纲一、实训的性质、任务与要求项目总体目标是搭建XX酒店的客房信息管理平台，采用计算机对客房信息进行管理，进一步提高酒店的经济效益和现代化水平。
帮助酒店工作人员提高工作效率，实现客房信息管理工作流程的系统化，规范化和自动化。
避免以往手工填写单据的低效率、数据易出错、统计费时费力现象的发生。
该项目不仅满足目前的业务需要，还要满足酒店将来业务的发展，而且要具备良好的可扩展性、可移植性、可复用性。
本次实训以酒店客房管理系统需求规约为模板，要求学生以组为单位，分工合作，设计并完成酒店客房管理系统。
二、技能培养目标JavaWeb项目实训课程是面向软件工程、计算机科学与技术等专业本科学生开设的一门针对Java高级部分学习后的检验性质项目课程。
本实训的目标是，使学生了解需求文档的撰写要求；掌握MVC设计模式；掌握JDBC数据连接；掌握Servlet数据控制；掌握JSP页面设计；掌握Oracle数据库设计。
根据需求文档，使用Servlet、JDBC、JSP、Oracle完成该项目。
三、实训方法本课程按照从易到难、循序渐进的原则安排数据库开发教学进度，从基本操作练习入手，逐渐提高实验要求和加大训练力度。
从基本操作练习、验证性试验到综合性以及设计性实验。
具体要求如下：1．主要实验技能（1）熟练掌握Oracle SQL、JSP、Servlet。
WEB技术基础实验指导书(实验1)
实验一、简单网页设计一、实验目的1．掌握JSP运行环境的配置；2．掌握HTML语言中基本标记的含义及其使用方法；3．掌握CSS样式表的使用方法；二、实验内容1．在Tomcat服务器中测试一个简单的JSP页面；2．制作一个个人信息注册页面；3．制作一个样式表文件，并将其关联到一个HTML页面；三、实验步骤1.JSP页面测试1)安装JDK：下载JDK包以后，按安装向导的提示进行安装；2)安装Tomcat：下载Tomcat安装文件后，运行安装文件并按安装向导的提示进行安装；3)在安装Tomcat之后，在操作系统的开始菜单的“所有程序”项中会出现一个Apache Tomcat x.x用户组：4)在这些程序项中“Configure Tomcat”用于修改Tomcat的一些基本配置，“MonitorTomcat”用于启动与停止Tomcat，“Tomcat 6.0 Program Directory”用于进入Tomcat的安装目录；5)选择“Tomcat 6.0 Program Directory”进入到Tomcat的安装目录之后，可以看到bin、conf、lib、logs、webapps、work等子目录；6)在conf文件夹的server.xml文件中找到<Connector port="8080"protocol="HTTP/1.1" maxThreads="150" connectionTimeout="20000"redirectPort="8443"/>，并将8080改为你想要设置的端口号（如80等）。
注意该段配置未被用<!-- -->注释，而且其协议名称应该是HTTP/1.1。
7)在webapps文件夹下新建一个myweb文件夹，然后在myweb文件夹下面新建一个WEB-INF文件夹；8)编写一个test.jsp页面，该页面代码如下：<html><head><title>My First JSP Page</title></head><body><%="Hello,world!"%></body></html>9)将test.jsp放置到myweb文件夹中；10)启动Tomcat服务器；11)打开浏览器，输入http://localhost:<端口号>/myweb/test.jsp，查看结果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《WEB技术开发》基础篇
实训指导书
编著：曾晓亮吴琼
2010年12月
《WEB技术开发基础篇》实训指导书
本实训主要面向计算机网络、电子商务专业、信息系统专业的学生。
时间为一周。
实训目的与性质
实训的主要目的是让学生对网页开发进行实践，理解网页开发的基本技术。
本实训为必做应用性课程实训，可安排在第3、4学期，每个实训建议为2学分。
实训环境的准备
本实训的环境要求安装Windows2000以上版本操作系统，Web服务器采用IIS5以上版本，网页开发软件安装Dreamweaver。
实训程序及进度安排
本实训以学生的网页设计活动为主线，在此过程中，教师给予适当的指导并重点控制实训进度安排。
教学程序建议如下：
1）布置任务和要求
指导教师说明网页设计实训的基本要求和实训的要点。
2）网页设计
根据要求，完成网页的设计。
实训评测及考核方法
本实训的成绩将以个人为单位给出，进行上机实训检查，按开发出的网页运行效果、正确性及先进性等因素进行评分，同时学生要提交实训报告，平时上机检查成绩占15%，整体作品检查60%，实训报告成绩占25%。
实训内容
一共安排十一个实训，分别对网页设计的每一章节进行实践。
实训一网页设计基础
1.用Dreamweaver制作一个简单的网页，可以在网页中加入文字、图片等，并设置
网页的背景色以及网页标题。
2.设计一个网站。
要求创建一个支持ASP VBScript的站点。
实训二表格的应用
1.利用表格布局制作一个效果如下图的个人主页。
（图片材料可以自己准备）
实训三超级链接
1.利用超级链接创建几个唐诗的链接，使得网页能够在点击唐诗的题目时进行页面
的转换。
2.做一个友情链接页面，提供例如搜狐、网易、雅虎中国等网站的图片链接，要求
新窗口中打开链接。
3.做一个软件下载页面，提供一些小软件的下载功能。
4.在一个图片上分别创建矩形热点、圆形热点和一个不规则形状的热点，并分别设
置不同的链接。
5.创建一个电子邮件链接，链接目标为自己的电子邮件。
实训四图像和多媒体
在网页上插入背景音乐循环播放和flash图片。
实训五CSS样式表
创建几个外部CSS样式表文件，用来统一某个网站中不同网页的格式。
（如：正文、标题等）
实训六网页布局设计
1.用表格布局的方法布局下图
2.灵活运用布局方法仿照新浪网的网页进行布局。
实训七灵活应用图层和行为
1.熟悉并应用软件中内置的其他行为动作，尝试使用“拖动层”的行为动作命令来
制作网页中元素的拖拽效果。
2.尝试把“可控制滚动方向的图片”实例进行完善，实现鼠标移动到图片上时能使
得图片停止运动，鼠标离开时继续移动。
实训八扩展Dreamweaver的应用
1.自己搜集一张图片，在Fireworks或Photoshop中进行切片处理，并给切片增加交
换图像行为，并导出HTML文件。
尝试切片的鼠标右键菜单中其他功能。
2.根据自己的爱好去搜集经典的插件，并安装运行。
实训九模版、库和站点管理
1.创建一个简单的个人网站模版，新建两个基于该模版的网页，并填上简单的内容。
2.将上题完成的网页中的某个元素（如图象、表格、声音和Flash文件等）转化为
库项目。
然后更改这个库项目，并更新使用这个库项目的所有网页。
3.运用站点管理功能进行上传，并能对本地文件和远程站点的文件进行同步更新。
实训十打造一个互动留言板
1.打造一个互动留言板程序。
(asp程序，)
实训十一精彩网站制作实战
本部分要求整合之前完成的全部内容，形成完整的网站，巩固网页设计的操作技能。
要求按照以下顺序进行。
1.网站总体策划
2.网站的建立
3.制作主页面
4.制作其他页面
5.链接主页面和其他页面
6.将网页上传到因特网上（下载FTP软件或用Dreamweaver自带软件上传）。