《实训五Div+CSS布局基础》由会员分享，可在线阅读，更多相关《实训五Div+CSS布局基础（8页珍藏版）》请在金锄头文库上搜索。
1、实训五Div+CSS布局基础主要内容：本周需要完成的任务：小组网站规划设计时间： xxxx-xx-xx 一、网站定位（请准确详细描述网站定位及网站主题）（请准确详细分析网站的目标用户群，包括分析这些用户的需求、行为习惯、偏好、个性特点等。）二、网站风格版式设计（请根据网站定位，查阅几个（不少于3 个）参考网站首页风格、版式，并给出参考网站的网站名称、网址、首页截图）（请根据参考网站风格、版式，给出你们组自己的设计风格描述，包括对风格特点的描述和色调的选择，并画出版式图）（版式图参考下图： ）三、网站栏目规划（请根据网站定位、主题，设计导航条栏目，及二级子栏目，并以结构图的形式，清晰且详细 地表
2、现设计结果。可参考课本P10图 1.7 。 ）四、文件目录结构五、网站功能及内容设计六、实现方式七、网站的发布及维护操作部分： Div 标签及盒子模型提示：请务必做好准备工作 。在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/ 盘创建一个“ myweb “文件夹。将从 FTP上下载下来的”images”文件夹 （专门存放图片） ，存放在自己的 “myweb ”文件夹内，以备制作网页时使用。将从 FTP上下载下来的 test.html 文件，存放在自己的“myweb ”文件夹内，这是一个网页HTML代码的标准模版。将 test.html 复制一份，重命名之后以记事本的方式打
3、开，开始编辑代码。报告人组长：学号 +姓名成员：学号 +姓名学号 +姓名1. 首先看一下HTML代码标准模版中的代码。 示例网页 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。第二行， html 的 xmlns 属性，是对命名空间的声明，固定写法，了解即可。第三行， 元素可提供有关页面的描述信息，比如针对搜索引擎的关键词，网页语言的编码方式等； 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/ 值对。2.使用 CSS修饰的网页必须在开头做上述声明。制作第一个CSS文件：首先在站点文件夹内创建一个专门存放C
4、SS文件的文件夹， 文件夹就命名为“ css ” ，在文件夹内新建一个记事本，重命名为“common.css” ，然后使用记事本的方式打开文件，输入一下代码：body background:#0000ff; 保存后，刷新网页，结果？看不到网页有什么变化。为什么？3.看不到网页有变化的原因是，html 网页和 CSS文件现在是两个独立的文件，必须在它们之间建立关联。建立关联的方法：以记事本的方式打开html 网页，在其 之前加入代码：,示例网页 ,保存之后，再刷新页面，看页面效果是否有变化。4.若想显示背景图片，则对CSS继续修改：body background: url(./images/ba
5、ck1.jpg); 保存后刷新页面，看网页背景是否有变化。问 ：能看懂这个相对路径“./images/back1.jpg”吗？答 ：在相对路径中， “./ ”表示返回上一级文件夹。从正在编辑的CSS文件出发，想找到要使用的图片，必须先返回上级文件夹，再找到“images”文件夹。5.面对空白网页，要做的第一项工作就是布局。对html 文件做如下修改：, , 标签是 HTML中用来做布局的，作用类似于盒子。保存后，刷新页面。id 属性给盒子起名；页面布局会使用多个盒子，每个盒子的样式通常会不一样，对不同样式的盒子通常起不同的名字加以区分。6.如果想看到盒子的具体形状，需要在CSS文件中对盒子的样
6、式做相应设置：#red width:200px; height:200px; background:red; border:2px #00f solid; #red 如果给盒子（div ）起名时使用的是id 属性，设置其对应的CSS样式时，必须使用 #开头；要想让盒子显示出来，必须设置盒子的三个属性 width 、height 、background ；border 设置边框，三个属性值依次是：边框粗细边框颜色边框线型。问：如果想让盒子的大小刚好能放下现在的图片，如何修改？答：查看好图片的宽高，在CSS中对应的盒子的宽高也就确定了。7.修改 CSS文件：#red width:200px; he
7、ight:200px; background:red; border:2px #00f solid; padding:50px; 保存后，刷新页面。8.继续修改CSS文件：#red width:200px; height:200px; background:red; border:2px #00f solid; padding:50px 0; 能看出来跟上一步的区别吗？9.继续修改CSS文件：#red width:200px; height:200px; background:red; border:2px #00f solid; padding:50px 0 100px 200px; 问：能
8、看出这四个数字分别设置的那个边框吗？答：顺时针方向，即上、右、下、左。padding 内边距。10.有内边距就有外边距，每个浏览器对其中显示的内容都有自己默认的边距，由于不同浏览器默认边距通常不一致，经常导致页面布局错乱，解决方法是取消浏览器默认边距：body background:url(./images/back1.jpg); margin:0; margin 外边距。然后在需要外边距的时候自己设置，如让红盒子距离浏览器上、左边距均为50px，应该怎么修改代码？#red width:169px; height:109px; background:red; border:2px #00f s
9、olid; padding:50px 0 100px 200px; margin:50px 0 0 50px; 知识链接：Div（盒子标记）是用来为HTML文档内大块的内容提供结构和背景的元素，即块元素：相当于一个容器，可以放置段落、图片、表格等各种HTML元素；可嵌套使用，即大盒子里可以套小盒子；块元素最大的特点是，每个元素都会独占一整行。盒子标记 div 常用属性：属性名描述id 给盒子赋予一个独一无二的名字；页面布局会使用多个盒子，每个盒子的样式通常会不一样，对不同样式的盒子通常起不同的名字加以区分；属性值不能出现重复值。class 给盒子命名，名字允许重复；当几个盒子的样式一样时，可以
10、使用class属性给相同样式的盒子起一样的名字；属性值可以重复。CSS基础知识：CSS文件格式：选择器 样式属性 : 取值 ; 样式属性 : 取值 ; , 选择器之一： 标签选择器，即给 HTML 现有标记设置样式时，选择器格式为标记名 ；如给 body 标记设置样式，选择器为body ；选择器之二： id 选择器 ，即给使用id 起名的对象设置样式时，选择器格式必须为#对象名 ；如给 id 属性值为“ red ”的盒子设置样式，选择器为 #red；选择器之三： 类别选择器 ，即给使用class 起名的对象设置样式时，选择器格式必须为. 对象名 ；如给 class 属性值为“ biaoti”的
11、对象设置样式，选择器为.biaoti。CSS文件与 HTML文件关联的方法：有 4 种，其中最常用的一种，使用 标记，在HTML网页中调用已经定义好的样式表； 标记必须放在 区内： CSS盒子模型：div 的宽度 = width + padding + border + margin CSS基本应用11.在前面的基础上继续修改，现在要在网页中再加一个蓝盒子：, ,12.让蓝盒子宽度为300px，高度和红盒子一样，怎么修改？#blue width:300px; height:259px ; background:blue; border:2px #f00 solid; 保存后测试。你知道 hei
12、ght为什么设置为259px 吗？问：红盒子右边还有空，为什么蓝盒子会在下一行显示？答：块元素的典型特点。13. 怎么让红盒子和蓝盒子在同一行：#red width:169px; height:109px; background:red; border:2px #00f solid; padding:50px 0 100px 200px; margin:50px 0 0 50px; float:left; #blue width:300px; height:259px; background:blue; border:2px #f00 solid; float:left; 保存后测试。float 块元素的浮动属性，可以设置为left或 right。14. 盒子是不是变成了这样？你会让两个盒子对齐吗？#blue width:300px; height:259px; background:blue; border:2px #f00 solid; float:left; margin-top:50px; 思考操作：在红蓝盒子的下方再放一个绿盒子，要求效果见下图：注： 1. 绿盒子宽度请自己计算，高度例子中使用的为200px。2. 如果绿盒子跟蓝盒子在同一行，是因为蓝盒子有float（浮动）属性，对绿盒子添加清除浮动影响的属性即可：#green ,clear:both; ,
