本文详细介绍了一次基于Div+CSS进行网页布局的实际操作过程，包括网页定位、风格设计、栏目规划等内容。通过实例演示了如何创建并使用CSS文件来调整网页背景、布局等样式。
实训五 Div+CSS布局基础
主要内容：
本周需要完成的任务：
小组网站规划设计
报告人组长：学号+姓名成员：学号+姓名 学号+姓名时间：xxxx-xx-xx
网站定位
(请准确详细描述网站定位及网站主题)
(请准确详细分析网站的目标用户群，包括分析这些用户的需求、行为习惯、偏好、个性特点等。)
网站风格版式设计
(请根据网站定位，查阅几个(不少于3个)参考网站首页风格、版式，并给出参考网站的网站名称、网址、首页截图)
(请根据参考网站风格、版式，给出你们组自己的设计风格描述，包括对风格特点的描述和色调的选择，并画出版式图)
(版式图参考下图：)
网站栏目规划
(请根据网站定位、主题，设计导航条栏目，及二级子栏目，并以结构图的形式，清晰且详细地表现设计结果。可参考课本P10图1.7。)
文件目录结构
网站功能及内容设计
实现方式
网站的发布及维护
操作部分：Div标签及盒子模型
提示：请务必做好准备工作。
在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。
将从FTP上下载下来的”images”文件夹(专门存放图片)，存放在自己的“myweb”文件夹内，以备制作网页时使用。
将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。
将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。
首先看一下HTML代码 标准模版中的代码。
示例网页声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
第二行，html的xmlns属性，是对命名空间的声明，固定写法，了解即可。
第三行， 元素可提供有关页面的描述信息，比如针对搜索引擎的关键词，网页语言的编码方式等； 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
使用CSS修饰的网页必须在开头做上述声明。
制作第一个CSS文件：首先在站点文件夹内创建一个专门存放CSS文件的文件夹，文件夹就命名为“css”，在文件夹内新建一个记事本，重命名为“common.css”，然后使用记事本的方式打开文件，输入一下代码：
body{
background:#0000ff;
}
保存后，刷新网页，结果？看不到网页有什么变化。
为什么？
看不到网页有变化的原因是，html网页和CSS文件现在是两个独立的文件，必须在它们之间建立关联。建立关联的方法：
以记事本的方式打开html网页，在其之前加入代码：
……
示例网页……
保存之后，再刷新页面，看页面效果是否有变化。
若想显示背景图片，则对CSS继续修改：
body{
background:url(../images/back1.jpg);
}
保存后刷新页面，看网页背景是否有变化。
问：能看懂这个相对路径“../images/back1.jpg”吗？
答：在相对路径中，“../”表示返回上一级文件夹。从正在编辑的CSS文件出发，想找到要使用的图片，必须先返回上级文件夹，再找到“images”文件夹。
面对空白网页，要做的第一项工作就是布局。对html文件做如下修改：
……
……
id属性 —— 给盒子起名；页面布局会使用多个盒子，每个盒子的样式通常会不一样，对不同样式的盒子通常起不同的名字加以区分。
如果想看到盒子的具体形状，需要在CSS文件中对盒子的样式做相应设置：
#red{
width:200px;
height:200px;
backgr
扫一扫
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
