南昌大学web实验汇总.docx
《南昌大学web实验汇总.docx》由会员分享，可在线阅读，更多相关《南昌大学web实验汇总.docx（56页珍藏版）》请在冰豆网上搜索。
南昌大学web实验汇总
实验报告
实验课程：
WEB编程设计
学生姓名：
学号：
专业班级：
2015年6月
南昌大学实验报告
学生姓名：
xxx学号：
xxx专业班级：
xxx
实验类型：
□验证□综合■设计□创新实验日期：
2015-4-29实验成绩：
一、实验项目
Web编程环境
二、实验目的
1.搭建Web编程环境，能正确安装配置java运行环境、WEB服务器和数据库服务器
2.熟悉WEB编程集成环境MYEclipse.
3.熟练掌握WEB工程的创建、发布、运行流程。
三、实验内容
1.安装并配置java运行环境JDK和JRE
2.安装Web服务器tomcat,配置Tomcat服务器
3.安装并配置数据库MySQL.
4.安装MyEclispe，熟悉各项菜单项
5.为MyEclispe集成配置JDK和Tomcat
6.创建、发布、运行一个WEB工程。
四、实验仪器及耗材
计算机，JDK，TOMCAT,MySQL,MyEclipse等软件。
五、实验步骤
（一）安装并配置java运行JDK和JRE
1、下载该软件，运行安装软件，安装目录这里选为D:
\ProgramFiles\Java，其它步骤采用默认值。
安装完成，
2、设置JAVA环境变量，步骤如下：
右击“计算机”，选择“属性”菜单，在弹出的“系统属性”对话框中选择“高级系统设置”选项卡，然后单击“环境变量”按钮，弹出“环境变量”对话框框。
如图1-2
3、首先，点击“新建”，变量名为JAVA_HOME，变量值为java的安装路径，即“D:
\ProgramFiles\Java\Java\jdk1.5.0_12”。
如图1-3所示
4、其次，在系统变量里面找到path（没有就新建），然后点编辑，则变量值为直接写上“D:
\ProgramFiles\Java\jdk1.5.0_12\bin”。
5、最后，再点“新建”，然后在变量名上写classpath,该变量的含义是为java加载类（class或lib）路径，只有类在classpath中，java命令才能识别。
其值为“.;%JAVA_HOME%\lib
6、验证是否配置成功
（二）安装Web服务器tomcat,配置Tomcat服务器
1、下载apache-tomcat6.0。
双击“apache-tomcat-6.0.29.exe”，出现安装向导，单击Next按钮，出现“授权”界面，接受授权协议后，选择“Nomal”安装模式，
2、单击Next按钮，默认安装于D：
\ProgramFiles\ApacheSofiwareFoundation\Tomcat6.0，单击Next按钮，默认HTTP服务端口号8080、登录用户名为“admin”、密码为空，然后选择默认Java的JRE安装目录。
3、单击Install按钮，开始Tomcat的安装。
安装完成后，在“开始”→“程序”菜单中会出现安装程序创建的ApacheTomcat7.0Tomcat7菜单组，选择“ApacheTomcat7.0Tomcat7”菜单中的MonitorTomcat命令，在任务栏中会出现ApacheTomcat系统托盘
，右击托盘，在弹出的快捷菜单中选择StartService命令，即可启动Tomcat7.0服务器。
4、Tomcat正常启动后会在系统栏加载图标
。
（如果启动失败，请检查端口是否被占用。
如果已经有程序在使用8080端口，解决办法是停止正在运行的程序或者更改TOMCAT的使用端口。
）
5、打开IE浏览器，在浏览器地址栏中输入“http：
//localhost:
8080”并回车，显示如图
（三）安装并配置数据库MySQL
1、下载MYSQL55.0.67.zip，然后解压为Setup.exe，双击Setup.exe文件，开始mysql5.0的安装，如图3-1所示
2、默认是Typical，点击Next开始下一步安装。
点击Install进行安装，如图3-2所示。
3、安装结束，选择现在开始配置MySql服务器（以后可进行配置修改），点击Finish继续。
选择DetailedConfiguration，点Next继续。
如图33所示
4、全部选择默认设置，直到图3-4所示界面。
这一步是设置mysql服务端口号，默认端口号是3306，采用默认值。
5、点击下一步进入的默认字符集设置界面,如图3-5，原来的标准字符集是Latin1，不支持汉字，更改为默认字符集为utf-8或BGK等能支持汉字的字符集。
6、点击下一步，进入超级用户密码设置界面如图3-6，对mysql拥有全部的权限，，有个复选框是选择是否允许远程机器用root用户连接到你的MySql服务器上面，如果有这个需求，勾选。
输入两次密码后（本书程序数据库访问密码为root），点击下一步，完成安装。
（四）安装MyEclispe，熟悉各项菜单项
（五）为MyEclispe集成配置JDK和Tomcat
1、为MyEclipse配置JRE
启动MyEclipse9.0后，选择主菜单中的【Windows】→【Preferences】（首选项）命令，弹出如图5-1所示的首选项窗口。
在左侧树形控件中选择【Java】→【InstalledJREs】，在窗口的右侧编辑区选择用户计算机上的JRE安装目录，配置好JDK环境。
如右侧编辑区没有列出JRE，则可按Add按钮进行添加，在新对话框中根据提示选择JRE的安装目录即可。
2、为MyEclipse集成Tomcat7.0
在Eclipse的集成开发环境中选择【Windows】→【Preferces】命令，在左边的菜单按【MyEclipse】→【Servers】→【Tomcat】→【Tomcat7.x】，找到Tomcat7.x，设置为“Enable”,然后选择好Tomcat的基本路径，如图5-2所示。
（六）创建、发布、运行一个WEB工程。
1、从MyEclipse菜单【File】→【New】→【WebProject】来新建一个WebProject项目，如图6-1所示。
2、点击“Finish”，如图6-2所示。
3、下面建立一个jsp文件，右击“Webroot”，在快捷菜单选【New】→【JSP】创建一个jsp文件，出现jsp文件对话框，如图6-3所示。
4、在下面的Servers面板中或在上面的工具栏里，单击部署命令按钮
，出现工程部署对话框，如图6-4所示。
单击“add”按钮，添加一个发布项。
5、选择Tomcat7.x，点击“完成”可以看出，将工程发布到Tomcat的安装目录上去了，如图6-5所示。
6、添加完毕，就显示工程的发布信息。
如果工程中java文件内容变化了，则需要重新发布，发布前需要将web服务器停止。
重新发布单击“redeploy”按钮，如图6-6所示。
7、在上图点击“Browse”可以转到Tomcat文件夹查看发布的工程，如图6-7所示。
8、下面启动Tomcat。
从工具栏里的
选择向下箭头，选择Tomcat9启动。
或在下面的Servers面板中的选择
按钮，选择Tomcat9启动。
如图6-8所示。
9、在Eclipse的Console窗口中会显示启动信息，成功启动以后，通过浏览器访问刚才创建的jsp文件，地址和结果如图6-9所示，注意区分大小写。
六、实验结果
新建系统变量
编辑系统变量Path
编辑系统变量ClassPath
环境变量配置成功
选择安装方式
Tomcat的基本配置
启动Tomcat
自动运行设置
Tomcat的欢迎界面
选择安装类型
准备SQL安装
MySql配置向导
设置MySql服务的端口号
设置默认字符集设置用户名和密码
为MyEclipse配置JRE
为MyEclipse集成Tomcat
新建Web工程
新建Web工程结果图
新建JSP页面对话框
添加发布的工程选择Web服务器
部署管理界面
发布到Tomcat中的目录结构
启动Tomcat服务器
浏览网页
七、实验心得
刚开始觉得特别简单就是下载安装而已，结果却是各种出错，连原因都找不到，自己不够细心，好多细节和注意的没留心，也有对这些软件应用的部首系。
觉得做什么都应该先虔诚虚心的学习再动手。
八、参考资料
《JavaWEB编程技术》郭路生编
南昌大学实验报告二
学生姓名：
xxx学号：
xxx专业班级：
xxx
实验类型：
□验证□综合■设计□创新实验日期：
实验成绩：
一、实验项目HTML和CSS编程技术
二、实验目的
1.熟悉HTML静态网页编程技术，熟悉HTML各种标记，特别是表单标记
2.熟悉CSS编程技术，掌握CSS来格式化网页、掌握CSS盒式模型
3.掌握DIV+CSS布局和设计网页，掌握CSS设计网页的一般流程
4.熟悉Dreamweaver的CSS设计器
三、实验内容
1.构思一个新闻发布网站，主题自选，设计好新闻类别
2.制作主页PSD图
3.用DIV+CSS布局主页框架。
（如可分成top,mid,foot,其中mid再分两大块left和main）
4.分别细化设计每一大块。
5.要中间部分的左边或右边要设计一个小登录表单，并用CSS美化。
四、实验仪器及耗材
计算机，Dreamweaver8，Photoshop，MyEclipse等软件。
五、实验步骤
1，1.选择好自己制作新闻发布网站的主题，及其新闻类别
2，将构思好的导航条用Photoshop制作好，
3，在Dreamweaver8中通过css布局把页面整体框架做好。
4，在左边框架中设计登录表单，
5，完善网页各个部分，运行观看效果。
六、实验结果
网页源代码：
web2
--
.STYLE2{
color:
#003399;
font-weight:
bold;
}
.STYLE4{color:
#FFFFFF}
-->