网页制作技巧

转载

mb5fe190f8e35a0 2007-01-12 02:19:00

作项目的时候首先是确定需求，也就是要拿出很多的页面给用户去看，看用户是否满意，也就是界面原型要先行确定好，
然后才是数据库设计和代码之类。

现在需要先画出原型界面然后得到张老师的许可才能继续往下作！

今天会一直作这个留言板，所以课程什么的就先暂时不上了……

张老师接下来要讲一点东西，希望我们能够在以后面试的时候能够主动的把这个东西说出来，也就是别人问一个问题，你
不要就回答那个问题，而要多说一些，也就是把相关的知识点也带出来，这样有的问题面试官可能就没有时间问后面那些
相对比较难的问题了，这样对自己就比较有利了。

刚才的页面原型虽然刚才已经做了，但是页面很难看，如何把页面改的好看一点就是一个问题，下面就来简单地说一下。
表单里面的各个表单元素都应该放到表格里面，这样好看，也符合规矩。（注意灵活运用th，th就是一种特殊的td，
只不过th的显示外观明显的与td不同，而且可以通过CSS来进行设置！）

我也可以使用SS来设计：
<style>
table
{

  text-align:left; //让其他不属于td的，也就是th的去右对齐！
  border-collapse:collapse; //这样可以让表格的边框变细并且挨在一起！
  border-color:green;//设置边框的颜色！

}

th,td
{
  border:1px solid #bbb; //注意绝对不可以写成1 ，不可以丢掉后面的px单位，除非是0，否则不可以丢掉后面的单位！
  //而且注意一定不要丢掉solid，solid是用来画线的！
  border-bottom:1px solid #bbb;
}

td
{
text-align:left ; //让td的列左对齐(也就是那些input文本框的格式！)
}

input
{
  margin-left:0
  padding:0
  width:100px; //设置input文本框的宽度！
}
</style>

层叠样式表的作用就是实现了内容和表现之间的分离，所以格式的设置一定要尽量放到层叠样式表中去做！

张老师不建议我们使用DreamWeaver，因为这个网页工具有的时候自动生成的代码过于复杂，也就是垃圾代码，如果网页过于
复杂的话，人工写的代码将远远少于DreamWeaver画出来的网页。

------------------------------------------------------------------------------------------------
table中的border、cellpadding等属性是绝对不可以在css中进行设置的，css中的设置属性只能是style属性中已经定义的字段！
但是注意：<table style="">的做法要坚决的摒弃，因为这把内容和外观的设置混淆了！！！

注意下面这种写法在切换样式的时候非常的有用！！
<link type="text/css" rel="stylesheet" href="a.css" id=cssfile"/>
//上面这句代码表明刚进入这个网页引入的样式是a.css。

//下面这三句话就是按照“样式1、样式2、样式3”三个链接来切换网页的样式，这三个链接不跳转到任何的界面，所以要写上return false
//前面的document.getElementById就是获得cssfile这个link，然后调用它的href属性，令其为指定的样式表地址就可以了。
//getElementById就是得到对应id名字的网页上面的元素对象，但是前提是对应的元素必须设置了id这个属性！
<a href="#" onclick="document.getElementById('cssfile').href='a.css';return false;">样式1</a>
<a href="#" onclick="document.getElementById('cssfile').href='b.css';return false;">样式2</a>
<a href="#" onclick="document.getElementById('cssfile').href='c.css';return false;">样式3</a>

<a href="javascript:document.getElementById('cssfile').href='a.css;return false;'" onclick="">样式1</a>
上面这种做法是不可以的！href属性中是不可以同时写上上面两句话的！但是return false又必不可少，所以把它们放到onclick中去，如果
需要跳转的话，那么去掉return false就可以直接放到href中去写了。

而且还得说一下上面的这个href="#"，写上这个就是说这个链接指向的就是自己这个网页，但是什么都不写的话点击的话就是当前目录下的默认页面，
就好像Web工程下的index页面，或者说是自己页面所在的文件夹里面。自己可以试一试。

#还有锚点的意思
比如网页中的某个位置：<a name="mark1" />

<a href="#mark1">就是跳到本页面的mark1锚记。

<a href="b.html#mark1">就是跳到b.html页面的mark1锚点（当然前提是b.thml中得有这个<a name="mark1" />）

上午建立的样式放到a.css和b.css中去：
a.css:(注意如果加到css文件中的话就没有必要使用style标签了！)
table
{
  text-align:left; //让其他不属于td的，也就是th的去右对齐！
  border-collapse:collapse; //这样可以让表格的边框变细并且挨在一起！
  border-color:green;//设置边框的颜色！
}
th,td
{
  margin:0;//margin：也就是区域真实边框线(border＝1的时候)和区域最外层实际边框之间的空白(区域最外层实际边框其实要包含区域的真实边框线border)
  padding:0;//padding:真实边框线(border=1的时候)和里面的实际内容（文本或图片）之间的间距
  //所以说如果要让两个区域的元素完全挨在一起的话需要把这两个区域的margin和padding都设置为0！
  border:1px solid #bbb; //注意绝对不可以写成1 ，不可以丢掉后面的px单位，除非是0，否则不可以丢掉后面的单位！
  //而且注意一定不要丢掉solid，solid是用来画线的！
  border-bottom:1px solid #bbb;
}
th
{
  width:100px;
}
input
{
  margin-left:0
  padding:0
  width:100px; //设置input文本框的宽度！
}

这时候如果一个网页文件要引入上面的这个CSS的话，应该在最上面写上：
<link href="a.css" type="text/css" rel="stylesheet" />

//在jsp中，一般向下面这么写：注意userconfig是个实体类，cssfile是里面的其中一个属性，返回的是css的地址
<link href="${userconfig.cssfile}" type="text/css" rel="stylesheet" />
<form action="bbs.html" method="post">
<table>
  <tr><th>姓名：</th><td><input type="text" name="username"></td></tr>
  <tr><th>密码：</th><td><input type="text" name="assword"></td></tr>
  <tr><th>年龄：</th><td><input type="text" name="age"></td></tr>
  <tr><th>籍贯：</th><td><input type="text" name="location"></td></tr>
</table>
</form>
------------------------------------------------------------------------------------
HTML的表格与我们通常看到的表格不一样，一个大框里面套各种小单元格。

<table>的border是指整个表格的外边框的宽度，但是，只有设置了border的值，内部单元格才有边框，且无论boder的值是多少，内部单元格的边框宽度总为1。
<table border=1 bordercolor=green bgcolor="red" cellspacing=10 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>

<table border=0 bordercolor=green bgcolor="red" cellspacing=10 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>
下面的表格的内外边框的宽度都是1+1=2。因为cellspacing=0，相当于两个单元格的边框挨在一起。
<table border=1 bordercolor=green bgcolor="red" cellspacing=0 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>
要想让表格的内外边框的宽度是1，按如下方式实现：
<table border=0 bgcolor="green" cellspacing=1 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>
表格中嵌套表格的代码，且所有边界都显示为细线：
<table border=1 bordercolor=green bgcolor="green" cellspacing=0 cellpadding=0 style="border-collapse: collapse">
<tr bgcolor="red"><td>
  <table border=1 bordercolor=green bgcolor="red" cellspacing=0 cellpadding=5 style="border-collapse: collapse" frame=void>
   <tr><td>AAA</td><td>BB</td></tr>
   <tr><td>CC</td><td>DD</td></tr>
  </table>
</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>

---------------------------------------------------------
张老师的源代码：

a1.css:

table {
    width:100%;
    border-collapse: collapse;
    text-align:left;
    }
th,td{
    margin:0;
    padding:10px;
    border-top:1px solid #bbb;
    border-bottom:1px solid #bbb;
  }
th
{
  width:80px;
}

---------------------------------------------------------

a2.css:
table {

  text-align:right;
  border-collapse:collapse;
  border-color:green;
  }
th,td{
  border:1px solid #bbb;
  }
input {
  width:90px;
}

-----------------------------------------------------------
a.css:
table {

  text-align:right;
  border-collapse:collapse;
  border-color:green;
  }
th,td{
  border:1px solid #bbb;
  }
input {
  width:90px;
}
-------------------------------------------------------------
b.css:
table {
    border-collapse: collapse;
    text-align:left;
    }
th,td{
    border-top:1px solid #bbb;
    border-bottom:1px solid #bbb;
  }
input {
    margin-left:0;
    padding:0;
    }
--------------------------------------------------------------
register.html:

<a href="b.html#mark1" onclick="document.getElementById('cssfile').href='a1.css';return false;">样式1</a>
<a href="#" onclick="document.getElementById('cssfile').href='a2.css';return false;">样式2</a>
--------------------------------------------------------------
register2.html:

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
bottom.html:
<script type="text/javascrit">
parent.top.reload();
或者：parent.top.navigate("top.html");
或者：parent.top.document.location.href="top.html";
//以上三种做法都可以达到在底部的框架窗口中刷新顶部窗口的作用
</script>

bbs.html:
<frameset rows="70%,*">
<frame src="top.html" name="top"/>
<frame src="bottom.html" name="bottom"/>
</frameset>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。