Dreamweaver制作网站实例教程之欧侯瑞魂创作一、界说站点1、在任意一个根目录下创立好一个文件夹（我们这里假设为E 盘）,如取名为MyWeb.***备注：网站中所用的文件都要用英文名.2、翻开Dreamweaver,选择“站点—新建站点”,翻开对话框.在站点名称中输入网站的名称（可用中文）,在本地根文件夹中选择刚才创立的文件夹（E:web）.然后确定即可.***备注：再次翻开Dreamweaver,会自动找到刚才设立的站点.如果有多个站点,可以在菜单“站点—翻开站点”中去选择.二、创立页面1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件”,这样就建好了一个页面,默认的文件名为untitled.htm.htm就暗示这个网页文件是一个静态的HTML文件.给它改名为index.htm.***网站第一页的名字通常是index.htm或index.html.其它页面的名字可以自己取.2、双击index.htm进入该页面的编纂状态.在题目空格里输入网页名称,按右键选页面属性,翻开“页面属性”窗口.在这里可以设置网站的题目、布景颜色或背影图像,超级链接的颜色（一般默认即可）,其他都坚持默认即可.3．此时光标位于左上角,可输入一句话,如“欢迎来到我的主页”.选取文字,用菜单“窗口/属性”翻开属性面板,选取文字年夜小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间.4．如要选取字体,则选择字体中的最后一项：编纂字体列表.然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了.***在网页上最经常使用的是宋体字.不要将特殊的字体加到列表中使用,因为他人电脑上未装就看不到.如果需要用的话,要做成图片后再使用.***在网页上打入空格的法子是：把输入法调为全角.***在网页上换行的法子是：shift+Enter.只按Enter则为换段.三、为页面添加图片1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件夹”,这样建立了一个文件夹,用它来放图片,可以改名为tu或pic或images都可以.2、用菜单“窗口/对象”翻开对象面板,点击“拔出图像”,在对话框里选要拔出的图片.如果会呈现对话框：“你愿意将该文件复制到根文件夹中吗？”,必需选“是”,然后将它保管到刚建好的文件夹里.3、选中该图片,翻开属性面板,可以在上面为图片取名,重新设置图片的高、宽,拖住图片角上的点可以变年夜小.按住shift键,再拖动角上的点,可以使图片坚持宽高比例拉伸.如要恢复这原始年夜小,则单击右下角的“重设年夜小”按钮.4、“链接”可以直接在这里输入地址.“替代”是图片的说明,即鼠标指向图片所显示的文字；“边框”是图片边框宽度,“对齐”是对齐方式.四、添加超级链接1、为文字添加链接.比如,在页面上输入“我的文章”,然后将其选中,翻开属性面板,在“链接”一格中,选择它所要链接到的页面即可.后面一格“目标”我们一般经常使用的是self即翻开的新窗口取代了现开的窗口；或是选择blank即翻开新窗口.2、为图片添加链接与上面文字的链接同理,拔出图片,然后在属性面板中的链接一格中选择即可.****图片可以创立分歧的多个链接.方法如下：在属性面板中的“舆图”一项下面有一些图形,比如点击方形,光标酿成十字,在图片上画一个蓝色矩形的热区,此时在属性面板上可以为这个热区设置链接地址,鼠标指向会显示.同样,再用圆形设置一个热区,就可以再为该图片设置其他链接了.3、添加E-mail链接选中需要添加E-mail链接的文字或图片,翻开属性面板,在“链接”一格中输入填写邮件地址.格式如下：mailto:邮件地址.注意中间不空格.4、如果链接到浏览器无法翻开的文件,例如exe、Zip等文件,那么浏览者在点击这个链接的时候,就会实现文件下载、或是在线播放的功能.五、表格的使用1、点击拔出/表格,翻开表格面板进行设置.行数、列数、宽度、边框等,“单位格填充”为单位格内侧与内容的距离；“单位格间距”为单位格之间的距离,单位均为像素.2、拔出表格后,在表格的边框上点击一下,可以全选整个表格.然后在下面的属性面板里可以进行各种设置.3、把光标移到其中一个单位格,此时看到的属性面板,就是单位格的属性面板.也可以进行各种关于单位格的把持.如布景色、布景图、边框、合并、拆分等.六、关于表格的其他把持一制作细线表格原理：1、选中整个表格,设置其布景为黑色（该颜色即表格线的颜色）.2、选中所有单位格,设置其布景为白色.二自动格式化表格1、先制作好一张表格,然后选中.2、选菜单中的命令/格式化表格.即可以其中选择预设好的一些表格样式.三一像素分割条1、拔出一个1行1列,宽为200像素,边框边距均为0的表格.2、选中表格,设置表格高为1像素,并设置一个布景色（即所要的线条颜色）.3、切换到代码和设计窗口,将代码<td> 删除.七、用表格构建完整的页面一网页顶部（一般包括图标、广告、导航菜单）1、创立一个1行2列,宽为760像素,边框及边距均为0的表格.2、选中表格,设置排列方式为居中对齐,布景色为#3366CC.3、将光标置于左边单位格中,设置其水平排列为左对齐,垂直排列为顶端对齐,然后拔出一张图像,一般在此拔出的是网站的图标,即logo.4、将光标置于右边单位格中,设置其宽度为500,水平排列为居中对齐,垂直排列为中间,然后拔出图像,一般是网页广告,即banner.5、将光标置于刚完成的表格之后,拔出/表格,创立一个1行1列,宽为760像素,边框及边距均为0的表格.6、选中刚创立的表格,设置排列方式为居中对齐,布景色为#005173.7、在该表格中依次拔出多个图像,作为导航条菜单.二网页中部（左边栏目列表、中间网站新闻、右边栏目列表）1、在导航条表格后面,拔出/表格,创立一个1行3列,宽为760像素,边框及边距均为0的表格.并设置排列方式为居中对齐,布景色为#FFFFFFF.2、将光标置于左边单位格中,设置其宽度为18%,水平排列为居中对齐,垂直排列为顶端对齐,然后拔出一张图像,拔出一个导航条.3、将光标置于刚拔出的图片后,拔出/表格,拔出一个12行1列,宽为90%的表格.设置其单位格间距为1,布景色为#CCCCCC.4、将光标放在表格第一个单位中,设置其高为20,布景色为#FFFFFF.拔出/图像,拔出一个导航文字前面的小点.同样设置其他11个单位格,这样左边的栏目分类列表就完成了.5、将光标置于主体表格的中间单位格中,设置其宽度为66%,水平排列为居中对齐,垂直排列为顶端对齐,然后拔出/图像,拔出一个导航条.6、将光标置于图像后,拔出/表格,拔出一个4行1列,宽为95%的表格.设置其单位格间距为1,布景色为#CCCCCC.7、将光标置于表格的第一个单位格中,拖动鼠标,将4个单位格都选中,设置高为60,布景色为#FFFFFF.8、将光标置于主体表格右边的单位格中,设置其宽度为16%,水平排列为居中对齐,垂直排列为顶端对齐,拔出/图像,拔出一个导航条.9、将光标置于图像后,拔出/表格,拔出一个7行一列,宽为90%的表格.设置其间距为1,布景色为#CCCCCC.10、按住Ctrl键,用鼠标点击刚拔出的表格的第1、3、5、7单位格,然后设置它们的高为55,布景色为#FFFFFF.11、选中第2、4、6单位格,设置其高为6,布景色为#FFFFFF.12、切换到源代码窗口,将第2、4、6单位格中的空格符号“ ”删除.三网页底部（一般包括版权信息及其他相关内容）1、将光标置于主体表格后,拔出/表格,创立一个2行2列,宽为760像素,边框及边距均为0的表格.2、选中表格,设置排列方式为居中对齐,布景色为#3366CC.3、将光标置于表格第1行的左边单位格中,设置其宽度为50%,水平排列为默认,垂直排列为基线,布景色为#FFFFFF,然后输入版权信息,内容颜色随便.4、将光标置于表格第1行右边单位格中,拔出/图像,拔出一个圆角图像,在它后面输入Email字样,设置其年夜小和颜色为1和#FFFFFF.5、拔出/表单对象/文本域,拔出一个文本域,宽度可以随意.6、拔出/图像,拔出一个GO的图像.7、设置页属性.点击菜单修改/页面属性,在题目一栏中输入题目,并选择布景图像,将顶部鸿沟设为0.***将整个网页分部份放到分歧的表格中组合而成,还可以加快浏览器读取页面的时间.；因为浏览器是读完整个表格后才显示内容的,所以最好不要框在整个一个表格中.八、用规划表格构建完整的页面1、单击拔出/规划,里面的规划视图按钮,就切换到规划视图状态（默认为标准视图）.也可以用菜单里的检查/表格视图/规划视图来进入.2、先单击绘制规划表格按钮,然后在页面中像绘图一样创立出规划表格.3、就像上一个例子一样,先绘制好网页的顶部,再中部,再底部的年夜表格.4、再单击绘制规划单位格按钮,然后在已经绘制好的规划表格中,再绘制规划单位格.5、返回到标准视图,在已经划分好的表格里,再拔出嵌套的小的表格,把页面再细化,就可以完成整个页面的设计了.****注意把整个页面都放在一个年夜的规划表格中,因为这样的网页浏览速度会很慢.应该依照页面的版面和内容划分出几个规划表格,然后在其中分别拔出规划单位格.九、层的使用1、点击拔出/层.也可以点击图标,然后拖动鼠标创立出一个层.3、选中创立的层,看属性面板.“层编号”和“标签”都使用默认即可.“层编号”是编程时需要用的,我们现在一般不用.“上”即距页面上鸿沟的距离；“左”是距左鸿沟的距离.“z 轴”是层的顺序,数字年夜的叠加在数字小的上面.****如不设置颜色时,层是透明的.4、点中层左上角的小方框可以随意拖动层,年夜小也可以调节.5、“溢出”一栏中,当文字多于层的年夜小时,visible(超越的部份照样显示)、hidden(超越部份隐藏)、scroll(不论有否超越,都显示滚动条)、auto(有超越时才呈现滚动条).6、点击菜单窗口/其他/层,此时将呈现层管理窗口.可以在其中修改层的名称和Z轴值,也可以点击眼睛图标使层可见或不偏见.还有一个防止重叠的选项.7、层的对齐.按住shift键,同时选中几个层.然后用修改/对齐,用这里的选项.8、嵌套层.⑴首先在文档中拔出一个层.⑵将光标置于该层内,然后继续拔出一个层,就获得了嵌套层.⑶里面的叫子层,外面的父层.它们的Z轴顺序是一样的.拖动父层时,子层也会相对移动.移动子层时,父层不会随之移动.十、了解时间轴1、点击菜单中的拔出/层,拔出一个层.2、在层中拔出图片,如一张飞机的图片.（这里的图片也可以是一张小动画的.gif图像）3、点击菜单中的窗口/其他/时间轴,翻开时间轴窗口.4、选中页面上创立的层,用鼠标按住层左上角的小方框图标,将层拖放到时间轴的第1帧中.这时自动创立了一个长度为15帧的时间轴.5、选中时间轴上的第1帧,将页面中的层拖放到页左上角,即动画开始时的位置.6、选中时间轴上第15帧,可以拖动该帧至任意长度,如30帧.7、选中第30帧,将层拖放到页面的右下方,此时窗口中显示出层从第1帧到第30帧的运动轨迹.(此时运动为直线)8、可以点中第15帧,右键选“增加关键帧”,在选中第15帧的状态下,拖动层到页面中下方.9、勾选“自动播放”项.十一、制作滚动公告牌1、在页面上拔出一个层,然后为层设置一个布景,作为公告版的框架.2、然后在创立的层中拔出嵌套层,将嵌套层移动到父层的下方.3、在嵌套层中输入文本,并将其居中排列.4、翻开时间轴面板,将子层作为对象添加到面板中.5、为子层创立一个向上移动的路径,将其移动到父层的上方.6、拖动最后一关键帧,增长动画时间,然后勾选“自动播放”和“循环”两项.7、选定父层,在其属性面板中将“溢出”属性设置为“hidden”.十二、在页面中运用flash动画1、点击拔出中的Flash按钮,即可为页面拔出一个动画.也可以选菜单拔出/媒体/Flash来完成这一步.2、选中已拔出的动画,看属性面板.这里可以设置它的宽、高,也可以通过拖动来改变年夜小.3、可以在这里点击“播放”来预览动画.十三、让拔出的flash动画变透明1、当网页上已经有布景,或是想要在一张图片上再拔出flash动画,而flash动画自己也有布景色,所以会影响美观,这时我们要把它做成透明动画.2、如在页面上拔出一张图像.3、在图像上拔出一个层,在层中拔出好所需要的flash动画.4、选中flash动画,在属性面板中点击“参数”按钮.5、在“参数”的左面一格输入“wmode”.在右面“值”一格输入“transparent”.十四、在页面中播放声音1、在完玉成页面以后,如果要为该页添加布景音乐,注意布景音乐一般是*.midi文件,这样的声音文件十分小,易于快速下载,其他格式不适合作为布景音乐.2、在页面中所有表格之外,（注意此时编纂窗口左下方的标签选择栏中仅显示<body>这一项,或是在左下角点一下<body>,这样才华保证这个行为是添加在整个页面上的）.点击行为窗口上的“+”按钮,（或用菜单窗口/行为,翻开行为窗口.）3、从弹出菜单中选择“播放声音”.翻开一个对话框.4、在这个对话框里用“浏览”选择要播放的声音,并确定.5、这时行为面板上自动显示了事件为onload,举措为播放声音.点击这一行,中间呈现一个按钮.点击按钮,可以设置这个声音在什么事件下播放.可以选择“显示事件”/“IE5.0.6、我们经常使用的如Onload（当页面载入时）、OnClick（单击鼠标）、OnMou搜索引擎优化ver（鼠标移到对象上）、OnUnload(当关闭页面时)等.7、该行为也可以设置在图片上、文字链接上.在文字链接上播放声音之前,先为文字添加一个空链接,即选中文字,在链接一格里输入一个“#”符号.十五、弹出窗口1、首先制作一个准备在小窗口中显示的页面（比如a.htm）,由于这个弹出窗口不能太年夜,所以内容要少一些.2、翻开一个制作好的页面,把光标移到页面中所有我表格以外,点击行为窗口上的“+”按钮,从弹出菜单中选择“翻开浏览器窗口”一项.3、在对话框中里输入相应的设置.要显示的URL即a.htm,窗口宽度和高度自己定,单位为像素.属性中的各项参数需要就打勾.4、设置完毕后,点“确定”.此时行为窗口中将显示翻开浏览窗口这个行为,触发条件为Onload,如果不是要这项,就自己设置.5、该行为也可以设置在图片上、文字链接上..6、可以用这个方法来暗示对浏览者的翻开时的欢迎、网站公告、离开时的告别语等.十六、控制状态栏信息1、翻开页面,选中一张图片.2、点击行为窗口上的“+”号按钮,选择设置文本/设置状态条文本.3、在对话框里的“消息”一栏里,输入需要显示的话,如对这张图片的介绍.4、可以设置行为的触发条件为OnMou搜索引擎优化ver（鼠标移到对象上）,这样当鼠标经过这张图片的时候,状态栏将呈现相关的信息.5、如果需要鼠标在移开后,这个信息消失,那么再次使用这个行为,在“消息”一栏里什么都不写,然后把触发条件改为OnMou搜索引擎优化ut（鼠标移开）.6、同样可以在一段文字上设置该行为.或是设置在整个页面上也可以.十七、弹出信息1、翻开一个制作好的页面,点左下角<body>项.点击行为窗口上的“+”按钮,从弹出菜单中选择“弹出信息”一项.2、在设置窗口中“消息”一栏里输入想显示的消息即可.3、触发条件设置为Onload（当页面载入时）,就可以用来作为翻开页面的欢迎信息.如设为OnUnload(当关闭页面时),就可以作为用户关闭页面时送别信息.4、也可以在某一段文字上设置弹出信息.比如一段文字不愿让人复制,就选中整段文字,注意此时左下角显示〈P〉,即段落.5、然后同样把持,消息可以输入版权之类的语句.只是设置触发条件为OnBeforeCopy（按右键时触发）,或OnCopy （按右键选复制时触发）.十八、静态图片按钮1、准备好两张同样年夜小的图片,经常使用的方法是如一张为灰度照片,一张为黑色照片.或一张是按钮凹下的样式,一张是按钮凸起的样式.2、举例：拔出一个3行1列的表格,设置宽度为180像素.3、将光标置于第一行,拔出一张灰度的图片.4、在属性面板中“链接”一栏里输入需要链接的地址,并给图片加上名称,如tu1.5、点击行为窗口上的“+”按钮,从弹出菜单中选择“交换图像”.6、此时在“图像”一栏中已显示要交换的图像,然后在“庙宇原始档为”一栏里选择好交换后的那张图.7、下面有两个参数,“预先载入图像”和“鼠标滑开时恢复图像”,都要选中.8、同样方法创立另外两个静态按钮.十九、用框架规划页面框架由两个主要部份组成——框架集和单个框架.1、点击拔出中的框架,即显示出已界说的13种框架的样式.我们上—中—下结构为例.2、点击“上—中—下”框架结构的图标,此时在页上拔出上下两个框架,将整个页面分割成了3部份.我们分别在上面输入“上”,在中间输入“中”,在下面输入“下”.3、先保管一下.点击菜单中的文件/保管全部.这时首先保管框架集文件,可以自己修改名字,如kuangjia.htm.然后将分别保管框架集中的其他页面.在保管对应的页面的时候,该部份会以虚线框起来,这样可将上面部份保管为shang.htm.下面部份保管为xia.htm.中间部份保管为zhong.htm.4、至此,我们保管了四个页面,分别是框架集,和组成框架集的上、中、下三个页面.所以,其实这个框架是由四个页面组成的,所以用框架会降低一点用户浏览的速度.5、点击窗口/其他/框架,翻开框架的面板.在这里单击某个框架,即可选中该框架.当框架被选中时,编纂窗口中对应的框架呈现虚线.6、如：选中上面topframe,此时属性面板上显示的是上面这个框架的属性.同样选中中间框架和下面框架,也可以分别设置它们的属性.7、在编纂窗口中,将鼠标放在两框架之间的边框上,光标将酿成上下箭头形,此时点击边框,选中的是整个框架集.8、此时属性面板上呈现的是整个框架组的属性.可以在此设置框架集是否有边框、宽度及颜色等.不外最为重要的是可以在这里设置框架集中各个框架的年夜小.9、在属性面板的右面的图示上选中上面框架,设置它的行为80像素,边框为0.10、选中下面框架,设置行高为30像素,边框为0.11、选中中间框架,设置行高为1,单位为相对.（相对的意思是：以后行相对其他行所占的比例.设为1就是指占据除上和下以后的所有浏览窗口剩余空间.12、举例：将光标置于上面框架topFrame上,右键选页面属性,设置布景色为#FF6600.然后拔出/表格,拔出一个1行2列,边框边距都为0的表格.设置第1个单位格的宽度为116像素,然后拔出一张图片.将第2个单位格设置为水平对齐方式为居中,垂直排列方式为底部,然后依次输入“狮子座”、“魔蝎座”、“双子座”字样.13、将光标置于中部框架mainFrame中,右键选页面属性,设置布景色为#FFFFCC.然后拔出一张年夜图像.14、将光标置于下面框架bottomFrame中,右键选页面属性,设置一个布景图像.15、另外做好三个页面,作为“狮子座”、“魔蝎座”、“双子座”所要链接的页面.16、选中“狮子座”,在属性中为它设置好要链接的页面,然后在“目标”里选“mainframe”,即该内容在中间那个框架中显示.17、同样设置“魔蝎座”、“双子座”的链接.二十、跳转菜单1、点击主菜单中的拔出/表单对象/跳转菜单,也可以用拔出/表单,中的跳转菜单图标,来调出跳转菜单设置窗口.2、首先在“文本”一栏里输入“请选择相关网站”字样.然后点击窗口上的“+”号按钮.这时菜单里多了一个选项,这个选项没有链接,仅作为跳转菜单的说明文字.3、在文一栏里输入需要的网站,如“新浪”,然后在“选择时,前往URL”一栏里输入网站链接地址,此时,菜单项一栏里又多了一个选项,这个选项对应一个网的链接地址.4、使用同样方法,在菜单中添加其他一些选项及对应的链接.还可以用“上”“下”的按钮,来调整它们的顺序.5、设置窗口的“菜单之后拔出前往按钮”一项先不要选择.选中“更改URL后选择第一个项目”一项,这样当使用跳转菜单到某个页面后,如果返回到跳转菜单页面,此时页面中的跳转菜单默认显示的依旧是第1项内容.6、设置完毕后点击“确定”即可.****因为跳转菜单是一个表单,所以其实是先拔出了表单（红色虚线区域）,然后在表单中再拔出了下拉菜单.7、想修改选项,可以选中页面上的下拦菜单,此时点击属性面板中的“列表值”,即可修改各项内容了.8、被选中跳转菜单时,行为窗口中也呈现行为.双击该行为,也可以进入设置窗口,可以重新对其进行设置.9、如果“菜单项”里的第一项就是链接,而不是上面所说的一句提示的话,那么就要选中“选项“中的“菜单之后拔出前往按钮”.添加一个“前往”按钮.二十一、运用插件（Dreamweaver功能扩展）1、首先下载好需要的插件,此处举例用的是Animate Browser Window.这是一个静态改变窗口的年夜小的插件.翻开Dreamweaver Extension Manager,装置下载好的插件.2、启动Dreamweaver,在做好的页面上,右击左下角〈body>,然后点击行为窗口中的“+”号按钮,在其中选择“Animate Browser Window”,然后在其中做相应的设置.这里设置窗口翻开之前高宽均为0,翻开后为填满屏幕.触发条件为onLoad.二十二、滚动字幕1、把光标拔出点放在需要拔出滚动字幕的处所.2、点击拔出头具名板的“标签选择器”.3、选择 marquee标签,点击“拔出”按钮.然后关闭“标签选择器”.4、转换到代码视图.把光标拔出点放在两个marquee标签之间.5、选择“窗口”/“标签检查器”.可以在“标签检查器”中设置标签的各种用法.6、点击behavior 设置项右边的下拉箭头,选择滚动字幕内容的运动方式.其中三个选项意思分别是：Alternate：内容在相反两个方向滚来滚去.Scroll：内容向同一个方向滚动.Slide：内容接触到字幕边框就停止滚动.7、direction属性设置字幕内容的滚动方向.四个选项意思为：down：向下运动.Left：向左运动.Right：向右运动.Up：向上运动.8、scrollamount属性设置字幕滚动的速度.一般设为1.9、scrolldelay属性设置字幕内容滚动时停顿的时间,单位为毫秒.如果要让滚动看起来流畅,数值应该尽量小.实例中设置为1毫秒.10、width属性设置滚动字幕的宽度.这个任意,比如设置为300.11、onMou搜索引擎优化ver事件设置鼠标移动到滚动字幕时的举措,常设置为停止滚动.onMou搜索引擎优化ut事件设置鼠标离开滚动字幕时的举措,常设置为开始滚动.这个两项不。
![课堂案例——个人网站_网页设计与制作——Dreamweaver CS5标准教程_[共2页]](https://img.taocdn.com/s1/m/8f30bd0fd15abe23492f4d82.png)
