网页设计与开发

网页设计与开发

网页设计与开发就是运用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等等。
运用这些可以使得网页更加的完善，排版更加的完美。