网页设计与开发
网页设计与开发就是运用HTML、JavaScript与CSS等一系列知识进行网页设计。
HTML
HTML即超文本标记语言,使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。运用HTML制作表格,表单,添加图片,编辑颜色,定义段落和标题,为网页进行文档编辑。
设计表格:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
设计表单:
文本域:
<form>
First name: <input type="text" name="firstname"><br>
</form>
密码:
<form>
Password: <input type="password" name="pwd">
</form>
单选按钮:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
等等。
JavaScript
JavaScript是WEB的编程语言,决定网页的行为,运用JavaScript编写函数,并进行调用。运用JavaScript时,脚本要放在< script>和< /script>中,< script>可以放在< body>和< head>中。JavaScript包含一个JQuery库,运用少量的代码,实现大量的效果。
例如简单的一个实例:
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
加一个按钮,点击显示日期。
<p id="demo">这是一个段落</p>
<button type="button" οnclick="displayDate()">显示日期</button>
其中,脚本放在< head>里,调用放在< body>里。
CSS
CSS是层叠样式表,运用CSS对网页进行排版,添加导航栏,给网页分块,每一块区域可以有不同的内容,可以对网页进行更好的排版和布局,同时可以为网页添加背景图片。
运用CSS添加背景:
<style>
body
{
background-image:url('paper.gif');
background-color:#cccccc;
}
</style>
设置头部样式:
/* 头部样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
同样可根据头部样式分别分出底部样式footer、创建两个相等的实例column等等。
运用这些可以使得网页更加的完善,排版更加的完美。