《网页设计与制作(DIV+CSS)》实训指导书.doc

网页设计与制作（DIV+CSS）实训指导书网页设计与制作（DIV+CSS）上饶职业技术学院信息工程系 目 录实训1：从基础开始1实训2：摄影师个人网站布局6实训3：生物研究中心网站布局10实训4：教育公司网站布局22实训1：从基础开始实训名称： 成绩： 实训日期： 年 月 日 实训报告日期： 年 月 日一、实训目的1、掌握 CSS的各种选择器及其各自的使用方法；2、掌握CSS的继承性与层叠特性以及它们的作用。二、实训内容实例制作三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、动手体验CSS首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中，代码如下所示：体验CSS畅思网络有限公司首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中。首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中。2、“交集”选择器“交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。举例代码如下：无标题文档其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。运行效果如图1.1所示：图1.1 标记、类别选择器示例3、CSS的继承性CSS的继承指的是子标记会继承你标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。举例代码如下：无标题文档h1 color:blue; text-decoration:underline; em color:#FF0000; ul ul li font-weight:bold; 前沿WEB开发教室WEB设计与开发需要使用以下技术： HTML CSS 并可以在父标记样式风格的基础上再加以修改 并可以在父标记样式风格的基础上再加以修改 并可以在父标记样式风格的基础上再加以修改 Javascript 此外，还需要掌握： FLASH Dreameweaver Photoshop 运行效果如图1.2所示：图1.2 包含多层列表的页面实训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;效果图如图1.1所示：图1.1 页面设置背景图像之后的效果2、制作照片展示区域接下来，设置页面上部照片展示区域，首先然body中增加如下代码。 Chance Wen your eye on the world div #container的CSS样式设置如下：#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; 制作好的摄影师个人网站效果图如图1.2所示：图1.2 完成后的网页五、练习六、源程序清单、测试数据、结果七、实训出现的问题、实训结果分析（语法错英语提示，中文翻译，原因，您的理解？）实训3：生物研究中心网站布局实训名称： 成绩： 实训日期： 年 月 日 实训报告日期： 年 月 日一、实训目的1、掌握 CSS的几项核心原理和方法，包括定位方法，特别是“盒子模型”、“标准流”、“绝对定位”、“相对定位”等；2、掌握网站的开发流程，从分析、策划到设计整个流程；3、CSS中的重要基础，即使用“浮动”的方法进行页面布局。二、实训内容生物研究中心网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、制作页头部分首先来搭建本案例的页头部分的HTML结构，代码如下：Artech Biological CenterLife is a 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的样式：#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;background-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;#topMenu li a:hovertext-decoration:underline overline;这时的效果图如图2.1所示：图2.1 页头部分2、制作主体部分主体的左侧部分，根据分析，代码如下：Home PageAbout USNews RoomActionReseProgramNews and Events 新闻动态Watchfrogging Political 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?设置主体左侧部分的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;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.lastborder-bottom:1px white solid;#narrow formbackground-image:url(search-background.gif);text-align:center;padding-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;margin: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, great or small, hovering on the brink of extinction. Biodiversity International Oceans Public Lands Urban Wildlands Air 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 extinction. 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.Biodiversity 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 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 WildlandsAir 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:#666;list-style-type:circle;.floatLeftfloat:left;margin-right:5px;主要内容区的效果图如图2.2所示：图2.2 主要内容区的效果4、页面底部部分现在这个页面基本上已经完成了，最后制作页面的页脚部分。页面分为了左中右3个部分，分别放置版权信息、地址和联系邮件。因此可以用一个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:30px;background-color:#ddd;text-align:center;line-height:30px;border-left:1px #bbb solid;#footer .firstborder:none;width:255px;.clearclear:both;#footer clear:both; #footer ul margin-top:15px; height:30px; border-top:10px #ddd solid; border-bottom:10px #ddd solid; 制作好的生物研究中心网站效果图如图2.3所示： 图2.3 生物研究中心网站效果图五、练习六、源程序清单、测试数据、结果七、实训出现的问题、实训结果分析（语法错英语提示，中文翻译，原因，您的理解？）实训4：教育公司网站布局实训名称： 成绩： 实训日期： 年 月 日 实训报告日期： 年 月 日一、实训目的1、继续强化“绝对定位”、“相对定位”两种重要的定位方式；2、掌握利用“浮动”的方法进行页面布局；3、本例制作一个两列布局的案例，以加强对之前所学的知识的理解；4、掌握在网页中增加圆角框的效果。二、实训内容教育公司网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、制作页头部分页头部分是这个页面比较复杂的部分，如图3.1所示。包括了标题、顶部菜单、主菜单和搜索表单4个部分，另外，主菜单和搜索表单还要置于一个圆角框中。图3.1 页头部分的最终效果（1）搭建页头部分的HTML结构下面来解决header部分，header部分的HMTL代码如下：前沿视频教室交流中心技术支持搜索教室首页视频教程图书推荐你问我答读者留言联系我们案例分析对body元素的整体进行设置，这里设置文字的字体，文字的大小为12px，行高为文字大小的1.5倍。代码如下：bodyfont: 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;（2）页面标题的图像替换对于h1标题的文字替换，代码如下：h1margin:10px 0 0 0;height:63px;background-image:url(logo.gif);background-repeat:no-repeat;h1 spandisplay:none;（3）顶部菜单接下来设置顶部菜单。使用绝对定位，可以把它固定在标题的右侧，具体代码如下：#topMenumargin:0;padding:0;position:absolute;list-style-type:none;right:10px;top:50px;#topMenu lifloat:left;border-left:1px white solid;#topMenu li apadding:0 10px;color:white;text-decoration:none;#topMenu li a:hoverbackground-color:#000;#topMenu li.firstChildborder:none;设置完成标题文字和顶部菜单后的效果如图3.2所示：图3.2 标题和顶部菜单设置完成后的效果（4）主菜单接下来，就要设置主菜单部分了。主菜单部分需要实现圆角效果，在实现圆角效果之前，我们先来把菜单和搜索框的内容布置好，然后再给它设置圆角。在主菜单区域包括左右两部分，左边是菜单，右边是搜索框。首先设定菜单的宽度和文字颜色，这个菜单是使用ul列表来实现的。代码如下：ul#mainMenuwidth:500px;padding:0;margin:0;color:#000;菜单项目之间的分隔线，即立体效果代码：ul#mainMenu lifloat:left;list-style-type:none;border-left:1px #aaa solid;border-right:1px #eee solid;把最左边项目的左边框和最右边项目的右边框去掉，这时可以分别对最左边和最右边的两个项目单独设置，代码如下：#mainMenu li.firstChildborder-left:none;#mainMenu li.lastChildborder-right:none;设置菜单项目的链接文字以及鼠标指针经过时的效果，代码如下：#mainMenu li.firstChildborder-left:none;#mainMenu li.lastChildborder-right:none;效果如图3.3所示：图3.3 设置主菜单后的效果（5）搜索框设置主菜单以后，再来设置搜索框。为了使搜索框靠右对齐，使用向右浮动的设置。代码如下：#searchBoxfloat: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）页头部分的圆角框给主菜单和搜索框外面套一个圆角框了。这里需要使用两个背景图像，因此必须要有两个HTML元素，我们使用两层DIV，代码如下：搜索教室首页视频教程图书推荐你问我答读者留言联系我们案例分析然后分别设置二者的CSS样式：#mainMenu-outer-wrapperbackground-color:#ccc;background-image:url(main-menu-top.gif);background-repeat:no-repeat;padding-top:3px;margin-top:10px;#mainMenu-inner-wrapperbackground-image:url(main-menu-bottom.gif);background-repeat:no-repeat;background-position:bottom;padding-bottom:7px;增加一个空的div，并设置清除属性，代码如下：.clearBothclear:both;2、制作主体部分（1）结构分析下面构建主体部分，在写HTML代码之前，应该分析一下各个部分的层次关系，根据分析，可以把#footer这个div放置于#container里面，并为#footer设置清除属性，这样就可以满足要求了。根据上面的分析，构建HTML如下： home视频教程CSS设计彻底研究 核心原理、技巧与设计实战 .首先设置外层的#container的属性，固定宽度，居中对齐，使用中间平铺的背景图像作为背景，并设置竖直方向平铺。#containermargin: 0 auto;padding: 0;width: 758px;position: relative;background:#444 url(background-2-cols.gif) repeat-y;然后设置左右两列的属性。#contentwidth:521px;float:left;background:transparent url(cap_content.gif) no-repeat;padding:0px 20px 0px;#sideBarwidth:187px;float:right;background:transparent url(cap_sideBar.gif) no-repeat;padding:13px 2px 0px;这时左右两列的布局已经完成了，但是还看不到效果，下面增加了内容之后，就可以看到了。（2）“面包屑”导航“面包屑”导航让用户对他们所访问的页面在网站层次结构上的关系一目了然，可以改善网站的实用性和易用性，同时也可以提高网站对搜索引擎的友好性。这里使用了一个面包屑导航是通过ul列表来实现的。相关的CSS代码如下：#content #depthPathmargin:5px 0 0 0;