Dreamweaver

 

 

 

第一课 DW基础知识

 

 

一，主要功能：

 

1，设计制作网页：

 

2，建立和管理站点（文件夹）上传下载网页：

 

 

二，DW和HTML语言的关系：

 

1，HTML：功能较强，不易产生垃圾代码，可视化效果弱，适用于专业人士使用。

 

2，DW：可视化效果强基本知识所见即所得，操作方便，不能制作较复杂的动态网页容易产生垃圾代码。

 

 

三，文档的编辑窗口：

 

1，标题栏：

 

1）（无标题文档）：网页标题

 

2）Untitled-1)：文件名

 

3）*：表示文件已被修改

 

2，菜单栏：

 

3，“插入”面板组：

 

ctrl+U：设置参数—常规类，出现黑剪头在“插入”上击右键，选择“重命名”面板组

 

ctrl+F2：打开或关闭（插入面板）或“窗口”菜单—插入左上角五个小点可移动面板：

 

文档工具栏：

 

4，工具栏

 

标准工具栏：

 

查看菜单下的“工具栏”

 

代码视图

 

1）文档工具栏前三个按钮叫“视图方式” 两者均显示 设计视图

 

2）标题：ctrl+Z

 

3）文件管理：

 

4）预览：F12

 

5）刷新：F5

 

6）参考：调出HTML语言，参考书

 

7）代码导航：调整代码

 

8）视图选项：

 

5，工作区：

 

6，文档标签：切换网页文件

 

7，标签选择器：body

 

1）选定网页元素：选择整个表格（单击body）

 

2）编辑标记：右击font—编辑

 

8，窗口尺寸：选择窗口还原第二行（单击760*420）

 

9，2*1秒：显示文档大小的下载空间，每秒28.8K，下载量

 

10，属性面板：为各类元素设置属性ctrl+F3

 

11，其它面板组：

 

 

 

 

第二课

 

按ctrl+U：常规—工作区

 

F4：快速打开或关闭所有面板

 

 

四，站点管理窗口： 自动配色：命令/配色方案

 

站点板“按F8”—后面，单击展开/折叠

 

1，标题栏：

 

2，菜单栏：

 

3，工具栏：

 

左：远程服务器

 

4，工作区：右：本地站点

 

5，状态栏：

 

 

 

五，站点的管理：

 

1，定义站点：F8，站点面板

 

Win+E：启动资源管理器

 

基本标签：***的站点—下一步—否—下一步—选第一项，然后选择目标—下一步—选FTP—192.168.0.44—用户名和密码—下一步—否—完成

 

高级标签：1）本地信息：站点名字—本地根文件夹—默认图像文件夹（可不填）--http地址（你的网页地址，可不填）--启用缓存“t”

 

2）远程信息：①访问方式：FTP ②FTP主机：192.168.0.44

 

③主机目录：不用填写 ④登陆： ⑤密码：

 

2，编辑站点：按F8—“站点”菜单—编辑站点—选择站点名称—单击“编辑”按钮

 

六，网页页面属性的设置：ctrl+J

 

修改—页面属性：

 

左右边界：默认为8

 

顶部边界：默认11像素px

 

跟踪图像：可以调出一个背景设计图

 

 

 

文件与图像的应用

 

一，文本的录入：

 

1，直接录入：复制粘贴

 

2，特殊字符：

 

1）源代码：

 

2）使用“字符”面板

 

3）某种输入的软键盘按钮：

 

3，日期：“常用”面板/日期

 

 

 

二，设置文本格式：选定文本/使用“属性”面板

 

1，“格式”下拉框：

 

2，“字体”：

 

1）默认字体：宋体

 

2）字体列表：编编字体列表：+号

 

提示：不要使用特殊字体，若必须使用处理成图片。

 

3，大小：1-7

 

4，文本颜色：默认216种

 

5，字形：B、I

 

6，对齐方式：两端对齐IE不认

 

 

 

三，HTML样式：

 

添加式（不影响源式）

 

1，类型：覆盖式（影响原式）

 

2，创建：ctrl+F11 +：添加样式

 

调出HTML样式面板：单击“新建”样式+ ，右上角 -：覆盖式

 

3，删除：用拖动方法，拖到右下角“垃圾桶”上，或选择样式，单击删除

 

说明：删除样式后，已应用的格式不会改变。

 

 

 

第三节

 

四，CSS样式：

 

1，概念：风格样式单，用来进行网页风格设计，替换重复代码精确布局，美化网页。

 

2，分类：根据生成代码的存放位置

 

1）嵌入式：放在本网页文件（应用快）

 

2）外挂式：生成一个专门的，CSS文件

 

3，创建CSS样式：

 

在CSS样式面板：单击“新建样式”按钮

 

1）新建CSS样式对话框：

 

①定义在：仅对该文档，代码存放位置

 

②类型：根据代码作用对象

 

创建自定义样式：作用于“任何选定”对象，有样式名（网页文本12px）

 

重定义HTML标签：重新规定HTML代码默认属性自动生效

 

使用CSS选择器：重新定义超链接四种状态的默认属性

 

a:link：正常显示 a:visited：访问过

 

a:hover：指针移动 a:active：激活

 

③根据类型决定填写内容：

 

2）CSS样式定义对话框：规定本样式的功能作用（400以下，正常逐细）

 

边框：对边框

 

列表：对项目列表

 

定位：针对层

 

扩展：特殊显示效果

 

4，应用

 

1）创建自定义样式：选定对象，CSS样式面板，单击“应用样式”单击样式名

 

2）从定义HTML标签：使用CSS选择器，自动生效

 

5，编辑方式：CSS样式面板，单击“编辑样式”选择“样式”编辑样式表按钮编辑，删除CSS样式，按钮删除

 

 

 

五，项目列表：

 

1，制作：

 

1）选中多段：每段为一个项目

 

2）在属性面板：单击“编号列表”或“项目列表” （有序） （无序）

 

2，缩进：改变项目的级别单击项目，属性面板“文本凸出”升级，“文本缩进”降级

 

3，修饰：光标定位于某个项目中属性，单击“列表项目”按钮（更改项目修饰名）

 

 

 

第四节 超链接

 

六，超链接：

 

根据链接目的地分成四种

 

1，普通链接：链到一个指定的文件（任意）

 

选定对象：

 

绝对：绝对是WWW

 

1）属性面板链接栏输入：（URL）可以是相对地址 相对：相对当前

 

2）属性面板：链接旁边有“指向”按钮（拖拽“指向文件”按钮，指到站点中某文件）只能用于内部链接

 

3）属性面板：单击“浏览文件”按钮，选择站点中某文件（内部链接）

 

4）站点面板：拖拽某文件到属性面板链接栏 另外：专门针对文本，插入面板“超链接”按钮（只针对文本）

 

2，邮件链接：链到发邮件软件（Out look）

 

1）选定对象：链接栏输入：mailto:电子信箱

 

2）插入面板：“电子邮件链接”按钮

 

3，空链接：不链到任何地方选定对象，属性面板：链接栏输入“#”号

 

4，锚链接：链到指定网页文件中的指定位置

 

1）打开目标页：光标定位于目的地，插入面板“命名锚记”按钮—给锚起名

 

2）选定对象：属性面板链接栏，链到目标页/然后在文件名后输入#号/加上锚名没有目标页，直接输入#号锚名

 

注：如果作链接的对象与锚在同一网页文件中，则链接栏可以省略文件名。

 

5，目标：打开目标页所使用的窗口

 

_blank：新窗口

 

_parent：复（父）窗口

 

_self：本窗口

 

_Top：上级窗口

 

 

 

七，图像：

 

1，插入图像：

 

1）普通图像：插入面板“图像”按钮

 

注：①图像文件必须位于站点中

 

②文件及相关文件夹名称不能包含全角字符（汉字）

 

③文件格式：JPG、GIF、PNG

 

2）翻转图：插入面板“鼠标经过图像”按按图像名称：区别于其它原素的名字原始图像：正常显示图鼠标经过图：指针移到图像上显示的图替换文

本：当图像因某种原因不能正常显示，在图像区域显示的文本当鼠标指针移到图上时，在指针右下角显示的文本按下时，前往的URL：超链接 （显示

区域大小，由原图决定）

 

2，设置图像属性：

 

1）图像名称：

 

2）大小：显示区域的大小（如果数字是粗体，表示不是原图像的大小）

 

3）原文件：src数字

 

4）超链接：

 

5）替代：替换文本

 

6）编辑：启动图像编辑软件，修改图像（“编辑”菜单下的）

 

7）重设大小：把图像恢复到原始大小

 

8）对齐方式：图相对于容纳图像区域水平对齐方式。

 

9）对齐：图像与同行其它对象的排列方式

 

10）边框：border

 

11）目标：打开链接目标页所用窗口

 

12）低品质源：指定一个低质量图像用于预先显示

 

13）垂直边距：水平边框：Hspace Vspace

 

14）热区：实现同一图像不同区域不同链接

 

制作：

 

①选定图像：在属性面板单击热区形状工具

 

②在图上画上相应区域

 

③用箭头工具移动，修改热区

 

④属性面板为热区指定链接（如果两个热区相交以先画的热区为准）

 

 

 

 

第五节

 

3，创建网站相册：命令/创建网站相册

 

准备条件：在站点中创建两个文件夹，一个为空，一个有图像。

 

1）相册描述：标题，副标题，其它信息

 

2）源图文件夹：包含制作相册所需图片文件（有图像文件夹）

 

3）目标文件夹：相册存放在的位置（站点里空文件夹）

 

4）缩略图大小：小图的大小

 

5）列：每行小图数（如果1024*768最多为9）

 

6）缩略图格式：

 

格式：生成的小图或大图以什么格式存放

 

相片格式：

 

创建完之后，把三个文件夹的名字，改为英文状态。

 

 

 

表 格

 

一，创建表格：“田”字有20个边框

 

插入面板：“插入表格”按钮

 

1，行数列数：规则表的行、列

 

2，宽度：单位为：%、px（像素）最外层应是像素，但在创建表格时内

 

3，边框：填充，间距：border（边框）指边框宽 0：无边框（不显示）

 

1：表示所有边框宽度是（px）

 

>1：最外层边框的宽度

 

Cellpadding：（填充）内容与边框间距离

 

Cellspacing：边框之间的距离

 

 

二，表格基本操作：

 

1，选定：

 

1）单元格：ctrl+单击单元格

 

2）行列：单击行首、列上

 

3）整个表：单击边框

 

2，大小：

 

1）整个表格：选定表格，拖拽三个控制点。

 

2）行、列：拖拽边框（不要选定表格）

 

3，增减行列数：光标显示表中，单击“修改/表格”

 

4，套用表格格式：命令/格式化表格

 

5，排序：命令/排表格

 

 

三，属性：

 

1，表格：选定表格，属性面板

 

1）表格ID：名称

 

2）行、列：显示和修改行、列数 内容：优先权

 

3）宽、高：表格大小：单位为（px、%） 规定值 规定：内容大于规定值

 

4）填充，间距，边框：

 

5）对齐：表格相对于容纳表格区域的水平对方式

 

6）清除表格宽度和高度：清除行列的规定值

 

7）单位转换：把宽高单位在px与%间转换

 

8）表格背景色：背景图：边框色：

 

2，单元格：光标放在单元格中

 

1）合并拆分单元格

 

2）水平和垂直：内容相对于单元格对齐方式

 

3）宽、高：单元格大小 内容 优先级别 表格 单元格

 

4）不换行：当两种元素在同行内，宽度超出单元格宽度时，建仪不换行。

 

5）标题：把<Td>换成<Th>

 

6）单元格背景色：边框色：

 

说明：1，不能一个表格贯穿使用。

 

2，一个表格独占一行。

 

3，元素间距用行高或列宽控制（删除空格）

 

4，表格当中背景图像与背景色运用技巧

 

5，表格行高、列宽与背影结合技巧。

 

 

 

第六节 层

 

一，创建层：

 

1，分类：CSS层：适用于IE浏览器

 

NC层：适用于Netscape：浏览器 （4.0以前可以做NC层，以后不能做CM层）

 

2，创建：

 

1）单击“插入面板”描绘层按钮，在页面上拖拽（出现层标志□C）CSS样式“田”层手柄 层边框“口”（只显示层当中的内容）层控制点有：8个

 

2）拖拽“描绘层”按钮到页面上

 

 

二，层属性：

 

1，层编号：层名称

 

2，左、上：层的位置坐标

 

3，宽高：层的大小，规定值

 

4，Z轴：层的叠放次序

 

5，显示：层中内容在浏览时是否可见

 

default：默认（由浏览器决定）

 

inherit：继承（由父层决定）

 

visible：显示

 

由制作者决定

 

hidden：隐藏

 

6，背景图，背景色：

 

7，标签：生成层的HTML代码：<DIV>CSS层 <span><layer> NC层 <I layer>

 

8，溢出：当内容大于层的规定大小时处理方法：

 

visible：显示 以内容为准自动将层变大

 

hidden：隐藏 以规定大小为准自动将层变大

 

scroll：无论内容多少（显示滚动条）

 

auto：自动规定大小不变，根据内容多少决定是否显示滚动条

 

9，剪辑：显示层当中部分内容（层中可见区域范围）

 

左，上：显示区域左上角相对层左上角距离。

 

右，下：显示区域右下角相对层左上角距离。

 

 

三，层的操作：

 

1，层面板：窗口下/其它/层

 

1）防止重叠：层不能重叠设置

 

2）眼睛：显示/隐藏层

 

3）层名：层的名称（双击可以改名）

 

4）Z：Z轴次序

 

2，调整大小位置：

 

移动：拖拽边框，或改变坐标

 

大小：拖拽控制点，或宽高

 

3，嵌套与分离：（父子关系）拖拽层标志到层中或拖出（拽父，父动子也动，拽子，父不动）

 

4，对齐：shift+单击（选定多层）然后，修改/对齐 上，下左右边缘对齐：设为相同大小

 

5，与表格互转：修改/转换/层到表格 表格到层：没有内容的单元格，自动删除

 

 

 

第七节 框 架

 

一，概念：

 

1，框架集：定义了一组框架结构的网页文件

 

2，框架：窗口中装载一个独立网页的区域

 

3，框架页：显示在框架内的普通网页文件

 

 

二，基本操作：

 

1，创建框架集：

 

1）插入面板：框架标签，单击相应样式按钮

 

2）查看/可视化助理/框架边框t打勾 拖拽边框，把页面分割

 

2，删除框架结构：

 

把边框拖拽到窗外

 

3，保存：

 

1）保存框架页：光标置于框架页中，文件/保存框架 框架集：单击框架边框，文件/保存框架页

 

2）全保存：文件/保存全部

 

4，框架面板：窗口/其它/框架

 

1）粗黑色边框：代表框架集

 

2）灰边框：代表框架

 

3）文字：代表框架名称

 

4）选定：单击黑色边框—框架集 单击灰色区域—框架 alt+单击框架页可选定框架

 

 

三，属性：（先创建，再设置）

 

1，框架集：

 

1）边框：在浏览器是否显示边框

 

2）边框宽：颜色：显示时用来显示颜色

 

3）值：指框架的宽或高

 

4）单位：指框架宽高的单位（3种）px，%，*（相对）盛于宽度

 

2，框架：

 

1）框架名称：用于超链接

 

2）源文件：默认本框架内，打开哪个框架页

 

3）边框：是否显示边框

 

4）滚动：是否显示滚动条

 

5）不能调整大小：是否允许用户改变边框位置（竖直不允许用户调整）

 

6）边框颜色：

 

7）边界宽度：边界高度：页边距：

 

 

四，编辑<noframes>：防止不识别框架结构网页的浏览器无法显示该文件（比如IE浏览器）

 

1，在框架集源代码中<noframes>内写入<body>内容

 

2，设置视图：修改/框架页/编辑无框架内容

 

 

五，超链接：

 

创作方法与普通网页相同

 

目标：_bland
_prant
_self
_top

 

静态网页总结：

 

1，属性body

2，定位，表格，层，框架

3，放对象：CSS（文字、图像）

4，超链接：内部链接还是外（目标_bland）

 

 

 

第八课 表单

 

一，创建表单：

 

1，定位光标：插入面板，表单标签，单击“表单”按钮，出现红框—代表一个范围

 

2，光标置于表单中，单击相应项目按钮，插入表单项

 

 

二，表单属性：单击红色虚线框

 

1，表单名称：区别于其他表单

 

2，动作：指定服务器端处理表单的程序可以填邮件链接

 

3，方法：表单的发送方式

 

Get：数据量小，(10192)字节，不加密如：（搜索）

 

Post：数据量大，加密发送

 

4，目标：打开返回页面所用窗口

 

5，MIME类型：处理数据所用的MIME编码

 

 

三，表单项的使用及属性：

 

1，文本域：用于接收用户输入的字符

 

1）名称：此文本域的名字

 

2）字符宽度：文本域在页面上的显示宽度

 

3）最大字符数：指允许用户输入的最多字数（如果不填默认是无限）

 

4）类型：单行：所有字符在一行内显示多行：显示一个区域可显示任意行数字符 密码：单行，输入的字符以“*”号显示

 

5）初始值：默认文本域内显示的文字

 

2，隐藏域：用于处理不需要用户干预的信息

 

3，复选框：为用户提供多项选择：

 

1）名称：框名

 

2）选定值：当选定此项时服务器获取的信息

 

3）初始状态：默认是否选定此项

 

4，单选按钮：为用户提供单项选择

 

1）名称：同组相同 不同组不同

 

5，单选按钮组：成组的填选单选按钮

 

6，列表域：列表为用户提供选择：

 

1）名称：

 

2）类型：菜单：单行列表 列表：多行列表

 

3）高度：列表域的行数 选定范围：是否允许用户多选

 

4）列表值：用于规定选择项目及选定值（根据字符数决定宽度）

 

5）初始化时选定：默认选择的项目

 

7，跳转菜单：用列表方式显示多个超链接

 

8，图像域：插入图片配合程序语句实现按钮功能

 

9，文件字段：用于选择用户端文件，传至服务器

 

10，按钮：实现某一功能

 

1）名称

 

2）标签：指按钮上显示的文字

 

3）动作：按钮的功能

 

 

 

第九课 行为（编程）

 

一，基本操作：

 

1，概念：行为是DW中内置的JavaScript程序库

 

2，添加行为：

 

1）选对象：事件的承受者，动作发出者

 

2）在行为面板，单击“+”号，选择“动作”，规定动作参数

 

3）单击“事件”旁的箭头，选“事件”

 

3，修改行为：

 

1）删除：选定行为，单击“-”号

 

2）改变动作参数：双击动作

 

3）改变动作：次序：选定行为，单击上下箭头二，常用动作：

 

1，播放声音：播放指定的声音文件，格式：WAV、MID

 

2，打开浏览器窗口：弹出新窗口，打开一个网页（一般用于广告）

 

3，弹出信息：弹出对话框显示文本信息

 

4，调用JavaScript：当执行指定JavaScript程序段

 

5，改变属性：当事件发生时，把某指定对象的指定属性改为新值

 

6，恢复交换图像：

 

7，检查表单：插件，浏览器：检查用户端相应项目是否符合要求

 

8，交换图像：

 

9，控制Shockwave或Flash：控制影片的播放

 

10，设置导航条图像：制作导般条

 

11，设置框架文本：改变某区域的文本内容

 

12，拖动层：事件发生时，使层跟随鼠标指针

 

13，显示隐藏：使层显示或隐藏

 

14，弹出式菜单：利用层制作弹出菜单

 

15，转到URL：制作超链接

 

 

三，常用事件：

 

1，鼠标事件：

 

1）on click：单击

 

2）on Dblclick：双击

 

3）on drag：拖拽

 

4）on dragend：停止拖拽

 

5）on dragenter：拖入

 

6）on dragleave：拖出

 

7）on dragover：拖拽经过

 

8）on mouse Down：按下

 

9）on manse Move：移动

 

10）on manse out：移动

 

11）on manse over：移入

 

12）on manse up：抬起

 

2，键盘事件：

 

1）on keydown：按下

 

2）on keyup：抬起

 

3）on keypress：按下并抬起

 

3，其它事件

 

1）on load：载入完成

 

2）on Help：使用帮助菜单

 

 

第十课 动画及其他元素

 

程序动画（最好的，也是最难的） 如：神密花园 www.lili.cc

 

一，时间线：

 

1，动画概念：通过不同的时间改变层的位置大小，可见性，Z轴等属性，实现动画效果

 

2，面板：窗口/其它/时间轴（alt+F9）

 

1）时间线列表：多个对相实现不同动画

 

2）帧跳转： 回首帧，后退一帧，当前帧，前进一帧

 

3）Fps：帧频，每秒播放的帧数，电影（1秒24幅画） 电脑（12-14帧）

 

4）自动播放，循环：都选中

 

5）中间的：时间尺：动画的帧数表示

 

6）上面：行为栏（B）标记，添加行为语句

 

7）下面：动画栏：页面上制作的动画表示

 

8）播放指针（红色）：当前动画所在的画面

 

3，创建动画：

 

1）创建层：增加内容

 

2）把层拖到时间线面板的动画栏中

 

3）分别单击起始、终止帧：设置层属性

 

4）自动播放和循环：打勾

 

4，录制动画：

 

1）创建层：填内容，放到起始位置，并选定层

 

2）修改/时间轴/录制层路径

 

3）拖拽层，画络线（一次完成）

 

 

二，其它元素：

 

1，Flash对象的应用：

 

1）Flash动画：Flash制作完成应用于网页 插入面板：Flash按钮

 

2）Flash按钮与文本：DW制作的直接应用在页面上（.swf）

 

插入面板，媒体标签，Flash按钮和Flash文本

 

2，Javascript：

 

1）获取

 

①打开网页，另存到本机（存储类型为：全部）

 

②用DW打开，在设计视图，删除与效果无关内容

 

③代码视图删除与程序无关代码（除文件结构，JS外）

 

④逐对删除<script>直到找到效果代码

 

2）应用：

 

①把找到的代码复制到自己网页代码的对应部分（外挂式）还要复制相应JS文件到站点中

 

②分析代码：把引用的相关文件替换

 

.js

.swf
.gif
.jpg

 

 

 

 

DreamWeaver MX讲议

 

第一讲 网页设计基础篇

 

1. 简介：DreamWeaver是美国MicroMedia公司研发的网页制作软件。

2.网页（WebPage）：它也是一种文件，只不过它的特点不是运行在单独的计算机上，而上运行在inter网上，可以把它理解成一种显示信息的平台。

3.网站（WebSite）：将许多网页按着某种关系组合在一起，就是网站。（如果把网站比作是一本书，那网页就是书中的每一页，而第一页我们习惯上称它

 

为“主页（ HomePage）”。

4.网页的种类：静态和动态之分，静态网页制作很简单，而动态网页需要与数据库进行连接，并且需要你有一定的编程基础。DreamWeaver主要用于静态网页

 

的制作，当然它也可以用于动态网页的开发。

5.制作网页的工具：DreamWeaver ProntPage 记事本等

制作静态网页所需的语言：HTML（Hypertext Markup Language）超文本标记语言

制作动态网页所需的语言：HTML

ASP(Active Server Page) 动态服务器页面（Microsoft公司研发）

JSP（Java Server Page）JAVA服务器页面（Sun公司研发） asp

6.网页制作中的一些术语：

2.扩展名：*.htm *.html - 静态网页扩展名，可以直接用IE打开

*.asp *.aspx *.jsp *.asp ?动态网面扩展名，需运行在服务器端

3.客户端和服务器端：我们的网页分为服务器端网页（Server Page）（动态网页）和客户端网页（Client Page）（静态网页），我们在本机的IE上浏览的

 

网页其时是从服务端网页上编译过来的。

 

 

 

网页运行流程图

 

Server Page-中介编译（compile）-Client Page （就是我们从IE上看到的）

4.网址：网站在inter网上的地址，是唯一的，它和网站是一一对应的，也叫URL地址。

5.IP地址：是一种以数字形式表示的地址，在同一时刻它是唯一的。

6.网页设计基础篇──HTML语言

1） 什么是HTML？在什么地方找到它？有什么作用？

当你浏览网页的时候，可以右击?查看源文件，我们就是看到一个以记事方式打开的文件，在这个文件里显示的就是HTML语言代码。这样我们就可以设想，如

 

果我们手头没有任何高级的网页开发工具，只有一个文本编辑器（比如记事本），我们可以把网页的源文件（右击?查看源文件）写上去，保守为以HTML为扩

 

展名的文件就可以了。

2） HTML构成了网页的基础结构

<html> -网页开头
<head> -网页的头部分(用于描述网页)
<title> -网页的名称部分
名称
</title> -名称结束
</head>-头部分结束
<body>-网页的主体部分,从IE上可以直接看到的内容
Hello World!
</body>-主体结束
</html>-网页结束

 

 

 

第二讲DreamWeaver 初步认识篇

 

1. 网页设计

网站设计分为两个步聚:第一是网站本身的设计,第二是网站延伸设计(包括网站的主题)

2. 窗口的组成:

菜单栏

插入面板栏: 常用对象面板\布局对象面板\表单对象面板\文本对象面板\HTML对象面板\应用程序对象面板\Flash元素面板\收藏夹面板

浮动面板栏:属性面板(Ctrl+F3)

Css样式面板(shift+F11)

行为控制面板(shift+F3)

HTML样式面板

层面板(F2)

插入面板(ctrl+F2)

框架面板(shift+F2)

文件面板(F8)

资源面板(F11)

隐藏所有面板-F4

3. 文件的建立,打开与保存

4. 页面属性(ctrl+J)

5. 新建-模板

6. 颜色的表示方法(#000000~~~~~#FFFFFF一共有16777216种)

数值法:#ffffff -表示白色 #000000-表示黑色 #ff0000表示红色(适合计算机基础好)

字符法:white-表示白色 black-表示黑色 red-表示红色 (适合英语好)

选择法:通过颜色拾取器来选择(适合于所有人)

7. 关于网页的安全色

在网页上,不是每种颜色都可以显示出来,我们把可以显示出并且显示效果相同的颜色称为”安全色”

我们把含有00,33,66,99,CC,FF的颜色称之为安全色,在理论上安全色的数量应该是216种,但实现上只有212种,因为WINDOWS不能正常显示它们,它们分别是:

#0033ff #3300ff #00ff33 #33ff00

8. 网页中的图像

在网页上显示的图像有两种:位图和知量图

9. 网页中可以显示的图片种类

1)GIF(Graphic Interchange Format):最多支持256种颜色,是一种压缩格式,一个800K的Tiff文件在转换成GIF以后只有8K.

2)JPEG/JPG:在压缩图像大小的同时,可以保持图像的全彩作息,即24位真彩色.

3)PNG(可移植网络图形):Png一种无损压缩格式,它支持真彩色,是GIF与JPG的结合.(即有GIF的容量小,也同样具备JPG的全采信息,属于FireWorksr 文件的默认格式)

10. 图像的插入方法:插入?图像(ctrl+alt+I)`

11. 网页上的文字

1) 不要使用3种以上的字体,否则网页看上会很乱.

2) 不要使用太大的字.

3) 不要使用不停闪烁的文字.

4) 标题字比正文要大,颜色也要有所区别.

13网页颜色搭配方案

1) 非颜色:黑色,白色,灰色(万能色,它可以和任何一种颜色搭配)

2) 彩色搭配:绿色代表优雅,黄绿色有青春,旺盛的感觉,而蓝绿色则具有幽宁,阴林的效果

12. 对文字进行简单的修饰

 

 

 

第三讲 网页中的高级技术(一) 表格Table

 

 

表格:表格可以将网页中的对象按照某种关系进行有序的排列?所以它应该算是一种页面布局的工具

1. 表格的插入:插入?表格(ctrl+alt+T)

2. 表格的属性:选中表格Table,按Ctrl+F3即可查看

行高
列宽
间距:指的是单元格之间的距离
对齐
边框:表格的边框线宽

3. 插入行:修改-表格-插入行(Ctrl+M)

4. 插入列:修改-表格-插入列(ctrl+shift+a)

5. 删除行:修改-表格-删除行(ctrl+shift+M)

6. 删除列:修改-表格-删除列(ctrl+shift+-)

7. 合并单元格(ctrl+alt+M)

8. 拆分单元格(ctrl+alt+S)

9. HTML代码中的表格还可以进行更全面的设置:

<table border=1 bordercolor=#ffffff cellpadding=0 cellspacing=0 Frame=vsides rule=cols>
<tr>
行
<td>
1列
</td>
<td>
2列
</td>
</tr>
</table>

分析: border:边框

bordercolor:边框颜色

Cellpadding:单元格边框与内容的间隔

Cellspacing:各单元格之间的间隔

Frame:

=Vsides:只显示左右边框

=Hsides:只显示上下边框

=Void:不显示任何边框

=Box:显示所有边框

=Above:显示上面边框

=Below:显示下面边框

=LHS:显示左面边框

=RHS:显示右面边框

rule:

=Cols:只显示列与列之间的分隔线

=Rows:只显示行与行之间的分隔线

=None:不显示分隔线

=All:显示所有分隔线

10. 嵌套表格:在原有表格的基础上再插入一个新的表格

11. 导入制作好的表格(比如在EXCEL里制作好的数据表)

文件-导入-表格式数据

12. 导出表格到文本文件中

文件-导出-表格

 

 

 

第四讲 网页中的高级技术(二) 层和时间轴

 

 

一. 层(layer)可以使用页面的对象任意摆放

1.特点:编辑灵活,可以随意移动,任意改变显示状态,任意重叠

2.插入-层

3.层属性

层编号:就是层的ID号

左/上:层的起始位置

宽/高:层的大小

Z轴:层的重叠次序,编号越大越靠上

显示:表示层的可见性

溢出:当图像大小大于层的大小时,是否显示图像

4.改变层的大小

用鼠标直接拖动

按ctrl键拖动,每次只改变一个像素

在属性栏直接输入数据也可以

5.移动层

用鼠标直接拖动

按shift键,拖动可以以网格为单位进行移动

6.对齐层:选择多个层,用修改-对齐

二.时间轴:制作层动画的辅助工具

1. 显示时间轴

窗口-其它-时间轴

快捷键:shift+F9

2. 在时间轴上添加关键帧:F6 移除:shift+F6

2.将选择对象添加到时间轴上: ctrl+alt+shift+T

3. 用时间轴来录制路径

三:框架:将多个网页放在一个页面上的技术

1. 作用:可以清楚的进行页面的排列,使用页面的可读性增强

2. 框架的种类

3. 框架的使用

四:链接的插入

1.概念:链接就是当前页与某个页做一个关联,当点击当前页时就会自动跳转到指定的页去

2.属性:

1)Link : 指的就是链接的地址

2)Target-Blank : 链接产生在新的窗口

-Parent : 在框架窗口中打开

-Self : 是默认的选项,在当前窗口中打开

-Top : 在所有浏览器窗口中打开,并移除所有框架

技巧:如果把地址写成:mailto:zzl@163.com 它会链接到Outlook并进行写信

五:锚点(ctrl+alt+A)

又称为”原文件中的链接”,就是说可以从文件的一个位置快速回到另一个位置.

操作方法:1)选定一个放置锚点的位置,按ctrl+alt+A组合键增加锚点,启个名称2)选定一些文字,在链接栏输入#锚点名称,然后将锚点拖到开始放置锚点的地

 

方即可完成

说明:我们所选中的文字是网页中的提示文字,而开始加的锚点就是最后链接到的位置.

 

 

 

第五讲 网页中的高级技术(三) 表单与样式（CSS）

 

 

一．表单

1. 表单(form)：是后台管理员与前端用户进行交流的工具

2. 表单对象：表单对象是组成表单的基本元素，它可以包括文本域、复选框、单选按钮、列表框、跳转菜单、按钮等等。

3. 表单（form）

属性：方法：GET 传输的数据少（8192B以下），但速度快。POST 传输的数据多，但速度慢。[这里说的传输是指从本地上传到网络的服务器上]

4.文本域：

1）种类：单行文本框、多行文本框、密码框。

2）属性：字符宽度：指的是文本域的长度,默认为24

最大字符数：指的是最大输入的字符数量。

初始值：指的是默认状态下显示的文本

5.列表/菜单：此项包含两个含义，一个是列表框，而一个是菜单，列表框同时可以显示多个项，而菜单只能显示一项内容

 

二．脚本语言

1. 概念：在这个信息高速发展的社会，人们已经不能满足于报纸上的表态单向的信息，而是去internet上浏览更多动态交互式的信息，而我们所学的

 

DreamWeaver就是一个即有表态图像又有动态表单的网页制作软件。我们这一节的主角是“脚本”，它是一种编程语言，它可以使你的网页由静变动，由被动

 

转交互。

2. 种类：JavaScript 和 VbScript 这是两具脚本编程语言

3. 使用方法：它们的使用是有一定格式的注意看如下：

<html>
<head>
<title>
llei
</title>
〈script language=”javascript”>
alert(“Hello World ! 你好，这里是脚本课堂”)
</script>
</head>
<body>
这是一个脚本实例</body>
</html>

 

 

4.表单与脚本的综合运用：实例?身份识别系统

<html>
<head>
<title>
身份识别
</title>
<script language=”javascript”>
function legal(user,password){
if(user==”llei”&&password==”zzl”)
{
alert(“你是合法用法，可以进入?”);
document.location(“index.htm”);
}
else
{alert(“你是非法用户，Go Out！！！”);
document.location(“error.htm”);
}
}
</script>
</head>
<body>
<center>
<h1>
身份识别系统
</h1>
</center>
<form>
用户:
<input type=”text” name=”user”>
<br>
密码:
<input type=”password” name=”password”>
<br>
<input type=”button” value=”递交” name=”button”
onclick=legal(this.form.user.value,this.form.password.value)>
</form>
</body>
</html>

三.CSS样式[shift+F11]

1. 概念:样式就是格式的集合,它可以使选中的字符在最短的时间内进行格式的转换,DreamWeaver内置了CSS样式表.

2. 种类:适用于本文件中的Css样式和适用于所有文件的Css样式(其时就是把Css样式写成了一个文件,当想使用它时,去调用这个文件就可以了)

3. Css样的类型:

创建自定义样式?自己定义的

重定义html标签?可以在原有html标签上进行修改

使用Css选择器?Css内置的样式,具体如下:

a:link-普通的链接文字

a:visited-访问过的链接文字

a:hover-当鼠标移动到链接文字上面时

a:active-当鼠标按下时

4. Css在Html中的表示形式

<head>
<style type=”text/css”>
.body{
color:#ff0000;
background-color:#000000;
font-family:黑体;
font-size:20Pt;}
</style>
</head>

 

 

 

第六讲 网站的开发

 

前面我们学了很多关于网页的知识,从Flash的动画制作,Fireworks网页图像处理到DreamWeaver的网页前台制作,可以说我们都在为今天要讲网站作准备,其时

 

网站也不难

理解,就是把若干个网页结合在一起组成的.

一.行为(behavor)[shift+F3]

概念:它就相当于一个外挂,可以使用你的网页更加多彩

以下是几个经常使用的行为:

1) 播放声音:可以为网页加个背景音乐

2) 改变属性:可以改变选定对像的属性[比如颜色,背景等等]

3) 弹出信息:可以使你的网页弹出一个对话框

4) 打开浏览窗口:可以使你的网页在打开时自动弹出一个广告窗口

5) 交换图像:可以使用两个图像互相切换

6) 设置文本:可以添加一种文字效果

7) 转到URL:可以在打开一个网页后自动跳转到另一个网页上去

8) 弹出菜单：可以制作一个下拉菜单

9) 添加到收藏夹：<A href="javascript:window.external.AddFavorite(location.href,document.title+'收藏为张占岭');">加入收藏</A>

二.制作网站

1.定义站点: -站点-管理站点-新建

2.管理站点:-站点-管理站点-编辑

3.站点的上传:-窗口?文件(F8)-上传

4.与数据库的连接:

我们的网页要想实现动态的更新,必须要连接数据库,这里的数据库我们通常用Microsoft Access软件来制作,然后再用控制面板中的ODBC数据源工具,为数据

 

库制作一个数据源,最后再回到DreamWeaver中去连接.

二.总结:现在我们的网页制作的所有课程都讲全了,同学们自己制作一个个人主页应该没有问题,可以试试看

luck_bravely@yahoo.com

三．实例：一个留言本