实训五 Div+CSS布局基础.doc

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