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

《《网页设计与制作(DIV+CSS)》实训指导书(28页).doc》由会员分享，可在线阅读，更多相关《《网页设计与制作(DIV+CSS)》实训指导书(28页).doc（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

4、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的几项核心原理和方

5、法，包括定位方法，特别是“盒子模型”、“标准流”、“绝对定位”、“相对定位”等；2、掌握网站的开发流程，从分析、策划到设计整个流程。二、实训内容摄影师个人网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、设置页面的整体背景新建一个本地站点，将背景图片background.gif放入到本地站点的pic文件夹中，然后在网页代码中添加一些CSS规则，代码如下：摄影师body margin:0; padding:0; background-color:#cccc9; background-image:url(pic/background.gif); backgroun

6、d-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;项目列表默认情况下都是竖直排

7、列的，而我们希望这几张照片水平排列，因此下面要把它们“拉平”，代码如下：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 disp

8、lay:none;制作好的摄影师个人网站效果图如图1.2所示：图1.2 完成后的网页五、练习六、源程序清单、测试数据、结果七、实训出现的问题、实训结果分析（语法错英语提示，中文翻译，原因，您的理解？）实训3：生物研究中心网站布局实训名称： 成绩： 实训日期： 年 月 日 实训报告日期： 年 月 日一、实训目的1、掌握 CSS的几项核心原理和方法，包括定位方法，特别是“盒子模型”、“标准流”、“绝对定位”、“相对定位”等；2、掌握网站的开发流程，从分析、策划到设计整个流程；3、CSS中的重要基础，即使用“浮动”的方法进行页面布局。二、实训内容生物研究中心网站布局三、实训环境Adobe Dream

9、weaver 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;然后对列表进行初始化，它会影响网页中的所有列表，这样做的目

10、的是使网页中所有的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

11、: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 #dd

12、d 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

13、 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样式，代码如下：#narrowwid

14、th: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-

15、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;paddin

16、g-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 .ne

17、wsDatecolor:#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 bri

18、nk 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.

19、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 Oc

20、eansPublic 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 t

21、he 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设置相应的

22、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;.

23、floatLeftfloat:left;margin-right:5px;主要内容区的效果图如图2.2所示：图2.2 主要内容区的效果4、页面底部部分现在这个页面基本上已经完成了，最后制作页面的页脚部分。页面分为了左中右3个部分，分别放置版权信息、地址和联系邮件。因此可以用一个ul列表来搭建。代码如下：All Copyright Reserved 2008No 23 Changan Street Beijing Chinae-mail:supportCSS样式如下：.floatLeftfloat:left;margin-right:5px;#footerclear:both;#footer u

24、lmargin-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

25、ul margin-top:15px; height:30px; border-top:10px #ddd solid; border-bottom:10px #ddd solid;制作好的生物研究中心网站效果图如图2.3所示：图2.3 生物研究中心网站效果图五、练习六、源程序清单、测试数据、结果七、实训出现的问题、实训结果分析（语法错英语提示，中文翻译，原因，您的理解？）实训4：教育公司网站布局实训名称： 成绩： 实训日期： 年 月 日 实训报告日期： 年 月 日一、实训目的1、继续强化“绝对定位”、“相对定位”两种重要的定位方式；2、掌握利用“浮动”的方法进行页面布局；3、本例制作一个两列

26、布局的案例，以加强对之前所学的知识的理解；4、掌握在网页中增加圆角框的效果。二、实训内容教育公司网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、制作页头部分页头部分是这个页面比较复杂的部分，如图3.1所示。包括了标题、顶部菜单、主菜单和搜索表单4个部分，另外，主菜单和搜索表单还要置于一个圆角框中。图3.1 页头部分的最终效果（1）搭建页头部分的HTML结构下面来解决header部分，header部分的HMTL代码如下：前沿视频教室交流中心技术支持搜索教室首页视频教程图书推荐你问我答读者留言联系我们案例分析对body元素的整体进行设置，这里设置文字的字体，文字

27、的大小为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

28、;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;

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

30、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;接下来使用按钮看起来像普通文字，进行如下的设置：#searc