网页设计与制作

1、超链接就是可以从一个页面跳转到另一个页面。由两个端点和一个方向构成，通常将起始端点（即鼠标单击的位置）称为源端点（或源锚），将跳转到的目标位置称为目标端点（或目标锚）。源端点可以是文本、按钮、图像等对象，目标端点可以是同一页面的不同位置，也可以是一个其他页面、一幅图像、一个文件或一段程序等。链接路径分为相对路径和绝对路径，../表示父目录。

2、导航条即表现了网站的站点结构和内容分类，又方便了用户对网站的浏览。根据导航拓扑结构，常见的网站结构有星型、环形和树形等。

3、创建导航文本链接--内部链接、外部链接http:// 、电子邮件链接、下载链接、文件目录链接、空链接#，“javascript:void(0)"（空链接不跳转到顶部）

4、链接目标打开方式
-black:新窗口中打开；
-parent:父框架集或窗口中打开；
-self:当前窗口中打开（默认）；
-top:顶层整个浏览器窗口中打开,并由此删除所有框架。

5、在页面设置中设置链接文字状态

6、图像链接、鼠标经过图像链接

7、图像热点链接

8、锚点链接：创建跳转到本网页中指定位置，需创建锚点标记。

9、链接管理，删除，更新链接。

第6章 表格

1、表格中横向称为行，纵向称为列，行列交叉部分称为单元格，单元格中的内容和边框之间的距离称为单元格边距，单元格和单元格之间的距离称为单元格间距，整张表格的外边缘称做表格边框。

2、<table>和</table>分别是表格的起始标签和终止标签，所有有关表格的内容均位于这两个标签之间。

3、<tr>和</tr>是表格的行标签，出现几对<tr>和</tr>，表格就包含几行。

4、<td>和</td>是表格的列标签，位于<tr>和</tr>标签之间，出现几对<td>和</td>，该行就包含几列。

5、简单表格的排版布局：表拖动调整格大小、shift+拖动调整整行列单元格大小.单元格对齐方式设置，整行列对齐方式，拆分合并单元格，增减行列，单元格中插入图片。

尺寸单位使用PX(像素）较多。

通过设置表格宽度的百分比%，边距百分比%，固定边距等方式可实现自适应流式布局。

1em等于当前父级字体尺寸，2em相当于当前父级字体尺寸的两倍。

rem也是一个相对单位，相对于浏览器HTML字体的大小。

6、复杂表格的排版布局：单元格边距，间距，边框设置，表格嵌套规划，嵌套表格，通过表格标签代码修改表格。

7、表格的数据显示功能，用表格方式呈现内容

第7章 CSS样式

1、CSS（Cascading Style Sheet）样式称为层叠样式表，也称级联样式表。CSS样式其实就是是关于对象的属性设置。是描述网页元素格式的一组规则，用于设置和改变HTML语言网页的外观。可以应用于文本、图像、表格行、单元格等对象等。

2、CSS样式面板：
(1)源：用于创建、附加、删除样式表
(2)@媒体：用于控制所选源中的媒体查询
(3)选择器：显示所有源中的选择器
(4)属性：显示选择器的属性

2、CSS样式的存储方式及优先顺序：（小范围优先）
(1)新内联样式：存于页面内容处
(2)内部样式：存于页面头部<style> ....</style>标签中
(3)外部样式：存于独立的.CSS文件中

若无样式按浏览器缺省显示网页。

3、CSS样式的类型（又称为选择器）：
（1）标签样式：重新定义系统默认标签的样式，如a,body,p,header,nav,footer等。
（2）.类样式：文本、图像、行、单元格等元素通过CSS目标规则调用新建的类样式。
（3）#ID样式：对有ID号的对象对应ID名称设置样式。
（4）# ID ，# ID ，# ID 群组样式：对多个对象同时设置的样式，用逗号分开
（5）#nav ul li 复合样式(后代样式）：附属关系中指定类样式、ID样式、表格、区块等对象中的单元格、链接、列表等细化设置，用#开头，用空格分开。
（6）伪类样式：如：a:link，

4、a :link带连接文字的状态
a: hover 鼠标经过时的状态
     a: active 鼠标按下去时状态
     a：visited  鼠标点击过的状态

5、元素display属性中inline 表示多个此元素处于一行内形成内联样式（默认）， block表示各个此元素形成独立区块，默认宽度独占一行，固定缩小宽度后浮动可在同一行。inline-block 每个此元素形成一个区块，各个元素处于一行内。

a样式属性设置为block则表示链接a标签感应区域为区块宽度，感应高度通过行高设置。

6、CSS样式的移动、存储和附加，一个CSS文件包含多种类型同时保存

7、CSS图片过滤器，1．Alpha滤镜 2．DropShadow滤镜 3．shadow滤镜 4．blur滤镜 5．wave滤镜 6．glow滤镜 7．gray滤镜

第8章 Div区块布局

1、<div>块状容器类标签，是一个独立矩形区域，大小样式由相对应的CSS样式设定。结构简洁，定位灵活，默认为自适应屏幕宽度，左右边距设置为自动则区块居中对齐。

<div><p><ul><h1>-<h6>都是块级元素，它们总是以一个区块出现，默认独占一行。

<span><font><a><img><input>都是内联元素，与相邻元素能横向依次排成行，排到最后自动换行。

2、DIV区块命名：header头部区， nav导航区， left左边， right右边， main主要内容区，footer底部版权信息区。

3、盒子模型。容器类元素网页中元素都占据一定的空间，除了元素内容之外还包括元素周围的空间，一般地把元素和它周围空间所形成的矩形区域称为盒子（box）。

4、“上中下”布局，<div>标签按照前后相继的顺序排列，分割网页空间，一个块级元素独占一行，其大小和外观由CSS样式控制。#footer高为81

5、“左中右”布局，首先插入若干个<div>标签，并按照前后相继顺序排列；然置float属性使区块对象浮动对齐在同行，clear清除区块浮动属性而按默认的独占一行，实现“左中右”的布局；最后，设置CSS样式其他属性控制<div>标签的外观。

盒子对象宽度设置为PX,float对齐以后可根据屏幕宽度实现响应式布局（同一行排不下的将转到下一行）

6、编辑样式：（1）CCS设计器中-选择器-属性。（2）鼠标定位到样式使用位置，左下角属性面板中-CSS-选择样式名称-编辑规则，可通过对话框修改样式。

7、CSS样式包括九大模块：
类型：定义字体、字号、加粗、倾斜、行高为表示文字背景行高度、斜、字体装饰属性
背景：背景图像和颜色
区块：区块内部文本间距、文本垂直水平对齐和文字缩进，显示方式。
方框：区块高度、宽度，浮动即向不换行对齐，内边距padding，外边距margin左右自动即为居中对齐，外边距固定时宽度设为自动，否则只执行右边和上边边距。圆角代码：border-radius: 70px 50px 20px 20px;
边框：整张表格或单元格边框线条设置。none无、dotted点状、dashed虚线、solid实线、double双线、groove槽状、ridge脊状、inset凹陷、outset凸起
列表：设置项目符号和编号列表，菜单导航无列表图标等。
定位：整块块元素的位置，absolute绝对定位以上一级边框为参照，fixed固定以浏览器窗口边框为参照，不随页面滚动，ralative相对定位指相对于原来的位置进行偏移，仍然占据原位置。
扩展：鼠标指针形状，打印分页和滤镜效果
过度：添加过渡样式效果。

8、CSS中英文对照

9、CSS属性参考手册

10、网页设计要点：
（1）网站结构合理，方便拓展更新
（2）页面布局合理，自适应或响应屏幕宽度
（3）内容精炼，导航链接方便合理
（4）色彩前景背景深浅色搭配，有区分度。大小面积深浅色搭配，有区分度

11、响应式Web设计相关技术
（1）流式布局：根据浏览器的宽度和屏幕的大小自动调整页面效果，实现页面中文档流的控制，如用百分比设置宽度。
（2）媒体查询：识别媒体类型，屏幕宽度，像素比等差异来改变页面的显示方式。
（3）栅格系统：依赖于媒体查询，根据不同的屏幕大小调整布局。
（4）弹性盒子：提供一种有效的方式对容器中的子元素进行排列、对齐和分配空白空间。

媒体查询布局例：

@media screen and (max-width: 480px)

{

#subnavi,#main {
width: 100%;
}

}

第9章 AP Div层和Spry 菜单

1、AP Div层定位自由，伴随建立CSS样式表，大小调整灵活，可重叠，Z-index数值大的在上面，因此可以利用AP Div进行元素的排列，再将AP Div转换成表格，完成网页的布局工作。

2、Spry菜单栏是可用于制作导航条的一组菜单按钮，其特点是在比较紧凑的空间中，置入比较多的导航信息，同时便于访问者了解网站的内容与结构。

3、AP Div的基本操作 (按ctrl连续绘制）

4、使用AP Div灵活布局、辅助线对齐、网格背景、转换成表格。

5、创建Spry菜单栏。Spry隐藏式菜单栏能够在紧凑的空间中置入比较多的导航信息，同时便于浏览者了解网站的内容与结构

ul.MenuBarHorizontal a:菜单项文字与背景

ul.MenuBarHorizontal a:hover:鼠标经过设置

ul.MenuBarHorizontal li：主菜单项宽度等设置

ul.MenuBarHorizontal ul:下拉菜单项宽度等设置

Windows Phone 1 Windows Phone 2

西式餐厅

素材下载

第10章 行为

1、行为实际上就是网页文档中一系列的JavaScript代码，用于实现网页的动感效果或引起某些特殊功能。一个完整的Dreamweaver行为由两大要素组成：事件（Event）和动作（Action）。事件是由浏览器定义的消息，可以附加在网页元素上，或者HTML语言标签上。动作是行为的内容本身，由一组JavaScript程序组成。

2、交换图像特效,通过鼠标事件显示图层。

3、拖动AP元素

4、启用新浏览器窗口

5、图片鼠标感应效果

第11章 模板网页和库文件

1、模板可以迅速生成多个风格一致的网页，同时可以把CSS样式预设在模板中，提供调用。避免了很多重复性工作，提高了工作效率。模板文件后缀名为.dwt

可编辑区设置中请注意段落格式前有空行

2、库。Dreamweaver可以把网站中经常反复使用到的网页元素存入一个文件夹中。将库项目插入网页中，实际上是插入库项目的一个副本和对该库项目的引用。从而保证了对该库项目编辑修改后，引用该库项目的网页能自动更新。库项目和模板一样，可以规范网页格式、避免多次重复操作。它们的区别是模板对整个页面起作用，库项目则只对网页的部分元素起作用。

3、模板的制作和使用

创建模板：新建-HTML模板-设计共同区域，插入模板对象-可编辑区域，保存模板。
使用模板：新建-模板中的页，编辑可编辑区，保存网页。
修改模板：打开资源面板找到模板进行修改保存更新。

4、库文件制作、使用和修改

当库项目创建后，Dreamweaver会自动在站点根目录下创建名为Library的文件夹，所有库项目文件都保存在该文件夹中，扩展名为.lbi，称为库项目。

第12章 表单

1、表单的主要功能是收集信息。由表单标签、表单域和表单按钮三个部分组成。表单可以实现浏览者同服务器之间的信息交互和传递。目前表单主要应用在用户注册、论坛登录等。表单标签包含了处理表单数据所用的URL地址以及数据提交到服务器的方法。

2、表单域必须存放在表单标签中。包含了文本域、文本区域、隐藏域、复选框、单选按钮、选择列表和文件域等。表单按钮包括提交按钮和复位按钮，确定将数据传送到服务器上或者重新输入。（如：type=datetime-local可选取本地时间）