css实训内容,实训五DivCSS布局基本.doc
实训五 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
css实训内容,实训五DivCSS布局基本.doc相关推荐
- css布局 右固定,CSS左侧固定右侧自适应的五种布局方法
在页面或者布局列表中,常常有左侧固定,右侧自使用的情况,接下来,这五种方法满足这个需求. 一.左边浮动,右边margin .box{ height: 200px; background-color: ...
- Android实训内容及过程,Android项目开发实训大纲.doc
Android项目开发实训大纲Android项目开发实训大纲 黎明职业大学信息与电子工程学院 <Android项目开发> 实训指导书 2014年6月 <Android项目开发> ...
- 计算机应用基础实训作业与要求,计算机应用基础实训内容及项目设计
<计算机应用技术实训与考证>实训内容及项目 实训内容 1. 汉字输入法练习:运行金山打字通,进行汉字输入法综合练习,尽量使用词组的输入. 2. Windows 基本操作: 在D盘根目录下以 ...
- 《Java软件开发综合实训》实训大纲
<Java软件开发综合实训>实训大纲 课程代码: 适用专业:计算机科学与技术 执 笔 人: 审 核 人: 学分学时:2学分32学时 制(修)订时间:2017.3 一.课程定位 ...
- 物联网智慧农业实训室实训基地建设方案（完整版）
物联网智慧农业实训室概述 物联网是我国战略性新兴产业的重要组成部分,<物联网"十二五"发展规划>圈定了10大领域重点示范工程,智能农业便是其中之一.<物联网&qu ...
- 计算机试题新编实训,计算机实训报告.doc
文档介绍: 实训报告姓名: 尚利军雷济慈栾强朱承寅学号: 39 34 33 18 专业: 物联网班级: 141 指导教师: 史江萍.王黎明.曾祥萍实训项目: 计算机认识实****起始日期: 2014 ...
- 共阳极数码管动态扫描c语言,《C语言编程实训》实训指导书三
1 C 语言编程实训语言编程实训 实训指导书三实训指导书三 适应专业 应用电子技术适应专业 应用电子技术 广州康大职业技术学院自动化系广州康大职业技术学院自动化系 二二 0 一一 0 年十一月年十一月 ...
- 计算机文化基础分析总结,《计算机文化基础实训》教学方案设计与课题分析总结.doc...
<计算机文化基础实训>教学方案设计与课题分析总结.doc <计算机文化基础一实训>教学方案设计与课题分析总结 袁良风 ［ ]我院自开展木课题研宄工作以来,紧紧围绕"项 ...
- Android雷神游戏实训报告,实训报告1
百度文库- 让每个人平等地提升自我 11 实训1 微机应用现状调研实训报告 实训内容1．微机硬件组成调研. 2．市场主流微处理器信息搜集.3．主流内存信息搜集. 4．微机操作系统应用调研. 5．微机常 ...
- 山东大学软件学院项目实训-创新实训-SDUMeeting(三)
山东大学软件学院项目实训-创新实训-SDUMeeting(三) 山大会议项目web安全之文件注入防护 一.前言 山大会议的客户端加入了对用户自定义头像的支持,需要用户自行上传头像图片,这个过程存在文件 ...
最新文章
- Css布局系列-综合应用
- 【雷达对抗】频率测量与频谱分析-概述
- 联合国和平音乐会主题粮安天下 国际农民丰收节贸易会贺电
- Linux学习笔记之一————什么是Linux及其应用领域
- 基于嵌入式操作系统VxWorks的多任务并发程序设计――中断与任务
- 消息中间件系列(五)：MQ消息队列的12点核心原理总结
- python基础6-函数的参数
- C Tricks（十五）—— 算符优先级的表示
- JNI中调用Java函数
- mcafee 8.5杀毒软件下载、安装、配置详解教程
- 合并两个有序链表js
- Mybatis(狂神老师上课笔记)
- android英雄无敌 中文版下载地址,英雄无敌3手机版
- 橙狮Scratch编程
- 圣诞之歌:クリスマス タイム和My Baby Grand~ぬくもりが欲しくて~ ZARD
- 【如何设定系统的定时与延迟任务】
- 海思hi3519a的MIPI用法
- mPaaS iOS框架笔记0-mPaaS iOS 框架初探(以MPH5Demo_plugin为例)
- 一个中科大差生，8 年程序员生涯感悟（强烈推荐）
- 性能测试能力提升-线程、并发、吞吐量、TPS、QPS、响应时间