《网页设计与制作微课教程》第四版实训指导.docx
实训1制作个人简介网页【实训目的】华握使用记事本编辑HTM1.5文档的方法。掌握HTM1.5的文档结构和常用的HTM1.5标签功能.【实训要求】打开记事本，在记事本中输入包含个人简介内容的HTM1.5代码，参考代码如下面的灰色底纹部分内容，将其以CXO1.hIm1.为文件名进行保存。打开保存的浏览落文档，预览网页内容显示效果。参考HTM1.代码如下：v!doctypchtm1.><htm1.><head>VIne1.acharset="utf-8">Viue>个人简介<it1.e><7hcad><body>vpxh2>个人基本信息<h2xbr/><h4>姓名，性别，出生年月，是否团员或者预备党员，<.fh4><p><hr>VPxh2>大学期间狭得的主要荣誉V2xbd><h4><h4><p><hr>vpxh2曾参与过的社会实践活动U2xbr/><h4><h4><hr><body><htm1.>12）为项目列表标签u1.及v1.i设巴CSS样式，要求其无前导符号显示，并设置边距和间距为0。参考CSS代码如下。u(Iis1.-S1.y1.einone:JU1.Jimargin:OPx;padding:Opx;113)为每个列表项目设置CSS样式。参考CSS代码如下。Iainu1.Iiwidth:168px:height:I37px;f1.oat:1.eft:padding:IOpxIOPXoIX：11argin>right:6px;margin-bottom:6px;background-image：ur1.(images.,bg.pho<o,giO;background-repea1.:no-rcpcat;)应用CSS样式效果后的页面效果如图7所示。14）分别选中每个项目列表中的文字，在“屈性”面板上，设置“格式”为段落。15）分别在每个项目列表的文字前面.插入一副图片。参考效果如图7所示.TVaoacsarefMMtdZTetoacsenwered七节H憎麻雀图7项H列表中添加图像效果16）选中列表中任列表项中的图像.为其添加CSS样式，设置其高度、宽度及边框样式，参考CSS代码如下0#mainu1.Iiimg（width:I68px;height:104px;bordernone;）17）选中列表中任列表项中的文本，为其添加CSS样式，设置其高度、宽度及边框样式，参考CSS代码如下。#mainu1.Iipmargin:Opx;disp1.ay:b1.ock:width:100%;tcxt*aiign:center:height:27px;font-size:12px:1.ine-height:27px;I应用CSS样式效果后的页面效果如图8所示。图8项E1.列表文字应川CSS样式效果18）在第个项目列表的图像前，再插入副修饰图片，并设置CSS样式,使其显示在第一个项F1.列表上方。参考CSS样式代码如下。#mainIiimg.top!position:abso1.ute:1.eft:-9px;(op:I64px;width:143px;height:41.px;119）选中该修饰图片，在“属性”面板“类”右（W的下拉列表中，选中“1.op”.应用上述CSS样式。参考效果如图9所示。图9修饰图片应川CSS样式效果20）保存文档，并按（F12）功能键在浏览器中进行浏览。【实训步骤】制作步骤如下：I)将图片素材笑制到站点文件夹中新建的images文件夹下，也可以在PhO1.OShop中使用切片工具切图，制作所需的图像索材。打开DreamweaVer,创建“建设成果”站点,新建htm1.网页保存为index,htm1.创建一个CSStyPe.css样式表文件。2)切换到index.htm1.文档F，选择“窗口-CSS设计器”菜堆命令，或按快捷键【Shift+F1.1.】，展开“CSS设计器”面板,单击“源”左侧的按钮，在弹出的菜单中选择“附加现有的CSS文件”命令，打开“使用现有的CSS文件”对话框,链接CSStyPe.css文件，如图2所示。使用视忖的CSS文件XRtt*t(F):c*t>*c三(K-)题为：OtM(1.)O>U条件使用(可选)(WB1.)()图2“使用现有的CSS文件”对话框3)设理固定宽度且居中的布局版式。选择“插入一Div”菜单命令，插入ID为“container”的Div标签。在“CSS设计器”面板中，新建并设置body、container的CSS样式，代码如下所示：body(background-image:uri(1.1.jpg):backgroundrcpcat:rcpeaty:margin:Opx;JContainer(width:1.(X)2px:margin:0auto；background:ur1.(05.jpg)repeat-y;hdghcauto;Ovcrt1.owrhiddcn:padding:50pxOpxJOpx0px;J6)设置鼠标经过时改变文字颜色的导航菜单,导航菜单使用无序列表设置,通过设巴超链接标签的“disp1.ay”属性为bkk,设置.导航文字的区块响应。由此形成u1.、1.i、a标签三级战套的导航菜单效果。CSS样式代码如下所示：#iIaVu1.(Iis1.-S1.yteinone:margin:OPX30px;pidding:Opx;)*nav1.if1.oat:1.cft:padding:Opx;margin:OP;tcxt-a1.ignzccntcr:)#nava(height:38px;width:82px;iinc-hchc38px:di$p1.ay:b1.ock:1.cxt*deconition:none:co1.or:#fff:font-size:14px:font-wcighcbo1.d;)#navazhovcr(cxt-dccoration:none;Co1.Or:4831616:)7)将光标定位在main中，依次插入Iefhright两个DiV标签,设置其f1.oa1.属性为左浮动。CSS样式代码如下所示：M1.eftfwidth:192px:hcight:auto;OVerfIoUchidden;f1.oat:IetU)*right(margin:OPX6px;width:768px;hcighcauto:ovcrowhiddcn;)10)设置成果展示的图文混排效果。在ShOW里面插入在ID为“showinfo”的Div,并使用u1.标签设置图文混排列表。部分HTM1.代码如卜所示：<divid="showinfb"><u1.><1.i><imgsrc="imagcs.''s21.jpg"7>vp>成果名称vpX1.i><1.i><imgsrc="imagcs.''s21Jpg1TxpX果名<pX1.i><1.i><imgsrc="inagess21.jpg>><p>成果名称<pX1.i><1.i><imgsrc="images21.jpg"7>vp>成果名<px4i><u1.><div>ID设置图文混排效果的CSS样式代码如下所示：Ashowinfou1.margin:Opx;padding:OPx;Iist-S1.ykrnone;)#ShOWinfOiif1.oac1.eft;width:182px:)#showintbIiimgborder:Ipxso1.id#d2beb4;padding:1.px;width:165px:height:115px;AShOWinfbpiinc-hcighc22px:(cxt-a1.ignxcntcr;112)在bouom内部添加版权信息，并设置CSS样式代码如下：#bottomp(fbnt-siz<?:1.2px;Iineheighc22px;text-a1.ignzcentcr:co1.or:#666:I13)至此，网页布局设计完毕，保存网页,并在浏览器中预览其效果.实训12设置变换图像的导航栏【实训目的】 掌握为网页添加行为的基本方法。 掌握变换图像的导航栏特效设置方法。【实训要求及实训效果】导航栏是网页重要的组成部分，变换图像的导航栏是网页常用的导航特效.当鼠标移动到导航按钮时，变换图像：当鼠标移开时，恢更原图像。鼠标经过导航栏前后的效果分别如图1和2所示。图I以标经过前的建航栏图2以标沿过时的导航栏【实训步骤】制作步骤如下：I）启动DrCamweaver,创建一个本地站点，并打开素材网页，井将其另存。2）选中导航栏第一幅图像，在“属性”面板中设置“ID”为navi。3）选择“窗口一行为"菜单命令，或按（Shift+F4）组合键，展开“行为”面板。4）单击“行为"面板中的.按钮，选择'交换图像"，为该图像设置“交换图像”的行为，“交换图像”对话框中的设置参考如图3所示，设置后的行为面实训13设计网上报名页面【实训目的】 举握表单的创建及属性设置。 熟练常握文本域、单选按钮、划选框和文件对象的创建及设置. 掌握网上报名页面的设计制作技能。【实训要求及实训效果】使用表格布局页面，然后结合前面所学的知识，创建表单和表单对象。表单对象主要包括文本域、单选按钮、笈选框和文件。最后定义CSS样式对页面进行美化。网上报名页面效果如图I所示。Cep>nt6初务X22mbmc图1网上报名页面【实训步骤】制作步骤如F：1）启动DreamWeaVer,创建一个本地站点,新建一个空白HTM1.文档。2）选择“插入一Tabkr菜单命令，插入一个3行I列，边框为0,宽度为650像素的布局表格，并在“属性”面板上设置表格对齐“A1.ign”为居中对齐。3）光标定位在第一个单元格中，选择“插入一Image”菜单命令，插入素材图4“女”前单选按钮的械性设置图5“男”前单选按钮的属性设附11）参考步骤9,为“年龄：”后，第4行第2列堆元格中，添加一个单行文本域，设置其“字符宽度”为6：“联系电话：”后，第6行第2列单元格中，添加一个单行文本域，设置其“字符宽度”为默认即可。12）在“报考科目：”后，第5在第2列单元格中，单击“插入”面板中的“品选框”,分别插入4个第选框，并将其后的文本修改为“英语”、"数学”、“政治”、"专业课”.13）光标定位在“上传照片：”后，第7行第2列单元格中，单击“插入”面板中的“文件”，创建一个文件表单项。14）光标定位在“说明：”后，第8行第2列单元格中，单击“插入”面板中的“文本区域”，创建个多行的文本区域，在“双性”面板上班置“Rows”为3,“Co1.s”为35。15）谢整表格各行的高度，使页面效果美观。16）在表格外键入回车键,分别单击“插入”面板中的“'提交'按钮”和“建置'按钮”进行添加，并在两个按钮间输入适当的空格，17）选中创建的两个按钮所在的表格单元格,在“属性”面板中设置单元格“水平”为“居中对齐”.18）在布局表格最后一行中输入网页的版权信息内容，并设身字体大小为14px.居中对齐。19）单击页面“属性”面板的“页面属性”按钮，设置网页的背景图片。20）保存文档,并按F12功能键在浏览器中进行浏览.嵌套表格、文本和图像，效果如图2所示。图2页面布局并添加内容4）合并右他2个单元格，选择“插入一表单一表单”菜单命令，或堆击“插入”面板“表单”类别中的“表单”项，创建一个表单。5）在表单中再插入一个表格，并在表格中进一步布同及插入素材图像与文本内容，如图3所示。图3表单内部布局并添加内容6）在“姓名：”后的堆元格中，单击“插入"面板中的“文本”创建一个单行的文本框，删除多余文本.window.onioad=showADEic:<script><ead>7）保存网页，并在浏览器中预览效果e3)同样的方法，在右IW维续插入卜拉列表“right”，该列表项为空，并设置相应的属性和Sty1.e样式。具体参考代码如下：<se1.ectname=M1.eftHid=,'1.efmu1.1.ip1.e=Mmu1.1.ip1.eMSiZe='9'StyIc=wWidth:!7()pxhcight:120pxf><op(ionva1.uc=WH>ifiJft1.<option><op(ionVaIUe=选项2<opion><op1.ionVaIUc=选项3<op1.in><optionVaIUC=选项4<option><op(ionVa1.U选项5<p<ion><se1.ec<se1.ec1.nunw="righr'id="rightMmu1.1.ip1.e="mu1.tip1.c"SiZe='9'sty1.c=',width:170pxhcight:120pxf,><sc1.ect>4)在下拉列表下方，选择“插入一表单一按钮”菜单命令，分别插入两个按钮,按钮的“va1.ue”属性分别设置为选中的“选中的选项添加到右边”和“选中的选项添加到左边”。5)输入JavaSCriP1.代码，定义两个函数，川T完成下拉列表项左右移动的功能，并将按钮绑定事件。具体参考代码如F.einM1.1.ype="buuo11va1.ue=*选中的选顶添加到右边"Ondick=Fdd1.bRighiO"S1.yIe="width:170pxf/><inputtypc=*'buttonMva1.ue=*选中的选项添加到左边"onc1.ick="add,Ib1.cft(S1.y1.C="width:17()pxf/><scripttypctcxtjavascript,>func(ionad<11bRight()var1.eft=docuncnt.gctE1.cmentBy!d(,'1.cft");varright=document.gc(E1.cmcntById(Mrigh(M);var1.eftop=1.eftgeiE1.ementsByTagNameCopiion,*);fbr(vari=0;i<1.efu>p.kng1.h;+)iR!cftopi.sc1.ectcd)right.appendChi1.d(Icftop1.iJ);i-;functionadd1.b1.efi()var1.eft=docu11cn1.ge1.E1.ementById("1.cft");varright=documcnt.gctE1.cmcntBy1.d(MrightM);varrightop=right.gctE1.cmcntsByTagNamc(',op<io!);Ibrtvari=O;i<righ1.op.tength:i+)实训17使用模板制作网页【实训目的】掌握模板的创建、定义可编辑区域及保存模板掌握创建基于模板的网页技随【实训要求及实训效果】(I)在创建的站点中，创建一个空白模板文件IemP1.a1.e.dwi,在模板中布局页面，并定义可编辑区域，如图1所示，然后保存模板。(2)制作应用模板的网页文档,网页参考效果分别如图2和图3所示。图I定义的模板人媒巧克分.图2应用模板的网页效果一J1.媪巧克力力ftCtfr*图3应用模板的网页效果二【实训步骤】制作步骤如下：1）启动Dreamweaver,创建一个本地站点，并选择“文件一新建“命令,在弹出的“新建文档”对话框的“文档类型”栏中选择“HTM1.模板”，在“布局”栏中选择“无”，单击t创建】按钮创建一个空白的模板，然后参考图1添加网页所需内容。或拧打开提供的素材网页文件ex1.2-1.sucai）,选择“文件一另存为模板”命令将页面另存为模板.2）选中网页文档内容部分左侧的Div,选择“插入一模板一可编辑区域”命令,或在“插入”面板“模板”类别中单击”可编辑区域”选项,在打开的“新建可编辑区域”对话框的“名称”后面输入可编辑区域的名称，如first。如图4所示。斯健可睇a区域×aw：IE1耀盟*朽如辎猾图4"新建可编辑区域对话柩3）单击【确定】按钮创建可编轼区域。创建的可编辑区域在模板中用高亮显示的矩形框困绕，效果如图5所示。图5定义可埸辑区域14）按上述方法，在模板中为右IW内容定义可编辑区域，可编辑区域如图I所示5）保存模板。6）选择“文件一新建”命令，在“新建文档”对话框中选择“网站模板”类别，在“站点”列表中选择本站点名称，从右侧的列表中选择所需模板文件.雎击【创建】按钮创建基于模板的新文档。7）分别选中左右两个可编辑区域,然后向每个可编辑区域内添加新的网页内容。效果如图2,图3所示。8）保存各个文档，并按（FI2）功能堆在浏览器中进行浏览。实训18在网页中应用库项目【实训目的】掌握如何在网页中应用库项目。理解通过库项目能够提高网页设计制作效率。【实训要求及实训效果】（1）打开素材网页文件,选择页面中的网页元素，将其定义为库项目，并练习对库项目的基础操作。（2）打开素材网页文件，在网页中应用库项目，并练习库项目的更新等操作。网页效果如图I所示。RDShishang浓情正义於食Kf趾nf>tt.图I应用库项目的网页效果【实训步骤】制作步骤如F：I）启动DreamWeaVer,创建个本地站点，打开“12-2SUCai-I”素材网页文档，如图2所示。图2打开素材网页2）选择“窗口资源”命令，打开“资源”控制面板，单击左侧的“库”按钮做切换到“库”选项。3）选择网页顶部导航条图像所在的表格，选择“工具一库一增加对象到库”菜单命令，或单击“资源”面板中“庵”选项右下方的“新建庵项H”按钮在“库''选项中创建个库项目元素，然后为其命名为“top”。4）参考上述方法，将图2左侧的图片也保存到库项目中，命名"1.eft",如图3所示。图3新建的库元素5）打开第二个素材网页文件。6）将光标置于嘤插入庠元素的页面顶部单元格中,在“资源”面板“库”选项中,选中需要的库文件“top”,单击【插入】按钮，在光标处插入选择的库元素，如图4所示。图4插入top库元素7)参考上述方法，在页面中部插入“1.eft”库元素。选中该库元素，切换到代码视图，可以修改其“width”为202,使其宽度适合页面。8)保存文档，并按(F12)功能键在浏览器中进行浏览“实训19通过论坛推广网站【实训目的】掌握网站推广的方法。掌握通过论坛推广网站的步.骤。【实训要求】指定某企业（如食品公司、机械公司等）网站，选择与该行业相关度高的论坛，注册账号，并撰写推广软文。【实训步骤】（略）
