《网页设计与制作微课教程》第四版实训指导.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）选中创建的两个按钮所在的表格单元格,在“属性”面
