第2章 所见即所得的网页制作工具-DW
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
要点回顾
开始创建本地站点……
新建站点的方法：
1、通过【站点】【新建站点】菜单命令
2、【文件浮动面板】【管理站点】 【新建】
站点的规划
• Dreamweaver的站点类型 本地站点、远程站点、测试站点
• 规划站点结构 规划站点结构是设计站点的必要前提，其操作是将不同的文件分类存 放在文件夹中以便于设计者管理。合理地组织站点结构，可提高工作 效率，加快对站点的ቤተ መጻሕፍቲ ባይዱ计。 • 绘制网站结构草图 站点规划好之后，就可以根据规划绘制出一个网站结构草图，以便于 有一个清晰的思路。
在站点地图中管理页面文件 1、选择页面文件 2、打开页面文件 3、新建页面文件 4、更改页面标题
选择页面文件 1、在站点地图中的某个页面文件上单击 鼠标即可选择该文件。 2、按住【Shift】键的同时单击需要选取 的文件，可选择多个连续的页面文件。 3、按住【Ctrl】键的同时单击需要选取 的文件，可选择多个不连续的页面文件。
第一章 网页艺术设计基础知识
Dreamweaver简介
Dreamweaver 介绍
Dreamweaver是美国MACROMEDIA公司开发的集网 页制作和管理网站于一身的所见即所得网页编辑器， 它是第一套针对专业网页设计师特别发展的视觉化网 页开发工具，利用它可以轻而易举地制作出跨越平台 限制和跨越浏览器限制的充满动感的网页。
• •
课堂练习一： 练习在Dreamweaver中新建一个只包含文 本的简单网页，并使用IE浏览器预览其效果。 其中主要练习Dreamweaver的启动、新建文档、 保存网页、预览网页和退出Dreamweaver的操 作。
基本步骤：
1、新建HTML
2、网页标题命名 3、输入文字 4、保存文件 Ctrl+S （命名时不要使用中文字符）
格 式 排 版
创建一个新的段落 <p> 将段落按左、中、右对齐 <p align=?> 插入一个回车换行符 <br> 从两边缩进文本 <blockquote> </blockquote> 创建一个定义列表 <dl></dl> 放在每个定义术语词之前 <dt> 放在每个定义之前 <dd> 创建一个标有数字的列表 <ol></ol> 放在每个数字列表项之前，并加上一个数字 <li> 创建一个标有圆点的列表 <ul></ul> 放在每个圆点列表项之前，并加上一个圆点 <li> 一个用来排版大块HTML段落的标签，也用于格式化表 <div align=?>
更改页面标题
在站点地图中可对页面标题进行更改，以方便绝对 站点的管理。
页面设置
当站点建立好之后，就可以进行具体的网页编辑操作 了，但在编辑网页之前，还需要对页面进行一些简单 的属性设置以方便以后的工作。
课堂练习二：创建本地站点并搭建站点
创建一个名为【国画欣赏】的站点，将其中的本 地站点保存在“D:\guohua”文件夹下，远程站点 保存在“E:\guohua”文件夹下。然后为【国画欣 赏】网站建立一个存放图片的文件夹“pic”，并 新建名为“index.html”、“ghzs.html”、 “jrmh.html”、“ghds.html”、“flxs.html”、 “ghlt.html”和“lxwm.html”的网页文件，最后 设置“index.html”的页面属性。
Dreamweaver的版本
Dreamweaver3.0
Dreamweaver4.0
DreamweaverMX
DreamweaverMX2004
Dreamweaver 8.0
Adobe DreamweaverCS3
(MacroMedia被Adobe收购后推出的第一个版本)
使用 Dreamweaver 建立第一个网页页面
退出Dreamweaver
• • 单击Dreamweaver窗口右上角的“关闭”按钮。 单击Dreamweaver窗口左上角的图标，在弹出的下拉菜单 中选择“关闭”命令。 在Dreamweaver窗口中选择【文件】【退出】菜单命令。 在当前窗口为Dreamweaver工作界面时，按【Alt+F4】键 退出Dreamweaver。
链 接 创建一个超链接 <a href="URL"></a> 创建一个自动发送电子邮件的链接 <a href="mailto:EMAIL">.... 创建一个位于文档内部的靶位 <a name="NAME"></a> 创建一个指向位于文档内部靶位的链接 <a href="#NAME"></a>
</a>
Dreamweaver的初始页面
新建空白HTML网页
选择【文件】
【新建】菜单命令，打开 “新建文档”对话框，在“分 类”栏中选择“基本页”选项， 在“基本页”栏中选择“HTML” 选项，单击“创建”按钮。
主编辑区的拆分： 1、代码 2、拆分 3、设计
保存网页文档
选择【文件】【保存】菜单 命令，打开的“另存为”对话 框，在“保存在”下拉列表框 中选择文件的保存路径，在 “文件名”文本框中输入保存 的文件名，单击“保存”按钮。
文 本 标 签 创建预格式化文本 <pre></pre> 创建最大的标题 <h1></h1> 创建最小的标题 <h6></h6> 创建黑体字 <b></b> 创建斜体字 <i></i> 创建打字机风格的字体 <tt></tt> 创建一个引用，通常是斜体 <cite></cite> 加重一个单词（通常是斜体加黑体） <em></em> 加重一个单词（通常是斜体加黑体） <strong></strong> 设置字体大小，从1到7 <font size=?></font> 设置字体的颜色，使用名字或十六进制值 <font color=?></font>
9、 用URL传值时直接写&是不可以的，可用&替换
HTML基本标签参考
基 本 标 签 创建一个HTML文档 <html></html> 设置文档标题以及其他不在WEB网页上显示的信息 <head></head> 设置文档的可见部分 <body></body> 标 题 标 签 将文档的题目放在标题栏中 <title></title>
HTML的编辑器大体可以分为三种：
1、基本编辑软件，使用WINDOWS自带的记事本或写字版都 可以编写，当然，如果你用WPS来编写，也可以。不过存盘 是请使用.htm或.html作为扩展名，这样浏览器就可以解释 执行了。
2、半所见即所得软件，这种软件能大大提高开发效率，它 可以使你在很短的时间内做出HOMEPAGE，且可以学习HTML， 这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。 3、所见即所得软件，使用最广泛的编辑器，完全可以一点 不懂HTML的知识就可以做出网页，这类软件主要有 FRONTPAGE98，DREAMWEAVER。
目标：学会制作简单页面
Dreamweaver的基本操作
• • • • • 启动Dreamweaver 新建空白HTML网页 保存网页文档 预览网页效果 退出Dreamweaver
启动 Dreamweaver
选择【开始】 【所有程序】 【Macromedia】 【Macromedia Dreamweaver】菜单命令
5、 tr、td必须定义在table之间；
6、 button按钮必须定义在form之间，否则netscape不支持； <form action=”……” method=”post”> <input type=”button” name=”but” value=”back”> </form> 7、 在javascript中的字符串中出现的“/”前要用转义符“\”： <script type=”text/javascript”> <!— function check(str) { var str=”\/r\/add.cgi”; …… } --> </script> 8、 onclick 属性必须和 onkeypress 成对写( onmousedown + onkeydown、onmouseup + onkeyup)
删除本地站点 如果不需要某个站点时，可以将其从站点列表 中删除。
管理站点地图 1、定义主页 2、查看站点地图 3、在站点地图中管理页面文件
定义主页 在使用站点地图查看站点 时必须保证这个站点已定 义了一个主页，因为主页 是一个站点的根节点，必 须有根节点才有各个支节 点，也就是各个子页。
查看站点地图 查看站点地图是在Dreamweaver的【文件】面板 的【视图】下拉列表框中选择“地图视图”选项。
HTML中元素的书写规则：
1、 元素属性值必须包含在双引号中； <font color=”#000000” size=”3” face=”Arial”> 2、 form 中必须加action属性，并且不能为空。 <form action=”/r/add.cgi” method=”post”> 如果不需要使用action属性，也必须定义： <form action=”no” > 3、 img的alt属性不可以缺少； <img src="/q/img/btn_style.gif" border="0" alt="Select”> 4、 head与</head>之间必须有title； <head> …… <title>your title </title> …… </head>
HTML代码的基本结构 HTML的结构包括头部（Head）、主体（Body） 两大部分，其中头部描述浏览器所需的信息， 而主体则包含所要说明的具体内容。 <html> <head> </head> 头部 “/ ”表示关闭标签 主体
<body>
</body> </html>
HTML文档制作主要特点如下： 1、简易性，HTML版本升级采用超集方式，从而更加 灵活方便。 2、可扩展性，HTML语言的广泛应用带来了加强功能， 增加标识符等要求，HTML采取子类元素的方式，为 系统扩展带来保证。 3、平台无关性。虽然PC机大行其道，但使用MAC等 其他机器的大有人在，HTML可以使用在广泛的平台 上，这也是WWW盛行的另一个原因。
“国画欣赏”网站首页
国画知识
今日名画
国画大师
分类欣赏
国画论坛 联系我们
三、HTML代码详解
HTML（HyperText Mark-up Language）即超 文本标记语言或超文本链接标示语言，是目前网 络上应用最为广泛的语言，也是构成网页文档的 主要语言。HTML文本是由HTML命令组成的描述性 文本，HTML命令可以说明文字、图形、动画、声 音、表格、链接等。
“零零影视”网站首页
动作片
喜剧片
爱情片
今日推荐
艺术片
恐怖片
影星专辑
外 语 影 片
国 语 影 片
外 语 影 片
国 语 影 片
外 语 影 片
国 语 影 片
外 语 影 片
国 语 影 片
外 语 影 片
国 语 影 片
规划站点结构的原则： 1、用文件夹保存文档
2、使用合理的文件名称、首页名称
3、将本地和远程站点设为同样的结构
5、浏览页面 F12 或
小 结： 1、Dreamweaver的两个功能 纯页面制作 站点管理 2、网站的策划者、设计者、制作者 在网站建设中的角色和核心工作
真正做网站的时候不是从做页面开始的……
从创建站点开始
目标：学会搭建并定义本地站点
二、站点的基本操作
1、站点的规划 2、创建本地站点 3、创建远程站点 4、管理本地站点 5、管理站点地图 6、页面设置
新建文件夹、新建网页文件
建立好站点后就可以在站点中新建文件夹，该文件夹主要 用来存储这个网站中用到的网页元素，如图片、音乐等。
创建远程站点
创建远程站点的方法 与创建本地站点的方 法类似，只是无需在 站点文件夹下再新建 文件夹或网页文件。
管理和编辑本地站点
1、选择本地站点 2、删除站点中的文件和文件夹 3、更改站点信息
打开页面文件 1、在页面文件上双击鼠标即可打开该文件。 2、在选择页面之后，选择【文件】【打开】 菜单命令打开页面。 3、选择页面后单击鼠标右键，在弹出的快捷 菜单中选择【打开】命令可打开页面。
新建页面文件
在建立好站点地图之后，如果还需要在其中添加新的 网页文件，可以在站点地图中新建一个页面文件。
文档整体属性
设置背景颜色，使用名字或十六进制值 <body bgcolor=?> 设置文本文字颜色，使用名字或十六进制值 <body text=?> 设置链接颜色，使用名字或十六进制值 <body link=?> 设置已使用的链接的颜色，使用名字或十六进制值 <body vlink=?> 设置正在被击中的链接的颜色，使用名字或十六进制值 <body alink=?>