《网页设计与制作微课教程》第四版实训指导.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列单元格中，单击“插入”面板中的“文本区域”，创建个多行的文本区域，在“双性”面板上班置“Rows”为3,“Co1.s”为35。15）谢整表格各行的高度，使页面效果美观。16）在表格外键入回车键,分别单击“插入”面板中的“提交按钮”和“建置按钮”进行添加，并在两个按钮间输入适当的空格，17）选中创建的两个按钮所在的表格单元格,在“属性”面