《网页设计与制作》实训指导书.docx

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

1、网页设计与制作(DIV+CSS)上饶职业技术学院信息工程系实训1：从基础开始1实训2：摄影师个人网站布局6实训3：生物研究中心网站布局10实训4：教育公司网站布局22实训1：从基础开始实训名称：实训日期：年月日成绩：实训报告日期：年月日一、实训目的1、掌握CSS的各种选择器及其各自的使用方法；2、掌握CSS的继承性与层叠特性以及它们的作用。二实训内容实例制作三实训环境Adobe Dreamweaver CS5、实训步骤、过程1、动手体验CSS首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分， 每一个部分又分别处于不同的模块中，代码如下所示：体验 CSS畅思网络有限公司首先建

2、立HTML文件，构建最简单的页面框架，其内容包括标题和 正文部分，每一个部分又分别处于不同的模块中。首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中。2、“交集”选择器“交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元 素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID 选择器。这两个选择器之间不能有空格，必须连续书写。举例代码如下：无标题文档其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择 器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择 器。其中第一个必须是标记选择器

3、，第二个必须是类别选择器或者ID选择器。其中第一个必须是标记选择器，第二个必须是类别选择 器或者ID选择器。运行效果如图1.1所示：其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器.其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器.其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器.其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器.图1.1标记、类别选择器示例3、CSS的继承性CSS的继承指的是子标记会继承你标记的所有样式风格，并可以在父标记样 式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响 父标记。举例代码

4、如下：无标题文档h1color:blue;text-decoration:underline;emcolor:#FF0000;ul ul lifont-weight:bold;前沿WEB 开发教室WEB设计与开发需要使用以下技术：HTMLCSS并可以在父标记样式风格的基础上再加以修改并可以在父标记样式风格的基础上再加以修改并可以在父标记样式风格的基础上再加以修改Javascript此外，还需要掌握：FLASHDreameweaverPhotoshop运行效果如图1.2所示：前沿翊发教室 WEB设计与开发需要使用以下技术；二 HTIL r CSS-并可以在父标记样式风格的基础上再加以修改并可以在

5、父标记样式风格的基础上再加以修改并可以在父标记样式风格的基础上再加以修改l Javascript.此外，还需要掌握二1. PLASH2. Dr已血已同已占死已r3. Photoshop图1.2包含多层列表的页面实训2：摄影师个人网站布局实训名称： 实训日期：年月日成绩：实训报告日期：年月日一、实训目的1、掌握CSS的几项核心原理和方法，包括定位方法，特别是“盒子模型”、“标准流”、“绝对定位”、“相对定位”等；2、掌握网站的开发流程，从分析、策划到设计整个流程。二实训内容摄影师个人网站布局三实训环境Adobe Dreamweaver CS5、实训步骤、过程1、设置页面的整体背景新建一个本地站点

6、，将背景图片background.gif放入到本地站点的pic文件夹 中，然后在网页代码中添加一些CSS规则，代码如下： 摄影 ffibodymargin:0;padding:0;background-color:#cccc9;background-image:url(pic/background.gif);background-repeat:repeat-x;效果图如图1.1所示:图1.1页面设置背景图像之后的效果2、制作照片展示区域接下来，设置页面上部照片展示区域，首先然body中增加如下代码。Chance Wenyour eye on the worlddiv #container的CS

7、S样式设置如下：#containerwidth:700px;margin:60px auto 0;position:relative;接下来设置ul#profiles的CSS样式设置如下：ul#profilesmargin:0;padding:0;list-style:none;项目列表默认情况下都是竖直排列的，而我们希望这几张照片水平排列，因 此下面要把它们“拉平”，代码如下：ul#profiles lifloat:left;padding:4px;3、设置网页标题的图像替换使用图像来代替文本，代码如下：#container h1background-image:url(pic/logo.p

8、ng);background-repeat:no-repeat;width:137px;height:191px;position:absolute;top:150px;left:270px;#container h1 spandisplay:none;#container h2 display:none;制作好的摄影师个人网站效果图如图1.2所示:1 EVlZwJ! X33.QE%irR Esp-3o-cE遂i* 田| 户flft Xri (E) W=T*t：i RHUU)4，I1 .2 .51 如吁WIN畅思图1.2完成后的网页五, 练习六、源程序清单,测试数据,结果七实训出现的问题实训结

9、果分析（语法错英语提示，中文H译，原，您的理解？）实训3：生物研究中心网站布局实训名称： 实训日期：年月日成绩：实训报告日期：年月日一、实训目的1、掌握CSS的几项核心原理和方法，包括定位方法，特别是“盒子模型”、 “标准流”、“绝对定位”、“相对定位”等；2、掌握网站的开发流程，从分析、策划到设计整个流程；3、CSS中的重要基础，即使用“浮动”的方法进行页面布局。二实训内容生物研究中心网站布局三实训环境Adobe Dreamweaver CS5、实训步骤、过程1、制作页头部分首先来搭建本案例的页头部分的HTML结构，代码如下：Artech Biological CenterLife is a

10、 miracle,Life is Beatiful,We find source of life. SupportContactSite map下面设置CSS样式，首先对body进行初始化，设定margin和padding，并 对正文字体进行设置。代码代码如下:bodymargin:0;padding:0;font-family:Arial;font-size:12px;然后对列表进行初始化，它会影响网页中的所有列表，这样做的目的是使网 页中所有的ul列表都有统一的初始设置。ullist-style-type:none;margin:0;padding:0;接着设置div#container的

11、样式：#containerwidth:765px;margin:10px auto;position:relative;然后设置网页的标题，即h1元素，基本方法和上一章中介绍的图像替换文 本的方法相同。h1border-top:6px #DDD solid;border-bottom:2px #DDD solid;height:80px;background-image:url(logo.png);background-repeat:no-repeat;margin:0;同样，把h2页替换为上面准备好的背景图像。h2width:510px;height:200px;float:right;ba

12、ckground-image:url(banner.png);margin:5px 0 0 0;设置背景图像以后，需要将文本隐藏起来，代码如下：h1 span,h2 spandisplay:none;再设置相应的其他CSS样式。#topMenuposition:absolute;right:0;top:6px;#topMenu lifloat:left;padding: 20px 10px 0;border-left:1px #ddd solid;#topMenu li.firstborder:none;#topMenu li acolor:gray;text-decoration:none;

13、#topMenu li a:hovertext-decoration:underline overline;这时的效果图如图2.1所示:前沿生物技术中心Artttch Biological Centers Home Pagea About USs News Rooma A&tions ResePrograinSupporl Contact Site map图2.1页头部分2、制作主体部分主体的左侧部分，根据分析，代码如下：Home PageAbout USNews RoomActionReseProgramNews and Events 新闻动态Watchfrogging Political

14、Corruption2008.5.9See how we uncovered evidence of government malfeasance and are working to save the species harmed.For Species Worldwide, the Heat Is On2008.5.9How will global warming affect animals and plants already backed into a corner, and what are we doing to help?what are we doing to help?设置

15、主体左侧部分的CSS样式，代码如下：#narrowwidth:235px;float:left;padding:10px;#narrow #mainMenumargin:0 40px 10px 20px;font-size:15px;line-height:20px;#narrow #mainMenu liborder-bottom:1px #DDD solid;#narrow #mainMenu li adisplay:block;text-decoration:none;color:#555;padding:3px 0;padding-left:50px;font-weight:bold;

16、background-image:url(bullet-green.gif);background-repeat:no-repeat;background-position:left center;#narrow #mainMenu li a:hoverbackground-image:url(bullet-red.gif);#narrow #mainMenu li.last border-bottom:1px white solid; #narrow formbackground-image:url(search-background.gif);text-align:center;paddi

17、ng-top:11px;height:36px;padding-bottom:0px;margin:10px 0;#narrow #news h3margin:10px 0;font-size:15px;#narrow #news pmargin:0;#narrow .newsTitlecolor:#47C;font-size:12px;font-weight:bold;padding-left:10px;background-image:url(arrow.gif);background-position:left center;background-repeat:no-repeat;mar

18、gin:10px 0 0 -10px;#narrow .newsDatecolor:#777;font-weight:bold;#narrow .newsContentfont-size:11px;color:#777;3、主要内容区接下来，就要设置右边的两个区块了，我们可以设置两个DIV，分别放置“研 究计划”的“工作项目”栏目，代码如下：Our Program 研究计划-1 The Biological Center works through science, law, and creative media to secure a future for all species, grea

19、t or small, hovering on the brink of extinction.Biodiversity International OceansPublic LandsUrban WildlandsAir and EnergyOur Works 工作项目-2The Center for Biological Diversity works through science, law, and creative media to secure a future for all species, great or small, hovering on the brink of ex

20、tinction. Youre not alone. We just celebrated the 100,000th download around the world of our endangered species ringtones.Our Program 研究计划-3 The Biological Center works through science, law, and creative media to secure a future for all species, great or small, hovering on the brink of extinction.Bi

21、odiversity International OceansPublic LandsUrban WildlandsAir and EnergyOur Works 工作项目-4The Center for Biological Diversity works through science, law, and creative media to secure a future for all species, great or small, hovering on the brink of extinction. Youre not alone. We just celebrated the

22、100,000th download around the world of our endangered species ringtones.Our Program 研究计划-5 The Biological Center works through science, law, and creative media to secure a future for all species, great or small, hovering on the brink of extinction.Biodiversity International OceansPublic LandsUrban W

23、ildlandsAir and Energy设置相应的CSS样式，代码如下：.contentBoxwidth:245px;float:left;padding:0 5px;.contentBox h3font-size:15px;color:white;line-height:1.5;margin:5px -2px 5px -5px;padding-left:5px;.orange h3background:orange;.green h3background-color:green;.contentBox ulmargin-left:2em;font-weight:bold;color:#6

24、66;list-style-type:circle;.floatLeftfloat:left;margin-right:5px;主要内容区的效果图如图2.2所示:a KeserrogramOur Prcgran研究汁翊-1Our Works工作项目、watcnrroKing Political corruptioni200S.5.9See ho w wi& un Davered wiC hicib o1 3verrnne：nl niartiBBB9nc sn j ars worfcn ta &ave the harmed.、Forspeci&swofidMcitnoHQatigon2008.5

25、.9How will global warming aliect erhialB ard pnlB Blrescry bsERed inlc a ccrnsr, anil whal are wetimngitci hel?蚀 hat a re we doingi m hHp?Tht BialagicaI Cenier /orks 1hraLigh science 13, and creative mtdia tc se：zjjre a rutdre ror all species, g陷t or small hearing on the brink oTextinction.c BiMip*新

26、呼 inteirnatlDnial octaned PuMc Landsd UrbanWikilandisd Air and neroThe Cenier for Biological Diver&ih- works 1hrough science. I3uus and cs丽 media to secure m ruture m all speDOG, grsal ar small,haven ng on mg bn nk nr extin etia n.Ya u re n-Dt al one. wo ju st cel 配 raw dme 100.000th download around

27、 the world of our endanaered species ringtones.Ouir Pragrami 汁划=3Our Works作顼目 TOur Program研究计到*5The Biolcgical Center works through sd&nEe, la a-, and Er&aii/e media ta secure a lUUire fcr sll grlcr small, hwering on tne brink Dre.dlricllon.o Biodiversityo International Qcaano PuNic Landso Urban Wil

28、dlandao AjrandlEnerwTTi9 Centerlor Biologic I Ci/ersrt/worte through sderiK. law. and creafr/e media to secure a future far all species great or smallha/ering an the brink af ejdinctian.Youre nai 3lane. We juat Eekbrat&d the IQOOOth downlead arcund lhe world af cur endangtired epecies nnetenes.图2.2主

29、要内容区的效果The Biological Center works through scien-Le. law. and cr岩alivE media to secure a 1u1ure lorall speaes. great ar small, havering on the brink of extinctiono Biodhrersitvo InternatHjnsI Oceana PuiUie Landso Urban Wildlandso Air and Energy4、页面底部部分现在这个页面基本上已经完成了，最后制作页面的页脚部分。页面分为了左 中右3个部分，分别放置版权信

30、息、地址和联系邮件。因此可以用一个ul列表 来搭建。代码如下：All Copyright Reserved 2008No 23 Changan Street Beijing Chinae-mail:CSS样式如下：.floatLeftfloat:left;margin-right:5px;#footerclear:both;#footer ulmargin-top:15px;height:30px;border-top:10px #ddd solid;border-bottom:10px #ddd solid;#footer ul liwidth:254px;float:left;height

31、:30px;background-color:#ddd;text-align:center;line-height:30px;border-left:1px #bbb solid;#footer .firstborder:none;width:255px;.clearclear:both;#footerclear:both;#footer ulmargin-top:15px;height:30px;border-top:10px #ddd solid;border-bottom:10px #ddd solid;制作好的生物研究中心网站效果图如图2.3所示:Support Contact Slb

32、s map成前沿生物技术中心 Artech Biological Centeru Home Page目 About USm News Romo Action誓 R&sePragramSearchNews and Events 新闻动密Life ii a minudLife i| brtifut Wa find ipum ?f Icfs.Our Program愤究计划-1SirWtarfcsT 作项目-2* liVatr.lifrDggirg Poirtical Corruption2D0S.5.S -Ssr haw we uncDwered evidence-af q&vflrnrrerTt

33、mallssBsnce end are w orklng 1e SflVClh-E SPCCWM hflrnfflj For Species Won(!wdejhe Heat Is Cki 2D0S.5.SHdw wil ghbal warmrig aFFed animals and plani* 目Irs区b acked rile a ccrner. and what are wc doing to hdp?whare we doing In tidp1?The Biological Center works tn roujhgdnce, lawB and ctealke media仍 g宙

34、由於 a future Fc r al I spBciss. greater Emailn enn gontne brink oT exfln 国 onq BKjdiversrtyo inremstlonBl Dceansa Public Landso Urban Wildlands Air and EneroyThe Center for Biological DI 仲倒以 works ihrauQh science, laftv, and creaiive medisto secure anrtureTor g ll Wig 倒 or small,h WE-rin g on the bn nk of Eitincii on.YDure nai al one. We ju st cdlebrited ihe lDO,ODGth download around tnb warld of aur gndQnardGp