《网页设计与制作微课教程》第四版实训指导.docx

《《网页设计与制作微课教程》第四版实训指导.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作微课教程》第四版实训指导.docx（22页珍藏版）》请在三一办公上搜索。

1、实训1制作个人简介网页【实训目的】华握使用记事本编辑HTM1.5文档的方法。掌握HTM1.5的文档结构和常用的HTM1.5标签功能.【实训要求】打开记事本，在记事本中输入包含个人简介内容的HTM1.5代码，参考代码如下面的灰色底纹部分内容，将其以CXO1.hIm1.为文件名进行保存。打开保存的浏览落文档，预览网页内容显示效果。参考HTM1.代码如下：v!doctypchtm1.VIne1.acharset=utf-8Viue个人简介vpxh2个人基本信息姓名，性别，出生年月，是否团员或者预备党员，VPxh2大学期间狭得的主要荣誉V2xbdvpxh2曾参与过的社会实践活动U2xbr/12）为项目

2、列表标签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：11arginright:6px;margin-bottom:6px;background-image：ur1.(images.,bg.pho*c三(K-)题为：OtM(1.)OU条件使用(可选)(WB1

3、.)()图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:5

4、0pxOpxJOpx0px;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.

5、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;)

6、10)设置成果展示的图文混排效果。在ShOW里面插入在ID为“showinfo”的Div,并使用u1.标签设置图文混排列表。部分HTM1.代码如卜所示：vp成果名称vpX1.iimgsrc=imagcs.s21Jpg1TxpX果名成果名称vp成果名ID设置图文混排效果的CSS样式代码如下所示：Ashowinfou1.margin:Opx;padding:OPx;Iist-S1.ykrnone;)#ShOWinfOiif1.oac1.eft;width:182px:)#showintbIiimgborder:Ipxso1.id#d2beb4;padding:1.px;width:165px:he

7、ight:115px;AShOWinfbpiinc-hcighc22px:(cxt-a1.ignxcntcr;112)在bouom内部添加版权信息，并设置CSS样式代码如下：#bottomp(fbnt-siznt6初务X22mbmc图1网上报名页面【实训步骤】制作步骤如F：1）启动DreamWeaVer,创建一个本地站点,新建一个空白HTM1.文档。2）选择“插入一Tabkr菜单命令，插入一个3行I列，边框为0,宽度为650像素的布局表格，并在“属性”面板上设置表格对齐“A1.ign”为居中对齐。3）光标定位在第一个单元格中，选择“插入一Image”菜单命令，插入素材图4“女”前单选按钮的械性

8、设置图5“男”前单选按钮的属性设附11）参考步骤9,为“年龄：”后，第4行第2列堆元格中，添加一个单行文本域，设置其“字符宽度”为6：“联系电话：”后，第6行第2列单元格中，添加一个单行文本域，设置其“字符宽度”为默认即可。12）在“报考科目：”后，第5在第2列单元格中，单击“插入”面板中的“品选框”,分别插入4个第选框，并将其后的文本修改为“英语”、数学”、“政治”、专业课”.13）光标定位在“上传照片：”后，第7行第2列单元格中，单击“插入”面板中的“文件”，创建一个文件表单项。14）光标定位在“说明：”后，第8行第2列单元格中，单击“插入”面板中的“文本区域”，创建个多行的文本区域，在“

9、双性”面板上班置“Rows”为3,“Co1.s”为35。15）谢整表格各行的高度，使页面效果美观。16）在表格外键入回车键,分别单击“插入”面板中的“提交按钮”和“建置按钮”进行添加，并在两个按钮间输入适当的空格，17）选中创建的两个按钮所在的表格单元格,在“属性”面板中设置单元格“水平”为“居中对齐”.18）在布局表格最后一行中输入网页的版权信息内容，并设身字体大小为14px.居中对齐。19）单击页面“属性”面板的“页面属性”按钮，设置网页的背景图片。20）保存文档,并按F12功能键在浏览器中进行浏览.嵌套表格、文本和图像，效果如图2所示。图2页面布局并添加内容4）合并右他2个单元格，选择“

10、插入一表单一表单”菜单命令，或堆击“插入”面板“表单”类别中的“表单”项，创建一个表单。5）在表单中再插入一个表格，并在表格中进一步布同及插入素材图像与文本内容，如图3所示。图3表单内部布局并添加内容6）在“姓名：”后的堆元格中，单击“插入面板中的“文本”创建一个单行的文本框，删除多余文本.window.onioad=showADEic:7）保存网页，并在浏览器中预览效果e3)同样的方法，在右IW维续插入卜拉列表“right”，该列表项为空，并设置相应的属性和Sty1.e样式。具体参考代码如下：ifiJft1.op(ionVaIUe=选项2op1.ionVaIUc=选项3optionVaIUC

11、=选项4op(ionVa1.U选项5pse1.ec4)在下拉列表下方，选择“插入一表单一按钮”菜单命令，分别插入两个按钮,按钮的“va1.ue”属性分别设置为选中的“选中的选项添加到右边”和“选中的选项添加到左边”。5)输入JavaSCriP1.代码，定义两个函数，川T完成下拉列表项左右移动的功能，并将按钮绑定事件。具体参考代码如F.einM1.1.ype=buuo11va1.ue=*选中的选顶添加到右边Ondick=Fdd1.bRighiOS1.yIe=width:170pxf/func(ionad11bRight()var1.eft=docuncnt.gctE1.cmentBy!d(,1.

12、cft);varright=document.gc(E1.cmcntById(Mrigh(M);var1.eftop=1.eftgeiE1.ementsByTagNameCopiion,*);fbr(vari=0;ip.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.gc

13、tE1.cmcntsByTagNamc(,opio!);Ibrtvari=O;itt.图I应用库项目的网页效果【实训步骤】制作步骤如F：I）启动DreamWeaVer,创建个本地站点，打开“12-2SUCai-I”素材网页文档，如图2所示。图2打开素材网页2）选择“窗口资源”命令，打开“资源”控制面板，单击左侧的“库”按钮做切换到“库”选项。3）选择网页顶部导航条图像所在的表格，选择“工具一库一增加对象到库”菜单命令，或单击“资源”面板中“庵”选项右下方的“新建庵项H”按钮在“库选项中创建个库项目元素，然后为其命名为“top”。4）参考上述方法，将图2左侧的图片也保存到库项目中，命名1.eft

14、,如图3所示。图3新建的库元素5）打开第二个素材网页文件。6）将光标置于嘤插入庠元素的页面顶部单元格中,在“资源”面板“库”选项中,选中需要的库文件“top”,单击【插入】按钮，在光标处插入选择的库元素，如图4所示。图4插入top库元素7)参考上述方法，在页面中部插入“1.eft”库元素。选中该库元素，切换到代码视图，可以修改其“width”为202,使其宽度适合页面。8)保存文档，并按(F12)功能键在浏览器中进行浏览“实训19通过论坛推广网站【实训目的】掌握网站推广的方法。掌握通过论坛推广网站的步.骤。【实训要求】指定某企业（如食品公司、机械公司等）网站，选择与该行业相关度高的论坛，注册账号，并撰写推广软文。【实训步骤】（略）