DreamweaverCS5实验一

1、实验一使用Dreamweaver CS5制作网页一表格基本操作一、实验目的和要求1、掌握表格的基本操作。2、掌握表格及单元格的设置。3、掌握表格的布局技巧。4、掌握在网页中插入文本，设置文本格式。5、掌握为文本添加超链接。二、实验内容EX16文件夹参照样页（见图16-1），根据要求制作网页。本实验的素材在所配套素材 中。+ mOTE百石时尚骨蝴喪飞辺找鱼橡诗泉涼轻山备在记忆的空闾®犬学生奇恸畑涮踊匕画面卫如欢决跚谢咅5?*邀 幅日的余嫌 阿和昭声肓勾起範无尽的廻敷蹴我思岁月懿，时间尅跆许參东西，但我的心灵 ±P怎吴不变。回忆是般日美拇的拶孫。村开二討的记曰 翘时光檢适，在大

2、宇一年昜的生括中，北学会了在先慰与脱轴 主習中自】疏买的生活！字会了在独处与玄往的环境中釋敲自己的心情！字会了在曲听与沽说的玄互中加探豆&罰 友卧 孵在美RR的族园中，回想自己过去一年釘的足阻 舉觉自己腊去出 不再是一年翩吟禅踽男檢 f睥运自己n维迭養适的克学环悄中认识很摄亲切的巻和循识说参算擊的同学是慚m让鮒钛学生话更乘 实便鮒生活中充芮了快乐"拿看的元寿“A的成赡不开自身各昭婭历：曰折“加速百丸童志的成怜牲折，悟育軒人性胳的因麒坚塚人恰念 的追求*生活吉诉悲*路昱人走辻凍的，关注要卑自己，振作起来主舌的董女軟是前进栽不尝立记自己走过的 蹈；那些百旳轧冈首光慾的跆 那些演逓

3、汗水禺力拥西的跆 那些帕呃不平&删辛韓 但盘会在込 里阳自己谊：9有记住这豊路，才能走毎咲后屈、Q2DI0. D9ld社的（空问1曲甜 1瑚生的谢片 iFWHLy SITEVJK至电话：眄冲魏8S88SEW：哩L6JecapvRiiHi307 »AURQHTE REfERUEP图1- 1参考样页三、实验步骤实验准备：启动 Dreamweaver CS5。1、新建网页，页面类型为（1）执行【文件】菜单中【新建】功能，在新建文档窗体中选择“空白页” “HTML ”，单击“创建”按钮，如图16-2所示。-J页面走型£空白页 母空腹扳 警複板中的页 ri示例中的页 y苴也H

4、INLWTNL僅扳X5LT （莖帀） ASLT （片断） 库项目 AetiosiSiiript 曲J穴赢叶昨七WL战T JavaScript ASF VlScript ASP.MIl C# 届T.KET ¥B CaldJuEiidn CollFuEivn 组件 JSPFMF1貝胸定，居中1別佰定，居中苛題和I毋至1歹I踰奄居中1列踰惑居中，衍題和押注2別固宦，剖准2引同磊右©准、拆題細蛀Z弔咽毎左Q准2列固总左也胆、輛題極睢2列滋态右倍)栏?弔噪靳右也忙、标題狐惟2弔擁薪左(S能£弔腋蛰 左曲胆*無題和ai3歹帼走3列固走，标懸和卿逹3列融疼3列鹿務，标迪和卿注M

5、THL交档无侦览文帖堯型：KtfIML 1.0 Trwti tiwal 布呂CES ft 55猱廨枚档头PfttO CSS 交件«启用 InCwt齢t Editing了祉自癸”的订护二"<1卯1 :nin F u h 1 e匸iinjaw号tsm 義車事各卩.|嘗.图16- 2新建HTML页面说明：Dreamweaver可以制作网页、框架网页等。系统提供了多种模板，便于用户快速制 作网页，提高工作效率。在新建的网页编辑窗口空白处单击右键，选择"页面属性”功能，在"大小”下拉 列表框中选择12,并设置页面边距为 0，显示如图16-3。(3)单击I一I

6、按钮，完成“页面属性”设置。2、选择【插入】/【表格】菜单，弹出“表格”对话框，在“行数”文本框中输入3,在“列数”文本框中输入1，在“表格宽度”文本框输入800，在其后的下拉列表框中选择 “像素”选项，并设置其他属性为0,如图16-4所示。图16- 3页面属性设置图16- 4表格设置3、选择插入的表格，单击鼠标右键，在弹出的快捷菜单中选择 【对齐】/【居中对齐】命令， 将插入的表格居中对齐，如图16-5所示。图16- 5插入表格4、为了便于查看插入的表格，选择插入的表格，将鼠标移动到表格的下方，当鼠标光标变为'形态时按住鼠标左键不放，将其向下拖动调整表格的显示高度。5、选择插入表格第

7、二行的单元格，在“属性”面板中单击“拆分单元格为行或列”按钮如图1-6,把单元格拆分2列，使用鼠标调整表格中单元格的位置，如图1-7所示。图16- 6拆分单元格图16- 7单元格调整6、 将鼠标定位到第1行单元格中，单击【插入】/【图像】，在弹出的对话框中选择本实验 提供的素材top.jpg。7、 将鼠标定位到第2行第1列单元格中，在属性栏设置“水平”为“居中对齐”，“垂直”为“顶端对齐”。单击【插入】/【图像】，在弹出的对话框中选择本实验提供的素材left01.jpg ,同样方法插入图像left02jpg , left03.jpg , leftO4.jpg , left05.jpg , le

8、ft06.jpg。& 将鼠标定位到第 3行单元格中，单击【插入】/【图像】，在弹出的对话框中选择本实验 提供的素材bottom.jpg，如图16-8所示。IBI - I" l=IS IH :12345G7!3、IJIILIEM!:15低17闻132021：2224 25 %27 30 !，曲抽.:FnHLUflTE*图16- 8插入图像，设置单9、将表格第2行第2列单元格拆分为2行。并在第1行内输入“大学生活规划” 元格“水平”属性为居中对齐。10、将本实验素材文件夹内“大学生活规划” 所示。内容复制到第3行第2列单元格内，如图16-9'Tri大学生屠抑划在确狂了犬学

9、朋间的岌展目抹后，址要酬是和创实可冇的方紊把目标甘解祇!若杆小目怖一段一覆的去实1 e成咖播雉能可酣北是能昶誣葩并段宴現制1的目触而不是橡劉I荫些冋学，总憩一 口吞伞犬熾Ti 果反而祺咯百了*肪此11谊刨走方案，附圧性地朝百目标奋斗的人是f昭易职得威功的*衷th行计划则定方赛过程中必離合产生一个具炼性的*绸节性的计师 醐是平fl把动的獅b它会船hf严酣金噺櫛叶i :、希力，指导鹿卄细间谖跖+冬同时还会舌诉怀在邨饰段埠会取得件玄样的钢h在机行敗怫过程当和脳是大学生话规划呢？ 一脚讲、丸学生丢觇対是从目前比较济行的丑11生涯规划中浦我币条的，是一种號应 一走程度上人可以宰腥自己的命运、竝对未寒大学

10、生活道鮒预栖设计，莽釆联相应的箱施違求在大学生活中1 毎更咖功的一种新S!的丸学生话官醛劝。科学的主话规划可以華助诵立在丸学朋闫的发展目标、叢展前虽，! 菠发展适略1可以鄢眈理时间和睛力ttzS于最昼回扳奉的事情上去，罠益毎更玄的成内。爲ftavaise卅也,两何进行丈学生爲锻划唯¥ 編尢孚生希抠划的诉玖是召限下八不曲赊进行；:芦生创划意i?袖是舌觉誘现詮BU学生话潼商卄么意义喘？濮苦朗彎天if在忙晞 却滾商收魏朗廊是杏觉碌，自己恵是比 别A1»t拍蜩怖壬菠保应请利用丈宁宝粥汨捐和向限的熒源何点卄丄联饰打吏自想也玻自己的现1斯丫 ： 如果你的回苔是*弟话那么恭盲你：怖已疑开

11、胎对現状不希 已姑也生了规划的息识"巴fe&划息识是汗始 I行丈学生活規知曲开駡。如果你是一吓环凰进恥、衣于珊状或者是一偉有勇锻叢自己的人那送下面的歩驟此 焉再石T*扛迸行自題评估包我评估就是时自己进行科宇、全面砌且的聒呂包培对现:在的我，迅去涉1我的別折.对將来的糊報想*自我： 的目的,是讣识自己了常自巴因;百讣识了自己才能対自己湫宇生舌作出止爾的选樺，才社込定騎自i 爱區的路抵，才龍对自己的楞生话昌标作出最住抉择。自我评洁可以逋过回售以下三于坯古走的何卿进行。C ir我St?二 我皿排里来，至懈里去扌祚'曲要做卄也孑爲:鮭目忻在丸竽生活規剤申诵立目标是區爻谨也是最

12、雅f啓G的一古©能不能正硝地诵立丈学期间的发展方向和磴展道路直 按丟奈到能否在去学取得咸杲的丸小*分析翊与矢败者之司的差距只在于；威功舌在他们細之环都淮硝磋 运大的谨想。fem的妙旦不过展坚持孑谭地朝石目标不时禺力的罟麴杲。市失败音他n住住没有目标克音是| 祢比较臥偲帚杲杲-做一天和菊捏一天钟，币从来轴昭昨常过自己更畅件&不要爐什船所哄IffiilH餉了 功.5用虚方妄9QS1J遊行自烹押首皆琢平估就杲对自己诳行科字*全面5底的網环 包括对现在的禺 过吉晔的刮析，对將来的fe的邀g。自册 的司眇 是认识自己、了解自于 因为只有认识了自已 才飆自己的衣字生话作出正晞的选拟 才統

13、罡适莒自i 玄珈:;路塔，才龍对自己的蜡土话目存件城佳快择-自O&可椒通过回售且下三伞盘古老的何鳏进行* <: 1>蘇淮？ “:“我览連列鄭虽主厂:要徴什卧;那必如何is行丸宇主活規划唧一飓大宇生曲嗣怡琥程別姒下丿n网厮a行"吾生规却意识加是習朗由時的世生话设肖卄么磁呢亍你是钿:毎对盹忙麻軀宥收5WW怀是香覚得自己耗比 别切胖柏瞬怖是香赏恨应祓利用大学宝謝时可铀限的負源做点卄也呢卞怖商法ft想圉变自己的輛规扌 如杲儒的回普是'¥»啲话"那Z熬言炉你已疑开抬湘瞅不商已疑H生了规划的意识了* r生姒知1意识是开始 行丸学生裁規划的

14、开如黑滋是一节不国进取蠢于现狀或右是一代右恿迁改变目己的人那i'F面的歩囁趾:0«»»«:mSI 尊学DO图16-10 插入水平线12、鼠标选中新插入的水平线，在“属性”面板中单击至 按钮，在弹出的“编辑标签”栏中输入"<hr alig n= "ce nter" no shade=" no shade" color= "#f60000"/ > ” ,将水平线的颜色设置为“红色”，如图16-11和16-12所示。图 16- 9输入文字11、将鼠标定位到第一段文字末尾，

15、选择【插入】 本的下方插入水平线，如图16-10所示。/【HTML】/【水平线】命令，在输入文大学主丢规划肱跌学邃厳厮二締满;箱生潮痂曲舗谶諳嗣述邊脚陽舞赫萌逼二禰鉅私 L罡程廈上人可以茎眶自己的命丟通过对未来犬字工走迫路的預期设计，井采取相应的IS施谗1H1大学生皤中£ 福些成妓L种新娄的尢芋生旺垃f翳站=科学的生迁规刘可很赳助确丄玄字取闫盯乂展目于、疋遅前呆 I 巫岌展道賂；可此華趾管理时间和帝力，追之用于喷貝回報翔事情上去，以菇得更丈的成贞*5天学生隽樹划E 1 - 1二i三丨四1 £-12345B了8910111121314151C1?191920rt ZI2223

16、24252&2728U2D1D. Mu o图16-11快速标签编辑器编辑标签金呼韦叫认时cslor=T, #£50000 M/>图16- 12设置水平线样式13、点击“实时视图”观看效果，如图16-13，图16-14所示。Dw文血月希E：>W(V)插入(I)悸改(M)梧式0) 甜令(C)index.html xHi代码|拆分|设计实时代码：4实时视圉|檢査以巳地址：tiLe：/E |/我的工作兀1 计阜机工程学院工作/02.科研I页E图16- 13 实时视图按钮一定理匿上人可权星推自己的甜运，通过对耒来丈宇生害逍路茁預期设计，弄来联相应的轴应，谋求在太学生吿中 取

17、塚更大刪的一沖新埜的犬字生话背理话动*科字的±smb可以帝删互在丈学期闻的左長目杠 srw 融以戲展迫路：可以舉助官聚眶和精力使之用于员貝回抿辜的判育上去，以菠得更犬的成攻I*14、选择 bottom.jpg图片，点击属性面板上“矩形热点工具”，如图16-15所示，在图片上尢学生拾撫剤什盘呈犬学生旺规戈|忑？ 一般的俳大学主牙规划是从目前比按流ti的旳业生涯規划中顯而来的是一种假走在那也如何退行犬学生箔执划呢丫 一段丸学生话观対的克程是分以下八借驟退行®L产生观划息i 口惋是苦觉涵赶的嫦生活没有忡也蕙义啤？廊是哲觉規再天都在忙聚却爱育收親哮悅是否觉环自已总星比 刷人慣丰拍喘

18、孑师是舌觉梓应该利用犬学宝朋彌闾和育E頭猫瘟做臣什细孑临有迄有彌过改变自己的玫欣呢？ 如果席的回答是-y»胡话那也恭言伸：懦已径开删玫状不満已轻产生了规的意识了。产生换划息识是幵 伯进行丸学生送覘创的开端#如杲怖是一个不闽进SI *殴于现状或者是一个设有虫包莊自己的人，那冼下面的歩 噪就无希再看了":廻行自我评估自倉评估就是对自己进行科学、全面*彻慝的解剖”包括对现在的我"过去的北的剖析，溜将来的我的设還。自我 评酋的吕的”是认识自己* 了解自呂。因拘只苒认识了自己，才龍对自己的大宇生舌作出正禰的谨择，才龍送定诲 合自己左喂的略线，才臆曲自己榊学生话目标作岀最佳决

19、择。自我评店可以通过回膏以下三牛最古老的问題来邊 弘我是灌亍”；“我汕哪里来，到郭里去厂：*要做卜盤、图16- 14实时效果“我的大学”文字上划出矩形方框，如图16-16所示。图16- 15矩形热点工具之阿 P'：al. nr.aiuillwltdjam*-3i的理片图16-16 划岀热点区域16、 选择【文件】/【保存】命令，保存制作的网页保存为index.html。按【F12】预览网页， 点击“我的大学”观看链接效果。17、 用同样的方法制作“校园故事”页面xygs.html，“青春时尚”页面qcss.html，如图16-18, 图 16-19。rutn £rrM!

20、71;iS! ! =口hw!. :.VrrrTJT右Ji irnl- Htm+il- mvPiFBfl-厚辭理.- QHrkyRfiiA aWTF'Rt. ilB-HN-l-li iKWTc-iaifl- 石也刚肯1曲三曲*曰心1©比ILVC' Hirtt-S-M心.吧；* -LHFi-百 Ml-Ellfi "ufcffcfl 3- Hi丄！ 込皿轴审a _"削ibiHWhNi!2：. Erili.F 才-住 *r»LMn-i*h ftanfiiaiPiHv=iia nail ci th *i时闘，- k- ilhH- 片win 右4盲1

21、 巴* »!(.WKTe -j：itlT-1IBfla flj. BWI7- 一 in 叛柚Min =耳tirtOTfTft” snafHwn-ifta- ijb.hi ¥：*-弓H7- BWTTr EHdftUiltWWnlH- HI >_flSU > EJInffTMlfld HBid-fl軒£黑 +c.fi：6 iQn =UL. J诃 ii« nntsfcw*- "H .+* a”! nnT-twjy. .-1-M-l hs iliz T*J- ft r. !VrJ：“i> Cl- PPPfTi 僧«>.- V"Wl-丄! 一阵:tJ|比E爭、禺冊虹(NIMIliBt'KKMHI-nTTIMi員* 丘右-硒: 口亡耳亶知三弊FHIRy準71 胃HTTrlh -HB-,¥RM5*肪耳丸宇wunwfth -KKRMWtaaWA* HHERR>UUS.«1*h6i=-«