网页设计与制作教程

定义:网页是网站中的一个页面，网站是多个网页的集合。

功能:提供信息、交豆、服务、网站设计、用户体验、搜素引擎优化

 静态网页

 动态网页

<p align="left|center|right">文字</p>，属性align：设置段落文字在网页上的对齐方式，包括left（左对齐）、center（居中）和right（右对齐），默认为left。

<h #align="left|center|right">标题文字</h>，属性align：设置标题在页面中的对齐方式，包括left（左对齐）、center（居中）和right（右对齐），默认为left。

文字<br/>

<hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" noshade="noshade"/>

属性size：设定线条粗细，以像素为单位，默认值为2。

<pre>文本块</pre>

<blockquote>文本</blockquote>

<a href="url" title="指向链接显示的文字" target="窗口名称">文本文字</a>

<a href="mailto:E-mail 地址">热点文本</a>

< img src="图像文件名" alt="替代文字 title="鼠标悬停提示文字" width="图像宽度"height="图像高度" border="边框宽度" align="环绕方式|对齐方式"/>

<a href="URL"><img src="img图像文件名"/></a>

所谓嵌套列表，就是无序列表与有序列表出嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分为无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套有序列表、在有序列表中嵌套无序列表等方式。

caption：表格标题

tr：表格的每一行

th：标题的单元格

td:内容的单元格

<table align="leftI center I right">…</table>

响应式布局：百分比

<table frame="" rules="">……内容……</table>

<input name=""type="radio"value=""checked/>

<input name="" type="image" src="" width=""height=" "/>

维护困难、标记不足、网页过“胖”、定位困难

        (1)页面的字体变得更漂亮，更容易编排。
        (2)可以轻松控制页面的布局。
        (3)可以在大多数浏览器上使用。
        (4)以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现，页面下载更快。
        (5)可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS文件中相应的行，就可以改变整个网站上页面的显示样式。

selector{ propertyl:valuel;property2:value2;property3:value3;…}
        选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；…}

标记选择器、class选择器、ID选择器及伪类选择器等。

集体声明

全局声明

<link type="text/css"rel="stylesheet” href="外部样式表名，css">

相对类型

绝对类型

色彩单位

display属性设置为block将显示块级元素，块级元素的宽度为100%，而且后面隐藏附带有换行符，使块级元素始终占据一行，如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区div和body等元素都是块级元素。

行级元素也称内联元素，display属性设置为inline将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超链接、图像、范围(span)、表单元素等都是行级元素。

list-item属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号。

mone属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把display 设置为 none，该元素及其所有内容就不再显示，也不占用文档中的空间。

盒模型的宽度=左外边距(margin-left)+左边框(border-left)+左内边距(padding-left) +内容宽度(width)+右内边距(padding-right) +右边框(border-right)+右外边距(margin-right)。

盒模型的高度=上外边距(margin-top)+上边框(border-top) +上内边距(padding-top)+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边距(margin-bottom)。

外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin- top、margin-right、margin-bottom、margin-left，也可以用margin属性一次性设置所有外边距。

        盒子和盒子的距离以及盒子和浏览器的距离

语法：margin-top:length I percent I auto

行级元素外边距合并

块级元素外边距合并

内边距设置

边框设置

新增边框属性

语法：position: static I relative I absolute I fixed

语法：clear:left I right I both I none
        参数：left清除左边浮动元素，即不允许左边有浮动对象；right清除右边浮动元素，即不允许右边有浮动对象；Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对象；默认值none。

font-family:字体名称；

font-size:绝对尺寸 | 相对尺寸;

font-weight :boldlnumberlnormalllighterl100-900;

font-style:normal l italic l oblique;

文本水平对齐方式

行高

文本的修饰

段落首行缩进

首字下沉

字符间距

文本的截断

文本的颜色

文本的背景颜色

设置图像边框

图像缩放

设置背景图像

设置背景重复

背景图像定位

使用长度进行背景定位

使用百分比进行背景定位

按钮主要用于控制网页中的表单。通过CSS样式可以对按钮的字体、颜色、边框以及背景图像加以控制。

<a></a >标签始终定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性，它指示链接的目标，如果未设置href 属性，后续多个属性均无法使用，则只是超链接的占位符。
        在谷歌浏览器中，鼠标悬停链接时无明显效果。设计者为了改变这种最基本的超链接样式，利用前面章节所讲的伪类选择器，按照“a：link→a：visited→a：hover→a： active→”的顺序，设置不同的链接访问状态效果，为文本超链接添加复杂而多样的样式。

除了文字链接和按钮链接，设计者还会为链接设置不同的背景颜色或背景图片，实现背景链接。

语法：list-style:list-style-type I list-style-position I list-style-image

利用背景图像实现列表项标记

语法：border-collapse: separate I collapse I inherit

语法：border-spacing：length

语法：caption-side:top I right I bottom I left

语法：empty-cells: show I hide

<nav>标签是HIML5新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内容整合，所以常用<nav>标签在页面上创建导航栏菜单区城。

利用 CSS 为a：hover和a： active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

        宽度、高度、边距等的要设置在a标签内！

导航栏的创建

列表样式的设计

导航栏的创建

导航栏的创建

DIV样式的设计

二级菜单的隐藏和显示设计

列表样式的设计

超链接样式的设计

利用CSS为超链接重新设置样式，对超链接的a：link和a：visited进行设置，表示超能接未被访问和已访问状态。然后将其display属性设置为block，使得超链接成为块级元素。

利用CSS为a：hover和a：active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

div标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以
<div></div>的形式存在，中间可以放置任何内容，包括其他的div标签。
        但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。

宽高属性
        宽度：width
        width:250px——设置宽值为250像素。
        width：50%——设置宽值为父元素的百分之五十。
        高度：height
        height: 250px——设置高值为250像素。
        height：50%——设置高值为父元素的百分之五十。

DIV元素的布局技巧

DIV元素的宽度自适应

DIV内容的居中

DIV元素的嵌套

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚
本语言，能够与HTML（超文本标记语言）、Java语言一起在Web页面中与Web客户交互.
它无须经过先将数据传给服务器端(Server)、再传回来的过程，而直接可以由客户端的应用程序处理，从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调人在标准的HTML语言中实现的，弥补了HTML语言的缺陷，是Java与HTML折中的选择，通常具有以下特点。

简单性

动态性

跨平台性

安全性

基于对象的语言

head标记中的脚本

body标记中的脚本

外部js文件中的脚本

事件处理代码中的脚本

区分大小写

变量不区分类型

每行代码结尾可以省略分号

注释与C、C++、Java等语言相同

标识符

变量声明

变量类型

算术运算符和表达式

关系运算符和表达式

逻辑运算符和表达式

赋值运算符和表达式

条件运算符和表达式

逗号运算符和表达式

条件分支语句

循环语句

函数

概述

属性

方法

window对象

document对象

location对象

screen对象

事件的应用常见于以下几种场景：鼠标单击某一元素、页面或图像载入、鼠标悬浮与页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。