实训五DivCSS布局基础

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

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供参考,付费前请自行鉴别。
3、如文档内容存在侵犯商业秘密、侵犯著作权等,请点击“举报”。

常见问题具体如下:

1、问:已经付过费的文档可以多次下载吗?

      答:可以。登陆您已经付过费的账号,付过费的文档可以免费进行多次下载。

2、问:已经付过费的文档不知下载到什么地方去了?

     答:电脑端-浏览器下载列表里可以找到;手机端-文件管理或下载里可以找到。

            如以上两种方式都没有找到,请提供您的交易单号或截图及接收文档的邮箱等有效信息,发送到客服邮箱,客服经核实后,会将您已经付过费的文档即时发到您邮箱。

注:微信交易号是以“420000”开头的28位数字;

       支付宝交易号是以“2024XXXX”交易日期开头的28位数字。

客服邮箱:

biganzikefu@outlook.com

所有的文档都被视为“模板”,用于写作参考,下载前须认真查看,确认无误后再购买;

文档大部份都是可以预览的,笔杆子文库无法对文档的真实性、完整性、准确性以及专业性等问题提供审核和保证,请慎重购买;

文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为依据;

如果您还有什么不清楚的或需要我们协助,可以联系客服邮箱:

biganzikefu@outlook.com

常见问题具体如下:

1、问:已经付过费的文档可以多次下载吗?

      答:可以。登陆您已经付过费的账号,付过费的文档可以免费进行多次下载。

2、问:已经付过费的文档不知下载到什么地方去了?

     答:电脑端-浏览器下载列表里可以找到;手机端-文件管理或下载里可以找到。

            如以上两种方式都没有找到,请提供您的交易单号或截图及接收文档的邮箱等有效信息,发送到客服邮箱,客服经核实后,会将您已经付过费的文档即时发到您邮箱。

注:微信交易号是以“420000”开头的28位数字;

       支付宝交易号是以“2024XXXX”交易日期开头的28位数字。

笔杆子文秘
机构认证
内容提供者

为您提供优质文档,供您参考!

确认删除?