网页设计及制作DIV+CSS实训指导书

1、-. z.网页设计与制作DIV+CSS职业技术学院信息工程系目 录 TOC o 1-3 h z u HYPERLINK l _Toc343673587实训1：从根底开场 PAGEREF _Toc343673587 h 1HYPERLINK l _Toc343673588实训2：摄影师个人布局 PAGEREF _Toc343673588 h 6HYPERLINK l _Toc343673589实训3：生物研究中心布局 PAGEREF _Toc343673589 h 10HYPERLINK l _Toc343673590实训4：教育公司布局 PAGEREF _Toc343673590 h 22-.

2、 z.实训1：从根底开场实训名称： 成绩：实训日期： 年月日 实训报告日期：年月日一、实训目的1、掌握 CSS的各种选择器及其各自的使用方法；2、掌握CSS的继承性与层叠特性以及它们的作用。二、实训容实例制作三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、动手体验CSS首先建立HTML文件，构建最简单的页面框架，其容包括标题和正文局部，每一个局部又分别处于不同的模块中，代码如下所示：体验CSS畅思网络首先建立HTML文件，构建最简单的页面框架，其容包括标题和正文局部，每一个局部又分别处于不同的模块中。首先建立HTML文件，构建最简单的页面框架，其容包括标题和正文局部

3、，每一个局部又分别处于不同的模块中。2、交集选择器交集复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。举例代码如下：无标题文档其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。运行效果如图1.1所示：图1.1 标记、类别选择器例如3、CSS的继承性CSS的

4、继承指的是子标记会继承你标记的所有样式风格，并可以在父标记样式风格的根底上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。举例代码如下：无标题文档h1 color:blue; te*t-decoration:underline; em color:#FF0000; ul ul li font-weight:bold; 前沿WEB开发教室WEB设计与开发需要使用以下技术： HTML CSS 并可以在父标记样式风格的根底上再加以修改 并可以在父标记样式风格的根底上再加以修改 并可以在父标记样式风格的根底上再加以修改 Javascript 此外，还需要掌握： FLASH Dreame

5、weaver Photoshop 运行效果如图1.2所示：图1.2 包含多层列表的页面实训2：摄影师个人布局实训名称：成绩：实训日期：年月日 实训报告日期：年月日一、实训目的1、掌握 CSS的几项核心原理和方法，包括定位方法，特别是盒子模型、标准流、绝对定位、相对定位等；2、掌握的开发流程，从分析、筹划到设计整个流程。二、实训容摄影师个人布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、设置页面的整体背景新建一个本地站点，将背景图片background.gif放入到本地站点的pic文件夹中，然后在网页代码中添加一些CSS规则，代码如下：摄影师body margin

6、:0; padding:0; background-color:#cccc9; background-image:url(pic/background.gif); background-repeat:repeat-*;效果图如图1.1所示：图1.1页面设置背景图像之后的效果2、制作照片展示区域接下来，设置页面上部照片展示区域，首先然body中增加如下代码。 Chance Wen your eye on the world div #container的CSS样式设置如下：#container width:700p*; margin:60p* auto 0; position:relative;

7、 接下来设置ul#profiles的CSS样式设置如下：ul#profiles margin:0; padding:0; list-style:none; 工程列表默认情况下都是竖直排列的，而我们希望这几照片水平排列，因此下面要把它们拉平，代码如下：ul#profiles li float:left; padding:4p*; 3、设置网页标题的图像替换使用图像来代替文本，代码如下：#container h1 background-image:url(pic/logo.png); background-repeat:no-repeat; width:137p*; height:191p*; p

8、osition:absolute; top:150p*; left:270p*;#container h1 span display:none; #container h2 display:none; 制作好的摄影师个人效果图如图1.2所示：图1.2 完成后的网页五、练习六、源程序清单、测试数据、结果七、实训出现的问题、实训结果分析语法错英语提示，中文翻译，原因，您的理解？实训3：生物研究中心布局实训名称：成绩：实训日期： 年月日 实训报告日期：年月日一、实训目的1、掌握 CSS的几项核心原理和方法，包括定位方法，特别是盒子模型、标准流、绝对定位、相对定位等；2、掌握的开发流程，从分析、筹划到

9、设计整个流程；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:

10、0;font-family:Arial;font-size:12p*;然后对列表进展初始化，它会影响网页中的所有列表，这样做的目的是使网页中所有的ul列表都有统一的初始设置。ullist-style-type:none;margin:0;padding:0;接着设置div#container的样式：#containerwidth:765p*;margin:10p* auto;position:relative;然后设置网页的标题，即h1元素，根本方法和上一章中介绍的图像替换文本的方法一样。h1border-top:6p* #DDD solid;border-bottom:2p* #DDD so

11、lid;height:80p*;background-image:url(logo.png);background-repeat:no-repeat;margin:0;同样，把h2页替换为上面准备好的背景图像。h2width:510p*;height:200p*;float:right;background-image:url(banner.png);margin:5p* 0 0 0;设置背景图像以后，需要将文本隐藏起来，代码如下：h1 span,h2 spandisplay:none;再设置相应的其他CSS样式。#topMenuposition:absolute;right:0;top:6p

12、*;#topMenu lifloat:left;padding: 20p* 10p* 0;border-left:1p* #ddd solid;#topMenu li.firstborder:none;#topMenu li acolor:gray;te*t-decoration:none;#topMenu li a:hoverte*t-decoration:underline overline;这时的效果图如图2.1所示：图2.1 页头局部2、制作主体局部主体的左侧局部，根据分析，代码如下：Home PageAbout USNews RoomActionReseProgramNews and

13、 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

14、to helpwhat are we doing to help设置主体左侧局部的CSS样式，代码如下：#narrowwidth:235p*;float:left;padding:10p*;#narrow #mainMenumargin:0 40p* 10p* 20p*;font-size:15p*;line-height:20p*;#narrow #mainMenu liborder-bottom:1p* #DDD solid;#narrow #mainMenu li adisplay:block;te*t-decoration:none;color:#555;padding:3p* 0;p

15、adding-left:50p*;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:1p* white solid;#narrow formbackground-image:url(search-backgro

16、und.gif);te*t-align:center;padding-top:11p*;height:36p*;padding-bottom:0p*;margin:10p* 0;#narrow #news h3margin:10p* 0;font-size:15p*;#narrow #news pmargin:0;#narrow .newsTitlecolor:#47C;font-size:12p*;font-weight:bold;padding-left:10p*;background-image:url(arrow.gif);background-position:left center

17、;background-repeat:no-repeat;margin:10p* 0 0 -10p*;#narrow .newsDatecolor:#777;font-weight:bold;#narrow .newsContentfont-size:11p*;color:#777;3、主要容区接下来，就要设置右边的两个区块了，我们可以设置两个DIV，分别放置研究方案的工作工程栏目，代码如下：Our Program 研究方案-1 The Biological Center works through science, law, and creative media to secure a fu

18、ture for all species, great or small, hovering on the brink of e*tinction. 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 smal

19、l, hovering on the brink of e*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

20、 on the brink of e*tinction.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 e*tinction. Youre not

21、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 e*tinction.Biodiversity Internati

22、onal OceansPublic LandsUrban WildlandsAir and Energy设置相应的CSS样式，代码如下：.contentBo*width:245p*;float:left;padding:0 5p*;.contentBo* h3font-size:15p*;color:white;line-height:1.5;margin:5p* -2p* 5p* -5p*;padding-left:5p*;.orange h3background:orange;.green h3background-color:green;.contentBo* ulmargin-left

23、:2em;font-weight:bold;color:#666;list-style-type:circle;.floatLeftfloat:left;margin-right:5p*;主要容区的效果图如图2.2所示：图2.2 主要容区的效果4、页面底部局部现在这个页面根本上已经完成了，最后制作页面的页脚局部。页面分为了左中右3个局部，分别放置信息、地址和联系。因此可以用一个ul列表来搭建。代码如下：All Copyright Reserved 2008No 23 Changan Street Beijing China:supportartech.CSS样式如下：.floatLeftflo

24、at:left;margin-right:5p*;#footerclear:both;#footer ulmargin-top:15p*;height:30p*;border-top:10p* #ddd solid;border-bottom:10p* #ddd solid;#footer ul liwidth:254p*;float:left;height:30p*;background-color:#ddd;te*t-align:center;line-height:30p*;border-left:1p* #bbb solid;#footer .firstborder:none;widt

25、h:255p*;.clearclear:both;#footer clear:both; #footer ul margin-top:15p*; height:30p*; border-top:10p* #ddd solid; border-bottom:10p* #ddd solid; 制作好的生物研究中心效果图如图2.3所示：图2.3 生物研究中心效果图五、练习六、源程序清单、测试数据、结果七、实训出现的问题、实训结果分析语法错英语提示，中文翻译，原因，您的理解？实训4：教育公司布局实训名称： 成绩：实训日期： 年月日 实训报告日期：年月日一、实训目的1、继续强化绝对定位、相对定位两种重要

26、的定位方式；2、掌握利用浮动的方法进展页面布局；3、本例制作一个两列布局的案例，以加强对之前所学的知识的理解；4、掌握在网页中增加圆角框的效果。二、实训容教育公司布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、制作页头局部页头局部是这个页面比拟复杂的局部，如图3.1所示。包括了标题、顶部菜单、主菜单和搜索表单4个局部，另外，主菜单和搜索表单还要置于一个圆角框中。图3.1 页头局部的最终效果1搭建页头局部的HTML构造下面来解决header局部，header局部的HMTL代码如下：前沿视频教室artech.交流中心技术支持搜索教室首页视频教程图书推荐你问我答读者留

27、言联系我们案例分析对body元素的整体进展设置，这里设置文字的字体，文字的大小为12p*，行高为文字大小的1.5倍。代码如下：bodyfont: 12p*/1.5 Verdana, Arial, Helvetica, sans-serif;background-color:#444;margin:0;接下来确定div#header的整体属性，设定宽度，居中对齐，设置文字颜色。代码如下：#header margin: 0 auto 10p*;padding: 0;width: 756p*;position: relative;color:#BBB;2页面标题的图像替换对于h1标题的文字替换，代码

28、如下：h1margin:10p* 0 0 0;height:63p*;background-image:url(logo.gif);background-repeat:no-repeat;h1 spandisplay:none;3顶部菜单接下来设置顶部菜单。使用绝对定位，可以把它固定在标题的右侧，具体代码如下：#topMenumargin:0;padding:0;position:absolute;list-style-type:none;right:10p*;top:50p*;#topMenu lifloat:left;border-left:1p* white solid;#topMenu

29、 li apadding:0 10p*;color:white;te*t-decoration:none;#topMenu li a:hoverbackground-color:#000;#topMenu li.firstChildborder:none;设置完成标题文字和顶部菜单后的效果如图3.2所示：图3.2 标题和顶部菜单设置完成后的效果4主菜单接下来，就要设置主菜单局部了。主菜单局部需要实现圆角效果，在实现圆角效果之前，我们先来把菜单和搜索框的容布置好，然后再给它设置圆角。在主菜单区域包括左右两局部，左边是菜单，右边是搜索框。首先设定菜单的宽度和文字颜色，这个菜单是使用ul列表来实现的

30、。代码如下：ul#mainMenuwidth:500p*;padding:0;margin:0;color:#000;菜单工程之间的分隔线，即立体效果代码：ul#mainMenu lifloat:left;list-style-type:none;border-left:1p* #aaa solid;border-right:1p* #eee solid;把最左边工程的左边框和最右边工程的右边框去掉，这时可以分别对最左边和最右边的两个工程单独设置，代码如下：#mainMenu li.firstChildborder-left:none;#mainMenu li.lastChildborder-

31、right:none;设置菜单工程的文字以及鼠标指针经过时的效果，代码如下：#mainMenu li.firstChildborder-left:none;#mainMenu li.lastChildborder-right:none;效果如图3.3所示：图3.3 设置主菜单后的效果5搜索框设置主菜单以后，再来设置搜索框。为了使搜索框靠右对齐，使用向右浮动的设置。代码如下：#searchBo*float:right;margin-top:5p*;接下来使用按钮看起来像普通文字，进展如下的设置：#searchBo* #submit background: transparent;border:

32、0;margin: 0;padding: 0;#searchBo* form,#searchBo* input.te*tfield,#searchBo* button margin: 0;padding: 0;6页头局部的圆角框给主菜单和搜索框外面套一个圆角框了。这里需要使用两个背景图像，因此必须要有两个HTML元素，我们使用两层DIV，代码如下：搜索教室首页视频教程图书推荐你问我答读者留言联系我们案例分析然后分别设置二者的CSS样式：#mainMenu-outer-wrapperbackground-color:#ccc;background-image:url(main-menu-top.

33、gif);background-repeat:no-repeat;padding-top:3p*;margin-top:10p*;#mainMenu-inner-wrapperbackground-image:url(main-menu-bottom.gif);background-repeat:no-repeat;background-position:bottom;padding-bottom:7p*;增加一个空的div，并设置去除属性，代码如下：.clearBothclear:both;2、制作主体局部1构造分析下面构建主体局部，在写HTML代码之前，应该分析一下各个局部的层次关系，根据

34、分析，可以把#footer这个div放置于#container里面，并为#footer设置去除属性，这样就可以满足要求了。根据上面的分析，构建HTML如下： home视频教程CSS设计彻底研究 核心原理、技巧与设计实战 .首先设置外层的#container的属性，固定宽度，居中对齐，使用中间平铺的背景图像作为背景，并设置竖直方向平铺。#containermargin: 0 auto;padding: 0;width: 758p*;position: relative;background:#444 url(background-2-cols.gif) repeat-y;然后设置左右两列的属性。

35、#contentwidth:521p*;float:left;background:transparent url(cap_content.gif) no-repeat;padding:0p* 20p* 0p*;#sideBarwidth:187p*;float:right;background:transparent url(cap_sideBar.gif) no-repeat;padding:13p* 2p* 0p*;这时左右两列的布局已经完成了，但是还看不到效果，下面增加了容之后，就可以看到了。2面包屑导航面包屑导航让用户对他们所访问的页面在层次构造上的关系一目了然，可以改善的实用性和易用性，同时也可以提高对搜索引擎的友好性。这里使用了一个面包屑导航是通过ul列表来实现的。相关的CSS代码如下：#content #d