实训五 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文件做如下修改:
……
……
标签是HTML中用来做布局的,作用类似于盒子。保存后,刷新页面。
id属性 —— 给盒子起名;页面布局会使用多个盒子,每个盒子的样式通常会不一样,对不同样式的盒子通常起不同的名字加以区分。
如果想看到盒子的具体形状,需要在CSS文件中对盒子的样式做相应设置:
#red{
width:200px;
height:200px;
backgr