DW第一讲 基础知识
合集下载
DW入门培训教程1
如何使用“505.html修改帖子”后台Bbs站长后台→帖子管理→505.html修改帖子在帖子url里输入帖子链接点击确定，在“帖子内容”中出现的即为帖子代码，将代码全选复制黏贴入dreamweaver 中进行编辑。
编辑完成后复制代码再覆盖黏贴入原先的“帖子内容”中，点击提交即可！第一章Dreamweaver 设计篇面板总体介绍：A.“插入”栏B. 文档工具栏C. “文档”窗口D. 面板组E. 标签选择器F. “属性”检查G. “文件”面板文档工具栏具体详解：ABC是切换显示模式。
D.显示文档标题，也就是代码中的title。
E. 文件管理F.在浏览器中预览/调试G. 刷新设计视图H. 视图选项I. 可视化助理J. 验证标记K. 检查浏览器兼容性1.建立站点到这里，站点建立完毕，以后你也可以随时编辑修改这个站点的相关属性。
在“文件”面板中右击已经建立的站点，然后新建文件夹，分别建立index和image文件夹。
然后就可以把在制作页面中用到的图，banner,背景图等等先扔在image文件下里。
方便在需要插入图片等元素时引用。
2.编辑文本输入一段文字，并选中，然后在下方属性栏里进行编辑。
（空格需要按“ctrl+shift+空格”）格式中“标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。
对应的字体由大到小，同时文字全部加粗。
如果需要自定义文字大小，则在大小一项中设置，格式为无。
另外，在属性面板中可以定义文字的字体、颜色、加粗、加斜、对齐方式等内容。
如需加链接，则在链接一栏加入网址，目标中_blank表示在新窗口中打开（最常用），_self表示“相同窗口”打开，_top表示整页窗口打开，_parent表示父窗口打开。
3.插入图像“插入工具栏”的开启/关闭：快捷键CTRL+F2 或者窗口栏目下“插入”点击插入工具栏中的图像按钮，或者点击插入记录下的图像，弹出“选择图像源文件”对话框在帖子或者专题中，切勿用本地图片地址，否则无法在网上显示！！！可先将帖子上传至相册，或者测试论坛，然后复制图片地址，黏贴入URL栏中！！图片地址填写完毕后会弹出这样一个对话框，替换文本即图片的alt属性。
Dreamweaver第1课
1．Logo Logo是网站的标志，通过形象的logo可以让 浏览者记住网站的主体和品牌。
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
2．Banner
Banner是指网站中的横幅广告，它的尺寸标准有 许多，如468×60像素（全尺寸Banner）、 392×60像素（全尺寸导航条Banner）、234×60 像素（半尺寸Banner）、125×125像素（方形按 钮）、120×90像素（按钮类型1）、120×60像 素（按钮类型2）、88×31像素（小按钮类型） 及120×240像素（垂直Banner）等。其中 468×60像素和88×31像素的Banner用得最多， 468×60的Banner像素应大致在15KB左右，最好 不要超过22KB，而88×31像素的Banner最好在 5KB左右，不要超过7KB。
3
网页制作的 原则和技巧
攀枝花学院
工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
a
1.1 网页制作基础知识
1.1.1 认识网页
1.1.2 认识网站
1.1.3 网页的类型 1.1.4 网页制作中的专业术语 Contents 1.1.5 网页页面的基本组成元素
攀枝花学院 工业设计专业
网站设计-Dreamweaver Flash Access VBscript、
3．导航栏
导航栏的作用是引导浏览者进行网页浏览。根据导航栏放置 的位置可分为横排和竖排两种；根据表现形式，导航栏有图 像导航、文本导航和框架导航等。导航栏也可以是动态的， 如用脚本编写的导航栏或Flash导航栏。 导航栏的制作要点 可归纳为以下几点：
第1讲 初识Dreamweaver
首页 末页 向上 向下 返回 结束 调音
9、网页在Internet上的传输过程
Internet是一种基于C/S（客户机/服 务器）模式的覆盖全球的网络系统。 接入Internet的计算机有两种：一种 是随时准备向客户提供服务的服务 器；另一种是连接到某一服务器上 获取服务的客户机。
首页 末页 向上 向下 返回 结束 调音
首页 末页 Байду номын сангаас上 向下 返回 结束 调音
2、网站设计的一般步骤
规划网站 收集整理资源 配置站点 创建页面 测试站点 发布站点 维护、更新站点
首页 末页 向上 向下 返回 结束 调音
3、网页制作的常用工具
网页设计软件 Dreamweaver是目前使用最多的网页设计 软件。 图像处理软件 制作网页图像的软件种类繁多，大多数网页 设计人员选择的是Fireworks或Photoshop。 动画制作软件
3、万维网 (World Wide Web )
是指在因特网上以超文本为基础形 成的信息网。它为用户提供了一个可以 轻松驾驭的图形化界面，用户通过它可 以查阅Internet上的信息资源。www是 通过互联网获取信息的一种应用，我们 所浏览的网站就是WWW的具体表现形 式，但其本身并不就是互联网，只是互 联网的组成部分之一。互联网常用的服 务包括：www、Email、FTP、IM等。
首页 末页 向上 向下 返回 结束 调音
五、网页设计的相关知识
设计网页的原则 网站设计的一般步骤 网页制作的常用工具
首页 末页 向上 向下 返回 结束 调音
1、设计网站的原则
整体规划 鲜明的主题 善用图像 醒目的导航 及时更新 易记的网站名称 通用网页 动画适量
Dreamweaver—基础知识一
第一部分：基础知识一、Dreamweaver 界面介绍二、文本的基本设置三、文本插入栏的使用四、建立超链接1．为文本添加链接和设置链接2．制作电子邮件链接3．下载链接五、插入图像⑴插入图片的两种方法（从设计视图和资源面板）、编辑图像⑵插入GIF透明图片⑶背景图像的设置⑷插入图像占位符⑸制作光标经过图像⑹插入图片（使用热区）⑺制作导航条六、插入Flash对象第二部分：网页布局表格⑴插入表格⑵表格标记<table></table> <tr></tr> <td></td>⑶选择表格①选择整个表格●把光标移到表格的左上角、上边框或下边框之外的附近区域●在表格中单击任意一个位置，然后单击该表格对应的<table>标记。
●在表格中单击任意一个位置，按下两次“Ctrl+A”②选择表格的行③选择表格的列④选择单元格⑷设置表格属性及格式化表格通过属性检查器来选择⑸编辑表格①在表格内移动②剪切、复制和粘贴表格③合并和拆分单元格执行菜单：命令 排序表格举例：制作一个文学页面一、使用表格布局页面1．插入1行1列的表格，如下图所示：2．设置表格边框颜色。
在标签选择器中单击<table>标签，然后在属性面板中设置边框颜色设置为“#999900”，并在“垂直”下拉列表中选择“顶端”。
如下图所示：3．插入4行1列的嵌套表格二。
将光标定位在表格一中，然后执行插入表格命令，如下图所示：在“属性”面板中将第二行和第四行的“背景颜色”设置为“#999900”。
4．插入1行2列嵌套表格三。
将表格二适当拉大后，在第三行单元格单击，在其“属性”面板“垂直”下拉列表中选择“顶端”选项。
然后执行插入表格，如下图所示：5.插入4行2列嵌套表格四。
将表格三适当拉大后，在左侧单元格中单元，然后执行插入表格，如下图所示：得到如下图所示的效果：5．插入2行1列嵌套表格五。
DW课程第一课
网址：用于定位某个网站某个页面的一串字 符，通常是这种格式
主页：访问网站时，默认打开的第一个页面 就是主页也叫首页。 认识网页的组成元素：
文字（宋体）、图片、超链接
1.软件下载、安装 2.界面的认识 3.新建 4.打开 5.保存
1、认识Dreamweaver 是当前最流行、最方便的网页设计和网站开发工具 软件。 早期是Macromedia公司推出的“网页三剑客”之一。 “网页三剑客”指的是Dreamweaver、Flash、 Fireworks这三个软件. 2005年被Adobe公司收购. 推出Dreamweaver cs3--cc
设置网页外观属性
网页标题、页面默认字体、默认字体大小、 背景颜色、背景图片、边距。
什么是HTML？
超文本标记语言，用于编写网页。HTML是一切网页 实现的基础，在网络中浏览的网页都是一个个由 HTML标记构成的文件。
一个HTML文件包含了很多HTML标记，用来告诉浏览 器应该如何显示文本、图像以及网页的背景等 等……
如何获取网页图像 复制 另存为 截图
插入图像
插入记录→图像
插入面板→常用→图像
直接将图像文件拖入编辑区
快捷键：Ctrl+alt+i
撤销：ctrl+Z
注意：在插入图像前应先将网页文件已保存，
从而使所插图像引用正确。
设置图像的基本属性
图像→设置的名称 宽、高→可缩小和放大图片的显示尺寸。 边框→图片是否要加边框 源文件→图片的路径和名称。
注意：链接中使用完整的URL地址
http:// （是浏览网页网络协议，是超
文本传输协议的缩写，它用于传送WWW方式 的数据）www(WWW是环球信息网的缩写 ， 中文名字为“万维网”)
1第一讲--DW入门和基础
古杨
Macromedia Dreamweaver MX 概述 FIREWORKS MX FLASH MX
一、DW的特点： FrontPage 2000
1、简洁的工作环境（界面和代码）
2、全面支持CSS样式表
3、无所不能的更新技术（模板和库）
4、高级的网站管理功能
3、段落问题：
硬回车：直接按ENTER回车键
软回车：直接按SHIFT+ENTER回车键 （也叫换行符）
4、HTML粘贴功能：无格式粘贴，相当于复制到记事本里，把所有格式都丢失。
简单做一个静态网页：
1、做网页前必须先建一个站点（主要防止路径错误）
2、写入文字和插入图像排版 (网页能显示的图片格式只有两种:GIF和JPG)
2、空格问题：
1）中文输入法状态全角空格：无代码显示，可用来段落首行缩进两格。 shift+空格 切换全角/半角 ctrl+>键 切换中英文标点
2）不换行空间： 占半个汉字宽度，可用来精确排版
此快捷键是：Ctrl+shift+空格
注:也可以通过菜单--编辑--参数选择--常规--勾选允许多个连续的空格
3、添加标题和背景色
4、存为首页网页：index.htm
5、按F12键预览调制网页。
5、开放的插件环境
6、新增数据库动W界面介绍：
1、两种工作界面 ：浮动界面和MX界面
F4 显示/隐藏全部面板
网页设计常识：
1、我们设计网页面积以15寸显示器为主，不能超过其显示器范围。
15寸显示器的分辨率：800*600像素
网页满屏宽度：778PX（像素）
Macromedia Dreamweaver MX 概述 FIREWORKS MX FLASH MX
一、DW的特点： FrontPage 2000
1、简洁的工作环境（界面和代码）
2、全面支持CSS样式表
3、无所不能的更新技术（模板和库）
4、高级的网站管理功能
3、段落问题：
硬回车：直接按ENTER回车键
软回车：直接按SHIFT+ENTER回车键 （也叫换行符）
4、HTML粘贴功能：无格式粘贴，相当于复制到记事本里，把所有格式都丢失。
简单做一个静态网页：
1、做网页前必须先建一个站点（主要防止路径错误）
2、写入文字和插入图像排版 (网页能显示的图片格式只有两种:GIF和JPG)
2、空格问题：
1）中文输入法状态全角空格：无代码显示，可用来段落首行缩进两格。 shift+空格 切换全角/半角 ctrl+>键 切换中英文标点
2）不换行空间： 占半个汉字宽度，可用来精确排版
此快捷键是：Ctrl+shift+空格
注:也可以通过菜单--编辑--参数选择--常规--勾选允许多个连续的空格
3、添加标题和背景色
4、存为首页网页：index.htm
5、按F12键预览调制网页。
5、开放的插件环境
6、新增数据库动W界面介绍：
1、两种工作界面 ：浮动界面和MX界面
F4 显示/隐藏全部面板
网页设计常识：
1、我们设计网页面积以15寸显示器为主，不能超过其显示器范围。
15寸显示器的分辨率：800*600像素
网页满屏宽度：778PX（像素）
第1讲-Dreamweaver入门
步骤6：单击【下一步】按钮，进入图示 对话框。此处选择不启用存回和取出功 能。
步骤7：单击【下一步】按钮，进入图所 示的信息摘要对话框。该对话框列出了 前面所设置的内容，如果需要再次进行 修改，只需单击【上一步】按钮至相应 对话框修改设置即可。如果没有问题， 则单击【完成】按钮完成站点的创建。
以选项卡显示插入栏
（2）文档工具栏
文档工具栏，如图所示，包含了进行常用操作 的按钮和菜单。 如果文档工具栏关闭了，可执行【查看】→ 【工具栏】→【文档】命令将其打开。 Dreamweaver有三种视图形式：代码、拆分和 设计，利用文档工具栏可方便地进行三种视图 形式的切换。
文档工具栏
代码视图：当前文档窗口中只显示HTML代码。 拆分视图：当前文档窗口将分为上下两个视图，及代码视图
1.3 建立站点
站点就是一个文件夹，在这个文件夹中包含了网站中 所有用到的文件，我们通过这个文件夹（站点）对网站进 行管理。 1.3.1 建立本地站点 先在电脑上创建一个文件夹，用来放置站点中的所有对 象，然后执行“站点\新建站点”命令，对站点进行相关 设置。 任务：创建站点“我的足球网”，站点目录为D：//zqw
步骤4：单击【下一步】按钮，进入图所 示的对话框。选择“编辑我的计算机上 的本地副本，完成后再上传到服务器 （推荐）”，单击文件夹图标选择 C:\dwtt文件夹作为站点根目录。
步骤5：单击【下一步】按钮，进入图示 的对话框，可以在此选择连接服务器的 方式。这里选择通过本地/网络进行连接。
注意：
如果看不到某个面板，而且已在【窗口】 菜单中选择了它，还是无法看见，那么 用户可以选择【窗口】→【排列面板】 命令，把所有打开的面板都恢复到默认 的位置。
《DW基础知识》PPT课件
课堂实例―创建和测试第一个html网页
在“记事本”窗口或者Dreamweaver网页中输入以 下内容：
<html> <head> <title>欢迎光临我的第一个网页</title> </head> <body> 这是第一个简单网页! </body> </html> 选择【文件】|【保存】命令，在弹出的“另存为”
描述 图片的源文件 提示文字 设置图片的宽度 设置图片的高度 设置图片的边框 垂直间距 水平间距 设置图片的对齐方式
文字标签
标签 <U> <B> <sup> <sub> <big> <small> <I> <code> <var> <s>
描述 下划线 粗体 上标 下标 大字号 小字号 斜体 等宽 声明变量 删除线
A、执行“站点/管理站点”命令，也可以使用快 捷键F8打开站点面板来建立一个站点，然后单 击“管理站点”按钮。执行命令后出现“管理 站点”对话框，单击“新建”按钮，在弹出的 菜单中选择“站点”。
B、设置站点名称：接着出现了一个建立站点的向 导，设置好站点的名字后单击“下一步”按钮。 （输入你想要的站点名称，这里输入home，其实 可以任意输入名称的，要注意的是，尽量不要用 中文命名，以免出现意想不到的麻烦！）
工作区设置对话框
首 选 参 数 对 话 框
（3）dw的窗口组成（参看教材p5-p9）
插入栏：又叫插入对象面板； 状态栏：提供了标签选择器（也 叫做标记符选择器）、窗口尺寸、 文件大小等网页信息
（4）dw菜单简介
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
申请空间(主机)
主机托管----客户自备硬件,由服务商负责软件安装、配置，可以节省高昂的专线及网络设 备费用，客户拥有对服务器完全的控制权限。 虚拟主机(服务器租用 )----采用特殊的软硬件技术，把一台真正的主机分为若干台主机对 外提供服务，每一台虚拟主机都可以具有独立的域名和地址。虚拟主机之间完全独立，并 可由用户自行管理，可以大大地缓解互联网上IP及服务器等资源的不足，同时降低用户的 硬件费用、网络维护费用和通讯服务费用。
Ｍacromedia公司推出的网站开发工具．主要功能：站点管理，网页排版 与编辑等．
Fireworks MX
Ｍacromedia公司推出的网站开发工具．主要功能：网页图形图象的制作 及修改．热点及切片的应用．
Flash MX
Ｍacromedia公司推出的矢量动画设计软件．
以上是网页三剑客所学的三门软件．因为都与网页制 作有关，且功能强大，彼此结合性极好,故称之为：网 页三剑客．
理解网页三剑客课程的几个问题
网页文件的扩展名是什么? 使用什么软件浏览网页? 网页三剑客是哪三个软件?各有什么
用途?
网页文件的扩展名
.htm , .html .asp , .php , .jsp „(“动态网页”需要服务器的支持、实现与数据库的交流）
“静态”网页
客户端 请求网页 回应网页 服务器
例如：/host/vhost.asp
[注意]个人主页空间：主要针对个人用户。费用低廉（甚至有免费），但服务器性能比较差。 可以去以下网站申请： /
/free/freespace.htm
“动态”网页
请求网页 送出SQL指令
客户端
回应网页
服务器
传回运行结果
数据库
浏览器
网页文件要使用“浏览器”浏览。 常见浏览器有：
Internet Explorer (IE) Netscape Navigator (网景） Tencent Traveler( 腾讯）
网页三剑客简介
Dreamweaver MX
HTML简介
全称：Hypertext
Markup Language 超文本 标记 语言 作用：编写网页的语言。
HTML简介
HTML基本结构（每个网页都是在基本结构的
基础上添加内容的）
<html>---------网页文件开始标签 <head>--------头部元素开始标签 <title>----------网页标题开始标签 „ 头部元素 </title>---------网页标题结束标签 „ </head>-------头部元素结束标签 <body>---------网页内容开始标签 网页具体内容 ... </body>--------网页内容结束标签 </html>---------网页文件结束标签
HTML简介
标签书写方式（不同标签书写方式不同）
1. <标签>对象</标签> 如：title、head等。 2. <标签> 如：br 3. <标签 属性1=“参数1” 属性2=“参数2” ...>对象</标签> 如：font
注意：可以嵌套，但要注意顺序。
HTML简介
几个常用标签介绍 文字：
学习的目的及要求
目的：掌握网页设计的相关知识，熟练使用 网页设计相关软件，能够独立完成不 基于数据库的小型公司网站和个人网 站的制作及发布。 要求：
1. 2. 3. 4. 5.
认真听讲，独立、按时完成作业。 注意优秀网站的收集。 多练习，多思考。 合理使用搜索引擎。 注意一些小软件的使用（网页特效精 灵，swish等）。
<font face=“ “ size=“ “ color=“ “„>...</font>
face:字体，引号中输入字体名。如：face=“黑体”。默认是宋体。 size:字号。可以是-7--------+7之间整数。默认是3。 color:颜色。可使用“red”之类的颜色名称或16进制编码指定。默认黑色。
[注意]目前域名服务通常与服务器租用捆绑销售。如： /static/hosting/jz_sheet.asp
制作网站基本步骤
网站设计 1：搜集素材，定位CI形象 2：确定栏目、版块、层次结构。 3：色彩搭配。 网站制作 1: 站点的建立 2：首页的制作（版面布局）--------表格 3：字体设置-----------------------------css 4: 图片、动画、特效等。-----------FW、FLASH、Javascript等。 5：整体风格------------------------------模板 6: 站点和链接的检测 上传------------------------------------------------CuteFtp 维护-----------------------------------------------（内容更新，费用续交，安全技术等）
Dreamweaver课件
第一讲
基础知识
主要内容
经典网站欣赏 制作网站基本步骤 理解网页三剑客课程的几个问题 学习的目的及要求 HTML语言简介
制作网站基本步骤
确定主题、类别 申请域名
域名： 由ICANN国际域名管理机构管理。类似于互联网上的门牌号码，与该计算机的互联网协 议（IP）地址相对应。但相对于IP地址而言，更便于使用者理解和记忆。 （DNS域名地 址服务器--把域名翻译成IP地址。） 常见分类： 顶级域名、二级域名、三级域名。.com、.net、.org、.cn(常见顶级域名） [注意]更深入了解域名：/
换行：<br> 加粗：<b>...</b> 倾斜：<i>...</i>
第一讲总结
内容：了解网页设计基础知识。 重点：HTML的结构。 作业：使用记事本文件，编写一个简单网页。
ห้องสมุดไป่ตู้