第一节Dreamweaver CS6 软件简介和安装
1、Dreamweaver CS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件
2、为了保护能够正常安装，安装时，请断开网络。
第二节Dreamweaver CS6软件界面和简介
一、软件界面组成
1、菜单栏
2、工作区
3、属性栏
4、浮动面板（文件、资源、CSS样式、行为等）
二、界面的切换：为满足不同开发人员的需求
三、界面的恢复：窗口——工作区——重置设计器
四、插入面板的调用
第三节网页相关知识
1、什么是网页（网页概念）
在互联网上基于HTTP协议传播信息的页面
2、什么是网站
反应同一个主题的多个网页集合
3、网页内容的组成（网页元素）
（1）文字
（2）图片（jpg,gif,png）
（3）动画（swf,gif）
（4）多媒体
（5）超链接
（6）表单
（7）网页特效
（8）其他元素
第四节网页制作方法与站点建立
1、网页的制作方法
（1）代码发：html
（2）软件制作：Dreamweaver、frontpage
2、制作网站前准备工作，建立站点。
3、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相关连接。
4、站点的建立（连接）
（1）站点——建立
（2）文件面板
（3）应用程序栏（窗口——应用程序栏）
5、站点的分类（按照网站的位置）
（1）本地站点
（2）远程站点
第五节规划本地站点目录结构
1、规划本地站点目录结构
（1）images(图片)
（2）swf（动画）
（3）css(CSS样式)
（4）script(存放网页特效)
（5）other(其他)
2、网站主页名称
（1）index.htm
（2）index.html
（3）default.htm
（4）default.html
注：主页必须放在网站的根目录下面，同时名称也有特殊的要求
第六节网页中文字的输入
1、网页的四个视图
（1）设计视图
（2）代码视图
（3）拆分视图
（4）实时视图
3、网页中的文字
（1）文字直接输入
（2）回车表示换段
（3）Shift+回车：表示换行
（4）输入空格时要在全角输入法状态下输入
（5）特使字符插入：“插入——html——特殊字符”
（6）文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉
（注：如何去除复制来的文字格式，只需要将文字粘贴到记事本，然后从记事本中在复制文字就可以了）
4、预览网页：文件——在浏览器中预览——Iexplore(快捷键：F12)
第七节页面属性
1、页面属性
（1）修改——页面属性
（2）或通过属性栏
2、属性
（1）左边距、右边距、上边距、下边距
（2）文字字体、大小、颜。
注 A、字体：选择常用字体。如：宋体
B、大小：正文文字一般设置为12—16px
（3）页面背景、
（4）背景图片。（默认情况下自动填充、平铺）
注：A、图片要放在站点内（有关网站中的所有元素都必须放在站点内）
B、图片名称不能为中文
注：如果同时设置背景颜和图片，以背景图片为准
第十节 Html 网页基本代码格式
1、网页基本代码
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
注：（1）head:开头部分
（3）title:标题
（4）body：正文部分
3、常用代码
（1）<p></p>:换段
（2）<.br>:换行
注：多数html代码都有对称的特点
第十一节  图片插入
一、图片
1、图片格式
（1）JPG：图片质量较高一般用于较大的图片。如：人物、风景。（不支持透明）
（2）Gif：用于制作按钮、动画、导航条等，图片较小，只有256种颜。（支持透明）
（3）Png:兼有两种格式的特点.(支持透明)
注：图片的大小一般尽量控制在200K以下。
2、连接
（1）-blank 在新的网页打开
（2）-self：在自身网页打开
第十二节
1、热点
（1）矩形热点
（2）圆形热点
（3）多边形热点
注：编辑——首选参数——图像
2、替换
（1）用于图片的注释
（2）当图片无法显示的时候用此被人代替
3、宽度和高度的设置
4、相关ftml代码
Img:图片
Src:位置
热点：<map>……<map>
第十三节 图片的编辑
1、裁剪、亮度对比度、锐化
注：使用DW 编辑图像是个不好的习惯，如果要编辑图像，最好使用专门的图像编辑软件（如：PS）
2、插入——图像对象——鼠标经过图像
3、水平线的插入
插入——html——水平线
4、背景颜代码：bgcolor
十四节 超链接
一、超链接指的是通过点击一个对象可以连接打开另外一个对象（网页图片、程序等）
二、连接代码
<a href=”URL”>内容<a>
<a href=”URL” target=”_blank”>文字<a>
三、超链接的状态（修改——页面属性——连接）
（1）连接：连接默认颜
（2）变换图像：鼠标移上去时的颜
（3）已访问：访问以后连接的颜
（4）活动：鼠标点下去时的颜
四、连接页面打开目标
-blangk: 新窗口打开
-new:新窗口打开
-parent:父窗口打开（框架结构）
-self:自身窗口、原窗口
-top:顶窗口（框架结构）
五、超链接对象
（1）文字
（2）图片
（3）热点
（4）空连接
（5）邮件连接：mailton:邮箱地址
（6）下载连接：（浏览器打不开的内容即为下载链接）
（7）锚点链接（链接到网页的具体位置）
步骤：（1）创建锚点（2）制作链接(#锚记)
隐藏锚点：编辑——首选参数——不可见元素
注：锚点链接不但可以连接本页面中的锚点，也可以链接到其他页面中的锚点。
（7）脚本链接（实现特殊功能）
Javascript: windows.close()——关闭窗口
Javascript: windows.print()——打印文字
第十五节  表格
一、表格作用
1、制作表格
2、定位布局
二、表格建立
1、插入——表格
2、常用面板
三、表格的元素及代码
1、<td>…..</td>单元格
2、<tr>……</tr>换行
3、<table>…</table>表格
四、元素的选择
1、单元格
2、行
3、表格
五、表格的参数
1、行数和列数
2、宽度
单位：（1）像素表示绝对值（固定值）
（3）用%表示相对值
3、填充：单元格中的内容与边框的距离、
4、间距：表示单元格与单元格之间的距离
5、边框：设置表格是否留有边线
6、对齐
7、清楚行高列宽
8、将宽度转换为像素
9、将宽度转换为百分比
第二十一节 行和单元格属性
1、水平：单元格内容水平对齐
2、垂直：单元格内容垂直对齐
3、宽：单元格宽度
4、高：单元格高度
5、背景颜：单元格背景颜
6、拆分和合并单元格
注：在利用表格排版时网页中各种元素都是放入单元格内进行排版的
第二十二节 网页布局大小
一、网页布局分类
（1）“同”字式
（2）”厂”字式或反“”厂“”字式
二、网页大小（宽度大小）
（1）800*600分辨率宽度设置为778像素
（2）1024*768分辨率宽度设置为950像素或者1002像素
注：滚动条一般占有22个像素
第二十三节 实例——表格布局与定位
一、制作网站时的步骤：
（1）设置页面边距（0,0,0,0）即上，下，左，右边距都是0
（2）先整体后局部：先插入一个大表格用来定位和决定网页宽度，然后再插入小表格来定位每一个部分。
注：（1）表格尽量不要拆分
（2）表格与表格之前可以嵌套
（3）插入表格（0,0,0）填充、边框、间距为0
（4）表格大小和剧中
（1）800*600分辨率宽度设为778象素
（2）1024*768分辨率宽度设为950象素或1002象素
5、将单元格内光标定位到左上角（选单元格设置）
6、将单元格的高度设置和图片高度一样（作背景时）
7、图片可以插入到表格、什么时候作为背景呢？
(1)当需要在单元格内添加文字时就必须使用背景插入
（2）如果需要做超链接时就必须作为图片插入
图片作为背景图片插入（代码视图：<td  background>）
（4）图像占位符  插入—图像对象——图像占位符
注：插入图像占位符后就可以任意设置表格的宽度和高度
插入行和列
1，插入——插入表格对象
,2、布局标签
3、TAB键
第二十四节
1、单元格》行》表格
注：表格间距部分颜取决于表格背景。
2、图像大于颜且自动复制
背景颜gcolor
背景图像background
第二十五节
（1）宽度需要根据实际大小来设置
（2）在设置表格单元格宽度时，可以保留其中一列的宽度不便dw滚动文字代码
第二十六节
（1）利用表格的间距属性来制作
（2）利用表格的填充属性来制作
第二十六节
简单导航条制作
插入1行7列 宽度778
表格背景——表格间距1 表格单元格设置淡黄
第二十七节
切片工具
第二十八节
滚动效果代码
插入1行1列表格，表格边框间距1 背景黑 单元格颜白
（）<marquee>内容<marquee/>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。