Dreamweaver CS教程章.docx
- 文档编号:30381983
- 上传时间:2023-08-14
- 格式:DOCX
- 页数:22
- 大小:31.45KB
Dreamweaver CS教程章.docx
《Dreamweaver CS教程章.docx》由会员分享,可在线阅读,更多相关《Dreamweaver CS教程章.docx(22页珍藏版)》请在冰豆网上搜索。
DreamweaverCS教程章
DreamweaverCS教程—章
————————————————————————————————作者:
————————————————————————————————日期:
DreamweaverCS4教程
一前言
Dreamweaver是一个很好的软件
它终究会被淘汰
淘汰它的可能是更加便捷的模版类软件,虽没变化但快捷
硬件的变化也会淘汰它
包括:
智能终端的兴起平板的兴起,这两者带来的操作系统的改变。
3D立体虚拟投影的兴起佩戴设备的兴起(这两者带来的显示的变化)
(介绍一下谷歌眼镜、苹果手表.牙齿硬盘等)
就是浏览器本身的市场争夺都已经白热化(飞行、火狐、库塔等)
我们怎么做?
100个人取第85位作为基线讲解。
讲述的方式也是最基本的傻瓜型讲解。
(跟着一个有录像的、比较好的教材走)
reamweaver、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWOR
KS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队),也叫三剑客。
但是,随着互联网飞速的发展,情况有了变化.
主要变化我们会专门讲解,主要是,互联网的移动性越来越强,硬件变化越来越剧烈,引起的软件和格式的变化很剧烈,总之,现在的互联网是一个动荡的世界。
希望大家了解。
前十年,随着HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器),两者各有千秋.所见则所得网页编辑器的优点就是直观性,使用方便,容易上手,你在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,
但它同时也存在着致命的弱点——效率低下,慢!
DreamweaverCS4的界面几乎是做了一次脱胎换骨的改进,从中看到了更多的设计元素,让DW也稍稍带着点苹果的味道。
这是Adobe的功劳。
但是:
PS是美术人员的设计,DW是工科人的设计,二者不同的思维方式造成了我们学习这个软件的艰难。
讲述理科男的特点.举买饭的例子,
从CS4以后的特点:
布局按钮:
这个按钮似乎和下方的代码、分割、设计按钮功能重复,目前还不明白DW
的意图,唯一增加的新功能是垂直分割,让代码和设计界面以垂直对比的方式呈现。
精简设计:
它提供了更多的可视区域,同时可以把右边的菜单收缩到只剩下图标。
对于习惯了Adobe其他设计软件的朋友来说,这的确是非常贴心的设计.
应用程序开发增强:
左上方是和数据相关的面板,包括数据库面板、数据绑定面板和行
为面板;左下方则是文件与资源相关的面板,包括文件面板、相关资源面板、代码收集器
等;右边则是设计相关面板,包括插入面板、CSS样式表面板、AP元素面板(用来为浮
动层定位)。
应该说这是一个万金油布局,几乎适用所有的开发者,同时,它也把大部分菜
单展示在用户面前,其他的七种布局可以说只是在这个基础上进行一些排列和隐藏。
在下方的文档面板上,DW新增加了一个实时预览功能——LiveView。
它的作用是在DW窗口中实时查看代码的效果,包括Javascript特效!
讲述苹果手机对微软界面的颠覆。
锤子手机对苹果界面的颠覆.小米手机对用户体验的颠覆
最早的金山对微软的打字软件的冲击。
优点
1.最佳的制作效率
Dreamweaver可以用最快速的方式将Fireworks,FreeHand,或Photoshop等档案移至
网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于选单,快捷
键与格式控制,都只要一个简单步骤便可完成。
Dremweaver能与您喜爱的设计工具,如P
laybackFlash,Shockwave和外挂模组等搭配,不需离开Dreamweaver便可完成,整体运用
流程自然顺畅。
除此之外,只要单击便可使Dreamweaver自动开启Firework或Photoshop
来进行编辑与设定图档的最佳化。
2.网站管理
使用网站地图可以快速制作网站雏形、设计、更新和重组网页.改变网页位置或档案名
称,Dreamweaver会自动更新所有连结。
使用支援文字、HTML码、HTML属性标签和一
般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
3.无可比拟的控制能力
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧(frames)和表格的制作速度快的令您无法
想像.进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取.甚至可以排序或
格式化表格群组,Dreamweaver支援精准定位,利用可轻易转换成表格的图层以拖拉置放
的方式进行版面配置。
所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务
功能,提供超强的支援能力给Third-party厂商,包含ASP,Apache,BroadVision,Cold
Fusion,iCAT,Tango与自行发展的应用软体。
当您正使用Dreamweaver在设计动态网页
时,所见即所得的功能,让您不需要透过浏览器就能预览网页.梦幻样版和XMLDreamwe
aver将内容与设计分开,应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版,
指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改
变既定之样式.您也可以使用样版正确地输入或输出XML内容。
Dreamweaver还集成了程序开发语言,对ASP、。
NET、PHP、JS的基本语言和连接操
作数据库,都是完全支持的。
缺点
一、难以精确达到与浏览器完全一致的显示效果。
也就是说你在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果,这一点在结构复杂一些的网页(如分帧结构、动态网页结构)中便可以体现出来;
二、页面原始代码的难以控制性,比如您在所见即所得编辑器中制作一张表格也要几分钟,但您要它完全符合您要求可能需要几十分钟,甚至更多时间。
而相比之下,非所见则所得的网页编辑器,就不存在这个问题,因为所有的HTML代码都在您的监控下产生,
但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率.如何实现两者的完美结
合,则既产生干净、准确的HTML代码,又具备则见则所得的高效率、直观性,一直是网页设计师梦想.在DREAMWEAVER之前,FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器,但是它同样继承了所见即所得的种种劣性.但是我说过这是在DREAMWEAVER之前,现在我无意说DREAMWEAVER已经实现网页设计师的梦想,但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。
三.准备工作(必须的软件)
主要还是Dreamweaver的基本使用,对于中小型企业网站,商业性专题网站为主。
1。
主要是以表格布局为主,Div+CSS布局为简略介绍(Div+CSS在XHTML课程中已详细介绍)
2。
不讲解代码区,代码区都是自动提示,学习阶段不利于你的自身发展.工作后,为了开发效率,可以考虑使用。
3。
不涉及任何语言,xHtml,Css,JavaScript,ASP,JSP,ASP。
NET,PHP等等,只讲软件.
补充说明0:
此课程是给初次基础网页的学友踏上网页设计大门的课程,是给什么都不会,什么都没接触过的同学定制的,所以不会讲解诸如:
DWforHTML、Div+CSS、ASP、PHP、JavaScript、JSP、ASP.NET等。
所以,这是网页设计的第一门,最初级的课程,不参杂任何其他元素.
补充说明1:
Dreamweaver之所以采用表格布局为主,是为了让第一次接触网页的新手快速而简单的创建出网页,达到一种满足和喜悦,从而提高了兴趣继续往下学,绝对不能讲多余或者深入的东西。
因为这门课是网页最最初学者的第一门课。
二创建网页的基本对象
找到你的DW,希望它在你的工作磁盘文件夹里。
我们以后所有的学习软件都应该在这里。
双击打开
会出现一个欢迎界面,左下角可关闭,在打开的话,找编辑——首选项(快捷键是CONTROL_U)-—常规里还可以找到。
编辑——首选项——常规—-显示欢迎屏幕。
打开后看右边的快捷面板,一般默认的收起来的状态就可以了。
它有记忆功能,你下次打开的时候会回到你关闭前的状态。
所以你关闭了,再打开也是关闭状态。
一.网页的创建和存储
1.创建网页
第一次启动DreamweaverCS4的时候,会让你选择“编码区”和“设计区"。
启动欢迎界面有四个功能:
1.打开最近的项目2.新建(大家可以打开更多的选项,有可能会用到模板功能)3.主要功能4.快速入门
这里我们选择“设计区”。
如果多次打开,则不再显示此选择。
不过,我们最好选择CTRL加N,这样有多重选择.我们主要用的就是HTML。
点击这里的新建,它会自动的新建一个html.我们不要用,我们还是希望大家从文件菜单中选择新建或快捷键ctrl加n。
这样会出来一个丰富的新建对话框,里面可以有我们的设置。
新建网页的时候,布局暂时不要选择。
一来死板,二来太让人熟知.如同ppt上的或模板一样.没有新鲜感。
空白页——页面类型—HTML—布局-无就可以了
html是一种是用于描述网页文档的一种标记语言。
是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言.支持各种浏览器的使用,同时支持超链接和文本及图像。
。
2.保存页面
首先请大家按照微软的思维方式新建一个到两个文件夹,我们所有的作业和联系都将保存在这里。
讲解微软的思维方式和苹果的思维方式。
举直升飞机的例子
这个文件夹保存在你常用的和dw在一起的磁盘上最好。
起名DW实验。
双击后关闭.
然后新建一个网页,刚才说了,新建网页的时候,布局暂时不要选择。
一来死板,二来太让人熟知。
如同ppt上的或模板一样。
没有新鲜感。
空白页——页面类型—HTML-布局—无就可以了.
然后看右下有很多的文档类型。
这么多的类型我们选择哪个呢?
我们明年开始就可以选择html5。
0了。
现在不行,因为里面牵扯到IE浏览器的兼容问题。
所以我们现在选择1。
0过度型。
就是transitranol。
然后点击创建.下面让附加css,我们也不用。
我们打印一句话:
第一次接触Dreamweavre
编辑好的网页需要保存,我们可以执行“文件---—保存”,或者按下Ctrl+S组合键,打开“另存为”对话框,第一次都是另存为,以后就是在原文件的基础上保存了。
你改个名字,比如2—1,你不加后缀它会自动加成html。
你如果在页面上再修改一下,你看页面上面有一个星号,你就可以点击保存了.我们双击你文件夹里的文件,不断的写新的文字上去,然后更新页面,就可以不断的看到你的修改了。
另存为就是另外再存储一个。
你修改原文件夹里的文件再另存一下,你就会看到在你的文件夹里,自动又建立了一个网页。
在保存的时候选择保存的位置。
我们需要保存在你刚才建立的那个Dreamweaver实验学习文件夹。
也可以直接在文档工具上方选中需要保存的网页文档,然后单击鼠标右键,在弹出的快捷键菜单中选择“保存".
把第二个网页删掉,因为我们以后要经常要用这个文件夹,它会碍事。
在页面上面把这个页面的名字起好,然后保存,在IE里刷新.
3.打开和关闭页面
关右上角是关闭整个软件,关文件的话有个小
。
右键点击文件名,会出来关闭、关闭很多、关闭其它等等,你都可以试试。
关闭后再打开,在欢迎页面上有文件的名字,如果你执行文件--打开命令,会自动记忆到这个文件的文件夹。
非常方便.
如果要打开电脑中存有的网页文件,则执行“文件——--打开"命令。
二网页的组成元素
网页主要由三部分组成:
文本、图象和超链接
1.文本
一般文本占用的空间很小(一个中文字符只占2字节)a)文本就是网页上的文字,
2.图片
a)图片会让我们的网站变的生动有趣,一般网站上的图片格式有这几种,JPG、BMP
b)GIF、PNG等。
一般用的比较多的是JPG、GIF两种。
c)GIF是图形交换格式,这种格式的特点就是小巧,更重要的是,它可以做为小动画,在网络上传播.平板上目前运用的最多.
d)JPG图片格式是在网络上被广泛采用的图片格式。
(讲述一下压缩和插值)
e)PNG是用Macromedia公司推出的网页图片处理软件生成的格式。
它的用途越来越大。
因为现在的浏览器都支持它的透明效果了。
3.超级链接
a)一个网站由很多的网页组成,而这些网页之间通常是通过超级链接的方式进行连接的。
三.文本操作
文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。
1.插入文本
a)直接在文档窗口中输入文本,将光标放置在文档窗口中要插入文本的位置,后直接输入。
如果需要跳段,可以按ENTER键。
如果是换行,则是Shift+Enter.
你可以看下面的属性——HTML的格式,里面会告诉你,回车是段落.如果你改成标题,则你刚才打的字会变大变粗.
大家看属性上面.如果全部选定,是body,也就是表示整个区域。
如果只是我是老师,则是一个p字符,就是段落的意思。
如果你选择标题1,会出来一个h1.那么这些就是Html的标签。
我们打开代码区,可以看到,我是老师是h1,你是学生是p.如果把我是老师在下面改成段落,再看代码区,也就成了p.
再回车,我们一起学习。
大家看,每个段落之间空得太大了。
所以我们可以不用段落,我们用换行,也就是shift加回车,大家看一下。
和段落比起来,它和上一段文字相隔的距离就小。
你看代码区,是br,意思就是换行。
b)粘贴其他编辑器中生成的文本,首先要将光标插入文本的位置,然后执行“编辑-——-粘贴",就能完成文本的插入。
也可以直接使用标准工具栏上的“粘贴”按钮。
如果直接从网页上复制—-粘贴文本,会把网页上的超链接和HTML格式等一起复制过来,所以如果从网页上复制,一定要用文本过度一下。
(开始——附件——记事本)
2.调整文本
a)如果要调整文本大小,则选定文本,在属性面板的“大小”下拉列表框中选择合适
的大小.
这里其实非常繁琐,除了第一个可以选择一个标题一,底下的选择很麻烦。
你不能也选择标题。
如果选择了,这个网页最后出来了就是两个标题。
先选择CSS,弹出一个界面,有字体大小字体等,但你选择一个数字,会出来一个选择CSS对话框,取消,(这是新版本的一个特性,让你新建一个外部或内部的css.别管它)看下面HTML右边对话框,目标规则中选择新建内联样式就可以了。
当然前提是你先选定你要改变的字。
选择完字号后,再选择像素啊,磅啊什么的,我们统一选像素。
就是(PX)然后在右边还可以选择颜色。
这样就不会出现那个窗口了。
右边是颜色,自己做个选择.(仔细讲述RGB及CMYK颜色模式以及色卡模式。
以及他们随后显示的区别)
b)如果需要改变文本字体,则先选定文本,在属性面板上“字体"下拉列表中选择字
体样式。
记住,网页上的字体一定用设定默认的字体,千万不要选择特殊字体,为什么,就像以前讲的印刷是一样的,只是网页的字体更严格,毕竟是给大众看的.要不有可能显示不出来。
如果选择特殊字体,则采用图片。
(讲述印刷的字体限制、讲述字库的特点、印刷的特点)
c)如果“字体”下拉列表中没有需要的字体,则执行“字体———编辑字体列表”会出来一个编辑字体列表。
你选择可用字体里的字体.把它拖到左边的选择的字体里面来.然后点击确定。
确定后回到页面,再选择你刚才的文本.选择字体,你刚才选择的字体就在里面了。
我们将这个页面进行一下保存.
我们看上面的实时视图。
我们还是选择在IE浏览器上好。
预览、刷新等。
d)可以将字体设置为标题字体,格式:
段落,Hx.
3.特殊字符
a)在文档窗口中,将光标定位在需要插入特殊字符的位置.
b)执行“插入-—-HTML—--特殊字符",在子菜单选择合适的字符命令。
或者在快捷栏中选择文本,特殊字符。
注意:
在菜单中比较麻烦,所以看右边收起的快捷面板中插入,一定先选择文本,下面才会出来特殊字符.一般先选择字符前面那个小三角,它帮你分好了类别。
选择特殊字符后如果需要改变大小,又会弹出新建CSS规则对话框,你需要选择下方的目标规则菜单里的新内联样式。
c)如果在下拉菜单中没有找到需要的字符,那么可以选择“其他字符”。
如果还没有,你就要上XX里查你要的那个特殊字符的编码了。
(点击插入其他字符,左上角插入会有编码出来)
保存后刷新就可以出来刚才保存的网页。
(学会用F5)
4。
插入日期
a)将光标放置到要插入日期的位置。
b)执行“插入—日期",会出来插入日期对话框.你自己选择日期格式,点击确定。
点击保存.或者在插入面板上点日期按钮,便可以.上面的只是格式,选择后会自动出现现在的日期.
5.插入文本列表
a)用鼠标选定要插入的项目的文本内容
比如在页面上打出:
技术部
财务部
商务部
然后把这三个全部选定,然后
b)选择插入--常用—-选择文本——选择项目列表。
项目列表就是在前面加个小符号!
也叫无序列表.回车后可以继续添加。
连续回车两次列表结束。
(举例音乐讲述什么叫列表)
c)还有一种方式,做列表前你先选择插入——文本——项目列表,你就可以自己建立一个列表了。
它会自动出来列表符号。
然后你再输入。
d)插入编号列表是一样的。
你全部练习完成后刷新完成看效果。
三规划站点
所谓站点,你可以理解成一个目录文件夹。
每做一个网站时,我们需要先做一个站点。
然后通过站点把某些规范化的、自动化的程序、包括模版等可以直接导入站点,节省时间。
1.站点规划的规则2.建立本地站点3.站点导入导出复制删除
一.站点规划的规则
一般来说,在规划站点结构时,应该遵循以下一些规则。
也就是说,站点的建立是有规则的,否则就乱了。
(1)。
文档分类保存
如果一个复杂站点,它有很多文件,我们必须使用分类保存是它更清晰.从做PS开始,老师就教导我们,利用层级结构,从开始就命名好每一个文件夹、每一个目录。
每之间的一层关系。
为以后工作量大了以后带来明确的名字.
所以,分类保存是图片就是图片,文本就是文本。
这不是绝对的,有文本又有图片的时候你怎么办?
按标签和属性保存.
所有的站点目录都是以文件夹形式来表示的(在windows形式下)
文件夹的名字要有几个特点,整个电脑打开.所有的硬盘都有明确的分工。
系统、素材、工作等等。
专业的电脑是不会把工作和个人同时使用的,我们只有一部电脑,你的个人娱乐一定要一个单独的文件夹。
打开你的工作磁盘,每一个工作类软件都是一个文件夹,打开,里面的文件夹先有数字。
然后有详细的题目说明.你的DW文件夹也一样,打开后可能又很多项目文件夹,在DW软件里我们称之为站点目录。
一般按时间编号,然后有项目名称。
打开后有一个主页,一般叫index,然后有几个文件夹,图片、文字等.一般都要有images,有一个放css的文件夹,叫style.如果它很复杂,有音乐,子页什么的,也一定分类。
如果是比较大的新闻类网站,可能还要建立每个月甚至每日的文件夹(比如QQ)
记住,网页建立只是第一步,然后要维护,到时候需要明确的文档分类.这么做的目的就是维护、操作、更新用,这些可能都不是网页设计师的工作.
(2)。
合理地命名文件名称
为了方便管理,文件夹和文件的名称最好要有具体的含义。
就是说,你要善于利用数字、英语,。
明确的表达好这个文件名,一定要具体。
(一般用英语,汉语服务器有时候不认)
(3).本地站点与远程站点结构统一
为了方便管理,在设置本地站点时,应该将本地站点与远程站点的结构设计保持一
致。
(建立好本地站点后,网站做大了,有可能需要远程站点,这时候需要申请服务器等等)
讲述申请.COM.CN。
ORG等。
讲述视频网站的费用。
二.建立本地站点
在建立站点之前,我们要知道所有的文件夹、资源和特定的文件都包含在站点中。
因此,
首先在硬盘上建立一个新文件夹作为本地根文件夹,用来存放相关文档.如在F盘根目录
下创建一个名为MyWeb的文件夹,在MyWeb文件夹里再创建一个名为images的文件夹,
用来存放网站中甬道的图象文件。
这个程序是这样的,打开Dreamweaver,在帮助右边有三个方块的网络连接标志,打开新建站点。
以后会用管理站点。
上面也有新建.现在先用新建。
新建后会弹出对话框。
1先给你的站点起个名字,注意,一般起的就是MYWEB就可以了。
2站点的HTTP,也就是网址随便,因为是本地操作。
点击下一步!
3选择不使用服务器技术。
然后点击下一步!
4在开发过程中,你打算如何使用你的文件?
选择编辑副本,上传服务器。
不要选择直接在服务器上编辑。
下面,你把文件储存在计算机上的什么位置?
(文件是指本地文件)它的默认位置是有的,你看一下,我们尽量不要默认.
我们要在dw实验文件夹下。
新建一个MYWEB文件夹,大家注意,这个myweb和前面那个myweb的区别在于,(点击上一步、上一步,看文件夹名字那里。
)前一个myweb是站点在DW里面的名字.后一个是你在DW里存储文件的文件夹名字,我们尽量让这两个名字保持一致。
不一致也可以,但将来会惹麻烦。
注意!
站点的名字和储存在硬盘上的文件夹的名字尽量一致。
下一步,您如何连接到远程服务器。
选择无(因为我们是在本地做)然后下一步。
出来你的myweb的站点定义,解释一下含义。
(高级选项完成配置暂时不需要)!
点击完成。
看插入——文件myweb站点下面,已经自动建立了一个myweb文件夹。
(myweb右边,只选择本地视图,别的不选)
完成后选择插入—myweb下本地文件下站点myweb,在下面再建立一个子文件夹images.
因为我们做网站,需要用到很多音乐和图片,我们一般都要用到相对路径,如果你的网站在f盘上,但你的图片在C盘上,那么你的图片只能在本地欣赏,不能同步上传。
你上传的图片会变成一个小叉。
所以你建立了图片文件夹,你的图片会自动保存在里面和文件同步上传。
(音乐什么的文件也一样)
所以我们选择管理站点.点击myweb,点击编辑。
出来对话框,选择高级。
在默认图像文件夹一栏文件夹图标点击一下.路径就到了myweb里面.你不能把上面的根文件夹复制下来后在后面建立一个文件夹images.你点击确定后会出现警告:
图像文件夹不在站点中。
所以我们点击文件夹图标后进到myweb里面,然后右键新建一个文件夹,起名images.然后选择就有了.确定后点击完成。
回到插入——文件状态。
你就看到出来了子目录.以后插入的图片它会自动存进去。
存进去如果没有及时显示出来你可以点击上面的刷新键.
总结:
(1).给站点起个名字,网址无所谓
(2)。
不使用任何服务器端技术
(3)。
选择编辑计算机上的副本再上传
(4).网络连接不需要
(5)。
完成站点定义
(6).定义默认图像文件夹(以后的图片均会自动存在这里)
在MYWEB下面建立一个文件夹,装你的图片,因为你的图片即使在本地,也不能在C盘,否则不能同步上传。
也可以使用高级定义站点,更加的方便。
高级的方法自动创建站点的方法
:
1在你认定的盘上建立一个DW试验文件夹,在里面建一个myweb文件夹,在里面再建立一个子文件夹images,然后点击右上角网络连接标志的管理站点,点击新建—-站点。
在出来的对话框里选择左上角的高级,站点名称和你刚才的对话框一
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver CS教程章 CS 教程