前台技术学习

前言:假如我们把src理解为web 服务器的后台,那么WebRoot就为web服务器的前台。Src里面主要是.java类,包括一般的类与servlet类。

前台主要是让用户通过浏览器去浏览所用。后台主要是管理员处理业务逻辑所用。

一、HTML 与CSS介绍

  1. Html是什么

    标记性语言,解释用的。

    新建html,basic的。

     

  2. 框架介绍

    Top.html bottom.html left.html main.html right.html

    (Frame)

<body>

这里是index.html

</body>

 

如果是frameset的话,就不需要body了。

 

代码如下:(百分比都是可以调整的)

<frameset rows="15%,70%,15%" cols="*" border="0">

<frame src="top.html" name="topFrame" srcolling="no" marginwidth="0" marginheight="0"/>

<frameset rows="*" cols="20%,80%" border="0">

<frame src="left.html" name="leftFrame" srcolling="no" marginwidth="0" marginheight="0"/>

<frame src="welcome.html" name="mainFrame" srcolling="no" marginwidth="0" marginheight="0"/>

</frameset>

<frame src="bottom.html" name="bottomFrame" srcolling="no" marginwidth="0" marginheight="0"/>

</frameset>

 

  1. 如何重新部署服务器
    1. 点击 第一个

      然后add ,如果有tomcat服务器的话,直接部署就可以了。

    2. 关闭服务器以后,如果需要重新启动,点击上面第二个图标,点击打开服务器, tomcat6.0 --- start 即可。
    3. 有没有成功看console即可,会有提示。

常见的错误:

错误:

解决办法:left没有资源,出现404错误。

我们在搞框架的时候,frameset 可以理解为tr 行,frame可以理解为td列,一行里面有多个列是允许的。

而且,我们在写src的时候,系统默认会从你的文件夹下面寻找资源,所以,最好是先把html(jsp)名写好,然后粘贴过来即可。

小技巧:

如何去掉框架里面的线:将 border="1"改为 border = "0"即可

框架里面假如没有全部显示的话,我们可以设置下frameset里面的 rows =" 15%,14% ,xxxx" ;修改比例。

4、CSS介绍

1)css是什么

Html5 + CSS3 很炫

Css 样式表,对页面进行美化

2)css格式

选择符、属性、属性值

格式: 选择符{属性:属性值}

1、标记选择器 body table等 对html里面的标记进行风格化

2、类选择器 以 . 开头, .类名称{属性:属性值}

3、ID选择器

4、格式: 以 # 开头, #ID名称{属性:属性值}

3)CSS主要有两种模式:内嵌式与外嵌式

一个界面后台不变,变得大多数是样式。

CSS 有内嵌式,写在html前面的style里面。

<style>

a{

Font-size:30px

}

.one

{

Font-size:30px;

Color: red;

Font-Family:隶书;

}

.two

{

Font-size:30px;

Color: red;

Font-Family:隶书;

}

.three

{

Font-size:30px;

Color: red;

Font-Family:隶书;

}

 

#first

{

Color:red;

}

#secoed

{

Color:blue;

}

</style>

最好用外嵌式,可以直接引用即可。

<link rel = "sytlesheet" type="text/css" href="css/day4.css" />

Rel为指向

二、JavaScript 介绍

1、基本语法:区分大小写,变量类型不分,统一var . 每个语句结尾可以省略分号。这里的可以,可以理解为可以加也可以不加。

2、关键字: break,case,do,else,for,if,function,retrun,while,catch,continue,default,delete

3、变量声明: 同C++

控制语句: if if else switch

Alert 弹出一个对话框

4、在html或者jsp当中嵌入js

嵌入JavaScript

        <script type="text/javascript">

        function logincheck()

        {

         alert("我出来了")

        }

        </script>

 

对于JavaScript语句,结尾千万不能有;分号,不然会报错,而且错一个全盘错。(这句话有问题。。。)

        <script type="text/javascript">

    function logincheck() {

        var userName = document.login.userName.value //这玩意需要一层层往下剥离,其中 document是整个文档对象,loginformnameuserNametext文本框

name; .value 是获取文本框你输入的值。

        var password = document.login.password.value

        if (userName == "") {

         alert("用户名不能为空")

         return false

 

        } else if (password == "") {

alert("密码不能为空")

return false

        }

        alert("我出来了"+userName + password)

    }

这个小例子也说明了,返回值假如为空 或者 null都是不行的。只有false才可以。

这个就叫做脚本语言,其实脚本语句JavaScript是最简单的一种,做用户密码验证比较合适 。其实,内嵌java语言,就是jsp语言也是脚本语言。Jquery也是脚本语言。

还有就是,我们在做页面的时候,要验证肯定是在提交的时候验证。我们需要添加单击事件。

<input type="submit" value="保存" name="btn"

onclick="return logincheck();">

函数中有返回的话,就直接用return 函数();即可。

5、常见错误:

Js的常见错误:

  1. 函数名写错 alert放在第一行,看看能不能弹出
  2. 变量名写错 将alert一行一行的往下移,看看能不能弹出对话框

页面需要实时的刷新并保存。

Web常见的错误:

1、未启动tomcat 无法显示网页 , 就是一张白皮

2、404问题 请求的资源不存在 , 查看url 是否正确(统一资源定位器 URL) 协议+IP+文件路径

 

Html登录界面,可以找别人的模板。

posted on 2015-01-14 08:16  zhuxuekui3  阅读(488)  评论(1编辑  收藏  举报