实训五 div+css布局基础

《实训五 div+css布局基础》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实训五Div+CSS布局基础主要内容：本周需要完成的任务：小组网站规划设计报告人组长：学号+姓名成员：学号+姓名学号+姓名时间：xxxx-xx-xx一、网站定位（请准确详细描述网站定位及网站主题）（请准确详细分析网站的目标用户群，包括分析这些用户的需求、行为习惯、偏好、个性特点等。）二、网站风格版式设计（请根据网站定位，查阅几个（不少于3个）参考网站首页风格、版式，并给出参考网站的网站名称、网址、首页截图）（请根据参考网站风格、版式，给出你们组自己的设计风格描述，包括对风格特点的描述和色调的选择，并画出版式图）（版式图参考下图：）三、网站栏目规划（请根据

2、网站定位、主题，设计导航条栏目，及二级子栏目，并以结构图的形式，清晰且详细地表现设计结果。可参考课本P10图1.7。）四、文件目录结构五、网站功能及内容设计六、实现方式七、网站的发布及维护操作部分：Div标签及盒子模型提示：请务必做好准备工作。Ø在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。Ø将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。Ø将从FTP上下载下来的test.html文件，存放在自己的“myweb”文件夹内，这是一个

3、网页HTML代码的标准模版。Ø将test.html复制一份，重命名之后以记事本的方式打开，开始编辑代码。1.首先看一下HTML代码标准模版中的代码。

4、/>声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。第二行，html的xmlns属性，是对命名空间的声明，固定写法，了解即可。第三行，元素可提供有关页面的描述信息，比如针对搜索引擎的关键词，网页语言的编码方式等；标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。1.使用CSS修饰的网页必须在开头做上述声明。制作第一个C

5、SS文件：首先在站点文件夹内创建一个专门存放CSS文件的文件夹，文件夹就命名为“css”，在文件夹内新建一个记事本，重命名为“common.css”，然后使用记事本的方式打开文件，输入一下代码：body{background:#0000ff;}保存后，刷新网页，结果？看不到网页有什么变化。为什么？2.看不到网页有变化的原因是，html网页和CSS文件现在是两个独立的文件，必须在它们之间建立关联。建立关联的方法：以记事本的方式打开html网页，在其之前加入代码：……

6、rel="stylesheet"href="css/common.css"/>……保存之后，再刷新页面，看页面效果是否有变化。3.若想显示背景图片，则对CSS继续修改：body{background:url(../images/back1.jpg);}保存后刷新页面，看网页背景是否有变化。问：能看懂这个相对路径“../images/back1.jpg”吗？答：在相对路径中，“../”表示返回上一级文件夹。从正在编辑的CSS文件出发，想找到要使用的图片，必须先返回上级文件夹，再找到“images”文件夹。1.面对空白网页，要做的第一项工作就是

7、布局。对html文件做如下修改：……

8、盒子（div）起名时使用的是id属性，设置其对应的CSS样式时，必须使用#开头；