Dreamweaver V8.0教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
H1{ font-size:16px; font-family:黑体; font-weight:bold; }
CSS
CSS选择器 CSS选择器 – 标签选择器(HTML标记定义样式) p、H1、img等 标签选择器(HTML标记定义样式) p、H1、img等 – 类选择器(可以应用于所有标签) .RedColor 类选择器(可以应用于所有标签) – ID选择器(每个网页元素都具有ID属性) #box ID选择器(每个网页元素都具有ID属性) – 伪类选择器(给链接加样式) a:link a:hover a:visited a:active 伪类选择器(给链接加样式) 引用外部样式表文件
表格标记<table> 表ຫໍສະໝຸດ Baidu标记<table>
<table width=780 align=“center” border=1 cellpadding=5 cellspacing=0> <tr> <td>ID</td><td>姓名</td><td>年龄</td> </tr> <tr> <td>10012</td><td>张颖</td><td>30</td> </tr> <tr> <td>10015</td><td>刘良军</td><td>28</td> </tr> </table>
HTML
HTML 简介
HTML – 超文本标注语言（Hypertext Markup Language,HTML）是创建网页时 超文本标注语言（Hypertext Language,HTML）是创建网页时 使用的语言。网页是由文本和标记（Tag）组成。就其本质而言，是 使用的语言。网页是由文本和标记（Tag）组成。就其本质而言，是 一个基于文本的编码标准，用于指示浏览器以什么方式显示信息。组 成HTML的“命令”就是标记。在HTML中，标记用符号“<”和“>”括 HTML的 命令”就是标记。在HTML中，标记用符号“ 起来。 编辑HTML的环境 编辑HTML的环境 – 记事本\写字板 记事本\ – Dreamweaver\Frontpage Dreamweaver\
层标记<div> 层标记<div>
层是一个定位标记。 <style type=“text/css”> type=“text/css” #box{ width:400px; height:300; border:1px solid #990000; padding:5px; margin:0px; BackgroundBackground-color:#f5f5f5; } </style> <body> <div id=“box”>内容</div> id=“box” 内容</div> </body>
表单标记<form> 表单标记<form>
<form name=“form1” method=“post” action=“register.php”> 姓名:<input type=“text” name=“username”><br> 密码:<input type=“password” name=“password”><br> 性别:<input type=“radio” name=“sex” checked>男<br> 年龄:<input type=“text” name=“age”><br> 籍贯:<input type=“text” name=“city”><br> <input type=“button” value=“提交”> <input type=“reset” name=“reset”> </form>
月福主页结构图
CSS
CSS（ CSS（Cascading Style Sheets，层叠样式表的简称）是一系列格式设置规 Sheets，层叠样式表的简称）是一系列格式设置规 则，它们控制Web页面内容的外观 则，它们控制Web页面内容的外观 CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素 的术语（如 P、H1、类名或 ID），声明用于定义元素样式。在下面的示 H1、类名或 ID），声明用于定义元素样式。在下面的示 例中，H1 例中，H1 是选择器，介于括号 ({ }) 之间的所有内容都是声明：
表格
主页的宽度 – 当显示器分辨率为800*600时，主页宽度不超过780px 当显示器分辨率为800*600时，主页宽度不超过780px – 当显示器分辨率为1024*768时，主页宽度不超过1003px 当显示器分辨率为1024*768时，主页宽度不超过1003px 表格布局要点 – 表格边框一般为0 表格边框一般为0 – 填充(cellpadding)：是单元格边线与内容间的距离 填充(cellpadding)：是单元格边线与内容间的距离 – 间距(cellspacing)：是单元格之间的距离 间距(cellspacing)：是单元格之间的距离 – 一般来说，在外部使用绝对计量方法(单位为像素)，里边的表格采用 一般来说，在外部使用绝对计量方法(单位为像素) 相对计量的方法(单位为%) 相对计量的方法(单位为%) – 从外向内来布局表格 – 规划主页框架(可以使用布局视图) 规划主页框架(可以使用布局视图)
常用HTML标记 常用HTML标记
<font></font> <b></b> <i></i> <u></u> <sup></sup> <sub></sub> <hx></hx> <p></p> <pre></pre> <ul></ul> <ol></ol> <meta> 字体 加粗 斜体 下划线 上标 下标 标题字体 段落 预排版 项目符号 编号列表 <img> <br> <hr> <embed></embed> <a></a> <table></table> <tr></tr> <td></td> <form></form> <frameset></frameset> <div></div> <marquee></marquee> 图片标记 换行 水平线 媒体标记 超级链接 表格标记 表格行 单元格 表单标记 框架标记 层标记 滚动字幕
站点建立
“站点”——新建/管理站点 站点”——新建/
站点结构
站点设置
注意事项 – 所有文件夹名称不能包含中文或特殊符号。 – 首页文件名称 index.html index.asp index.php – 网页上的外部文件，都只是写入了一个链接的路径，并没有把外部文 件真正加入到该文件中。因此，一个网页文件大小一般不超过50kb。 件真正加入到该文件中。因此，一个网页文件大小一般不超过50kb。
CSS
样式分类 – 内嵌样式 ：写在<style type=“text/css”></style>中的样式 ：写在<style type=“text/css”></style>中的样式 – 行内样式：<p style=“background-color:#990000”> 行内样式：<p style=“background-color:#990000” – 外部样式(引入外部样式表文件) 外部样式(引入外部样式表文件)
超级链接标记<a> 超级链接标记<a>
<a href=“index.html”>网站首页</a> href=“index.html” 网站首页</a> <a href=“include/login.php”>用户后台登录</a> href=“include/login.php” 用户后台登录</a> <a href=“http://www.baidu.com”>百度搜索</a> href=“http://www.baidu.com” 百度搜索</a> <a href=“beijing_2000@126.com”>联系我们</a> href=“beijing_2000@126.com” 联系我们</a> <a href=“javascript:alert(‘Hello World!’)”>弹出一个警告对话框</a> href=“javascript:alert(‘ World!’ 弹出一个警告对话框</a> <a href=“#”>这是一个空链接</a> href=“ 这是一个空链接</a>
Dreamweaver 8.0
Dreamweaver 简介
Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“ Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“所见即所 得”的可视化网站开发工具。 软件特点 – 可视化界面：学习简单、操作快捷。 – 跨浏览器支持：DreamWeaver支持多种浏览器。 跨浏览器支持：DreamWeaver支持多种浏览器。 – 支持动态网页技术：可以简便地生成CSS、层、JavaScript等动态页面。 支持动态网页技术：可以简便地生成CSS、层、JavaScript等动态页面。 – 强大的网站管理功能：库、模板和标签等功能适合大型网站的合作开发。 – 丰富的媒体支持：可以方便加入Java、Flash、Shockwave、ActiveX等。 丰富的媒体支持：可以方便加入Java、Flash、Shockwave、ActiveX等。 – 超强的扩展能力：Dreamweaver支持增加第三方插件，任何人都可以扩展 超强的扩展能力：Dreamweaver支持增加第三方插件，任何人都可以扩展 Dreamweaver的功能。 Dreamweaver的功能。 – 协同工作能力：Dreamweaver和Macromedia公司的其他软件，如Fireworks、 协同工作能力：Dreamweaver和Macromedia公司的其他软件，如Fireworks、 Flash等密切配合，提供了Web制作界最完善的一套整体解决方案。 Flash等密切配合，提供了Web制作界最完善的一套整体解决方案。
HTML文件结构 HTML文件结构
HTML文件结构 HTML文件结构
<html> <head> <meta http-equiv=“content-type” content=“text/html;charset=gb2312”> http-equiv=“content-type” content=“text/html;charset=gb2312” <title>网页标题</title> <title>网页标题</title> <link href=“my.css” rel=“stylesheet” type=“text/css”> href=“my.css” rel=“stylesheet” type=“text/css” <script language=“javascript” src=“my.js” type=“text/javascript”> language=“javascript” src=“my.js” type=“text/javascript” </head> <body> 网页内容 </body> </html>
<head> <link href=“my.css” rel=“stylesheet” type=“text/css”> </head>
将以下代码输入my.css文件中，在index.html中进行包含 <style type="text/css"> body{ margin:0px; padding:0px; background-color:#333333; } .RedColor{ font-weight:bold; color:#FF0000; } #box{ width:780px; text-align:center; } a:link,a:visited{ text-decoration:none; color:#000000; } </style>
表单
表单的概念： 表单的概念：是应用于用户与网站之间进行信息交互的一种特殊表格。 表单的作用 – 是从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、 是从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、 列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮 提交这些信息。 表单的工作过程如下： 表单的工作过程如下： – 访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。 – 这些信息通过Internet传送到服务器上。 这些信息通过Internet传送到服务器上。 – 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并 要求纠正错误。 – 当数据完整无误后，服务器反馈一个输入完成的信息。
CSS
CSS选择器 CSS选择器 – 标签选择器(HTML标记定义样式) p、H1、img等 标签选择器(HTML标记定义样式) p、H1、img等 – 类选择器(可以应用于所有标签) .RedColor 类选择器(可以应用于所有标签) – ID选择器(每个网页元素都具有ID属性) #box ID选择器(每个网页元素都具有ID属性) – 伪类选择器(给链接加样式) a:link a:hover a:visited a:active 伪类选择器(给链接加样式) 引用外部样式表文件
表格标记<table> 表ຫໍສະໝຸດ Baidu标记<table>
<table width=780 align=“center” border=1 cellpadding=5 cellspacing=0> <tr> <td>ID</td><td>姓名</td><td>年龄</td> </tr> <tr> <td>10012</td><td>张颖</td><td>30</td> </tr> <tr> <td>10015</td><td>刘良军</td><td>28</td> </tr> </table>
HTML
HTML 简介
HTML – 超文本标注语言（Hypertext Markup Language,HTML）是创建网页时 超文本标注语言（Hypertext Language,HTML）是创建网页时 使用的语言。网页是由文本和标记（Tag）组成。就其本质而言，是 使用的语言。网页是由文本和标记（Tag）组成。就其本质而言，是 一个基于文本的编码标准，用于指示浏览器以什么方式显示信息。组 成HTML的“命令”就是标记。在HTML中，标记用符号“<”和“>”括 HTML的 命令”就是标记。在HTML中，标记用符号“ 起来。 编辑HTML的环境 编辑HTML的环境 – 记事本\写字板 记事本\ – Dreamweaver\Frontpage Dreamweaver\
层标记<div> 层标记<div>
层是一个定位标记。 <style type=“text/css”> type=“text/css” #box{ width:400px; height:300; border:1px solid #990000; padding:5px; margin:0px; BackgroundBackground-color:#f5f5f5; } </style> <body> <div id=“box”>内容</div> id=“box” 内容</div> </body>
表单标记<form> 表单标记<form>
<form name=“form1” method=“post” action=“register.php”> 姓名:<input type=“text” name=“username”><br> 密码:<input type=“password” name=“password”><br> 性别:<input type=“radio” name=“sex” checked>男<br> 年龄:<input type=“text” name=“age”><br> 籍贯:<input type=“text” name=“city”><br> <input type=“button” value=“提交”> <input type=“reset” name=“reset”> </form>
月福主页结构图
CSS
CSS（ CSS（Cascading Style Sheets，层叠样式表的简称）是一系列格式设置规 Sheets，层叠样式表的简称）是一系列格式设置规 则，它们控制Web页面内容的外观 则，它们控制Web页面内容的外观 CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素 的术语（如 P、H1、类名或 ID），声明用于定义元素样式。在下面的示 H1、类名或 ID），声明用于定义元素样式。在下面的示 例中，H1 例中，H1 是选择器，介于括号 ({ }) 之间的所有内容都是声明：
表格
主页的宽度 – 当显示器分辨率为800*600时，主页宽度不超过780px 当显示器分辨率为800*600时，主页宽度不超过780px – 当显示器分辨率为1024*768时，主页宽度不超过1003px 当显示器分辨率为1024*768时，主页宽度不超过1003px 表格布局要点 – 表格边框一般为0 表格边框一般为0 – 填充(cellpadding)：是单元格边线与内容间的距离 填充(cellpadding)：是单元格边线与内容间的距离 – 间距(cellspacing)：是单元格之间的距离 间距(cellspacing)：是单元格之间的距离 – 一般来说，在外部使用绝对计量方法(单位为像素)，里边的表格采用 一般来说，在外部使用绝对计量方法(单位为像素) 相对计量的方法(单位为%) 相对计量的方法(单位为%) – 从外向内来布局表格 – 规划主页框架(可以使用布局视图) 规划主页框架(可以使用布局视图)
常用HTML标记 常用HTML标记
<font></font> <b></b> <i></i> <u></u> <sup></sup> <sub></sub> <hx></hx> <p></p> <pre></pre> <ul></ul> <ol></ol> <meta> 字体 加粗 斜体 下划线 上标 下标 标题字体 段落 预排版 项目符号 编号列表 <img> <br> <hr> <embed></embed> <a></a> <table></table> <tr></tr> <td></td> <form></form> <frameset></frameset> <div></div> <marquee></marquee> 图片标记 换行 水平线 媒体标记 超级链接 表格标记 表格行 单元格 表单标记 框架标记 层标记 滚动字幕
站点建立
“站点”——新建/管理站点 站点”——新建/
站点结构
站点设置
注意事项 – 所有文件夹名称不能包含中文或特殊符号。 – 首页文件名称 index.html index.asp index.php – 网页上的外部文件，都只是写入了一个链接的路径，并没有把外部文 件真正加入到该文件中。因此，一个网页文件大小一般不超过50kb。 件真正加入到该文件中。因此，一个网页文件大小一般不超过50kb。
CSS
样式分类 – 内嵌样式 ：写在<style type=“text/css”></style>中的样式 ：写在<style type=“text/css”></style>中的样式 – 行内样式：<p style=“background-color:#990000”> 行内样式：<p style=“background-color:#990000” – 外部样式(引入外部样式表文件) 外部样式(引入外部样式表文件)
超级链接标记<a> 超级链接标记<a>
<a href=“index.html”>网站首页</a> href=“index.html” 网站首页</a> <a href=“include/login.php”>用户后台登录</a> href=“include/login.php” 用户后台登录</a> <a href=“http://www.baidu.com”>百度搜索</a> href=“http://www.baidu.com” 百度搜索</a> <a href=“beijing_2000@126.com”>联系我们</a> href=“beijing_2000@126.com” 联系我们</a> <a href=“javascript:alert(‘Hello World!’)”>弹出一个警告对话框</a> href=“javascript:alert(‘ World!’ 弹出一个警告对话框</a> <a href=“#”>这是一个空链接</a> href=“ 这是一个空链接</a>
Dreamweaver 8.0
Dreamweaver 简介
Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“ Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“所见即所 得”的可视化网站开发工具。 软件特点 – 可视化界面：学习简单、操作快捷。 – 跨浏览器支持：DreamWeaver支持多种浏览器。 跨浏览器支持：DreamWeaver支持多种浏览器。 – 支持动态网页技术：可以简便地生成CSS、层、JavaScript等动态页面。 支持动态网页技术：可以简便地生成CSS、层、JavaScript等动态页面。 – 强大的网站管理功能：库、模板和标签等功能适合大型网站的合作开发。 – 丰富的媒体支持：可以方便加入Java、Flash、Shockwave、ActiveX等。 丰富的媒体支持：可以方便加入Java、Flash、Shockwave、ActiveX等。 – 超强的扩展能力：Dreamweaver支持增加第三方插件，任何人都可以扩展 超强的扩展能力：Dreamweaver支持增加第三方插件，任何人都可以扩展 Dreamweaver的功能。 Dreamweaver的功能。 – 协同工作能力：Dreamweaver和Macromedia公司的其他软件，如Fireworks、 协同工作能力：Dreamweaver和Macromedia公司的其他软件，如Fireworks、 Flash等密切配合，提供了Web制作界最完善的一套整体解决方案。 Flash等密切配合，提供了Web制作界最完善的一套整体解决方案。
HTML文件结构 HTML文件结构
HTML文件结构 HTML文件结构
<html> <head> <meta http-equiv=“content-type” content=“text/html;charset=gb2312”> http-equiv=“content-type” content=“text/html;charset=gb2312” <title>网页标题</title> <title>网页标题</title> <link href=“my.css” rel=“stylesheet” type=“text/css”> href=“my.css” rel=“stylesheet” type=“text/css” <script language=“javascript” src=“my.js” type=“text/javascript”> language=“javascript” src=“my.js” type=“text/javascript” </head> <body> 网页内容 </body> </html>
<head> <link href=“my.css” rel=“stylesheet” type=“text/css”> </head>
将以下代码输入my.css文件中，在index.html中进行包含 <style type="text/css"> body{ margin:0px; padding:0px; background-color:#333333; } .RedColor{ font-weight:bold; color:#FF0000; } #box{ width:780px; text-align:center; } a:link,a:visited{ text-decoration:none; color:#000000; } </style>
表单
表单的概念： 表单的概念：是应用于用户与网站之间进行信息交互的一种特殊表格。 表单的作用 – 是从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、 是从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、 列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮 提交这些信息。 表单的工作过程如下： 表单的工作过程如下： – 访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。 – 这些信息通过Internet传送到服务器上。 这些信息通过Internet传送到服务器上。 – 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并 要求纠正错误。 – 当数据完整无误后，服务器反馈一个输入完成的信息。