《网页设计与制作(DIV+CSS)》实训指导书-.pdf
网页设计与制作（DIV+CSS）实训指导书网页设计与制作（DIV+CSS）上饶职业技术学院信息工程系 网页设计与制作（DIV+CSS）实训指导书目 录实训 1：从基础开始.1实训 2：摄影师个人网站布局.6实训 3：生物研究中心网站布局.10实训 4：教育公司网站布局.22 网页设计与制作（DIV+CSS）实训指导书1 实训 1：从基础开始实训名称：成绩：实训日期：年月日实训报告日期：年月日一、实训目的1、掌握 CSS的各种选择器及其各自的使用方法；2、掌握 CSS的继承性与层叠特性以及它们的作用。二、实训内容实例制作三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、动手体验 CSS 首先建立 HTML 文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中，代码如下所示：体验 CSS 畅思网络有限公司 首先建立 HTML 文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中。首先建立 HTML 文件，构建最简单的页面框架，其内容包括标题和 网页设计与制作（DIV+CSS）实训指导书2 正文部分，每一个部分又分别处于不同的模块中。2、“交集”选择器“交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。举例代码如下：无标题文档 其中第一个必须是标记选择器，第二个必须是类别选择器或者ID 选择器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID 选择器。其中第一个必须是标记选择器，第二个必须是类别选择器或者 ID 选择器。网页设计与制作（DIV+CSS）实训指导书3 其中第一个必须是标记选择器，第二个必须是类别选择器或者 ID 选择器。运行效果如图 1.1 所示：图 1.1 标记、类别选择器示例3、CSS的继承性CSS的继承指的是子标记会继承你标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。举例代码如下：无标题文档 h1 color:blue;text-decoration:underline;em color:#FF0000;ul ul li font-weight:bold;其中第一个必须是标记选悸器，第二个必须是类别选择器或者ID选悸器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器其中第一个必须是标记选挥器，第二个必须是类别选择器或者ID选悸器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器 网页设计与制作（DIV+CSS）实训指导书4 前沿WEB 开发教室 WEB 设计与开发需要使用以下技术：HTML CSS 并可以在父标记样式风格的基础上再加以修改 并可以在父标记样式风格的基础上再加以修改 并可以在父标记样式风格的基础上再加以修改 Javascript 此外，还需要掌握：FLASH Dreameweaver Photoshop 运行效果如图 1.2 所示：网页设计与制作（DIV+CSS）实训指导书5 图 1.2 包含多层列表的页面前沿阳B开发教室 WEB设计与开发需要使用以下技术：口IITILO css 并可以在父标记样式风格的基础上再加以修改并可以在父标记样式风格的基础上再加以修改并可以在父辑记样式风格的基础上再加以修改口Javascript此外，还需要草握z1.FLASH 2.Dreameweaver 3.Photoshop 网页设计与制作（DIV+CSS）实训指导书6 实训 2：摄影师个人网站布局实训名称：成绩：实训日期：年月日实训报告日期：年月日一、实训目的1、掌握 CSS的几项核心原理和方法，包括定位方法，特别是“盒子模型”、“标准流”、“绝对定位”、“相对定位”等；2、掌握网站的开发流程，从分析、策划到设计整个流程。二、实训内容摄影师个人网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、设置页面的整体背景新建一个本地站点，将背景图片 background.gif 放入到本地站点的pic 文件夹中，然后在网页代码中添加一些CSS规则，代码如下：摄影师 body margin:0;padding:0;background-color:#cccc9;background-image:url(pic/background.gif);background-repeat:repeat-x;网页设计与制作（DIV+CSS）实训指导书7 效果图如图 1.1 所示：图 1.1 页面设置背景图像之后的效果2、制作照片展示区域接下来，设置页面上部照片展示区域，首先然body 中增加如下代码。Chance Wen your eye on the world div#container的 CSS样式设置如下：司lEllllllllce，销量2352523rsfgift，？EURe“巴”e袋，、meMZeseeae-”网页设计与制作（DIV+CSS）实训指导书8#container width:700px;margin:60px auto 0;position:relative;接下来设置 ul#profiles 的 CSS样式设置如下：ul#profiles margin:0;padding:0;list-style:none;项目列表默认情况下都是竖直排列的，而我们希望这几张照片水平排列，因此下面要把它们“拉平”，代码如下：ul#profiles li float:left;padding:4px;3、设置网页标题的图像替换使用图像来代替文本，代码如下：#container h1 background-image:url(pic/logo.png);background-repeat:no-repeat;width:137px;height:191px;position:absolute;top:150px;left:270px;#container h1 span display:none;#container h2 display:none;网页设计与制作（DIV+CSS）实训指导书9 制作好的摄影师个人网站效果图如图1.2 所示：图 1.2 完成后的网页五、练习六、源程序清单、测试数据、结果七、实训出现的问题、实训结果分析（语法错英语提示，中文翻译，原因，您的理解？）(r-川.-_.户.1;1再唰盹咄咄地fllI.SIUfttft捕叫11-llfllM-4也啪”笑，tt).I CD 晨tit.I.Act)会”捐二三圣：1CHANCE WEN 畅思y:JI.,.OI I .”。1J )DV OX.巍”理 网页设计与制作（DIV+CSS）实训指导书10 实训 3：生物研究中心网站布局实训名称：成绩：实训日期：年月日实训报告日期：年月日一、实训目的1、掌握 CSS的几项核心原理和方法，包括定位方法，特别是“盒子模型”、“标准流”、“绝对定位”、“相对定位”等；2、掌握网站的开发流程，从分析、策划到设计整个流程；3、CSS中的重要基础，即使用“浮动”的方法进行页面布局。二、实训内容生物研究中心网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、制作页头部分首先来搭建本案例的页头部分的HTML 结构，代码如下：Artech Biological Center Life is a miracle,Life is Beatiful,We find source of life.Support Contact Site map 下面设置 CSS 样式，首先对 body 进行初始化，设定margin 和 padding，并对正文字体进行设置。代码代码如下：网页设计与制作（DIV+CSS）实训指导书11 body margin:0;padding:0;font-family:Arial;font-size:12px;然后对列表进行初始化，它会影响网页中的所有列表，这样做的目的是使网页中所有的 ul 列表都有统一的初始设置。ul list-style-type:none;margin:0;padding:0;接着设置 div#container 的样式：#container width:765px;margin:10px auto;position:relative;然后设置网页的标题，即h1 元素，基本方法和上一章中介绍的图像替换文本的方法相同。h1 border-top:6px#DDD solid;border-bottom:2px#DDD solid;height:80px;background-image:url(logo.png);background-repeat:no-repeat;margin:0;同样，把 h2 页替换为上面准备好的背景图像。h2 width:510px;height:200px;float:right;网页设计与制作（DIV+CSS）实训指导书12 background-image:url(banner.png);margin:5px 0 0 0;设置背景图像以后，需要将文本隐藏起来，代码如下：h1 span,h2 span display:none;再设置相应的其他 CSS样式。#topMenu position:absolute;right:0;top:6px;#topMenu li float:left;padding:20px 10px 0;border-left:1px#ddd solid;#topMenu li.first border:none;#topMenu li a color:gray;text-decoration:none;#topMenu li a:hover text-decoration:underline overline;这时的效果图如图 2.1 所示：网页设计与制作（DIV+CSS）实训指导书13 图 2.1 页头部分2、制作主体部分主体的左侧部分，根据分析，代码如下：Home Page About US News Room Action ReseProgram News and Events 新闻动态 Watchfrogging Political Corruption 2008.5.9 See how we uncovered evidence of government malfeasance and are working to save the species harmed.For Species Worldwide,the Heat Is On 2008.5.9 How will global warming affect animals and plants already backed into a corner,and what are we doing to help?.前沿生物技术中心Support Contact Srte map.Artech Bl。logicalCenter.,H。mePage。Ab。utUS 回News R。m。Aeti。n也ReseProgram 一I Search J 网页设计与制作（DIV+CSS）实训指导书14 what are we doing to help?设置主体左侧部分的CSS样式，代码如下：#narrow width:235px;float:left;padding:10px;#narrow#mainMenu margin:0 40px 10px 20px;font-size:15px;line-height:20px;#narrow#mainMenu li border-bottom:1px#DDD solid;#narrow#mainMenu li a display:block;text-decoration:none;color:#555;padding:3px 0;padding-left:50px;font-weight:bold;background-image:url(bullet-green.gif);background-repeat:no-repeat;background-position:left center;#narrow#mainMenu li a:hover background-image:url(bullet-red.gif);#narrow#mainMenu li.last border-bottom:1px white solid;网页设计与制作（DIV+CSS）实训指导书15#narrow form background-image:url(search-background.gif);text-align:center;padding-top:11px;height:36px;padding-bottom:0px;margin:10px 0;#narrow#news h3 margin:10px 0;font-size:15px;#narrow#news p margin:0;#narrow.newsTitle color:#47C;font-size:12px;font-weight:bold;padding-left:10px;background-image:url(arrow.gif);background-position:left center;background-repeat:no-repeat;margin:10px 0 0-10px;#narrow.newsDate color:#777;font-weight:bold;#narrow.newsContent font-size:11px;color:#777;网页设计与制作（DIV+CSS）实训指导书16 3、主要内容区接下来，就要设置右边的两个区块了，我们可以设置两个DIV，分别放置“研究计划”的“工作项目”栏目，代码如下：Our Program 研究计划-1 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 Oceans Public Lands Urban Wildlands Air and Energy Our Works 工作项目-2 The 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.You?re 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.Biodiversity International Oceans Public Lands 网页设计与制作（DIV+CSS）实训指导书17 Urban Wildlands Air and Energy Our Works 工作项目-4 The 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.You?re not alone.We just celebrated the 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 Oceans Public Lands Urban Wildlands Air and Energy 设置相应的 CSS样式，代码如下：.contentBox width:245px;float:left;padding:0 5px;.contentBox h3 font-size:15px;网页设计与制作（DIV+CSS）实训指导书18 color:white;line-height:1.5;margin:5px-2px 5px-5px;padding-left:5px;.orange h3 background:orange;.green h3 background-color:green;.contentBox ul margin-left:2em;font-weight:bold;color:#666;list-style-type:circle;.floatLeft float:left;margin-right:5px;主要内容区的效果图如图2.2 所示：网页设计与制作（DIV+CSS）实训指导书19 图 2.2 主要内容区的效果4、页面底部部分现在这个页面基本上已经完成了，最后制作页面的页脚部分。页面分为了左中右 3 个部分，分别放置版权信息、地址和联系邮件。因此可以用一个ul 列表来搭建。代码如下：All Copyright Reserved 2008 No 23 Changan Street Beijing China e-mail: CSS样式如下：.floatLeft float:left;margin-right:5px;#footer clear:both;Kese.-r。gram=i New,and Events都阁动态 Watchfroggi咱Poli创calC。”uptl町、2008.S.9 SeehOw we uoe阳eredevid阴阳时90,em响酬treuaoce ald are wo9 to 副呻trespec,es 晤。for Secies w。”。响曲，IlleHeatlsOn 2008.S.9”。W惋惜gl。b创wanmgattea aomas,.,p脑.dy M由国刑。acomer,aod wha1 are wedomgto he?wha1 ace we dog to he胁旦_r_lrogram研究计划1T阳ee101 oglca1 Center works through science.law,andealive media to secure a 阳turefoallspecies.great or small.”阳而ng。nIlle b而nkofe副nction。由Odi,ersity。如帽”睛”“，alOceans。Pu园，cLands。，1onWildlon)f贷计划a|The Biological Centerwor陆lhroughscience.law.and crea恤琶mediato seJre a tulJre ror an seCies.great or small.的overl咱onthe brink of extinction.O Bi叫iver创tyc lnternati。nalOceans O Public LOI咀$c Urban w,1e1aoos c AiraooEne咱VTho Conte,fo,e,01091臼lDiv田Si!yw。11sthrough sci en臼阳w,and crea割vemedia to seJre a如tuelJr all species.great。rsmal”阳ertngon me brtnk。fe硝nctionYoure not alone.We J ust celebrated the 00,000t”download around拍ewortd of our endangeedspecies ringtones.he Biol。glcolCenter wo1o th rough scien目阳 wand creatie media to secure a 阳turetor all species,great or small,hovering on Ille brink of e由nction。由但如ersity。lnterr回幅。noloceans。Pubhcar回S。u巾anWildlands O剧rand E附r町 网页设计与制作（DIV+CSS）实训指导书20#footer ul margin-top:15px;height:30px;border-top:10px#ddd solid;border-bottom:10px#ddd solid;#footer ul li width:254px;float:left;height:30px;background-color:#ddd;text-align:center;line-height:30px;border-left:1px#bbb solid;#footer.first border:none;width:255px;.clear clear:both;#footer clear:both;#footer ul margin-top:15px;height:30px;border-top:10px#ddd solid;border-bottom:10px#ddd solid;制作好的生物研究中心网站效果图如图2.3 所示：网页设计与制作（DIV+CSS）实训指导书21 图 2.3 生物研究中心网站效果图五、练习六、源程序清单、测试数据、结果七、实训出现的问题、实训结果分析（语法错英语提示，中文翻译，原因，您的理解？）：前沿生物技术中心Artech Biological Center。H。mePg D Ab。utUS。NewsR。m臼Acti。n:,RsP，。gram Suppon Contaa Site map Ntws and Events新闻动态I Our Works工作项目2I I Our Program Jr究讨灿1|wa1cnw。gg,吨v。”uca1corruJ)(”、2回8.5.9S.,how w uoco.eeanVllldlands o Air a回EnergyAll Cop1nght ReseNed 2008 Tile e1 01 ogtca1 Centerw。rkslnroug”sdence,ta.v,and C陪3111内emedia to secure a Mure tor all species,great。rs町、al。ho睛，ingon恬、ebrink of e刻inction。剧目werslty。lnte何、au。naloceans。PublltLands。U由时，nWilllo回S。，urand Energy miill _if；曰I面ll!I!The Center foSiolog，臼lDI晴陪ltywor陆1nroug阳science.taw,and ere a”呻medlat。securea tutu re f,r all species great。rsmall,hvering on协ebrink of e刻inctionYoure not alone.We J ust celebrated 1ne 100.oootll downl。adatound tile wMd ot。uendangered species别向gt。.No 23 Changan Street Beijing China The Center tor erotogl臼1 Olvetslt/W。rkstllrough 二a sc,enoe,law,and creative-media to secure a阳阳帽tor all spees.great or small.hovenng on the bnnk of e就in由on.Youre not alone.、，Vejusl oeleb由ledme 00,000th download around the world of our endangered species ringtones I OurP叫ram研究计划4|The B，。log阳lCenterworls through sclenoe.la,以andeawemedia to secure a tutu re tor all species,great osmallMse而ngon the Mnk 01 e成：inc,川on.。由odivers即o lntema”“咽，。ceanso Public La回s。UrbanVlddlands。Aira，回 En酬，yemaitsuppor咆artech.on 网页设计与制作（DIV+CSS）实训指导书22 实训 4：教育公司网站布局实训名称：成绩：实训日期：年月日实训报告日期：年月日一、实训目的1、继续强化“绝对定位”、“相对定位”两种重要的定位方式；2、掌握利用“浮动”的方法进行页面布局；3、本例制作一个两列布局的案例，以加强对之前所学的知识的理解；4、掌握在网页中增加圆角框的效果。二、实训内容教育公司网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、制作页头部分页头部分是这个页面比较复杂的部分，如图3.1 所示。包括了标题、顶部菜单、主菜单和搜索表单4 个部分，另外，主菜单和搜索表单还要置于一个圆角框中。图 3.1 页头部分的最终效果（1）搭建页头部分的 HTML 结构下面来解决 header部分，header部分的 HMTL 代码如下：前沿视频教室 交流中心 技术支持 视颇踉程图书It帮你问戮筝读者留吉联我们案例分Iii 网页设计与制作（DIV+CSS）实训指导书23 搜索 教室首页 视频教程 图书推荐 你问我答 读者留言 联系我们 案例分析 对 body 元素的整体进行设置，这里设置文字的字体，文字的大小为12px，行高为文字大小的1.5 倍。代码如下：body font:12px/1.5 Verdana,Arial,Helvetica,sans-serif;background-color:#444;margin:0;接下来确定 div#header的整体属性，设定宽度，居中对齐，设置文字颜色。代码如下：#header margin:0 auto 10px;padding:0;width:756px;position:relative;color:#BBB;网页设计与制作（DIV+CSS）实训指导书24（2）页面标题的图像替换对于 h1 标题的文字替换，代码如下：h1 margin:10px 0 0 0;height:63px;background-image:url(logo.gif);background-repeat:no-repeat;h1 span display:none;（3）顶部菜单接下来设置顶部菜单。使用绝对定位，可以把它固定在标题的右侧，具体代码如下：#topMenu margin:0;padding:0;position:absolute;list-style-type:none;right:10px;top:50px;#topMenu li float:left;border-left:1px white solid;#topMenu li a padding:0 10px;color:white;text-decoration:none;#topMenu li a:hover 网页设计与制作（DIV+CSS）实训指导书25 background-color:#000;#topMenu li.firstChild border:none;设置完成标题文字和顶部菜单后的效果如图3.2 所示：图 3.2 标题和顶部菜单设置完成后的效果（4）主菜单接下来，就要设置主菜单部分了。主菜单部分需要实现圆角效果，在实现圆角效果之前，我们先来把菜单和搜索框的内容布置好，然后再给它设置圆角。在主菜单区域包括左右两部分，左边是菜单，右边是搜索框。首先设定菜单的宽度和文字颜色，这个菜单是使用ul 列表来实现的。代码如下：ul#mainMenu width:500px;padding:0;margin:0;color:#000;菜单项目之间的分隔线，即立体效果代码：ul#mainMenu li float:left;list-style-type:none;border-left:1px#aaa solid;border-right:1px#eee solid;把最左边项目的左边框和最右边项目的右边框去掉，这时可以分别对最左边和最右边的两个项目单独设置，代码如下：#mainMenu li.firstChild border-left:none;#mainMenu li.lastChild border-right:none;网页设计与制作（DIV+CSS）实训指导书26 设置菜单项目的链接文字以及鼠标指针经过时的效果，代码如下：#mainMenu li.firstChild border-left:none;#mainMenu li.lastChild border-right:none;效果如图 3.3 所示：图3.3 设置主菜单后的效果（5）搜索框设置主菜单以后，再来设置搜索框。为了使搜索框靠右对齐，使用向右浮动的设置。代码如下：#searchBox float:right;margin-top:5px;接下来使用按钮看起来像普通文字，进行如下的设置：#searchBox#submit background:transparent;border:0;margin:0;padding:0;#searchBox form,#searchBox input.textfield,#searchBox button margin:0;padding:0;（6）页头部分的圆角框你问我爸读者留言联革我们案例纣析 网页设计与制作（DIV+CSS）实训指导书27 给主菜单和搜索框外面套一个圆角框了。这里需要使用两个背景图像，因此必须要有两个 HTML 元素，我们使用两层DIV，代码如下：搜索 教室首页 视频教程 图书推荐 你问我答 读者留言 联系我们 案例分析 然后分别设置二者的CSS样式：#mainMenu-outer-wrapper background-color:#ccc;background-image:url(main-menu-top.gif);background-repeat:no-repeat;padding-top:3px;margin-top:10px;#mainMenu-inner-wrapper background-image:url(main-menu-bottom.gif);background-repeat:no-repeat;background-position:bottom;padding-bottom:7px;网页设计与制作（DIV+CSS）实训指导书28 增加一个空的 div，并设置清除属性，代码如下：.clearBoth clear:both;2、制作主体部分（1）结构分析下面构建主体部分，在写 HTML 代码之前，应该分析一下各个部分的层次关系，根据分析，可以把#footer 这个 div 放置于#container里面，并为#footer 设置清除属性，这样就可以满足要求了。根据上面的分析，构建HTML 如下：home?视频教程?CSS设计彻底研究 核心原理、技巧与设计实战 .首先设置外层的#container的属性，固定宽度，居中对齐，使用中间平铺的背景图像作为背景，并设置竖直方向平铺。#container margin:0 auto;padding:0;width:758px;position:relative;background:#444 url(,background-2-cols.gif?)repeat-y;网页设计与制作（DIV+CSS）实训指导书29 然后设置左右两列的属性。#content width:521px;float:left;background:transparent url(,cap_content.gif?)no-repeat;padding:0px 20px 0px;#sideBar width:187px;float:right;background:transparent url(,cap_sideBar.gif?)no-repeat;padding:13px 2px 0px;这时左右两列的布局已经完成了，但是还看不到效果，下面增加了内容之后，就可以看到了。（2）“面包屑”导航“面包屑”导航让用户对他们所访问的页面在网站层次结构上的关系一目了然，可以改善网站的实用性和易用性，同时也可以提高网站对搜索引擎的友好性。这里使用了一个面包屑导航是通过ul 列表来实现的。相关的 CSS代码如下：#content#depthPath margin:5px 0 0 0;padding:0;#content#depthPath li display:inline;#content#depthPath li a color:#000;（3）设置正文标题对正文的标题进行设置，代码如下：#content h2 margin:0px;font-size:25px;font-family:黑体;网页设计与制作（DIV+CSS）实训指导书30 （4）设置页脚最后设置#footer。设置清除属性、背景以及上侧的padding，这个 padding的值正是背景图像的高度，以保证#footer 中的内容不会压在背景图像上面。#footer clear:both;background:#444 url(bottom-2-cols.gif)no-repeat;padding-top:15px;这时的效果图如图 3.4 所示：图 3.4 左右两列布局完成后的效果接下来，只需要在左列和右列中分别添加具体的文字或图像内容就可以了，圆角框自动延伸。（5）添加页面内容布局已经完成，剩下的就是向#content、#sideBar、#footer 中添加内容了。随着内容增加，这两列的高度自然就会增加，圆角框都会保持着正确的状态。在#sideBar中增加一个 ul 列表，设置一些列表项目，代码如下：视频教程 CSS 设计彻底研究 精通 CSS+DIV 网页布局 HTML与 CSS实战 Flash Dreamweaver CSS 设计彻底研究 CSS 核
