用eclipse建一个web页面(图文)

步骤1:创建Dynamic Web Project--动态web项目。

       打开eclipse,在工具栏选在New-->Dynamic Web Project


      在打开的Dynamic Web Project窗口,输入项目名。选择tomcat,其他默认,然后Next。


       显示下图窗口,这时你可以把Context directory名改为WebRoot,也可以默认为WebContent,完成。这样就在eclipse的左边窗口生成了一个名为dynamic_web_project_01的web项目,至此web项目创建完毕。


步骤2、在web项目上创建JSP文件。

      右键单击刚才创建的web项目名,我的项目名是dynamic_web_project_01,New-->JSP File,输入jsp文件名。这里我默认了文件名(这里最好把文件名改为index.jsp否则到步骤4运行的时候,还要添加路径,否则要出错。到时候你需要才浏览器输入网址http://localhost:8100/dynamic_web_project_01/NewFile.jsp,如果你修改文件名为index.jsp之后就不用这么麻烦了,下面的图我就不修改了,为了方便自己把文件名改过来,嘿嘿),Next默认设置,Finish。下图给出web项目的结构图,这时.jsp文件就创建完成了。


步骤3、修改JSP默认代码。

      在步骤2中Next的时候咱们已经把默认的JSP代码默认了,这时这个默认设置中,web页面是不支持中文的,需要修改,把代码中的"ISO-8859-1" 全改为"GB18030"。


为方便复制,贴代码如下,本人初来乍到现在还不会抓能复制代码的图片,嘿嘿。

<%@ page language="java" contentType="text/html; charset=GB18030" 

    pageEncoding="GB18030"%> 

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=GB18030"> 

<title>Dynamic Web Projecttitle> 

head> 

<body> 

<center>一个web项目的jsp创建完成...center> 

body> 

html> 

      注意:创建Dynamic Web Project的JSP时,在默认情况下,系统创建的JSP文件采用ISO-8859-1编码,不支持中文。为了让Eclipse创建的文件支持中文,可以在首选项中将JSP文件的默认编码设置为GB18030。具体方法是:工具栏选择Window-->Preference


找到Web之下的JSP Files打开,如下图所示在Encoding栏选择Chinese,National Standard,确认OK完成。


步骤4、运行web项目。

      右键单击你新建的Dynamic Web Project项目名dynamic_web_project_01,Run AS-->1.Run on Server,这时你的web项目就会在你的默认浏览器中打开。(这里需要说一句,是在你的web服务器tomcat运行的前提下。当eclipse窗口栏下面sever服务器栏关闭时,可以在工具栏Window-->Show View-->Other-->Server-->Servers重新tomcat服务器。)

附:让你的网站在外部浏览器中运行。

      在eclipse中运行你的网站时,可以不在eclipse模拟的内部浏览器窗口中打开(这里把eclipse内置模拟的浏览器成为内部浏览器,把自己电脑上安装的其他真实的浏览器叫外部浏览器,内外是相对eclipse来说的。)而是直接使用外部浏览器运行。具体步骤如下:

      在工具栏选择Window-->Preferences-->在打开的preferences窗口左侧一栏选择General-->Web Browser,之后选中Use external web browser选项,下面列出了系统默认浏览器和IE浏览器,选择一个,点OK。这样运行网站项目的时候,你做的网页就不会在eclipse界面中显示了,而是在你安装的浏览器打开一个网页,这个网页就是你做的网站的内容了。

你可能感兴趣的:(用eclipse建一个web页面(图文))