用dreamweaver教程8.0制作一个简易网站

Dreamweaver CS5网页制作教程
授课讲师:
软件版本:
Dreamweaver CS5中文版
教程程度:
所需基础:
熟悉电脑操作
交流提问:
适合人群:
网页制作初学者
相关素材:
课程光盘:
313429 3274739 2080218 1875532 1687489 1399565 1443020 1095544 874312 725595 124571 1350793 929169 844388 830228 793808 747963 803428 832519 710437 607728 709960 92745 924565 655662 646867 594650 536842 546689 683019
论坛最新主题
您可能感兴趣的课程
网页三剑客进行网页设计,并用iis+Access+Asp实现动态网站。
从基础学习名片,宣传单张,网站,海报,画册,户外广告,包装等等。
讲解CSS+DIV的应用、JavaScript及Ajax开发更生动的网页。
生动的实例将向您展示ASP.NET的强大,带您走进Web开发的世界。
赞助商链接
兴趣圈成员Dreamweaver8.0高清教程-教您学习利用Dreamweaver 去开发ASP动态网站 助您成为一名网站制作高手-软件应用视频-星火视频教程 21edu8.com
&&&&&&&&&&&&&&&Dreamweaver8.0高清教程
名称:Dreamweaver8.0高清教程分类:软件应用主讲:&&&&TAG:&&&&时间: 11:34收藏:&&
Dreamweaver8.0高清教程相关介绍
  Dreamweaver是当前最流行的网站开发工具之一,我们提供的这部Dreamweaver8.0高清教程以目前最为常用的网络应用程序为案例,详细的讲解了在没有任何编成基础的前提下,如何利用Dreamweaver 去开发ASP动态网站。认真观看并跟随学习您一定会成为一名网站制作高手。  Dreamweaver可以用最快速的方式将Fireworks,FreeHand,或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单,快捷键与格式控制,都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具,如Playback Flash,Shockwave和外挂模组等搭配,不需离开Dreamweaver便可完成,整体运用流程自然顺畅。除此之外,只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。  Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组,Dreamweaver 支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给Third-party厂商,包含ASP, Apache,BroadVision, Cold Fusion,iCAT, Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时,所见即所得的功能,让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开,应用于快速网页更新和团队合作网页编辑。建立网页外观的样版,指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页,可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果,声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能,Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时,只要从Dreamweaver的网站在下载它的描述档,便可得知详尽的成效报告。  使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称,Dreamweaver 会自动更新所有链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
┆ 版权所有:星火视频教程网 | 苏ICP备号 | Email:njjqs.com金桦勇高中信息技术工作室
当前位置:&&
DREAMWEAVER 8.0 网页制作教案(一)
上传: 刘睿邦 &&&&更新时间: 16:11:36
一、网站的基本概述 & (一)、网页:网页是计算机连接网络时浏览器窗口中显示的一个页面,是计算机网络最基本的信息单位,它实际是一个文件,存放在世界某个角落的某一台计算机中,当我们在浏览器输入网址后,网页文件会被传送到你的计算机,这样就可以利用网页来访问计算机了。 &&&&& 网页分类:(1)静态网页:网页中包含文字、图片、动画、视音频。 (2)动态网页:网页中包含文字、图片、动画、视音频以及交互功能.
(两者的主要区别:是否包含交互功能)& 例: 网站:是众多网页的集合。 & (二)、网页的基本构成元素: 包含图片,文字,超级链接,动画,表单,视频音频等元素中的一种或多种 & (三)、网页的页面设计: (1)、网页布局:网页布局是根据你所设计网站类型而设计的,不同的网站有不同的风格,一般包括了标题栏,页眉区(通常包含网站标志),导航区,正文区、页脚。& 例: (2)、配色原则:网页设计要达到赏心悦目的目的,需要注意色彩的搭配与风格的设计。例: (3)、版面编排:例: 版面既要有美感又要实用,美感是令人感觉舒服的主要因素之一,但美感是要为内容服务的,所以版面的编排要注意各部分内容的比例关系,也就是 &经营位置&。作为一种版面,既有文字,又有图片。文字有大有小,还有标题和正文之分;图片也有大小,而且有横有竖之别。图片和文字都需要同时展示,不能简单地罗列在一个页面上,这样往往会搞得杂乱无章。必须根据内容的需要,将图片和文字按照一定的次序进行合理的编排和布局,使它们组成一个有机的整体。可以依据如下几条来做: 1.主次分明,中心突出。在一个页面上,必然考虑视觉的中心,这个中心一般在屏幕的中央,或者在中间偏上的部位。因此,一些重要的文章和图片一般可以安排在这个部位,在视觉中心以外的地方就可以安排那些稍微次要的内容,这样在页面上就突出了重点,做到了主次有别。 2.大小搭配,相互呼应。较长的文章或标题,不要编排在一起,要有一定的距离,同样,较短的文章,也不能编排在一起。对待图片的安排也是这样,要互相错开,造成大小之间有一定的间隔,这样可以使页面错落有致,避免重心的偏离。 3.图文并茂,相得益彰。文字和图片具有一种相互补充的视觉关系,页面上文字太多,就显得沉闷,缺乏生气。页面上图片太多,缺少文字,必然就会减少页面的信息容量。因此,最理想的效果是文字与图片的密切配合,互为衬托,既能活跃页面,又使主页有丰富的内容。 & (四)网站设计的原则 (1) 网站主题和内容明确。 (2) 网页色调和谐,布局清晰。 (3) 网站方便易用,提供有效的导航条,使人很容易从每一页上访问到网站的任何部分,最好在每一个网页同样的位置上都有相同的导航条。 (4)避免长文本页面,每一个网页的高度不能超过三倍的浏览器高度,避免使用过大的图像,不要使用横滚动条。 (5) 避免错误链接,保证链接有效。 二、如何策划一个网站(制作网站的目的以及如何实现) 步骤:
给网站定位,确定网站的性质 给出网站的主题和名称(例如求职,聊天,社区,计算机技术,网站开发,娱乐,旅行)
确定网站的栏目:也就是导航区的内容,栏目的实质是一个网站的大纲索引,所以应该将网站的主体明确的显示出来,栏目要主体突出。
确定网站的目录和链接结构 ,画出网站的目录结构图。
绘制首页网页的布局:如:圣诞节网站,见网页例子:网页表格布局.htm
5、根据你的网站构思准备素材(文字、图片、动画、视频音频等元素).在你的文件夹下面分别建立images 和txt 、others三个文件夹存放你的素材。 三、dreamweaver 软件的启动
& & 四、dreamweaver 8.0操作界面
dreamweaver 8.0操作界面 & (一)工作区的组成结构: (二)、dreamweaver面板和面板组: (三)菜单栏中各个菜单的基本作用:
文件:包括对文件的各种操作。
编辑:包含了对文件的拷贝,粘贴,查找与替换等命令。
查看:使用查看菜单可以查看文档的相关内容。
插入:用于将对象插入文档中。包括图片&img&标记、flash动画、视频、表格、超级链接、日期、水平线等:属性可以在属性面板中进行可视化设置
修改:可以使用修改菜单更改选定页面元素的属性。
文本:可以设置文本的格式,如段落格式、字体、文本环绕排版及停止文本环绕等。
命令:提供各种命令的访问。
站点:提供用于管理站点以及上传和下载文件的菜单项,可以创建站点和对& 已有站点进行编辑
窗口:提供对dreamweaver中的所有面板,检查器和窗口的访问。
帮助:提供了对dreamweaver文档的访问。 & 五、定义一个站点 举例: (一)、定义一个站点 &&& 在正式开始制作网页之前,最好先定义一个新网站,这是为了更好地利用站点窗口对站点文件进行管理,也可以尽可能的减少一些错误的出现,如路径出错,链接出错。我提倡的做法是:建立一个文件夹用于存放网站的所有文件,再在文件内建立几个文件夹,将文件分类,如图片文件放在images文件夹内,html文件放在站点文件夹内。 文件的命名也是非常重要的,不要随便乱起些名字,最好做到一看文件的名字就知道是什么内容的网页文件。提倡用英文或者拼音给文件命名,不要使用中文的名字,因为有的浏览器对中文支持不太好,有可能出现链接的错误。 & 定义站点的步骤: 1、 启动dreamweaver 8.0中,在菜单栏中选择站点&管理站点。 在弹出的管理站点对话框中,点击新建 。& 接下来需要给站点起一个名字,输入您网站的名字,可以定义中文名。
这里起名为dreamweaver学习网站,按下一步 2、按下一步按钮,选择是否使用服务器技术。因为实例建立的是一个静态站点,就选择&否,我不想使用服务器技术&。 3、按下一步按钮,因为要传到网上的虚拟主页空间,就要选择&编辑我的计算机上的本地副本,完成后再传到服务器上&。 4、按下一步,选择要定义的本地根文件夹,这里选择d或e盘中你的文件夹,点&选择&按钮,因为没有使用远程服务器,就选择&无&。按下一步
5、按完成按钮,一个站点就定义好了。 6、打开文件面板(窗口&文件),在您的站点文件中新建三个文件夹,用于存放与站点有关的图片等文件,分别是命名为images、txt、others。 & 新建五个网页文件,分别命名为: index.html、kcjs.html、kcxx.html、yxzp.html、sczy.html 打开d盘看看你刚刚建立网站的文件。
素材文件名和网页文件名必须用英文或英文状态下的数字,不能使用中文 练习1:在dreamweaver 中定义一个站点,文件夹放在d 盘的目录下。 六、常用功能介绍 (一)、表格的使用:
制作网页数据表格:熟悉表格的插入、合并、拆分与嵌套;表格的制作..htm
表格的基本构成标记 :&table&&tr&&td&&/td&&/tr&&/table&   (1)创建表格:   第一步:在dreamweaver 8.0中运行&插入&表格&命令,弹出属性设置窗口,添入插入表格的行数、列数、表格的宽度,根据自己的需要来设置表格的相应属性即可。 &   小提示:表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义,比如设置宽度为窗口宽度的100%,那么当浏览器窗口大小变化的时候表格的宽度也随之变化;而如果设置宽度为500像素,那么无论浏览器窗口大小为多少,表格的宽度都不会变化。 & 第二步:点击窗口中的&ok&按钮之后即可在dreamweaver 8.0中新建一个表格,而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、表格的背景图片(介绍如何插入横铺垫、竖铺垫、不重复的背景图片)、色单元格的对齐方式等参数进行调整。 & 用标签选择器选择表格,将光标定位在表格的第一个单元格内,可以看到状态栏左侧的标签选择器处显示为 &{body}{table}{tr}{td}&,其中table表示表格,tr表示表格中的行,td表示单元格,现在td被加粗显示,说明光标处在单元格内。单击一下{table},标签选择器处显示为&{body}{table}{tr}{td}&(如下图),再看编辑区内的表格,表格周围为一圈黑线,表示表格被选中了,四周还有几个黑色的小方块,是表格拖放手柄,可以用来改变表格的大小。
   (2)基本使用(举例说明:表格的制作..htm)   & 步骤:   第一步:先插入一个9行3列的表格;   第二步:选中表格中第二行第二列的单元格,接着点击属性模板中的&拆分单元格&按钮,这样就把选中的单元格拆分为二个单元格,按照同样的方法再将表格中其他需要拆分的单元格拆分。 &   第三步:选中表格中第九行中第二列和第三列的单元格,接着点击属性模板中的&合并单元格&按钮,这样就把选中的两个单元格合并成为一个单元格,按照同样的方法再将表格中其他需要合并的单元格合并。 &   第四步:将表格第九行的三个单元格全部选中,再将属性模板中的背景颜色(bg)一项设置为&#ffff00&,这样表格第一列中的单元格背景全部变为黄色。 &   第五步:在表格中输入相应的文本,为了美观可以在属性面板中进行居中设置。 &   第六步:为了使表格产生立体效果,可以将整个表格选中,然后在属性面板中设定表格边框的宽度(border)为7,并且将边框颜色(border color)设置为灰色即可。 &  小提示:选取整个表格常用的方法:1.把鼠标移动到表格右边界外侧,按下鼠标之后往左拖拽,这样可以快速选取整个表格。2.在单元格中右击鼠标,并且从弹出菜单中选择&表格&选择表格&命令选取整个表格。3.用鼠标点击任一个单元格,接着按两下&ctrl+a&组合按钮选取整个表格。    完成上述操作之后,我们就可以在dreamweaver 8.0中定制出颇具专业水准的表格了。 练习2、新建一个网页,在网页中插入一个3行3列的表格,设置表格属性 (边框和背景颜色),试着对目标行和列进行拆分、合并及新增表格的操作。
&   (3)利用表格来定位网页 表格在网页布局中有着举足轻重的地位,很多网站的页面都是以表格为框架制作的,这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能,灵活、熟练地使用表格,会使你在网页制作中如虎添翼。 表格的网页定位主要通过将网页内容分成若干个区,然后将相应的内容分别填入不同的表格,从而做成非常规范与专业的网页,下面就来看看dreamweaver学习网站是如何通过表格实现网页布局的。 表格定位网页:如index_wlr.html& 是一个只含表格的网页。
为方便网站能在在800&600分辨率下会显示正常,无横滚动条,我们编辑的网页宽度就定为750象素,高度可以大些,在浏览器中显示时会有竖直滚动条。 & & 总体布局:在菜单栏选择插入命令,下拉的菜单中选择表格,在弹出的对话框中选择一个,宽为750像素,1行1列的表格,并设置边框粗细、单元格边距、单元格间距均为0; & 页眉区: 观察到网页最上部是页眉区,页眉区可以放嵌套一行一列的表格,用于放置一个宽为750高的图片文件或flash文件; & 导航区:嵌套一行五列的表格,用于放置五个导航; & 正文区:正文区总得说来是由一个一行二列的大表格构建而成,所以首先插入一个一行二列的表格,在左边一列的单元格中插入一个16行1列的表格,在右边一列的单元格中插入一个7行3列的表格。 布局页脚:网脚是由一个大的表格组成,可以插入一个1行1列的表格,表格的宽设置为750象素。 & 练习3、打开dreamweaver学习网站站点的index.html文件,设置页面属性,并利用表格定位网页,保存网页。 & (二)文字的插入& 介绍编辑字体列表。 注意:在网页上打入空格的办法是:把输入法调为全角。 在网页上换行的办法是:shift+enter。只按enter则为换段。 & (三)图片插入:设置图片对齐方式,使文本产生环绕效果。 例如:建立文本环绕右边:&img src=&pconline.gif& align=&left&&、停止文本环绕: 在文字代码中插入&br clear=& left&& & (四)插入水平线:&& 它的颜色设置要通过代码设置,宽和高可以通过属性面板 &hr color=&#00ffcc& width=&233& size=&9&& (五)页面属性的设置:在编辑网页之前,先对页面属性进行设置,便于保证网页风格的统一,当然,页面属性的设置是随时可以进行的。举例:在标题上输入:dreamweaver学习网站,在背景,文本,链接,访问过的链接,活动链接几部分选取颜色。设置左边界,顶部边界,边界宽度,边界高度都为0象素,可以使页面中的表格与背景没有空隙。如果不设置边界,顶部边界,就会默认表格与顶部和边界有明显的空隙 用得比较多的还有背景图像的设置,选择一个已经做好的图像,就可以设置成页面的背景图像。 页面属性设置完毕后,我们会发现代码窗口出现了如下代码(黑色部分): body { &&&&&& margin-top: 0 &&&&&&&&&&&&&&&&&&&&&页面顶部边界为0 &&&&&& background-image: url(images/dt.gif);&&&& 页面背景图像 &&&&&& } a:link { &&&&&& text-decoration: &&&&&& color: #666666; } a:visited { &&&&&& text-decoration: &&&&&& color: #3333 } a:hover { &&&&&& text-decoration: &&&&&& color: #660000; } a:active { &&&&&& text-decoration: &&&&&& color: #ccff33; } body,td,th { &&&&&& font-size: 12 &&&&&& color: #666666; font-family: 宋体; line-height: 20& &行距(需要在代码区设置,它的大小应该比文字大小要大,否则会吃掉一部分字体。) } & 练习4、试在练习3中建立的网页文件index.htm中练习插入文本、插入水平线、图片并设置图片的垂直边距和水平边距、设置页面属性。 & (六)日期的插入:在插入栏选择日期,在弹出的对话框中选择显示的格式。 (七)e_mail链接的插入:在插入栏选择电子邮件链接,在文本中输入要显示的文本,在e_mail中输入需要链接的邮件地址。 (八)交换图象效果的制作:(插入&图像对象&鼠标经过图象)   鼠标经过图象的效果是当鼠标指针经过或者按下按钮的时候,图像或按钮的形状或颜色就会发生变化,如图像变换,发光,或者阴影出现等等。是网页变的生动活泼起来。   看dreamweaver学习网站导航演示:鼠标移动到图片上的时候,图片变成了另外一幅,当鼠标移开后恢复到原来的图象。 & 制作步骤:   1、光标移动到欲插入的位置,点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框:
& &   【图像名称】鼠标经过图像的名称,名称是自定义的,只要不与同页面另一个鼠标经过图像名称相同即可,也可以不填。 【原始图像】页面开始时显示的图像 【鼠标经过图像】鼠标经过的时候显示的图像。 【替换文本】图像无法正常显示的时候出现的文本注释,也是图像正常显示时鼠标指向链接时的说明,也可以不填。 【前往的url】点击鼠标后链接的目标。 【预载鼠标经过图像】浏览网页时两个图片都同时被下载,当鼠标经过时无需从网上下载,而是调用预先下载的图像,减少延迟,使效果平滑流畅。 (九)flash动画插入 、 flash按钮的插入 、flash文本的插入,可以来制作导航栏。 & 练习5、试在练习3中建立的网页文件index.htm中练习插入插入水平线、flash动画、flash按钮、日期、交换图象 & (十)了解简单的html:超文本标志语言,简要的介绍网页中使用的超文本标识语言html的基本概念和用途通过一个简单的html示例(html.html)了解html的基本构成,介绍html的基本组成部分. 如果深入了解可以参考: & (十一)制作滚动的公告文字 在网页上可以方便地设置文字上下左右移动,控制文字移动的标点词&marquee&,如下格式:   &marquee&文字在移动&/marquee&   在浏览器中显示时,文字在移动这几个字左右移动。&marquee&还有一些重要的属性。   dirrction:控制移动方向,可取left,right,up,down四个值;   behavior:移动方向,可取scroll (循环移动),slide(只走一圈),alternate(来回移动);   loop:指定循环次数,不输入或-1表示无限循环   height,width:移动区域的高和宽,单位像素   scrollamount:移动的快慢,整数越大则越快   scorlldelay:每移动一步之后的延时,单位毫米    bgcolor:移动区域的背景色   onmouseover=this.stop() 鼠标覆盖时停止滚动 &&& onmouseout=this.start() 鼠标离开时开始滚动   如下面的代码就上一个常见的实现向上滚动文字的原代码;   &marquee direction=&up& behavior=&scroll& loop=&-1& width=&200& height=&150& scrollamount=&1& scrolldelay=&1& onmouseover=&this.stop();& onmouseout=&this.start();&& 祝您圣诞快乐!!!  &/marquee& & (十二)创建网站相册: 在你站点下建立一个放置数张图片的文件夹,本实例是将文件夹命名为photo。 练习6、试在练习4中建立的网页文件index.html中制作制作滚动的公告文字 & 您的网站初步构思 & &&&&&&&&& 1、 网站的主题和名称: & &&&&& &&&&&2、网站的栏目(也就是导航区的内容): & 3、网站的目录结构图: & & & & & & 4、网站的链接结构结构图: & & & & & & & & & 5、绘制首页网页的布局草图 &
评论:(未激活和未注册用户评论需审核后才能显示!如需回复,请留下联系方式!)
文明上网,理智发言制作网站必备:Dreamweaver V8.0官方简体中文版下载 | 侠客岛当前位置: >
Dreamweaver8.0教程8-制作框架网站
阅读工具:字体:
  框架是网页中经常使用的页面设计方式,框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域,实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作,让网站的结构更加清晰,而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面,作为框架结构的一个子框架的内容给整个网站公用。
   一个框架结构有两部分网页文件构成:
   框架(Frame):框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。
   框架集(Frameset):框架集也是一个网页文件,它将一个窗口通过行和列的方式分割成多个框架,框架的多少根据具体有多少网页来决定,每个框架中要显示的就是不同的网页文件。
   一、创建框架
   在创建框架集或使用框架前,通过选择&查看/可视化助理/框架边框&命令,使框架边框在文档窗口的设计视图中可见。
   1、使用预制框架集
   (1)、新建一个HTML文件,在快捷工具栏选择&布局&,单击 &框架&按钮,在弹出的下拉菜单中选择&顶部和嵌套的左侧框架&。
  (2)、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动,直至合适的位置,这样顶部和嵌套的左侧框架就完成了。
  2、鼠标拖动创建框架
  (1)、新建普通网页,命名后将其打开。
  (2)、把鼠标放到框架边框上,出现双箭头光标时拖拽框架边框,可以垂直或水平分割网页。
  二、、保存框架
   每一个框架都有一个框架名称,可以用默认的框架名称,也可以在属性面板修改名称,我们采用系统默认的框架名称topFrame(上方)、leftFrame(左侧)、mainFrame(右侧)。
   选择菜单栏&文件&保存全部,将框架集保存为index.html,上方框架保存为07.html,左侧框架保存为08.html,右侧框架保存为09.html。
   这个步骤虽然简单,但是很关键,只有将总框架集和各个框架保存在本地站点根目录下,才能保证浏览页面时显示正常。
   三、 编辑框架式网页
   虽然框架式网页把屏幕分割成几个窗口,每个框架(窗口)中放置一个普通的网页,但是编辑框架式网页时,要把整个编辑窗口当作一个网页来编辑,插入的网页元素位于哪个框架,就保存在哪个框架的网页中。框架的大小可以随意修改。
   1、 改变框架大小
   用鼠标拖拽框架边框可随意改变框架大小。
   2、 删除框架
   用鼠标把框架边框拖拽到父框架的边框上,可删除框架。
   3、设置框架属性
   设置框架属性时,必须先选中框架。选择框架方法如下:
   选择菜单栏&窗口&框架,打开框架面板,单击某个框架,即可选中该框架。
   在编辑窗口某个框架内按住Alt键并单击鼠标,即可选择该框架。当一个框架被选择时,它的边框带有点线轮廓
  2. 设置框架属性
   选中框架,在属性面板上可以设置框架属性:框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。
   需要注意的是:1、框架是不可以合并的。2、在创建链接时要用到框架名称,所以我们要很清楚的知道每个框架对应的框架名。
   四、在框架中使用超级链接
   在框架式网页中制作超级链接时,一定要设置链接的目标属性,为链接的目标文档指定显示窗口。链接目标较远(其他网站)时,一般放在新窗口,在导航条上创建链接时,一般将目标文档放在另一个框架中显示(当页面较小时)或全屏幕显示(当页面较大时)。
   &目标&下拉菜单中的选项:
   * _blank 放在新窗口中。
   * _parent 放到父框架集或包含该链接的框架窗口中。
   * _self 放在相同窗口中(默认窗口无须指定)。
   * _top 放到整个浏览器窗口并删除所有框架。
   在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后,在目标下拉菜单中,还会出现mainFrame、leftFrame、topFrame选项:
   * mainFrame 放到名为mainFrame的框架中。
   * leftFrame 放到名为leftFrame的框架中。
   * topFrame放到名为topFrame的框架中。
  五、制作框架页面
   1、选择菜单栏&窗口&框架,打开框架面板,选中整个框架集,如下图所示:
  在属性面板中,将行的值设置为100,单位为像素,如下图所示:
  2、选择菜单栏&窗口&框架,打开框架面板,选中子框架集,如下图所示:
  在属性面板中,将列的值设置为200,单位为像素,如下图所示:
  这样,我们就完成了对整个框架的布局。下面我们来布局各个框架页面。
   3、鼠标在topFrame框架中的空白处点击一下,我们会看见文档窗口上方的文件名变为了07.html。在页面属性中将上、下、左。右边距全部设为0。
   插入一个1行2列的表格,宽度为100%,高度为100px,左单元格宽度为382px并插入背景图片img/103.jpg,设置表格的背景颜色为103.jpg图片右边缘的绿色(用吸管吸取)。
   4、鼠标在leftFrame框架中的空白处点击一下,我们会看见文档窗口上方的文件名变为了08.html,在页面属性中将上、下、左。右边距全部设为0。
   插入一个6行1列 的表格,表格宽度为95%,居中对齐。将第一个单元格的高度设为20px,选中其余单元格将高度设置为50px。分别输入文字设置导航栏目。
  分别对各个导航栏目建立链接关系,链接路径指向要链接到的网页,目标选择mainFrame框架。
   5、鼠标在mainFrame框架中的空白处点击一下,我们会看见文档窗口上方的文件名变为了09.html,在页面属性中将上、下、左。右边距全部设为0。
   自己设置一个欢迎页面。
  至此,我们完成了一个框架网站的制作。
(责任编辑:大宝库)
------分隔线----------------------------
写在前面的话,各位网友制作爱好者,今天是日,中华人民共和国成礼60周年...
在发布网站之前先使用Dreamweaver MX 2004 站点管理器对你的网站文件进行检查和整理,...
Macromedia DreamweaverMX 2004提供了更多功能强劲的可视化设计工具、应用开发环境以...
赞助商链接
赞助商链接}

我要回帖

更多关于 dreamweaver教程 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信