当前位置：文档之家 › Web前端开发实验教学指导书

Web前端开发实验教学指导书

  • 格式：pdf
  • 大小：2.74 MB
  • 文档页数：32

下载文档原格式

  / 32

合集下载

《Web应用开发实习》实习指导书

《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) 交互网页开发技术或其他专门开发技术或开发工具使用的研讨。

WEB技术基础实验指导书(实验2)

WEB技术基础实验指导书(实验2)

实验二、简单网页设计一、实验目的1．掌握JavaScript脚本的编写方法；2．掌握Javascript脚本操作DOM元素及常用方法调用；3．掌握HTML页面与Javascript脚本关联使用。

二、实验内容1．编写一个能够输入学生成绩的界面；2．编写Javascript代码，增加输入框并计算总成绩；3．编写一个显示当前时间的DIV文本块。

三、实验步骤1.编写一个能够计算学生成绩的界面；1)需要实现的界面如下：2)要求单击“增加”按钮后，能够增加一行学生信息；单击“计算”按钮后，能够计算出学生的平均分和学生人数；<html><head><title>JavaScript 实例</title></head><script language="JavaScript">var num=10;var names=new Array(num);var scores=new Array(num);for (i=0;i<num;i++){names[i]="";scores[i]="60";}function init(){}function calculate(){var total=0;for (i=0;i<num;i++){names[i]=frmMain.txtName[i].value;scores[i]=frmMain.txtScore[i].value;total+=parseInt(scores[i])}frmMain.txtAverage.value=parseInt(total/num);frmMain.txtTotal.value=num;}function getStudents(n){var content="";for (i=0;i<n;i++){content+="学生姓名：<input type='text' id='txtName' size=8 value='"+names[i]+"'>&nbsp;&nbsp;";content+="学生成绩：<input type='text' id='txtScore' size=5 value='"+scores[i]+"'><br>";}return content;}function increaseArray(arr){var newLength=arr.length+1;var arrTemp=new Array(newLength);for (i=0;i<arr.length;i++)arrTemp[i]=arr[i];return arrTemp;}function addStudent(){names=increaseArray(names);scores=increaseArray(scores);names[num]="";scores[num]="60";num++;document.getElementById("students").innerHTML+=getStudents(1);}</script><body onload="init()">学生成绩录入：<hr><form id="frmMain">学生平均分：<input type="text" id="txtAverage" size=4>&nbsp;&nbsp;学生人数：<input type="text" id="txtTotal" size=4><br><hr><br><div id="students"><script language="JavaScript">document.write(getStudents(num));</script></div><hr><input type="button" value="计算" onclick="calculate() ">&nbsp;&nbsp;<input type="button" value="增加" onclick="addStudent() "> </form></body></html>3)下面是本界面的部分源代码，请将其补充完整；<!--单击、计算平均分、增加行、使用数组。

《Web前端开发项目实训》教学实施方案

《Web前端开发项目实训》教学实施方案

《Web前端开发项目实训》教学实施方案
一、课程安排
学时：18学时，9次课
课程性质：理论课
教学地点：网络运维实验室
教学时间：2017年12月15日起，周三7-8节、周五5-6节
授课班级：2015级信息管理与信息系统专业
二、教学安排
1、教学说明
（1）实训题目
共6个实训题目，每人选择1个题目，每组6人，独立完成。

每个项目都包含四个功能：静态网站、ajax读取数据、互联网服务调用、移动端适配。

（2）版本管理服务器
SVN服务器，为每个项目开设SVN项目库。

（3）作品发布服务器
Web服务器，为每个项目提供独立的Web托管服务，面向校内提供访问。

建设项目进度网站，包含学号、姓名、项目名称、统计信息，三个导航（SVN仓库、原型预览、项目作品）。

（4）数据接口服务器
数据接口服务器，针对6个项目题目各提供一组JSON格式的数据接口服务，提供带有授权性质的数据读写服务。

2、课程教学
表：教学计划一览表
3、课程考核
（1）考核分为三个部分：文档（设计、测试、总结）、项目成果（SVN、原型在线、成果在线）、查重（代码查重、文档查重、防作弊机制）。

（2）总成绩（100分）=文档*0.4+项目成果*0.6，查重不通过记0分。

（3）实训考核成绩作为本课程的期末考试成绩，实训成果作为课程设计成果。

《WEB前端开发案例教程》教学教案(上)

《WEB前端开发案例教程》教学教案(上)

《WEB前端开发案例教程》教学教案（上）复习提问（5分钟）URL/HTTP/HTML的含义导入新课：（3分钟）制作网页的工具很多（Hbuilder、VScode等课下可自行了解，大同小异），Dreamweaver就是其中一种，它提供的可视化设计环境可非常方便地创建和编辑网页.因此本节介绍该软件的基本使用。

（超星平台利用“随机选人”功能，学生回答问题。

）新授：一、Dreamweaver CC2018界面介绍（2分钟）1、初始化设置（10分钟）（学生跟随教师一起操作）✧工作区布局✧设置字体选择菜单栏中的【编辑】→【首选项】选项，分类列表中选择“字体”，右侧设置“代码视图”合适的字号大小。

✧设置界面分类列表中选择“界面”，更改可应用程序主题和代码主题✧更改主浏览器和次浏览器分类列表中选择“实时预览”，主浏览器快捷键F122、界面介绍（15分钟）（教师演示知识点涉及的具体操作）菜单栏：文件、编辑、站点、窗口工具栏：“格式化源代码”按钮、“应用注释”按钮、“删除注释”按钮➢GIF格式GIF格式可以高度压缩图像，但它只能包含最多256种颜色，不适于表现真彩色照片或具有渐变色的图片。

GIF格式可以支持动画效果。

➢JPEG格式它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。

➢PNG格式Portable Networks Graphics,可移植的网络图形格式，是近年来新出现的一种图像格式。

二.插入图像使用标记img在网页中插入图像。

HTML代码如下：<html><head><title>无标题文档</title></head><body><img src="mid2.JPG" align="left" width="150" height="150" border="2" ><p>在西藏自助旅行，为高原神奇的风景如痴如醉的同时。

web技术实验指导书

web技术实验指导书

web技术实验指导书Web技术实验指导书内容简介Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。

对于学生从事Web系统的研发、使用和维护有重要意义。

本课程概念多、内容涉及面广、系统性强。

通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。

本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。

通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。

实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。

在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。

中南大学信息科学与工程学院鲁鸣鸣制定上机实验要求及规范Web技术课程具有比较强的实践性。

上机实验是一个重要的教学环节。

一般情况下学生能够重视实验环节，对于编写程序上机练习具有一定的积极性。

但是容易忽略实验的总结，忽略实验报告的撰写。

对于一名大学生必须严格训练分析总结能力、书面表达能力。

需要逐步培养书写科学实验报告以及科技论文的能力。

拿到一个题目，一般不要急于编程。

正确的方法是：首先理解问题，明确给定的条件和要求解决的问题，然后按照自顶向下，逐步求精，分而治之的策略，按照面向对象的程序设计思路，逐一地解决子问题。

一、实验报告的基本要求：一般性、较小规模的上机实验题，必须遵循下列要求。

养成良好的习惯。

姓名班级学号日期题目i. 问题描述ii. 设计简要描述iii. 程序清单iv. 结果分析v. 调试报告：实验者必须重视最后这两个环节，否则等同于没有完成实验任务。

Web前端开发实训案例教程

Web前端开发实训案例教程

精彩摘录
《Web前端开发实训案例教程》是一本关于Web前端开发的实用教程，它通过 一系列的案例和实践，帮助读者深入了解Web前端开发的核心技术和最佳实践。 在这本书中，有许多精彩的摘录，这些摘录不仅展示了Web前端开发的精髓，而 且对于读者来说，它们也是学习和实践的宝贵资源。
这本书强调了Web前端开发的重要性。在现代的Web应用中，用户体验和交互 性是至关重要的。一个优秀的Web前端开发者能够通过优化页面性能、提高页面 加载速度、实现流畅的用户交互等手段，来提升用户的满意度和忠诚度。这是任 何一个成功的Web应用都不能忽视的环节。
从目录的结构和内容来看，该书的实用性和参考价值非常高。无论是初学者 还是有一定经验的Web前端开发人员，都可以通过阅读该书来提高自己的技能水 平和实战经验。该书还可以作为Web前端开发的参考书籍或工具书，为读者提供 实用的指导和帮助。
《Web前端开发实训案例教程》这本书的目录结构严谨、内容丰富、实用性 强，具有很高的参考价值。无论是初学者还是有一定经验的Web前端开发人员， 都可以通过阅读该书来提高自己的技能水平和实战经验。
本书的内容涵盖了Web前端开发的各个方面，包括HTML、CSS、JavaScript等基础知识，以及响 应式设计、移动端开发、性能优化等进阶内容。每个章节都以一个或多个案例为主线，通过详细 的案例分析和实践操作，帮助读者理解和掌握相关知识和技能。
在案例的选择上，本书注重实用性和趣味性，包括网站重构、移动应用开发、交互设计等多个方 面。同时，每个案例都提供了详细的实现步骤和代码示例，让读者可以轻松地跟随教程进行实践 操作。
这本书还强调了Web前端开发者的责任和使命。作为一个Web前端开发者，不 仅要掌握技术，更要用户体验、数据隐私和可访问性等问题。这需要开发者具备 一种全面的视角和责任感，以确保他们所开发的Web应用不仅技术先进，而且对 用户友好、对社会负责。

WEB-实验3-指导书

WEB-实验3-指导书

《WEB开发技术基础》课程实验指导书实验3 Javascript实验指导书三一实验目的：掌握JavaScipt基本语法，掌握JavaScipt在HTML中应用的三种方式，掌握添加JavaScipt 事件响应程序的方法，掌握使用JavaScipt进行表单信息验证和表单信息操作。

二实验内容及步骤：内容一：1、创建my-js.js文件2、创建register.html页面，在该文件中链接my-js.js文件，该页面内容如下：3、在my-js.js文件中实现功能：register.html页面加载完成后，根据系统日期更新register.html页面最顶端的日期。

提示：页面加载完成触发onload事件，获取系统日期可使用Date对象4、在my-js.js文件中实现下列函数：function isNull(str) //验证str是否是空function minLength(str,length) //验证str是否满足最小长度lengthfunction maxLength(str,length) //判断str是否满足最大长度lengthfunction isDigital(str) //判断str字符串是否是纯数字function isNumber(str) //判断str是否是整数function isDate(date1) //判断date1的格式是否为1988-1-19（①是否包含两个短线，②短线前后是否是纯数字，③月份是否正确，即在1-12之间，④日期是否正确）5、在my-js.js文件中给register.html页面上用户名文本框的失去焦点事件添加事件响应程序来验证文本框中内容的字符串长度，要求在改事件响应程序中调用minLength、maxLength函数6、在my-js.js文件中给register.html页面上口令框的失去焦点事件添加事件响应程序来验证用户的输入是否符合要求7、在my-js.js文件中给register.html页面上生日文本框的失去焦点事件添加事件响应程序验证用户的输入是否符合要求8、在my-js.js文件中给register.html页面上“提交并进行checkbox测试”按钮的单击事件添加事件响应程序，该程序的功能：创建数组对象，存储用户表单输入的信息，弹出消息框显示该数组对象的内容，用户点击消息框的确定按钮后打开checkboxTest.html页面。

《Web 前端技术技术基础》实验指导书

《Web 前端技术技术基础》实验指导书

【自主实验】
图 2.5 定义列表 8
《Web 前端技术技术基础》实验指导书
1、编写网页，实现如图 2.6 所示的效果。其中页面上方水平分隔线粗细为 1、颜色为#000fff，页面下 方水平分隔线粗细为 1、颜色为#00ffff。
四、使用 EditPlus 自定义 HTML 模板
熟悉 EditPlus 软件的界面和操作方法，并完成以下任务： 1．用 EditPlus 编写一个网页，保存为“mytemplate.html”； 2．从菜单栏中选择“工具|参数设置（首选项）”命令，弹出“参数设置（首选项）”对话框，然后 选择“类别”中的“文件|模板”选项，右侧显示系统中已经加载的 5 个模板，如图 1.1 所示。
图 2.1 文字、段落格式化效果 6
二、使用预格式化标记 pre
《Web 前端技术技术基础》实验指导书
1．在上题步骤 12 后，接着插入预格式化标记 pre； 2．在 pre 标记直接编辑如图 2.2 所示的内容和格式（空格键、回车键），其中标题为 h1；
图 2.2 预格式化效果
3．保存文件并预览效果； 4．去除 pre 标记，再预览效果，比较两者的不同，理解 pre 标记的作用。
3．在 body 标记中插入段落 p 标记，并添加文字和超链接，实现如图 1.3 所示的效果。 添加超链接格式：<a href="/">火弧中文官方网站</a>
图 1.3 body 标记属性应用页面效果图
六、综合使用 HTML、CSS、JavaScript 技术设计网页
三、编写无序列表
1．新建 HTML 文件； 2．在 body 标记中插入无序列表标记 ul； 3．在 ul 标记中插入列表项标记 li，并输入项目名称； 4．根据需要设置 ul 或 li 标记的 type 属性改变列表项前面的符号； 5．保存文件为 sy2-3.html，实现如图 2.3 所示的无序列表。

WEB技术基础实验指导书(实验1)

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，查看结果。

WEB实验指导书

WEB实验指导书

Web应用开发技术实验指导书实验平台：Visual Studio 2005 + SQL Server 2000运行环境：Windows XP + Microsoft Internet Explorer 8实验方法：1.下载老师所给的网站实例，2.按照老师所给的步骤一步一步地来完成上机实验，不要直接复制老师所给的网站实例；3.在需要写代码的地方，不要直接复制老师给的代码，要按照老师的代码一个字母一个字母的编写，体会VS2005编辑器的代码编写方法。

因为：自己所写的每一个字母都是经过大脑思考的，如有不明白，可以向老师或者同学求教；如果自己直接复制一大块代码来看，细节之处是体会不到的。

4.老师给的网站实例只是一个框架，在充分理解老师给的网站实例运行逻辑后，然后在其基础上加入自己的代码，使得网站的功能更加完善，页面更加美观。

参考网址：1.W3School在线教程：/2.微软MSDN库：/library/ms123401实验一客户端脚本编程一、实验目的通过设计一个个人主页网站，理解CSS+DIV的页面布局，掌握JavaScript的语法和常用的浏览器对象，初步学会使用Visual Studio 2005创建网站和编辑网页的方法。

二、实验内容和要求1. 自己设计CSS和网页布局，将所给的某个人网页改成展示自己的一个主页。

要求展示的主要内容有：基本资料、学习经历、所得奖励、最新动态等。

2. 在网页的合适位置加入一些JavaScript特效，如显示当前时间、图片定时切换、文本自动滚屏等。

三、实验步骤：1. 打开Microsoft Studio 2005程序。

2. 单击文件->新建->网站，打开如下图所示的窗口，选择模板，选择合适的存放位置，语言选择“Visual C#”，单击确定。

3.可以看到窗口如下图所示，在Default.aspx文件上单击右键，选择“删除”，将Default.aspx文件删除。

《Web 前端技术技术基础》实验指导书

《Web 前端技术技术基础》实验指导书
三、编写无序列表
1．新建 HTML 文件； 2．在 body 标记中插入无序列表标记 ul； 3．在 ul 标记中插入列表项标记 li，并输入项目名称； 4．根据需要设置 ul 或 li 标记的 type 属性改变列表项前面的符号； 5．保存文件为 sy2-3.html，实现如图 2.3 所示的无序列表。
<html> <head> <meta charset="UTF-8"> <title>使用 NotePad 编写网页</title> </head> <body> <h2 align="center">欢迎来到我的个人主页</h2> <hr color="red"> <p align="center"><font color="blue" size="6">我是计算机学院软件工程系的学生<br/> 学号：***&nbsp;&nbsp;姓名：***</font></p> </body>
</body> </html>
【实验思考】
1、Web 开发工具众多，如何选择合适的工具，作为日常学习工作的主要工具？ 2、HTML 文件的基本结构是？ 3、HTML 头部 head 标记所包含的信息会显示在网页上吗？可以包含哪些标记？ 4、元信息标记 meta 主要用于定义哪些信息？
4
《Web 前端技术技术基础》实验指导书
【实验内容】
1、使用文本与段落标记； 2、使用预格式化标记； 3、编写无序列表； 4、编写有序列表； 5、编写定义列表。

Web开发与应用实验指导书

Web开发与应用实验指导书

3、eclipse配置1、在某盘中建立存放工程的文件夹：workspace2、打开eclipse文件夹，双击其中的eclipse.exe，第一次使用的时候会弹出对话框，这里可以选择一个路径作（1中的workspace）为工作区来保存我们的代码。

选择no，点击finish。

之后会出现欢迎界面配置tomcat（1）打开菜单【windows】-【preferences】，按照如下选择点击browse按钮，选择tomcat的安装路径（2）在服务器列表中会出现刚才配置的服务器,选择start当看到”信息: Server startup in 1328 ms”说明tomcat启动成功在浏览器打开地址http://localhost:8080/看到如下页面说明启动成功新建一个简单的工程（1）FILE→NEW→PROJECT,选择web project建立一个工程(2)工程建立之后点击工具栏中服务器列表左边的按钮,部署这个工程,选择刚才建立的工程点击ADD添加工程选择刚才配置好的服务器【实验结果】实验二一、实验内容学习使用servlet，采用JDBC访问mysql数据库，将程序部署在服务器上，观察程序的运行。

二、实验流程（1）将工程jdbc导入myeclipse开发环境，并部署到tomcat服务器；导入工程流程：首先点击菜单file→import，在弹出的对话框中选择general→exsiting project into workspace，点击browse，选中jdbc文件夹，最后点击finish. （2）创建数据库和表建立数据库（3）新建用户，密码为1（4）点击“权限”-“添加权限”（5）确定，回到主界面保存，点击，再点击新建查询，输入如下sql语句USE `mytest`;DROP TABLE IF EXISTS `user`;CREATE TABLE `user` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(10) DEFAULT NULL,`password` varchar(15) DEFAULT NULL,`date` datetime DEFAULT NULL,PRIMARY KEY (`id`)) ;点击运行启动tomcat服务器，输入“http://localhost:8080/jdbc”运行程序，查看运行效果，并用调试的方式跟踪程序运行代码。

《WEB前端开发案例教程》教学教案

《WEB前端开发案例教程》教学教案

《WEB前端开发案例教程》教学教案教学教案：《WEB前端开发案例教程》（上）一、教学目标本教材旨在通过案例教学的方式，引导学生掌握前端开发的基础知识和技能，培养学生的实际操作能力和问题解决能力。

具体目标如下：1.了解前端开发的基本概念和技术体系；2. 掌握HTML、CSS和JavaScript的基本语法和用法；3.学会使用常见的前端开发工具和调试工具；4.能够独立完成简单的网页设计和开发任务。

二、教学内容和安排本教材共分为10个案例，分别涵盖了HTML、CSS和JavaScript的基础知识和应用技巧。

具体安排如下：第一节：入门案例1.介绍课程内容和目标；2.了解前端开发的基本概念和技术体系；3.学习如何使用开发工具和调试工具；4.编写并实现一个简单的网页设计。

第二节：HTML基础3.学会使用HTML创建网页的基本结构和布局；4.编写并实现一个个人简历网页。

第三节：CSS基础1.学习CSS的基本语法和选择器；2.掌握CSS的常用样式属性和值；3.学会使用CSS控制网页元素的样式和布局；4.编写并实现一个企业宣传网页。

第四节：JavaScript基础1. 学习JavaScript的基本语法和数据类型；2. 掌握JavaScript的常用操作和逻辑控制；3. 学会使用JavaScript实现网页的动态效果和交互功能；4.编写并实现一个简单的网页游戏。

第五节：响应式设计1.了解响应式设计的原理和实现方法；2.学会使用CSS媒体查询和弹性布局实现响应式网页；3.探讨响应式设计在不同设备上的应用场景和问题；4.优化并实现一个响应式网页。

三、教学方法和手段1.理论讲解与实践结合：每节课以理论知识的讲解为主线，结合实际案例进行实践演示和讨论，引导学生理解和掌握知识；2.案例研究与实际操作结合：每个案例都包含一定的实际操作任务，学生需要在课后进行实践操作，并将结果提交给老师进行评估和指导；3.问题导向学习：鼓励学生在实践操作过程中遇到问题时主动寻找解决方法，培养学生的问题解决能力；4.合作学习与小组讨论：通过分组学习和讨论，促进学生之间的交流和合作，提高学习效果。

WEB应用程序开发实验指导书.doc

WEB应用程序开发实验指导书.doc

实验一、Web页面设计（设计性实验）（3学时）实验目的：1.掌握使用语言设置文木格式和列表格式的方法。

2.掌握使川语言插入图像和创建表格的方法。

3.掌握使用语言创建框架网页和超连接的方法。

4.掌握使用语言创建表单和添加表单控件的方法。

5.掌握使用CSS方法，实现特殊效果的显示。

6.举握Visual Studio 2005集成开发环境的使用。

实验要求：1.使用Visual Studio2005设计网页。

（也可以利用Drcamwavcr M贞制作工具设计网页，或直接在圮事本中编写代码），比较使用软件工具设计贝面生成的代码量，能够读懂代码，删除不需要的信息。

2.通过框架、表格、表单和列表等元素，组织页而，实现静态页而的设计。

3.在页面上布置导航信息。

4.设计用户交互信怠的界面。

5.在页面中，通过使用CSS,控制页面的总体！示效果。

实验步骤：使用Visual Studio2005设计静态M页，理解语言语法规范，也可采用Dreamweaver 或记事本等编辑软件直接完成。

注意在设计中避免使用中文的目录及文件名称。

（满足系统的兼容性问题，中文编码方式多样性导致易出错》1.根据提供的北京联合人学写邮件图片信息（mail.jpg）,编写完成相应的网页。

1.通过＜table〉元素亦局，设计页而，确定文捫中对应的元素，将相应的表雄元素进行合理的摆放。

2.加入文木元素、图像元素，完成相成的超级链接任务，注意图什等信息的路径问题。

3.阅读styl .css文件，理解其中给出的元素设定，将其与网贝连接。

注意修改css文件，保证阁片信息的位置是正确的。

通过设定docunent对象的Styl esheet, Ti tl e等属性，进行相应的设计。

4.发件人等栏目，艽风格设定采用css文件中的bgcolor2类设定。

5.发送等按钮，使用css文件中的but类设定。

6.浏览按钮，使川css文件中的butl类设定。

7.发邮件中的特殊符号N 。

《JavaWeb开发技术》实验指导书

《JavaWeb开发技术》实验指导书

JavaWeb开发技术实验指导书J a v a W e b开发技术课程组编工业大学信息工程学院软件工程系2015.11目录《JavaWeb开发技术》实验教学大纲 (1)实验一用户与企业信息添加 (5)实验二用户后台登陆退出 (7)实验三企业信息查询修改 (8)实验四访问权限过滤与在线用户列表 (9)《JavaWeb开发技术》实验教学大纲一、基本信息二、实验安排三、实验目的、容与要求1. 用户与企业信息添加（8学时）(1) 实验目的①掌握Servlet的创建②掌握Servlet处理Form表单请求数据③掌握Servlet响应的重定向和请求转发④掌握HttpServletRequest对象获取清酒参数的中文问题(2) 实验容完成锐聘的用户添加、企业的添加。

(3) 实验要求①实验前书写预习报告。

②充分利用JSP的语法完成界面设计。

③用Servlet实现数据处理部分。

④记录程序调试中出现的问题和解决方法。

⑤实验后必须按照要求独立完成实验报告。

⑥打印源程序清单和测试结果附在实验报告的后面。

2. 用户后台登陆退出（8学时）(1) 实验目的①掌握会话跟踪技术②掌握HttpSession对象的创建和使用③掌握隐藏表单域的使用(2) 实验容完成锐聘后台的用户登陆完成锐聘后台的用户退出完成锐聘登陆验证码生成和验证(3) 实验要求①实验前书写预习报告。

②用JSP设计界面部分。

③用HttpSession对象的保存用户的登陆信息。

④记录程序调试中出现的问题和解决方法。

⑤实验后必须按照要求独立完成实验报告。

⑥打印源程序清单和测试结果附在实验报告的后面。

3. 企业信息查询修改（8学时）(1) 实验目的①掌握Jsp脚本、JSp表达式②掌握Jsp的4中作用域③掌握Page指令④掌握request置对象(2) 实验容完成锐聘后台的企业用户列表查询及显示。

完成锐聘后台的企业信息修改预查询。

完成锐聘后台的企业信息修改。

(3) 实验要求①实验前书写预习报告。

Web前端开发实验教学指导书

Web前端开发实验教学指导书

Web前端开发实验指导书20XX年09月目录实验1 HTML基础与布局元素 (3)实验2 表格与表单的应用 (6)实验3 框架 (8)实验4 CSS样式表基础 (12)实验5 CSS样式布局 (16)实验6 Dreamweaver制作网页 (19)实验7 网站设计 (22)实验8 JavaScript基础 (26)实验9 JavaScript对象 (29)实验10 DOM编程 (33)实验11 JavaScript常用特效 (36)实验1 HTML基础与布局元素一、实验目的1．掌握使用HTML的基本结构创建网页2．掌握使用行级和块级标签组织页面内容3．掌握使用图像标签实现图文并茂的页面二、实验内容使用HTML基本元素设计基本网页三、实验环境（1）使用的操作系统及版本。

Windows XP Professional（2）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2用于布局的块级元素编写HTML代码，实现如图所示的页面效果任务3行级元素编写HTML代码，实现如图所示的页面效果。

任务4超链接编写HTML代码，实现导航菜单的链接●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。

●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。

●单击ww.html的返回链接可以返回到lj.html。

●单击“联系我们”，将自动打开本机的电子邮件程序。

小结及思考题扩展训练：实现如图所示的页面效果实验2 表格与表单的应用一、实验目的1. 掌握表格的基本结构，熟悉表格标签的使用。

2. 会使用表格标签属性修饰美化表格。

3. 了解表单的基本形式，掌握表单元素的使用方法。

二、实验内容使用表单标签与表格标签设计应用网页二、实验环境1. 使用的操作系统及版本。

Windows XP Professional2. 使用的编译系统及版本。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Web前端开发实验指导书20XX年09月目录实验1 HTML基础与布局元素 (3)实验2 表格与表单的应用 (6)实验3 框架 (8)实验4 CSS样式表基础 (12)实验5 CSS样式布局 (16)实验6 Dreamweaver制作网页 (19)实验7 网站设计 (22)实验8 JavaScript基础 (26)实验9 JavaScript对象 (29)实验10 DOM编程 (33)实验11 JavaScript常用特效 (36)实验1 HTML基础与布局元素一、实验目的1．掌握使用HTML的基本结构创建网页2．掌握使用行级和块级标签组织页面内容3．掌握使用图像标签实现图文并茂的页面二、实验内容使用HTML基本元素设计基本网页三、实验环境（1）使用的操作系统及版本。

Windows XP Professional（2）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2用于布局的块级元素编写HTML代码，实现如图所示的页面效果任务3行级元素编写HTML代码，实现如图所示的页面效果。

任务4超链接编写HTML代码，实现导航菜单的链接●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。

●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。

●单击ww.html的返回链接可以返回到lj.html。

●单击“联系我们”，将自动打开本机的电子邮件程序。

小结及思考题扩展训练：实现如图所示的页面效果实验2 表格与表单的应用一、实验目的1. 掌握表格的基本结构，熟悉表格标签的使用。

2. 会使用表格标签属性修饰美化表格。

3. 了解表单的基本形式，掌握表单元素的使用方法。

二、实验内容使用表单标签与表格标签设计应用网页二、实验环境1. 使用的操作系统及版本。

Windows XP Professional2. 使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1表格嵌套和表格内的标签任务2 跨多行多列的表格任务3给表单加分类边框任务4注册表单布局小结及思考题编写HTML代码，实现如图所示的页面效果。

使用所学的表单元素相关知识，制作商城网站注册页。

实现如图所示的页面效果。

实验3 框架一、实验目的1、会使用框架集来创建框架，掌握target属性的使用方法。

2、实现基于框架基础上的页面跳转3、会使用iframe实现页面重用二、实验内容1 行列划分的框架2 窗口间的关联3 iframe的基本用法4 利用框架技术布局页面三、实验环境（1）使用的操作系统及版本。

Windows XP Professional（2）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1 行列划分的框架使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2窗口间的关联编写HTML代码，实现如图所示的页面效果1、右边框架设置name属性为"showFrame"；2、左边框架文件中，将链接目标设置为"showFrame"。

以此实现窗口间的关联。

任务3iframe的基本用法编写HTML代码，实现如图所示的页面效果。

任务4利用框架技术布局页面使用HTML编辑工具，编写HTML代码，实现一个简单的帮助中心页面，并实现基于框架的页面跳转，如图所示的页面效果。

框架结构分为上下两个部分，在下面部分中再分为左右两个部分。

target=#value，#value为页面跳转区域的框架名称。

框架上部及跳转页面内容可采用截图方式。

小结及思考题考虑如何实现这个页面？实验4 CSS样式表基础一、实验目的1．掌握类选择器和ID选择器的使用2．掌握文本和字体样式美化网页的使用3．掌握背景样式美化网页的使用4．掌握伪类样式控制超链接样式的使用二、实验内容使用HTML基本元素设计基本网页三、实验环境（3）使用的操作系统及版本。

Windows XP Professional（4）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1 ID选择器使用HTML编辑工具，编写HTML代码，实现如图所示样式的页面效果任务2 背景设置，重复背景编写HTML代码，实现如图所示样式的页面效果任务3无序列表的修饰编写HTML代码，实现如图所示样式的页面效果。

任务4超链接编写HTML代码，实现如下图样式的链接小结及思考题扩展训练：实现如图所示的页面效果CSS各类选择器应用编写HTML代码，实现如图所示的页面效果。

列表修饰风格超链接实验5 CSS样式布局一、实验目的1. 掌握表格的基本结构，熟悉表格标签的使用。

2. 会使用表格标签属性修饰美化表格。

3. 了解表单的基本形式，掌握表单元素的使用方法。

二、实验内容CSS样式应用及div+css布局三、实验环境（5）使用的操作系统及版本。

Windows XP Professional（6）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1表格嵌套和表格内的标签任务2 跨多行多列的表格任务3给表单加分类边框任务4注册表单布局小结及思考题扩展训练：编写HTML代码，实现如图所示的页面效果。

使用所学的表单元素相关知识，制作商城网站注册页。

实现如图所示的页面效果。

实验6 Dreamweaver制作网页一、实验目的1．使用Dreamweaver实现图文混编2．使用Dreamweaver实现表格3．使用Dreamweaver实现表单4．使用Dreamweaver实现框架5．使用Dreamweaver工具实现样式表二、实验内容使用Dreamweaver工具设计网页三、实验环境（1）使用的操作系统及版本。

Windows XP Professional（2）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1 使用Dreamweaver实现表格布局和图文混编任务2 使用Dreamweaver实现表格和表单页面任务3使用Dreamweaver实现样式表任务4使用Dreamweaver实现框架页面扩展训练：使用Dreamweaver工具，利用表格制作一个用户注册的表单页面，最后用CSS修饰。

实现如图所示的页面效果。

使用Dreamweaver实现框架页面布局，页面效果如图所示。

实验7 网站设计一、实验目的1. 根据网站开发流程制作网站2. 掌握使用<iframe/>制作网页模板3. 学会使用DIV+CSS制作简单的页面布局4. 学会使用Dreamweaver工具制作网页二、实验内容使用Dreamweaver工具设计网站，合理布局网页三、实验环境1. 使用的操作系统及版本。

Windows XP Professional2. 使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1 创建站点按照步骤创建dangdang网站，并建立相应目录结构，如图所示。

任务2制作首页任务3制作模板任务4复用模板制作商品列表页面扩展训练：1、使用Dreamweaver工具，制作dangdang注册页面，页面效果如图所示2、制作购物车页面，页面效果如图所示。

实验8 JavaScript基础一、实验目的1. 掌握Javascript的变量定义与使用2. 掌握Javascript的运算符与表达式的应用3. 掌握Javascript的控制语句的使用4. 掌握Javascript的常用函数的使用5. 掌握Javascript的自定义函数的设计与调用二、实验内容JavaScript基础编程练习三、实验环境（1）使用的操作系统及版本。

Windows XP Professional（2）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1 用户输入成绩，程序输出相应的成绩等级。

要求成绩必须在0~100之间，否则提示错误并要求重新输入，等级分为优秀、良好、中等、及格和不及格。

如下图所示。

任务2 基本块级元素任务3 简单计算器根据提示输入操作数和被操作数（如图8.21所示），然后输入运算符（如图8.22所示），程序计算结果，然后弹出对话框输出表达式和结果，如图8.23所示。

任务4 用户输入最喜欢的一天，程序输出相应的信息。

周一->今天是这个礼拜的第一天，要好好工作。

周二->今天是这个礼拜的第二天，怎么感觉好困。

周三->今天是这个礼拜的第三天，工作好忙啊。

周四->今天是这个礼拜的第四天，怎么还没到周末啊。

周五->今天是这个礼拜的第五天，明天休息，今天晚上可以玩个够了。

周六->今天休息啊，可以好好放松一下了！周日->今天虽然也休息，但明天开始又要上班了。

不填->为什么不填周几呢？小结及思考题扩展训练：写一个的程序，页面效果如图所示。

逻辑：红球：从1~33 中，选取 6 个，不能够重复蓝球：从1~16 中，选取 1 个要求：点击“begin"，红球按从小到大的顺序输出提示：Math.random() 生成[0，1 )之间的随机数实验9 JavaScript对象一、实验目的1. 掌握使用数组对象常用方法2. 掌握使用字符串对象常用方法3. 掌握使用日期对象常用方法4. 掌握数学对象常用方法的使用5. 掌握创建自定义对象二、实验内容常用JavaScript对象的使用方法三、实验环境1. 使用的操作系统及版本。

Windows XP Professional2. 使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1 制作12小时的时钟需求说明显示年、月、日显示星期几显示时钟特效，时钟为12小时进制实现思路使用getFullYear()获得当前年份使用getMonth()+1获得当前月份使用getDate()获得当前日期根据getHours()获得的小时，使用if语句判断当前时间是否大于12使用getDay()获取当前表示星期几的数字，然后使用switch设置当前星期几任务2 实现一个小型计算器运用各种运算方法结合前面的知识制作一个简易的计算器。

提示：本题使用按钮被用户单击后执行函数的方法，所有的按钮都执行start（）函数，通过向start函数传递不同的参数完成不同功能。

在函数体内部可以通过switch条件分支进行判断，执行不同的运算，最后将结果存放在文本框中。

任务3 制作简单的网页动画setInterval（）方法可用于图片、文字等元素的移动。

利用该方法间隔显示不同的文字，如图9.21和9.22所示。

可以使指定div元素动态改变宽度，如图9.20和9.21所示。