(实训五DivCSS布局基础.docVIP

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