




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、赭T兀iV - ttGW -/J 师护r 1 u a为菜单区,和其它的软件一样,该软件所有的操作命令都可以从这一个区内找到一、子,选中该区 编辑(E)中的参数选择(S). CTRL+U其中CTRL+U是该选项的快捷键,如下图所示:,举个例DREAMWEA VER 8 基础安装好Dreamweaver 8中文版后,运行,选择Dreamweaver 8工作区后,将看到下面的画面:V 直朴i? ITitJ 賣曲uJt娜 *甲it*即 醉电 叵v述fl)r :*冲磁燥it*5肅atofTB戦寓伙倚一曲十 丄弓R工_也俑豪臺严 口1峙 吁.PO訂峙:tt &. U帝Ap, aF 丄仲【更塵備b程V匝 -
2、 !ini帘耳:砖兀r#狂M(f ;,E J沖运珂倔;HA-T-?tVUII帝ir卄IF耳bn* 卢护FTiiij 住便閉烯韶彌裁(PfreiFq, tIVKQL)技下一TOP込91*障芋标羞WHKKrSci)_ IJ扎CI)帕,a-:tdj 科令(ti 鮭总宦 口11 wnu)Ctrltfc CtrlrCtrl+l在这里,你可以把自己的 DREAMWEAVER MX设置为自己喜欢的样式,一般使用默认就可以了, 如下图:掏街宇儒()固定字俗(S)代刑iS flc).瘀施S券工.e殴酒票(UtZTE语S邺中艾培宋萍12 pt *|ln_B231ZIZ pt V煉辂宛处V大屮12 pt V12 p
3、t VIks.为了使用的方便,选中字体这一项目,把参数设置为上图所示的样子,因为默认的时候实在太难 看了(当然也可以选自己喜欢的)。如果你浏览网页时使用的不是IE的话,请选中 在浏览器中预览这一项(以后制作网页的时候要用到),点一下那个“+”添加你使用的浏览器程序。二、 是插入项目选择工具(插入面板),在 选中了某个项目, 中会出现相应的插入项目,常用这一项后如下图:下面详细介绍,选中诵庄壓扃愷?3插AJ羊片俺架T務单雨矿*符療体【文嗨 W*阻f 7应用程序甯用布局丈同嬴 ,.i豊|辜国0摘 Fir.wnrliIlT 湖 L锚点用于网页中的定位,如网页的上、中、下等;图像点位符是用于动态交换图
4、片的,后面再说; Fireworks HTML为用Fireworks软件切割出来的图片; 交换图像为鼠标移上去时变为另一图片, 增强动感;表格数据可以将其它文件的数据转化为表格,插进网页;标签选择器可以插入其它不常用的HTML标签。在 中选中布局一项,共有 标准视图和布局视图两种视图,如下图所示:EZ 期帼I誰曇II諫S翊衆塁陆加灑酬翩型tt堆理丽繭4 J-I r h ri 1 i net畅&在标准视图下,可以插入表格和在网页制作区画图层。切换到布局视图下,如下图:常用I布局I文本俵格框架表单【根板宇符I媒毬立件头順本I両应用程序标准视E 布局视图拐绘布M左13描益局龜兀Is在布局视图下,可以
5、在网页制作区描绘布局视图下的表格和单元格,描绘好之后,再切换到 视图后,可以转化为表格,这个比较好用,可以用来排版网页,后面将说到。标准在中选中文本一项,可以对文本进行格式化,如下图:A可以对字体进行全面的格式;B可以将字体变为粗体;I为斜体;S为加强字体;这些比较简单,可以自己一项一项慢慢试试,看看字体有什么变化。在 中选择表单(表格和框架两项后面再说),可以插入各种按钮,如下图:戳rp.ST丽墜|稲框渠簾勾務妇至圧藻前蚪很7脚卑T硬应用握冋 D N I H E1i!V G i卞riNT1 kA为表单;B为文本框; 钮组;H为列表/菜单; 字段集。(详细的使用方法后面将说到)C为隐藏域;D为
6、文本区域;E为多选框;F为单选框;G为单选按 为跳菜单;J为图像域;K为文本字段;L为按钮;M为标签;N为在 中选中模版可以使用模版制作网页或自己创建模版,做起网页更加方便快捷。在中选中字符可以插入一些特殊的字符,如:,其中BR为换行符(快捷键为 CTRLENTER此项与ENTER有所不同,可以自己试试),其它的可以自己试试。在中选中媒体,可以插入FLASH FLASH按扭 FLASH文本 Applet 等插件。在中选中文本头,将出现下面的画面:阳tfl畫纯字说匣 剧薪 基硼 栓接关键字为网页的关键词,可以让搜索引擎搜索到; 说明为网页的说明,如作者、介绍等; 刷新可 以设定多长时间后刷新网页
7、或跳转到其它网页; 基础为网页的基本链接,如插入一个目标为_blank 基础,网页中的一切默认链接都将打开新窗口;其它比较少用不再详细讲述。中选中脚本,可以插入各种 Javascript、Vbscript或其它脚本。在 标签。中选中ASP (编辑ASP网页时用到,新手可不必理会),可以插入各种ASP编程里用到的中选中应用程序(编辑动态网页时候用到,新手可不必理会),可以对数据库进行操作。三、对区的详解如下图:釦霆翳标题:无瞬j谄阿站在上图中,点击带有向下小箭头的工具,会弹出更多选择。四、五、.八、区为网页设计区,你所设计的网页或代码将出理在该区。区为属性区(属性面板),在该区可以对选中的对象进
8、行一些设置(后面将有详细讲解)。区如下图所示,详细的使用将在后面的章节详细讲述。.秽二 _ 1.CSE 瓷H ffTML 存式.石垢.巨:山坤TFK二 細奋死C曲14X:- 二二 1觀血哇蝴丰仙長笛盟行內I萄祥-=:|- I 玄J屿类型:1T ZllGcj I爭或在:曳肉曲丄life潮r巾呑如据N71 1己;:译艾件也逵一十站 123456789101112操作举例题目:用 DREAMWEAVER 8制作一个简单网页 实验操作步骤:打开 DM 8,点击 Insert 插入工具栏表格按钮,在弹出对话框中设置表格属性。 设置行为 5,列为 1,宽度 width 为 700 像素 在表格第一行中输入
9、文本的标题点击菜单 windowproperies 修改,打开属性面板。鼠标点击表格第二行,在属性面板中点击“bg”背景后的颜色框,如图,设置表格背景为深蓝色,代码为“ 003366 ”第三行为空 第四行输入文本内容,回车,点击 insert 工具栏图片按钮,选择一个图片插入表格中。 设置居中,再回车输入几个文字,也设置居中。鼠标点击表格第二行,点击 Insert 工具栏图片按钮,插入一个 1*1 像素大小的透明图片。 设置表格高度为 1,单元格成为一条直。写上网页的标题。完成本页制作,按 F12 键预览网页效果。实验二图文并茂实验目的:学会使用图像和直线的做法一、直线问题L打开Dre珊蹈ve
10、r ffiC点制伽t工艮崔直划规瓶入-蹣建. 2在融中籍战勰为侧嶽并囲収3点击扯角遍袱躅投仏进入摒代醸辄4如酬和为魏的代码在代码荊入刊ff啦J 甑匏建力红色:5类册魁植练籍不同靶.6就林制作我F啤競网蒯見二、图像排列I拥血3W3呻毗点制忸江孵翻im 鶴跚沖械飜繍it 减酚加.和加勰恤询赠素3在麴SHHH忡血入哪斤 硼鹤 怖篇-列中也軌国片代各陽二列曲入舗讓蚁本5膿麻击表馳尼他动表細站揪小.拒殳薛申注成酬難我F啤概顺鶴三、图文环绕I打开OreaiRwaver ML输入儿段丈字2馬击InrtZ具栏图片按钮,在上字中插一个3选中图片 r 在S性Porpert中.iji.SAI ii gn为 “Lef
11、l4,可以拖动图片到您所希望前地方.5这样就做好了一个*字可臨图做的网亟.完成本例轴E按FI2 键锁览网页O.四、项目列表L打开Dir嘛汨陽HX. 入“S的33rtSB中Z点卸制小工阳站按迅 打St本紳血 再点密如“谡ffl,为无3回牟 类似程的爱好“分别再做” ft的玫戴.我的相册.我的0记屮=亍无 列魏项才4在ftw相册n卞再输入三个顶目“卜学同学S中好;E大学时代j再选m这三个项0点击B性粧申的“有帛弭表r擀弘选中的三牛项目就成了 如囲所示的痫f?列嚴6接S设g居申.iSSt边馆进堯成本例制作.按F12輻!览网页效果五、移动文字h打开Drefiweaver MX.输入如園文本选中第一行宣
12、字.查看源代码2如S1 4伽raue di rect ion=left表示文字从右向左移功3. 第三行文字气旳32吹bfthavior=scrol I”表示文字対幼作是徭坏滾虬4. 第四行*字设S了移动延吋。5. S后一行文宝分别表示边椎垂1跑离孔和水申跑离20.边椎宽M0像盍, 背景色代码为ffaaaa 主字脇中乩完戒本例制作.按F12鯉预卷网頁效果:实验三表格应用实验目的:学会表格在网页中的用法 实验内容:3-1图片的叠字问题匚杠开斤煜鼻网抽痒F M)C点击從粥出討话a申设S嚷格S性. 久如團酥玫置行和邮灿 财帕阳为KB軒Pi讪乱工点击厲性面祖在对话框中点击“时的丈件夬按乩 曲-龍片作为髒
13、IS片4用肚镂击叢榕边暮拖动酬如酗礼使删的險大小鼎輕片的大小朋. 皿酬中舗入自己紙工这样就在EB片上帥了文字&就翊财.按FI2億锁览颐O3-2表格的背景!Hh点击Irsertl具栏表珞按临.播入3行3W前表格.2在属性面板中,点击托旷的文件夹投紅在一个单荒権中播入一嗚背虽囲底 3輛点击表格边艇拖动表杜便其长宽夫小与背景图片的划适当4再给整个表格加一个晋皋图片.播入一个3行和啲表洛选中整个克格.5再点击电的夏件夹按弘ffi入一幅片.动表洛碉整兀*h最后 S置表格拓庆.i完成本例制作.按rm览网页奴软3-3表格的边框I flffOrearoeaver BX,点击I冊餐t工具档最格按轻插入計和列前衆
14、格2在Ktt中進2張格a Wtardiir为h雄后再its边框眾色为红电FMTOOOO 3这样一个有边梔更有边框股色的叢格就做好了4熬后BiS今边継叢ffi.点曲li疵et工具格叢ffisa,播入3行箱啲叢格,5设姦格啜枢Border J力h单元柜离*Ce(lSpace)也为1僅齢iSl直迦豳色为找駝 O99FF 1 . SSffi个*你比JS-下炳效果 盘后点茁OfS的縣创给两个震耦分别海加背藍色BfiWw:8猊成本制制忙按口28赧克B页3-4表格的直线问题仁打开D吨戲岂r肌点击In轴t工具栏表格按附播入1行1列的表格。2点击IfiBrtZ具栏图片按钮T在表格中插入一个加11?素的透明S片;
15、3皱后S单元殆高度(Heteht)为h表曙自动缩成一条直践.4,点击fT后斜颜ft框.给表格加一个红色背景T这样就有了一条红色橫线二5再插入一个甘亍1列的表格.点击lins.rtl具栏图片按钮T在表格中插入一 个hi像素的谨明惻片&然后设置单兀搭宽度e超th ;为1高度細萄妙门为WD-7. 选中表辂.把S个表紹的宽鹿4E去禺这拝黍格就成了 f 竖线。&点击理后対颜色框.给表格添加一个背蠱色.9,完成本例制作按F12键预览网页败果。3-5多样的表格LabellIHfl-Drflarwcaver HX.击I陕卯I丄典fiiRW按*缶播入一G擔格.不做任何liS2一描入第二个表格.如图设冒.做成细表
16、格,3播入第三个表格.做正立方表格.査看代超,如a设a轰格ia4播入鈿K个裹格.做囿角農格.SS代码,新增了fi皆IU解t暑数5”插入3!五个格做无S更暮g看代码,乐增了fd岂秋和2耿n(燼6再播入一个 他个彊申表彼果5看代码如fflI完成*例制作.桜F12扯预宜R贡毁S.3-6表格的随意拆合I打开Dreaiweaer虬 点Insertl具栏S格按钮,播入3行3列的喪梏 2選申第I行第3列”在属性面撮中-点击僦逼盲牡cells)组含3列成为洌0 a再在第2行第2列中.点击-Splitscelll).拆分单元格成为两列, 4同样把第3行第2列拆分为两行。这样.表格就具STS种单元格.5完成玄例制
17、忙按F12O览网页效果3-7随意表格L打开DreaJTweaver MX点击Insert丁具栏溝格按钮*插入3行3列的表格.2一把第一行合并成1列,点击Insert工具栏图片按钮,在蛊格中加入一个1橡 透阴图片3同时设H单元榕高愷tHeight)为5第一行的髙燈就成了5惊索,4一合并第二行,播入一个1橡S进明图片,设養单元格高度CHeight)为E 第二行的高度就成了礪素5.合并第三行,播入一个1像素透明團片.设養单元格高蛊C Height)为行, 第三行的高這就成了 15慷素,丘爰只姜S入一个1慷索的图片.它的大小就可以随意改亚了.7-为了能看到实际效果.我帕谡$柬格边框为仁R完成本例制作.
18、按F12键预览网页a果.3-8表格应用f打开MX.点击Insertl具栏录格按钮.描入7行2列的表格 2在屈性扳中kpace和Bo电r都为1同瞬给边枢添加颇色ft3399FF、a3接港在属性面S屮点击CMerges cells?.合并第一行.在第一行里插 入一个行n列的表格.涛加育量色为WWCGFF.谟置Ce11Epacfl为仁4在这个表格內加入t宇.再把这个表格分成3列-分别加入一些丈字或图 片.鼠标点缶裘格边框.拖动至适当大小.斤再在下面几行涼加一些i字。6合并第五音同时也插入一个将刃列的表格.设S背景色为#MCCfF.设 置Ce 11 apace为1.加上一些丈字.7合井第注行.加入一些
19、乂字.&完成本例制作-按F12縫拽癡网页效果.实验四 层的应用实验目的:学会使用层的用法实验步骤:4-1 层的定位t fTJFbreamweaver MX,瘾击InsertT县程團层按tfl-用鼠様拖岀一个层亠2慮击S的边框,选中可以在a性面檢中储改一些垠的養数ftGLeft和T购 玄可以拖功BL标进行定位*这样就对层做了绝对定位=4 T面钱们对层进疔相对定位.点击图层按钮.新建一个层.5选中这个层.在S性扳中lSLeft和Top用百分SU帕.这样護可対层迸行 相肘定位.G男外,S的男一个属性Z-lndcx.即层的上下位置.其散宇大的位于高嵐所以 S-S位干底S匚人最后.我们维两个层各加一个图
20、片;a完成本例制作.按F12Sf55览网页效果n4-2 浮动的图层I打开Dreawzgr MX,Insert工具栏图fl按钮,用就标拖出一于!12, tDeaiiign面板中Behavijors (行为【、如黑没有Des i gn面扳,IS可以 ?$Sh t 于七+F3鍵打开BeM* I ors.a然后点击Behaviors面ffi上的*5先设定适盒的浏器为【E5匚因为大 部分帕血讯百訓览器都在! E5以上.,4一点击Dzg Laver按钮、使用歎认的设S,点击OK,您就可以看測罢了一 个行为5 fflonCI iakK为。口如血如辛时闕槪标4立于层的上方时*就发iDrag Laysr 这个行
21、为区为了直观一些.在展上加入一个图片孔完成本例訓作.按F129|ffi览网页效果,4-3双背景图片L如图所忌网页有背景图片.而目青景重复出观,查看源代码. 在匕旳沖濡加了如图阴彩部分代码.J=Z接看再做一个网页+在Deign面椒中点击他咅+然后点击鋼面 板上的屮”命Sb站.ilbodvl式表.点击叽3 !弹出对话框中点击Bckgroundk点击Browse选择一幅背灵 图戌4然后Repeat卞拉亲单中选no-repeat* OK,网页立刻S 4相应变匕背翼图片不再1复岀现,氐完成本例制作-按F1瑙预览网I页效果4-4 Layer与 iframe1,打?Fd咖刿材M躍用威掃拖出。个用,芻后入懣优
22、码堀辑S2左雇上加入1个谭功密Mr;Mie塗Jtffl如H代码.srcftSiframe显示的吱件. TffiSBUK称及大小,咅ab虫啦*示浮动口边証为6 scroll mrnogi 没有眼动茶Iffi/gflfi在这亍iFq血中显示的*件新建一亍文件.输入一S*字后保存文件 4.在IE中打幵第一个丈件、KII点击t字,?it$Ctr HAothflrsTimcl incs,打开时间帧,如囲4州鼠标拖动层到时间帧中.5.点中时间帧的第一帧,自己设置层的位g.6点中最后一帧,用鼠标拖动层水平移动一段距离”7.SS选中时间帧中Autoplay.让层的移动g动运行.&可以端加时间帧的数目.使得移动
23、变慢按F12f预览网页效果:9垸施本制制作,4-6 窗口和菜单嗽点击InsertX具栏叢格按钮.播入一个叢格1 frDesMaver2 一输入一些丈字。3另做个禅岀文件,在貝中重复输入“这堤个新窗口!.A 0到原未的页面.拖动鼠标.选中本页链接在S性面扳中点 击HnkS面的*件夹按a,选择刚才做的弾出文件王给打幵新窗LT做同样的磁按-只罡在疑性面板中选S口“吐的 下拉菜单为.black:.8. 蟲后采嫌弹出窗口,点击Design面tS中的Behaviors再点击耳、 选择0口刖 Browser Wirdowr在弹出对话框中点击Bros-选择弾出文件,设g弹出窗口的天 小为KWr 4TO,萤击O
24、Kd乩点击左上角,显示代码戶按钿.进入职代码漏辑.在源优码中抑入 个参裁9. 如图,増加Etyit样貳,定史鼠标光标为手形.W完成本例制作按FIE護预览网页效果.实验五 css高级应用实验目的:学会CSS样式表的使用实验步骤:5-1CSS简单应用I n开少时血Mb观.S入几S文字2点费血昭Kfiffi赫中WCSS St allies, B点宙忒编M-个新牌武蠱.3在jS对话框中.-个是可以自定义曲弟二个SH讪标昧下掘樂曲*有很多.4我幻选m财曲诵辑,点击0K5 1出对话軀中.SfH木犬小5说那旳ing6 中asifeqm都为0如网页内昌SSJKSifitSfiWESffi为0一7点击0KH页2
25、发生应变化B播入-个最检把丈林后-段啊劇納g鼻击thrnffi版中的CS$ St/lles.类愼ody:断1|-牛或表uT砂叢gft喪IQ蛊豊出对SKI中,iifitt大小为g阳戟H文去敢&为址ft: WII則嫁觉胃不;I#.可以点由Oesi嗣88掖中C$S$lMaqE(M StyIIPS. ffi对柜ESI进找S 吃刪teSi榊ftgft孑棕輻 堆加Liw桶qht为IgPoi时,即丈本行掙为10pt13可以点击讪我行就一14完成本桝剖花liF12MS!页ajR.5-2超链接式样I”打并抽UiX.猶入如ES格和支孚2分剂选中两ftt字.在Li恥后1進S3Q htr前帥t为EbGk*打幵新窗口.
26、3点Oesiftn面扳中的CSS Stylfls.再点出丁SfOJt#4在Sa対话枢中.逸毎第三个Hp对超儀S进柠W农编it5 iSttTUas中的机Ii両有HIS的文字样式点击0K,做St设g,6JilSa;visited,访问过后的12搖样St如ESB.1第者flb同叫e鼠掠置于a接上的祥S.如;设a3.5是3“龙即眾标点击as处ss解放吋的样氐如图aa9朋后,fi们锲另一个自定义iS葬式汨川rT闻.为了SSr氛佝八我你83link和vi前it胡的離供为蛊忆阳丫打曲磺ft为童亀 可以不用ft:II选中Oit*. S点击C開中Kall.即应用非式表汀12完本酬制作按F12O览网页败歟5-3另
27、类链接1 打开和上河栋.点击上Sra常代科按氧i8入源伏码编如图游加H接样直 ZaE4中灌加阴簸部分代础hSE啲疝. ifi连接文字挨址 isfwa-皤入-牛剰各_4遛中表昭a入观代阳编在刃中播入一用帀诉显riDt,如E实规连接*字的5咒戍tffl刘作.搜FMBtftSEW页ajR5-4改变鼠标样式1. nffQrtver 弟S入如8量塘和文字.2点击讯现n甌中的CS5SWI忖再点击ifiil自定义样式表”EXJW匚3在EiW呻g中选甌”沏下拉舉勒为Hincf *即执标砥状为h叔手形,盒护OKI4诡中舉一肝丈字点击ff咒II胡I应用mouse5然6W捌值fWKO几其Cursor jcrosfi
28、hairf字光枫moLJM3耀为询d文太光攝 :何J谜4”为帕it等待光标:阪弘5为hal論皿廉良6 S对各文*分别点击样式应用7 完咸*钢期ft i$Fi2afi5SRS3K,5-5彩色滚轴t JJffOrearw/eaver MX,在源代码中加入如團所示代码,2. scrol Ibar-facfl-colorj立休滚动棗凸出聽分的颍色:3. Ecrol Sbar-hifthl iht-color为谦动条空白部分的駆色4. scrol lbar-3dl ijht*color为立休滚幼条亮边的颜色口5. scrol Ibar-darkehadoiN-color为S体谦动棗强明影的顾色6. sc
29、rol lbar-Eh3dow-color*S|条明影対颜色I scrol Ibar-arrowrcolorS上下技鈕上三备箭头的顽色口8,11bartrack-eo Ior为”滚动条的基本顾色“.9.SS井意,滚动条的这个祥式S性只有IE5,5SS本以上才能i持.所W您在调试的时候耍注童:1心完成本例制作按F12犍预览网页效果:5-6文字阴影I打刑心叶沖啊UX.如ffifS入表爸和文字-Z点击tosiign面扳中的css Stylus,再点击+“新样式.tmSHStfi3&建自定义样STf.点击飞就雷|曲孑,在Filter下e单中逸择如監4潘示”加光辉在附近对ft的边外二如ffi设S.S.S
30、iil自罡义sr u如ffi. SB濫僅e选中个叢格.点出样式应用:7 a中貌二个卷II点击佯Ati.应用.8垸成本啊制作,按n2a预览网页效黒,实验六互动效果(行为应用)实验目的:学会使用Dreamweaver内置行为设置实验内容:互动效果一:在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,鼠标移开后,又恢复原来的模样,是怎么做的呢 是Dreamweaver能做出能具互动性的网页。现在,我们就利用 互动效果一一变换图片。原来的图片就切换为另一张图片,Dreamweaver比Frontpage优胜的其中一个地方Dreamweaver制作这个最简单的准备两张大小相同的图片,一张是鼠标还没
31、有移上的状态,另一张是鼠标移上去后的图片,例如 以下两图:I jajscript I (jaiascript)点击对象面板上的( 区选中常用,在 区可找到),看到如下的对话框:./i*/i*v*. xiff词気J./i*t*/tif: Ja預载鬼穌轻竝瞬i tvtscrLDthttp /www.RftE删览一 JB原皓SHfiD特拱文本;按下时,前牲的URL:C 标餐览関t1(取m1L帮助)Dreamweaver 会自动分配;图像名称(Image Name):变换图片效果的标记名称,原始图像(Original Image):指定原始的图片,(例如这里是左图)鼠标经过图像(Rollover Im
32、age):指定鼠标移上去后的图片(例如这里是右图);按下时,前往的 URL:图片的链接网址(也可以是站点内的文件,点后面的浏览可以选择);例如按照上图的设置完毕后,按下0K,然后可以按F12(F12为预览网页的快捷键)预览一下效果了。做出来的效果:UavajKript)小提示:细心的朋友会发现, 做出来的链接不会弹出新窗口的,你可以选中刚做好的 鼠标经过图像,在属性面板里的 目标(T)选_blank 互动效果二:按下一按钮时,弹出一个问候的窗口。在插入面板(区),切换到 表单,插入一个按钮,如遇到对话框,选否就行了。选中刚插入的按钮,在属性面板把标签(L)改为请点击我摂钮名称Btltimi t
33、动作提交表单0无O重设表单展开 区,再展开设计窗口,切换到行为窗口,也可以从 区(菜单栏)里的 窗口( W),再选行为淇中Shift+F3为该操作的快捷键 点一下行为窗口上的“ +”,再选弹出信息,如下图:匡二I 动作播放声音 打幵现廣器窗口调珂 改费屣性 恢复交换国像7- ./ 4-i椎直插件如果你发现弹出信息 是可以的),如下图:这一项为灰色的,不可选时,不用急,先选显示事件,接着IE (选IE或IE也接着再按上一步的去操作,选中 弹出信息后会出现下面的对话框:弹岀信息消息:欧光临品lit人生阿站Mtpjfw 艸.taEtelife. net1,扁定i取消帮助填上你喜欢的 消息,按下确定就
34、0K了,再按下F12就可以看到你的大作了。F面的是做出来的效果:请点击我在Dreamweaver中,更复杂的效果是通过一个叫行为(Behaviors)的功能实现的,我们又称为事件的响应。通过网页元素的变化,如鼠标的移动、点击等事件”(Events),触发弹出窗口,关闭页面等“响应” (Actio ns),就是一个事件的响应。而值得高兴的是,“行为”的制作过程几 乎是傻瓜式的,下面讲述 行为的用法: 按Shift+F3,打开行为面板(上面已经说过);1、选取产生行为的元素,例如图片、带链接的文字、层等。如果需要在页面一载入就开始出现 效果,可以选择状态栏上的标签弹出菜单在网页制作中是一种非常常用
35、的菜单方式,这种菜单不但制作简单,而且效果也很好。17-1 和效果说明本实例所要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 图17-2所示。弹出菜单在网页制作中是一种非常常用的菜单方式,这种菜单不但制作简单,而且效果也很好。巳 Hji T rF rl I n&r r M尸厲0r I*11! ?0(H - 册耀 (n J Wlire u. hi.n回我是弹出菜单團17-1 鼠标未经过时的状态我是禅出栗單一;寸 W图17-2鼠标经过时的状态二Dreamweave创作思想本实例首先在网页中输入一行文字,并对文字做一个特殊的超链接,然后利用r MX 2004自带的行为制作弹出菜单。
36、操作步骤(1 )输入文字并设置超链接。在网页中输入文字,因为单独的文本文字是无法添加行为的,按照Dreamweaver中的约定,将文字的超链接设置为“javascript:;才能够添加行为。所以将文-ff X加瓠&.輕二fe.:决肉贡中整入丈学in隘击1行为jj輕岂口衙HB出歳奋【示31出武菜*P 1會牛近豁5TO ”Q 卫澤 樂畫:M能S& 1 K薑菱丘兀7画亞血三 1 三 N al 0iiw;&3.二 IO 弊雇黔昶TBBWSWww m(2)设置菜单项和子菜单项, 并为菜单设置超链接, 然后安排好各个菜单的次序,如图17-4所示。盘 J 黑,F 盘-庁| t :?卜曲如 12.B I翳超绥
37、主衲昭蓬学gw 3tBh内取1畀甫E硕亍 皿/raam 择州酉幕t tt Jkinj: 廷7 孑总II氷暉4n.lTW站4 /伽 悬上Lh *M 律 /m MLM 为 h讥.JFfr &khZ 0213愛置丈本和flta械3lEfik disk(3 )设置页面元素。将菜单设置为垂直菜单,并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态,如图17-5所示。3 P“TiirrtU: ii 狮 Jit e onBef or eCopy onE efr eCut nEeor eTaste oftBefareUpAate QiiElur onClick onBblClirk onBraf
38、 OSkDf a承 A応 ooDragfntsr onDr agLfive olkBrav-er eitSrep oaf ini. sh Onf 9CHS daH1p onEeyDown onEtyFrest oxmE eylJp onM ousiDoim flftH4US训T仇动作设置层交视图站点it 3八鎖 司体地视團 p 扣iTiH OTMtfMJt 欷程) ,1Letex. klmer. Mml t- KtrnLe. t龙屯 禺戈.ktm层:屋a廿新翟HTML:歎迎遼临晶味人生网站4. 再点击一次重复刚才的步骤,不过这次, 为下图:七I I 动作6. 再选取网易两个字,操作和上面的步骤
39、一样,只不过加入的文字不同。7. 再选取 搜狐两个字,操件同理。8. 把网页保存下来,按F2看看你的大作吧,呵呵,也可以看看下面的例子:品味人生网易搜狐提示:层是可以定义 位置和大小(注意属性面板)的,如果在第 2步的时候,设置的不是 层文 本,是状态条文本,提示将出现在状态条(此做法不必插入图层) 二、网页中做动画1.准备一张图片:2.了解一下Dreamweaver MX中的时间轴。在下图的方法中你可以找到时间轴(或者按下快捷键ALT+F9 :宙口址J帮助QO*插入Ctrl+FCtrl-F3答案迦kLt+Fl.css样式(X)Shift+Fll1i审式Q)CtrH-Fll2行为0)Shift
40、+F3标養检查器re代码片断Shift+P奉考d)Shift+Fl数据库电)CtrlfShift+TlOCtrH-FtO服务器行対Ctrl-S-F9Ctil+FT站点rs资添rii卜苴它J隠彝面鞭(L)F4层叠t)水平平铺7)垂直平铺边dwniKC htm代码检查盟框架( 历史记录 层 2itsptriTipsoI I I 门 I I I I I I I4-til I 动 1ijgo触m盅E 0站点- 毋- D htm 曲円 i(n(noSliit+Fiar2FTZlHJDreamweaver的时间轴和FLASH中的时间轴是差不多的,我们的目的是让图片按时间轴上的设定进行运动。3.点一下对象面
41、板上的,在网页设计区画出一个图层,在图层里插入刚准备好的图片,调整图层 的大小,让其适合于图片: 4.用鼠标选中图层,并将其拖到时间轴的的第1个小格:T1 mel.irLe 11|5 1C 15025 JO 351 OL*yrl O然后将第15那个格拉远一些,如拉到 40,这样可以让动画放得慢些:TiraliiLelH| 阿fps 15151 OLayer 12IC152530355.再次选中图层,并用鼠标再次把它拖到时间轴,如下图:1 OLiyirl25 1C 152053035 葩 455055用鼠标点一下时间轴上的第55点,并把它拉到第 80点:J 5 JQ 1505:35 W 1550
42、eo 65 7Q 75J CLtFtd = tri 用鼠标点一下时间轴第40那个格子,然后把目光移动 属性面板,把层的左(L),加上300 (即让其右移300像素);用鼠标点一下时间轴第 41那个格子,然后把目光移动 属性面板,把层的左(L),加上300 (即让 其右移300像素):严 IS层鏑号 左i宽區X I I轴 n背SS規(XII上址)54px高QpELpK I显茅世)d吐aiilt屮背冒;15邑Layer1谥出请注意上图带有红色框处,原来为73px,加上300后变为373px。6.插进两个按钮,第一个的 标签(L)为播放,第二个为 停止,如下图:选中播放这个按钮, wwwsfctir
43、to,net加上播放时间轴的动作:荐止丽轴 转到时间轴帧以次睡性 恢复交换閤橡橙査苍虫檢苣插件检S測览黑交换囲像汪制 S1LUa ve 谡置辱航# 设亭文本蹤萊盏:屋?n負显示=隐載层选中停止这个按钮,加上 停止时间轴的动作:检査插件 检查浏覧器 交按国朦養制 強0為,丹-或Fla-t 没置是就盖图慷 设置文本显示-隱蔽层7.把时间轴上的循环勾上:世liti色1V 竖| .訪 气I Fps 15 I 口自救播戲应旃环Jm-354045世55_ 更_ 更TO西_5IPCOLiyrl大功告成了,按 F12就可以看到你的大作了实验八框架和表单使用实验目的:学会使用框架和标单的使用 实验内容: 一、框
44、架使用: 上网时候,经常看到点击左边,内容从右边出来之类的网页,其实就是框架的应用了。文件(F),选择新建(N),建一框架页在插入面板( 区),选中框加,将看到:点击需要的框架样式就可以插进去了(你还可以从菜单栏的 面),比如点一下第一个,就出现了一个左右式的框架:中间的细线是可以拉动的,以便调整左右窗口的比例,点一下中间的细线,在属性面板将看到:其中边框(B)处可以选:是、否和默认(即是否显示边框),如果你选显示边框的话,还可以设 框的颜色(C)和边框的宽度(W)还有是左右框架的比例,在上图,我选了80像素,也就是说,左框架为 80像素,剩下的是右边框的宽度,当然还可以选百分比和相对的,如下
45、图:列!100单隹力 Cti 相对 框架的参数就说完了,接着你就可以把鼠标光标移到左边或右边设计网页了。值得注意的就是链接问题了,比如,在左边填上“链接测试”几个字,并加上链接:在属性面板的 目标(T)处,将看到:司 口目标(I)P ar eitt_selfleftFrame在以前的链接里,只是看到:_blank ,_parent ,_self、_top几项的,现在多了 mainFrame和leftFramemainFrame指的是主框架,也就是右边的,如果链接的目标选了mainFrame,则点击链接时,内容将在右边出现;leftFrame指左边,链接目标为leftFrame贝9内容在左边出现;如果选 _seft冈恠 本窗口出现;选parent则在框架窗口出现了(也就是替换整个框架了);选 _top将在上级窗口 出
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 展会广告搭建合同模板
- 商业债权转让合同示例
- 度家具采购合同样本
- 2025年党章党史国史国情知识竞赛题库及答案(共190题)
- 溶血三项在新生儿溶血检测中的灵敏度及特异度分析
- 学院食材采购 投标方案(技术方案)
- 电商平台具体业务
- 中医护理学(第5版)课件 第一节 中药方剂基本常识
- 电子商务安全交易规范手册
- 公路建设项目工程可行性研究报告编制办法
- 合金污水管施工方案
- 统编历史七年级下册(2024版)第8课-北宋的政治【课件】j
- 高等数学(慕课版)教案 教学设计-1.3 极限的运算法则;1.4 极限存在准则与两个重要极限
- 2025年淮北职业技术学院单招职业技能测试题库附答案
- 2025届高三化学一轮复习 化学工艺流程题说题 课件
- 第四周主题班会教案38妇女节《“致敬了不起的她”》
- 2025中国福州外轮代理限公司招聘15人易考易错模拟试题(共500题)试卷后附参考答案
- 班主任培训讲座
- 医院化验室管理制度
- 新课标(水平三)体育与健康《篮球》大单元教学计划及配套教案(18课时)
- (2024)湖南省公务员考试《行测》真题卷及答案解析
评论
0/150
提交评论