第7章 Dreamweaver 8的基本应用
- 格式:ppt
- 大小:379.50 KB
- 文档页数:23
三理论知识(一)Dreamweaver 8 基础1.网页相关知识(1)www站点我们可以将WWW看作Internet上的一个大型图书馆,“WWW站点”、“Web站点”或网站就像图书馆里的一本本书,而Web页或网页则是书中的某一页,主页是一个站点的起始页,相当于书的封面或目录。
每个web页都拥有一个被称为“统一资源定位器”(URL)的唯一地址。
(2)统一资源定位器URL(Uniform Resource Locator)URL提供了互联网上资源的准确位置,它描述WWW浏览器请求和显示某个特定资源所需的全部信息,包括传输协议,如HTTP,提供WWW服务的主机名、HTML文档在远程主机上的路径及文件名,以及客户与远程主机连接时使用的端口号。
例如::80/product/default.html,其中http为传输协议,为使用的远程主机名,80为使用的端口号,product/default.html为HTML文档的路经和文件名。
综合起来简单说,就是我们上网时看到的网站的地址。
我们后面作网页的超链接时所说的URL地址。
(3)超级链接我们网页与网页之间要联系起来,就要通过超级链接来实现。
不管是在内部实现的链接还是接到WWW网上,都需要超链接作桥梁。
(4)静态网页和动态网页静态网页是相对于动态网页而言的,是指没有后台数据库、不含程序和不可交互的网页。
静态网页,动态网页主要根据网页制作的语言来区分,静态网页使用HTML(超文本标记语言)语言,网页地址的后缀一般为.htm、.html、.shtml、.xml等形式;而动态网页一般使用HTML+ASP或HTML+PHP或HTML+JSP 等语言,网页地址的后缀为.aspx.asp、.jsp、.php、.perl、.cgi等形式。
静态网页与动态网页之间区别的重要标志是程序是否在服务器端运行。
在服务器端运行的程序、网页、组件,属于动态网页,它们会随不同客户、不同时间,返回不同的网页,例如ASP、PHP、JSP、、CGI等。
Dreamweaver 8 入门一、基本概念1、网络是通过一定形式连接起来,可以互相通信的一组计算机;(1)因特网:由无数局域网和广域网共同组成的全球都使用TCP/IP通信协议的一个计算机系统;(IP、域名区分定位计算机)(2)万维网:World wide web是因特网上超文本系统,超文本文件通过一个称为“网页浏览器”的程序从服务器上(或服务器的网站上)获取网页并在电脑屏幕上显示出来;URL:在万维网上每个WEB页都有一个特定的地址称为统一资源定位器;二、Dreamweaver 8 的概述:一个非常优秀的网站设计和开发平台,使用可视化的环境编辑动态或静态网页;1、认识界面:1)启动:HTML静态网页2)工具栏:常用、布局……3)编辑窗口:设计窗口:提供所见即所得的编辑界面,接近网页显示实际效果;代码和设计窗口:(拆分)部分代码和设计视图;代码:以代码形式显示和编辑网页元素;4)标签选择器:选择对象、窗口尺寸……5)属性检查器:可显示对象的各种属性……6)面板组:提供某类功能的组合;三、标尺与网格:定位网页中元素的位置;查看——标尺—显示、网格四、设置网页属性:1)网页标题:用文字表示网页的性质;2)背景图像:颜色:外观、链接……五、添加文字:布局方式:自由布局,利用层;利用表格:可以将网页分不同区域,使网页中整齐有序,能具有统一风格和区域划分的形式,从而实现各元素的准确定位;六、创建表格:1)常用工具——插入表格插入——表格2)参数:行数、列数:七、作业:制作百度、自由布局;布局(二)一、服务器:是一个管理资源并为用户提供服务的计算机的软件;客户端:它是运行客户本地计算机中的程序,它必须是服务器相对应才能发挥它的作用。
网页:含有文字、图像文件等通过浏览器来阅读,网页合体称为网站,一个网站的开始页为首页.index.html网站:指因特网上,根据一定的规则,使用HTML等工具制作用于展示特定的内容的相关网页的集合;二、表格布局:布局表格:在布局模式下绘制网页的表格的范围;布局单元格:在布局模式下绘制所须的行或列的范围;三、框架网页制作:1)框架:可以把浏览器窗口分为几个子窗口,每个窗口都可以显示一个独立的文档;2)框架的组成:由两个主要部分构成:框架体和单个框架;3)框架集:查看——可视化助理——框架边框布局——框架4)框架显示的参数:_Blank:打开一个新的窗口,并链接在新窗口中_parent:框架的上一层窗口中显示_self:同一个框架内显示网页_top:清除框架,原窗口显示链接的网页;Mainframe:在主框架中显示网页;向网页中添加内容文字与图像一、网页的构成:1、站标:网站标志,作用:使人联想企业的形象;2、导航条:链接到网站内主要页面的超链接组合,引导浏览者轻松找到网页的各个页面;3、广告条:4、标题栏:网页内部各版块的标题栏,即内容的概括、内容分类清晰明了;5、按钮:被点击后,出现相应的操作;二、建站流程:1、网站需求分析:1)确定网站主要内容,性质、受众;2)规划网站的主要栏目;3)收集网页所用素材;2、设计和制作网站页面:设计:PS制作网页效果图;3、空间和域名申请:访问网站须上传到服务器,拥有专属的空间或域名;4、测试和发布网站:本地用IIS测试;用FTP或DW上传;5、网站的推广;三、创建文本:1)如何换段:敲回车;换行不换段:shift+敲回车;2)文本面板:(1)字体标签:添加字体:(2)设置缩进:(3)文本颜色:(4)字符样式:粗体、斜体……(5)对齐、列表……3)特殊符号的输入:空格、换行符;水平线;插入——HTML——四、插入图像的基本操作:1、在站点的image文件夹下:所有图像文件保存在一个文件内;2、图像格式:GIF无损压缩格式,支持256色,可设透明和动画;JPG JPEG 有损压缩格式;颜色真色彩;PNG 无损压缩格式,支持透明显示功能;3、插入图像占位符:作用:制作网页时,图像没有制作完成时,可插入一个图像占位符;操作:插入——图像占位符参数:尺寸、名称、颜色、替换文本:用鼠标指向对象时的说明文字;4、插入互动图像:作用:浏览网页时,当鼠标移至某一个图像时,图像会发生变化,移开鼠标时,图像恢复原状;操作:图像在Image文件夹下;大小一致;常用——鼠标经过图像;5、图像属性参数:名称、大小、源文件:图像所在目录及名称;热点工具:在图像之上建立一个区域,当鼠标点击时可以链接到目标网页;编辑:编辑图像,Fireworks进行操作,锐化、亮度……Css样式的应用一、网页服务器:1)它是负责提供网页计算机通过HTTP通信协议传给用户;2)它是提供网页服务的服务器;二、什么是Css样式:是指有关联的样式表,能够定义网页的文本、背景、边框等样式,作用:便于统一网站的风格,实际上含有多个文本属性和网页属性的集合;三、Css样式面板:shift+F111)附加样式表:可应用已保存的Css样式到当前文本;2)新建Css样式:3)编辑Css样式,修改已建立的Css样式;4)删除Css样式:5)套用Css样式:选择要应用样式的字——在列表中右击——套用;选择要应有样式的字——在属性栏中的样式选择——样式;四、新建Css样式:1)类型:类:应用文本范围或文本块的自定义;.开头命名;标签:重新定义特定的标签的外观;高级:为具体某个标签组合或有包含特定ID属性的标签定义格式;A:link:新打开网页进,链接所呈现的状态;A:hover:鼠标移上链接时显示的状态;A:visite:链接被访问过的所显示状态;A:activeL链接被激活时显示的状态;2)定义在:仅对该文档有效:对当前文档进行操作;五、应用:选择已定义的样式——套用:1)类型:字体、大小、样式、……2)背景:网页或网页元素的背景颜色;背景图像:重复……作业:在文档的背景上显示图片,此图片随窗口大小变化,并且始终居中;操作:标签:body;——背景:图片;重复:不重复;附件:固定;水平或垂直:居中;3)定义区块:可以标签和属性间的间距和对齐设置;4)边框:可以定义元素周围的边框设置;5)列表:项目符号大小和类型;6)定位:使用图层参数选择定义层的标签;7)扩展属性:设置过滤器和鼠标指针形状;光标:指针位于所控对象时改变指针的图像;过滤器:所控制对象应用特殊效果;向网页中添加其他内容1、使用Flash影片、按钮……使Flash背景透明的参数设置:Wmode值:transparent2、添加声音:1)关于音频的文件格式:Midi或mid :乐器数字接口;wav :品质高的声音;mp3:运动图像专家音频模式;2)操作:媒体——插件:如何音乐与打开网页不同步播放:插放声音参数:Loop trueAutostart true3、添加视频:不同方式或不同格式将视频添加网页上;4、行为的使用:1)行为:是DW预置的脚本语言,每个行为包括一个动作和一个事件,任何动作的都需要一个事件来激活。
第1章网页设计基础1.1 认识网页1.2 网页设计的基本原则1.3 Dreamweaver 8简介1.4 Dreamweaver 8的参数设置【知识要点】→1.认识网页。
→2.网页设计的基本原则。
→3.Dreamweaver 8简介。
→4.Dreamweaver 8的参数设置。
【技能目标】→1.了解网页的基础知识。
→2.了解网页设计的基本原则。
→3.认识Dreamweaver 8的主界面。
→4.了解首选参数的设置。
1.1 认识网页1.1.1 什么是网页网页一般分为静态网页和动态网页。
静态网页是标准的HTML文件,扩展名为.html 或.htm。
动态网页在许多方面与静态网页是一致的。
根据采用Web应用技术的不同,动态网页文件的扩展名也不同。
在文件中使用ASP(Active Server Pages)技术时,扩展名是.asp,使用JSP(Java Server Pages)技术时,文件扩展名为.jsp 。
搜狐网页中国银行静态首页中国农业银行动态首页1.1.2 网页与网站的关系一个完整的网站是由多个网页构成的,这些网页是分别独立的,这些独立的网页通过超链接联系起来。
网站可以看做是许多网页的家,浏览者可以通过浏览器访问网站的地址后,读取这个网站内的网页。
网页是网站的基本信息单位,一个网站通常由众多的网页有机地组织起来,用来为网站用户提供各种各样的信息和服务,好比一栋大楼里的一个个房间。
1.1.3 常用的网页制作工具网页的设计制作一般分为三个阶段:一是设计,二是布局,三是动画的添加,复杂的还涉及脚本程序。
从设计角度来说,常用的应用软件有Photoshop、Fireworks等专业的图形图像设计软件。
1.1.4 网络基本术语1.域名2.HTTP协议3.FTP协议4.超级链接5.站点1.1.5 认识HTMLHTML全名是Hyper Text Markup Language,即超文本标记语言,是用来描述Internet服务器上超文本文件的语言。
利用Dreamweaver8软件制作网站摘要:Dreamweaver8是建立Web站点和应用程序的专业工具。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
本文在实施制作过程中充分的体现出了Dreamweaver8的强大功能。
本文主要分为四各部分。
第一部分介绍Dreamweaver8,第二部分讲述利用Dreamweaver8制作网站的主要过程与步骤,第三部分讲述在运用Dreamweaver8时需注意的一些地方与一些心得。
前言Dreamweaver是美国Macromedia公司开发的集网站制作和网站管理于一身的所见即所得的网页编辑器,它是第一套针对专业网页设计师特别开发的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver是专业可视化网站开发的先锋。
在2000年,为了响应Web开发者中越来越普遍的服务器技术,Macromedia推出了Dreamweaver UltraDev。
此产品提供了Dreamweaver的功能和用于采用ASP、JSP、ColdFusion 创建Web应用程序工具的功能。
Dreamweaver8是在旧版本的基础之上构建的,通过在主要领域(如XML和CSS)扩展功能并简化工作流程来帮助用户在最短时间内完成更多工作。
通过支持最新的专业设计方法,Dreamweaver8采用Web社区所使用的强大的开放式、基于标准的开发。
Dreamweaver8还支持所有主要服务器技术,包括ColdFusion、PHP、ASP、和JSP,使所有技术级别的开发者的设计都栩栩如生。
一、Dreamweaver8特点Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件,随着Dreamweaver 8的发布,更坚定Dreamweaver在该领域的地位。
Dreamweaver8.0创建模板在我们制作网站的过程中,为了统一风格,很多页面会用到相同的布局、图片和文字元素。
为了避免大量的重复劳动,可以使用Dreamweaver8提供的模板功能,将具有相同版面结构的页面制作为模板,将相同的元素(如导航栏)制作为库项目,并存放在库中可以随时调用。
一、创建模板模板的创建有三种方式。
1、直接创建模板选择“窗口/资源”命令,打开“资源”面板,切换到模板子面板,如下图所示。
单击模板面板上的“扩展”按钮,在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件,给模板命名。
然后单击“编辑”按钮,打开模板进行编辑。
编辑完成后,保存模板,完成模板建立。
2、将普通网页另存为模板打开一个已经制作完成的网页,删除网页中不需要的部分,保留几个网页共同需要的区域。
选择“文件/另存为模板”命令将网页另存为模板。
在弹出的“另存模板”对话框中,“站点”下拉列表框用来设置模板保存的站点,课选择一个选项。
“现存的模板”选框显示了当前站点的所有模板。
“另存为”文本框用来设置模板的命名。
单击“另存模板”对话框中的“保存”按钮,就把当前网页转换为了模板,同时将模板另存到选择的站点。
单击“保存”按钮,保存模板。
系统将自动在根目录下创建Template文件夹,并将创建的模板文件保存在该文件夹中。
在保存模板时,如果模板中没有定义任何可编辑区域,系统将显示警告信息。
我们可以先单击“确定”,以后再定义可编辑区域。
3、从文件菜单新建模板选择“文件/新建”命令,打开“新建文档”对话框,然后再类别中选择“模板页”,并选取相关的模板类型,直接单击“创建”按钮即可。
Dreamweaver8.0定义可编辑区域模板创建好后,要在模板中建立可编辑区,只有在可编辑区里,我们才可以编辑网页内容。
可以将网页上任意选中的区域设置为可编辑区域,但是最好是基于HTML代码的,这样在制作的时候更加清楚。
在文档窗口中,选中需要设置为可编辑区域的部分,单击常用快捷栏的“模板”按钮,在弹出菜单中选择“可编辑区域”项。
MacromediaDreamweaver8最好的实⽤⼊门教程第⼀天的内容可能让你觉得枯燥乏味,不过,“⼯欲善其事,必先利其器”,让我们⼀起来了解Dreamweaver8的操作环境,完成站点的创建。
⼀、Dreamweaver8 的操作环境在⾸次启动Dreamweaver8时会出现⼀个“⼯作区设置”对话框,在对话框左侧是Drea mweaver8的设计视图,右侧是Dreamweave 8的代码视图。
Dreamweaver8设计视图布局提供了⼀个将全部元素置于⼀个窗⼝中的集成布局。
我们选择⾯向设计者的设计视图布局。
在Dreamweave 8 中⾸先将显⽰⼀个起始页,可以勾选这个窗⼝下⾯的“不在显⽰此对话框”来隐藏它。
在这个页⾯中包括“打开最近项⽬”、“创建新项⽬”“从范例创建”3个⽅便实⽤的项⽬,建议⼤家保留。
新建或打开⼀个⽂档,进⼊Dreamweaver8的标准⼯作界⾯。
Dreamweaver8的标准⼯作界⾯包括:标题显⽰、菜单栏、插⼊⾯板组、⽂档⼯具栏、标准⼯具栏、⽂档窗⼝、状态栏、属性⾯板和浮动⾯板组。
1、标题显⽰栏启动Macromedia Dreamweave 8后,标题栏将显⽰⽂字Macromedia Dreamweave 8.0,新建或打开⼀个⽂档后,在后⾯还会显⽰该⽂档所在的位置和⽂件名称。
⽂件:⽤来管理⽂件。
例如新建,打开,保存,另存为,导⼊,输出打印等。
编辑:⽤来编辑⽂本。
例如剪切,复制,粘贴,查找,替换和参数设置等。
查看:⽤来切换视图模式以及显⽰、隐藏标尺、⽹格线等辅助视图功能。
插⼊:⽤来插⼊各种元素,例如图⽚、多媒体组件,表格、框架及超级链接等。
修改:具有对页⾯元素修改的功能,例如在表格中插⼊表格,拆分、合并单元格,对其对象等。
⽂本:⽤来对⽂本操作,例如设置⽂本格式等。
命令:所有的附加命令项站点:⽤来创建和管理站点窗⼝:⽤来显⽰和隐藏控制⾯板以及切换⽂档窗⼝帮助:联机帮助功能。