《《网页设计与制作(DIV+CSS)》实训指导书.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作(DIV+CSS)》实训指导书.docx（36页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页设计与制作DIV+CSS实训指导书网页设计与制作DIV+CSS上饶职业技术学院信息工程系网页设计与制作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 文件，构建最简洁的页面框架，其内容包括标题和1正文局部，每一个局部又分别处于不同的模块中。2、“交集”选择器 “交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必需是标记选择器，其次个必需是类别选择器或者 ID选择器。这两个选择器之间不能有空格，必需连续书写。举例代码如下：无标题文档其中第一个必需是标记选择器，其次个必需是类别选择器或者
3、 ID 选择器。其中第一个必需是标记选择器，其次个必需是类别选择器或者 ID 选择器。其中第一个必需是标记选择器，其次个必需是类别选择器或者 ID 选择器。2网页设计与制作DIV+CSS实训指导书其中第一个必需是标记选择器，其次个必需是类别选择器或者 ID 选择器。运行效果如图 1.1 所示：3、CSS 的继承性图 1.1 标记、类别选择器例如CSS 的继承指的是子标记会继承你标记的全部样式风格，并可以在父标记样式风格的根底上再加以修改，产生的样式，而子标记的样式风格完全不会影响父标记。举例代码如下：无标题文档 h1color:blue;text-decoration:underline;em
4、color:#FF0000;ul ul lifont-weight:bold;3网页设计与制作DIV+CSS实训指导书前沿WEB 开发教室WEB 设计与开发需要使用以下技术：HTMLCSS并可以在父标记样式风格的根底上再加以修改并可以在父标记样式风格的根底上再加以修改并可以在父标记样式风格的根底上再加以修改Javascript此外，还需要把握：FLASHDreameweaverPhotoshop运行效果如图 1.2 所示：4网页设计与制作DIV+CSS实训指导书图 1.2 包含多层列表的页面5网页设计与制作DIV+CSS实训指导书实训 2：摄影师个人网站布局实训名称：成绩：实训日期：年月日实训
5、报告日期：年月日一、实训目的1、把握 CSS 的几项核心原理和方法，包括定位方法，特别是“盒子模型”、“标准流”、“确定定位”、“相对定位”等；2、把握网站的开发流程，从分析、筹划到设计整个流程。二、实训内容摄影师个人网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、设置页面的整体背景建一个本地站点，将背景图片 background.gif 放入到本地站点的 pic 文件夹中，然后在网页代码中添加一些 CSS 规章，代码如下：摄影师 bodymargin:0; padding:0;background-color:#cccc9;background-image
6、:url(pic/background.gif); background-repeat:repeat-x;6网页设计与制作DIV+CSS实训指导书效果图如图 1.1 所示：图 1.1 页面设置背景图像之后的效果2、制作照片展现区域接下来，设置页面上部照片展现区域，首先然 body 中增加如下代码。Chance Wenyour eye on the worlddiv #container 的 CSS 样式设置如下：7网页设计与制作DIV+CSS实训指导书#container width:700px; margin:60px auto 0; position:relative;接下来设置 ul#p
7、rofiles 的 CSS 样式设置如下：ul#profiles margin:0; padding:0;list-style:none;工程列表默认状况下都是竖直排列的，而我们期望这几张照片水平排列，因此下面要把它们“拉平”，代码如下：ul#profiles li float:left; padding:4px;3、设置网页标题的图像替换使用图像来代替文本，代码如下：#container h1background-image:url(”pic/logo.png”); background-repeat:no-repeat; width:137px;height:191px; position
8、:absolute; top:150px; left:270px;#container h1 span display:none;#container h2 display:none;8网页设计与制作DIV+CSS实训指导书制作好的摄影师个人网站效果图如图 1.2 所示：图 1.2 完成后的网页五、练习六、源程序清单、测试数据、结果七、实训消灭的问题、实训结果分析语法错英语提示，中文翻译，缘由，您的理解？9网页设计与制作DIV+CSS实训指导书实训 3：生物争论中心网站布局实训名称：成绩：实训日期：年月日实训报告日期：年月日一、实训目的1、把握 CSS 的几项核心原理和方法，包括定位方法，特别
9、是“盒子模型”、“标准流”、“确定定位”、“相对定位”等；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 进展
10、初始化，设定 margin 和 padding，并对正文字体进展设置。代码代码如下：10bodymargin: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 元素，
11、根本方法和上一章中介绍的图像替换文本的方法一样。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;11background-image:url(”banner.png”); margin:5px 0 0 0;设置背景图像以后，需要将文本隐蔽
12、起来，代码如下：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.first border:none;#topMenu li a color:gray;text-decoration:none;#topMenu li a:hovertext-decoration:underline overline;这时的
13、效果图如图 2.1 所示：12网页设计与制作DIV+CSS实训指导书2、制作主体局部图 2.1 页头局部主体的左侧局部，依据分析，代码如下：Home About USNews RoomActionReseProgramNews and Events 闻动态Watchfrogging Political Corruption2008.5.9Seehowweuncoveredevidenceofgovernment malfeasance and are working to save the species harmed.For Species Worldwide, the Heat Is On
14、2008.5.9How will global warming affect animals and plants already backed into a corner, and what are we doing to help?13网页设计与制作DIV+CSS实训指导书what are we doing to help?设置主体左侧局部的 CSS 样式，代码如下：#narrowwidth:235px; float:left; padding:10px;#narrow #mainMenu margin:0 40px 10px 20px; font-size:15px;line-heigh
15、t:20px;#narrow #mainMenu liborder-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 l
16、i a:hover background-image:url(”bullet-red.gif”);#narrow #mainMenu li.last border-bottom:1px white solid;14#narrow formbackground-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;#nar
17、row #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:1
18、1px; color:#777;153、主要内容区接下来，就要设置右边的两个区块了，我们可以设置两个 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 OceansPublic Land
19、sUrban 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 extinction. Youre not alone. We just celebrated the 100,000th download around theworld of our
20、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 Lands16Urban WildlandsAir and EnergyOur Works 工作工程-4The
21、 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 theworld of our endangered species ringtones.Our Program 争论打算-5 T
22、he 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;.c
23、ontentBox h3 font-size:15px;17color:white; line-height:1.5;margin:5px -2px 5px -5px; padding-left:5px;.orange h3background:orange;.green h3background-color:green;.contentBox ul margin-left:2em; font-weight:bold; color:#666;list-style-type:circle;.floatLeftfloat:left;margin-right:5px;主要内容区的效果图如图 2.2
24、所示：18网页设计与制作DIV+CSS实训指导书4、页面底部局部图 2.2 主要内容区的效果现在这个页面根本上已经完成了，最终制作页面的页脚局部。页面分为了左中右 3 个局部，分别放置版权信息、地址和联系邮件。因此可以用一个 ul 列表来搭建。代码如下：All Copyright Reserved 2008No 23 Changan Street Beijing Chinae-mail:CSS 样式如下：.floatLeftfloat:left;margin-right:5px;#footerclear:both;19网页设计与制作DIV+CSS实训指导书#footer ulmargin-to
25、p: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;#footerclear:both;#footer ulmar
26、gin-top:15px; height:30px;border-top:10px #ddd solid; border-bottom:10px #ddd solid;制作好的生物争论中心网站效果图如图 2.3 所示：20网页设计与制作DIV+CSS实训指导书图 2.3 生物争论中心网站效果图五、练习六、源程序清单、测试数据、结果七、实训消灭的问题、实训结果分析语法错英语提示，中文翻译，缘由，您的理解？21网页设计与制作DIV+CSS实训指导书实训 4：教育公司网站布局实训名称：成绩：实训日期：年月日实训报告日期：年月日一、实训目的1、连续强化“确定定位”、“相对定位”两种重要的定位方式；2、
27、把握利用“浮动”的方法进展页面布局；3、本例制作一个两列布局的案例，以加强对之前所学的学问的理解；4、把握在网页中增加圆角框的效果。二、实训内容教育公司网站布局三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、制作页头局部页头局部是这个页面比较简单的局部，如图 3.1 所示。包括了标题、顶部菜单、主菜单和搜寻表单4 个局部，另外，主菜单和搜寻表单还要置于一个圆角框中。图 3.1 页头局部的最终效果（1） 搭建页头局部的 HTML 构造下面来解决 header 局部，header 局部的 HMTL 代码如下：前沿视频教室沟通中心技术支持22网页设计与制作DIV+CSS实
28、训指导书搜寻教室首页视频教程图书推举你问我答读者留言联系我们案例分析对 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
29、; color:#BBB;23（2） 页面标题的图像替换对于 h1 标题的文字替换，代码如下： h1margin:10px 0 0 0; height:63px;background-image:url(”logo.gif”); background-repeat:no-repeat;h1 spandisplay:none;（3） 顶部菜单接下来设置顶部菜单。使用确定定位，可以把它固定在标题的右侧，具体代码如下：#topMenu margin:0; padding:0; position:absolute; list-style-type:none; right:10px; top:50px;#topMenu lifloat:left;border-left:1px white solid;#topMenu li a padding:0 10px; color:white;text-decoration:none;#topMenu li a:hover24网页设计与制作DIV+CSS实训指导书background-color:#000;#topMenu li.firstChild border:none;