如何应用dreamweaver制做网页页面实例教程 dw建网站

2021-03-19 17:30 jianzhan

Dreamweaver这1款技术专业的网页页面制做手机软件,坚信有关技术专业的人员都不容易生疏。能够说,它是第1套对于技术专业网页页面设计方案师非常发展趋势的视觉效果化网页页面开发设计专用工具,运用它能够易如反掌地制做出超越服务平台限定和超越访问器限定的填满动感的网页页面。

这里西西给大伙儿带来1个dreamweaver制做网页页面的实例教程,初学DW的盆友能够参照1下。

1、界定站点

1、 在随意1个根文件目录下建立好1个文档夹(大家这里假定为E盘),如取名字为MyWeb。

***备注:网站中所用的文档都要用英文名。

2、开启Dreamweaver,挑选“站点—新建网站点”,开启会话框。在站点名字中键入网站的名字(能用汉语),在当地根文档夹选中择刚刚建立的文档夹(E:web)。随后明确便可。

***备注:再度开启Dreamweaver,会全自动寻找刚刚开设的站点。假如有好几个站点,能够在菜单“站点—开启站点”中去挑选。

2、建立网页页面

1、在当地文档夹E:\MyWeb下面的空白处,按右键选“新建文档”,这样就建好了1个网页页面,默认设置的文档名为untitled.htm。htm就表明这个网页页面文档是1个静态数据的HTML文档。给它改名为index.htm。

***网站第1页的姓名一般是index.htm或index.html。其它网页页面的姓名能够自身取。

2、双击鼠标index.htm进到该网页页面的编写情况。在题目空格里键入网页页面名字,按右键选网页页面特性,开启“网页页面特性”对话框。在这里能够设定网站的题目、情况色调或背影图象,非常连接的色调(1般默认设置便可),别的都维持默认设置便可。

3.此岁月标坐落于左上角,可键入1句话,如“欢迎来到我的首页”。选择文本,用菜单“对话框/特性”开启特性面板,选择文本尺寸为6,再使文本垂直居中,随后在文本前用几个回车使其坐落于网页页面正中间。

4.如要选择字体样式,则挑选字体样式中的最终1项:编写字体样式目录。随后在会话框选中+号,接着在“能用字体样式”栏选中择必须添加到字体样式目录中的1种字体样式,点一下正中间的按钮便可以添加了。

***在网页页面上最常见的是宋体字。不必将独特的字体样式加到目录中应用,由于他人电脑上上未装就看不见。假如必须用的话,要做成照片后再应用。

***在网页页面上打入空格的方法是:把键入法调为全角。

***在网页页面上换行的方法是:shift+Enter。只按Enter则为换段。

3、为网页页面加上照片

1、在当地文档夹E:\MyWeb下面的空白处,按右键选“新建文档夹”,这样创建了1个文档夹,用它来放照片,能够改名为tu或pic或images都可以以。

2、用菜单“对话框/目标”开启目标面板,点一下“插进图象”,在会话框里选要插进的照片。假如会出現会话框:“你想要将该文档拷贝到根文档夹中吗?”,务必选“是”,随后将它储存到刚建好的文档夹里。

3、选定该照片,开启特性面板,能够在上面为照片取名字,再次设定照片的高、宽,拖住照片角上的点能够增大小。按住shift键,再拖拽角上的点,可使照片维持宽高占比拉伸。如要修复这初始尺寸,则点击右下角的“更改尺寸”按钮。

4、 “连接”能够立即在这里键入详细地址。“取代”是照片的表明,即电脑鼠标指向照片所显示信息的文本;“边框”是照片边框宽度,“对齐”是对齐方法。

4、加上非常连接

1、为文本加上连接。

例如,在网页页面上键入“我的文章内容”,随后将其选定,开启特性面板,在“连接”1格中,挑选它所要连接到的网页页面便可。后边1格“总体目标”大家1般常见的是self即开启的新对话框替代了现开的对话框;或是挑选blank即开启新对话框。

2、为照片加上连接

与上面文本的连接同理,插进照片,随后在特性面板中的连接1格选中择便可。

****照片能够建立不一样的好几个连接。方式以下:

在特性面板中的“地形图”1项下面有1些图型,例如点一下方形,光标变为10字,在照片上画1个蓝色矩形框的热区,此时在特性面板上能够为这个热区设定连接详细地址,电脑鼠标指向会显示信息。一样,再用圆形设定1个热区,便可以再为该照片设定别的连接了。

3、加上E-mail连接

选定必须加上E-mail连接的文本或照片,开启特性面板,在“连接”1格中键入填写电子邮件详细地址。文件格式以下:mailto:电子邮件详细地址。留意正中间不空格。

4、假如连接到访问器没法开启的文档,比如exe、Zip等文档,那末访问者在点一下这个连接的情况下,就会完成文档免费下载、或是线上播发的作用。

5、报表的应用

1、点一下插进/报表,开启报表面板开展设定。行数、列数、宽度、边框等,“模块格填充”为模块格里侧与內容的间距;“模块格间隔”为模块格之间的间距,企业均为像素。

2、插进报表后,在报表的边框上点一下1下,能够全选全部报表。随后在下面的特性面板里能够开展各种各样设定。

3、把光标移到在其中1个模块格,此时看到的特性面板,便是模块格的特性面板。还可以开展各种各样有关模块格的实际操作。如情况色、情况图、边框、合拼、拆分等。

6、有关报表的别的实际操作

1制做细线报表 基本原理:

1、选定全部报表,设定其情况为黑色(该色调即报表线的色调)。

2、选定全部模块格,设定其情况为白色。

2全自动文件格式化报表

1、先制做好1张报表,随后选定。

2、选菜单中的指令/文件格式化报表。便可以在其中挑选预设好的1些报表款式。

31像素切分条

1、插进1个1行1列,宽为200像素,边框边距均为0的报表。

2、选定报表,设定报表高为1像素,并设定1个情况色(即所要的线条色调)。

3、切换到编码和设计方案对话框,将编码<td> 删掉。

7、用报表搭建详细的网页页面

1网页页面顶部(1般包含标志、广告宣传、导航栏菜单)

1、建立1个1行2列,宽为760像素,边框及边距均为0的报表。

2、选定报表,设定排序方法为垂直居中对齐,情况色为#3366CC。

3、将光标置于左侧模块格中,设定其水平排序为左对齐,竖直排序为顶端对齐,随后插进1张图象,1般在此插进的是网站的标志,即logo。

4、将光标置于右侧模块格中,设定其宽度为500,水平排序为垂直居中对齐,竖直排序为正中间,随后插进图象,1般是网页页面广告宣传,即banner。

5、将光标置于刚进行的报表以后,插进/报表,建立1个1行1列,宽为760像素,边框及边距均为0的报表。

6、选定刚建立的报表,设定排序方法为垂直居中对齐,情况色为#005173。

7、在该报表中先后插进好几个图象,做为导航栏条菜单。

2网页页面中部(左侧栏目目录、正中间网站新闻、右侧栏目目录)

1、 在导航栏条报表后边,插进/报表,建立1个1行3列,宽为760像素,边框及边距均为0的报表。并设定排序方法为垂直居中对齐,情况色为#FFFFFFF。

2、 将光标置于左侧模块格中,设定其宽度为18%,水平排序为垂直居中对齐,竖直排序为顶端对齐,随后插进1张图象,插进1个导航栏条。

3、 将光标置于刚插进的照片后,插进/报表,插进1个12行1列,宽为90%的报表。设定其模块格间隔为1,情况色为#CCCCCC。

4、 将光标放在报表第1个模块中,设定其高为20,情况色为#FFFFFF。插进/图象,插进1个导航栏文本前面的小点。一样设定别的11个模块格,这样左侧的栏目归类目录就进行了。

5、 将光标置于行为主体报表的正中间模块格中,设定其宽度为66%,水平排序为垂直居中对齐,竖直排序为顶端对齐,随后插进/图象,插进1个导航栏条。

6、 将光标置于图象后,插进/报表,插进1个4行1列,宽为95%的报表。设定其模块格间隔为1,情况色为#CCCCCC。

7、 将光标置于报表的第1个模块格中,拖拽电脑鼠标,将4个模块格都选定,设定高为60,情况色为#FFFFFF。

8、 将光标置于行为主体报表右侧的模块格中,设定其宽度为16%,水平排序为垂直居中对齐,竖直排序为顶端对齐,插进/图象,插进1个导航栏条。

9、 将光标置于图象后,插进/报表,插进1个7行1列,宽为90%的报表。设定期间距为1,情况色为#CCCCCC。

10、按住Ctrl键,用电脑鼠标点一下刚插进的报表的第1、3、5、7模块格,随后设定它们的高为55,情况色为#FFFFFF。

11、选定第2、4、6模块格,设定其高为6,情况色为#FFFFFF。

12、切换到源码对话框,将第2、4、6模块格中的空格标记“ ”删掉。

3网页页面底部(1般包含版权信息内容及别的有关內容)

1、 将光标置于行为主体报表后,插进/报表,建立1个2行2列,宽为760像素,边框及边距均为0的报表。

2、 选定报表,设定排序方法为垂直居中对齐,情况色为#3366CC。

3、 将光标置于报表第1行的左侧模块格中,设定其宽度为50%,水平排序为默认设置,竖直排序为基准线,情况色为#FFFFFF,随后键入版权信息内容,內容色调随意。

4、 将光标置于报表第1行右侧模块格中,插进/图象,插进1个圆角图象,在它后边键入Email字样,设定其尺寸和色调为1和#FFFFFF。

5、 插进/表单目标/文字域,插进1个文字域,宽度能够随便。

6、 插进/图象,插进1个GO的图象。

7、 设定页特性。点一下菜单改动/网页页面特性,在题目1栏中键入题目,并挑选情况图象,将顶部界限设为0。

***将全部网页页面分一部分放到不一样的报表中组成而成,还能够加速访问器载入网页页面的時间。;由于访问器是读详细个报表后才显示信息內容的,因此最好是不必框在全部1个报表中。

8、用合理布局报表搭建详细的网页页面

1、 点击插进/合理布局,里边的合理布局主视图按钮,就切换到合理布局主视图情况(默认设置为规范主视图)。还可以用菜单里的查询/报表主视图/合理布局主视图来进到。

2、 先点击绘图合理布局报表按钮,随后在网页页面中像制图1样建立出合理布局报表。

3、 就像上1个事例1样,先绘图好网页页面的顶部,再中部,再底部的大报表。

4、 再点击绘图合理布局模块格按钮,随后在早已绘图好的合理布局报表中,再绘图合理布局模块格。

5、 回到到规范主视图,在早已区划好的报表里,再插进嵌套循环的小的报表,把网页页面再细化,便可以进行全部网页页面的设计方案了。

****留意把全部网页页面都放在1个大的合理布局报表中,由于这样的网页页面访问速率会很慢。应当依照网页页面的版面和內容区划出几个合理布局报表,随后在这其中各自插进合理布局模块格。 

9、层的应用

1、点一下插进/层。还可以点一下标志,随后拖拽电脑鼠标建立出1个层。

3、选定建立的层,看特性面板。“层序号”和“标识”都应用默认设置便可。“层序号”是程序编写时必须用的,大家如今1般无需。“上”即距网页页面上界限的间距;“左”是距左侧界的间距。“z轴”是层的次序,数据大的叠加在数据小的上面。

****如不设定色调时,层是全透明的。

4、点中层左上角的小方框能够随便拖拽层,尺寸还可以调整。

5、“外溢”1栏中,当文本多于层的尺寸时,visible(超过的一部分照样显示信息)、hidden(超过一部分掩藏)、scroll(无论有否超过,都显示信息翻转条)、auto(有超过时才出現翻转条)。

6、点一下菜单对话框/别的/层,此时将出現层管理方法对话框。能够在这其中改动层的名字和Z轴值,还可以点一下双眼标志使层可见或不能见。也有1个避免重合的选项。

7、层的对齐。按住shift键,另外选定几个层。随后用改动/对齐,用这里的选项。

8、嵌套循环层。⑴最先在文本文档中插进1个层。⑵将光标置于该层内,随后再次插进1个层,就获得了嵌套循环层。⑶里边的叫子层,外面的父层。它们的Z轴次序是1样的。拖拽父层时,子层也会相对性挪动。挪动子层时,父层不容易随之挪动。

10、掌握時间轴

1、点一下菜单中的插进/层,插进1个层。

2、在层中插进照片,如1张飞机的照片。(这里的照片还可以是1张小动漫的.gif图象)

3、点一下菜单中的对话框/别的/時间轴,开启時间轴对话框。

4、选定网页页面上建立的层,用电脑鼠标按住层左上角的小方框标志,将层拖放到時间轴的第1帧中。这时候全自动建立了1个长度为15帧的時间轴。

5、选定時间轴上的第1帧,将网页页面中的层拖放到页左上角,即动漫刚开始时的部位。

6、选定時间轴上第15帧,能够拖拽该帧至随意长度,如30帧。

7、选定第30帧,将层拖放到网页页面的右正下方,此时对话框中显示信息出层从第1帧到第30帧的健身运动运动轨迹。(此时健身运动为平行线)

8、能够点中第15帧,右键选“提升重要帧”,在选定第15帧的情况下,拖拽层到网页页面中正下方。

9、勾选“全自动播发”项。

101、制做翻转公示牌

1、在网页页面上插进1个层,随后为层设定1个情况,做为公示版的架构。

2、随后在建立的层中插进嵌套循环层,将嵌套循环层挪动到父层的正下方。

3、在嵌套循环层中键入文字,并将其垂直居中排序。

4、开启時间轴面板,将子层做为目标加上到面板中。

5、为子层建立1个向上挪动的相对路径,将其挪动到父层的上方。

6、拖拽最终1重要帧,提高动漫時间,随后勾选“全自动播发”和“循环系统”两项。

7、选定父层,在其特性面板中将“外溢”特性设定为“hidden”。

102、在网页页面中应用flash动漫

1、点一下插进中的Flash按钮,便可为网页页面插进1个动漫。还可以选菜单插进/新闻媒体/Flash来进行这1步。

2、选定已插进的动漫,看特性面板。这里能够设定它的宽、高,还可以根据拖拽来更改尺寸。

3、能够在这里点一下“播发”来预览动漫。

103、让插进的flash动漫变全透明

1、当网页页面上早已有情况,或是要想在1张照片上再插进flash动漫,而flash动漫自身也是有情况色,因此会危害美观大方,这时候大家要把它做成全透明动漫。

2、如在网页页面上插进1张图象。

3、在图象上插进1个层,在层中插进好所必须的flash动漫。

4、选定flash动漫,在特性面板中点一下“主要参数”按钮。

5、在“主要参数”的左边1格键入“wmode”。在右面“值”1格键入“transparent”。

104、在网页页面中播发响声

1、在进行全网页页面之后,假如要为该页加上情况歌曲,留意情况歌曲1般是*.midi文档,这样的响声文档10分小,易于迅速免费下载,别的文件格式不合适做为情况歌曲。

2、在网页页面中全部报表以外,(留意此时编写对话框左正下方的标识挑选栏中仅显示信息<body>这1项,或是在左下角点1下<body>,这样才可以确保这个个人行为是加上在全部网页页面上的)。点一下个人行为对话框上的“+”按钮,(或用菜单 对话框/个人行为,开启个人行为对话框。)

3、从弹出菜单选中择“播发响声”。开启1个会话框。

4、在这个会话框里用“访问”挑选要播发的响声,并明确。

5、这时候个人行为面板上全自动显示信息了恶性事件为onload,姿势为播发响声。点一下这1行,正中间出現1个按钮。点一下按钮,能够设定这个响声在甚么恶性事件下播发。能够挑选“显示信息恶性事件”/“IE5.0。

6、大家常见的如Onload(当网页页面加载时)、OnClick(点击电脑鼠标)、OnMouseOver(电脑鼠标移到目标上)、OnUnload(当关掉网页页面时)等。

7、该个人行为还可以设定在照片上、文本连接上。在文本连接上播发响声以前,先为文本加上1个空连接,即选定文本,在连接1格里键入1个“#”标记。

105、弹出对话框

1、最先制做1个提前准备在小对话框中显示信息的网页页面(例如a.htm),因为这个弹出对话框不可以太大,因此內容要少1些。

2、开启1个制做好的网页页面,把光标移到网页页面中全部我报表之外,点一下个人行为对话框上的“+”按钮,从弹出菜单选中择“开启访问器对话框”1项。

3、在会话框中里键入相应的设定。要显示信息的URL即a.htm,对话框宽度和高宽比自身定,企业为像素。特性中的各项主要参数必须就打勾。

4、设定结束后,点“明确”。此经行为对话框中将显示信息开启访问对话框这个个人行为,开启标准为Onload,假如并不是要这项,就自身设定。

5、该个人行为还可以设定在照片上、文本连接上。。

6、能够用这个方式来表明对访问者的开启时的欢迎、网站公示、离去时的道别语等。

106、操纵情况栏信息内容

1、开启网页页面,选定1张照片。

2、点一下个人行为对话框上的“+”号按钮,挑选设定文字/设定情况条文字。

3、在会话框里的“信息”1栏里,键入必须显示信息的话,如对这张照片的详细介绍。

4、能够设定个人行为的开启标准为OnMouseOver(电脑鼠标移到目标上),这样当电脑鼠标历经这张照片的情况下,情况栏将出現有关的信息内容。

5、假如必须电脑鼠标在移开后,这个信息内容消退,那末再度应用这个个人行为,在“信息”1栏里甚么都不写,随后把开启标准改成OnMouseOut(电脑鼠标移开)。

6、一样能够在1段文本上设定该个人行为。或是设定在全部网页页面上还可以。

107、弹出信息内容

1、开启1个制做好的网页页面,点左下角<body>项。点一下个人行为对话框上的“+”按钮,从弹出菜单选中择“弹出信息内容”1项。

2、在设定对话框中“信息”1栏里键入想显示信息的信息便可。

3、开启标准设定为Onload(当网页页面加载时),便可以用来做为开启网页页面的欢迎信息内容。如设为OnUnload(当关掉网页页面时),便可以做为客户关掉网页页面时送别信息内容。

4、还可以在某1段文本上设定弹出信息内容。例如1段文本不肯令人拷贝,就选定整段文本,留意此时左下角显示信息〈P〉,即段落。

5、随后一样实际操作,信息能够键入版权之类的句子。只是设定开启标准为OnBeforeCopy(按右键时开启),或OnCopy(按右键选拷贝时开启)。

108、动态性照片按钮

1、提前准备好两张一样尺寸的照片,常见的方式是如1张为灰度值相片,1张为五颜六色相片。或1张是按钮凹下的款式,1张是按钮突出的款式。

2、举例:插进1个3行1列的报表,设定宽度为180像素。

上1页12 下1页 阅读文章全文