配色与网页设计_项目8：CSS标准流布局_8-1.pptx

下载文档

19
0
约2.96千字
约 15页
2021-03-06 发布于北京
举报
版权申诉
保障服务

配色与网页设计_项目8：CSS标准流布局_8-1.pptx

1、本文档共15页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

学习目标掌握标准流的基本概念；掌握盒子模型的基本概念；掌握块元素和行内元素的区别；掌握设置元素边框、边界、填充和宽度等控制大小和间距的CSS属性；知识目标能力目标能够对整个页面进行HTML结构设计；能够让页面整体居中，以及对整体页面及页面各局部的大小进行控制。素质目标能够坚持科学的价值观和道德观；具有良好的团队合作意识和较强的团队合作能力；任务说明本案例主要利用结构元素完成整个新闻页面的布局，为其搭建好整体框架，以使网页中的各元素能“各就各位”。在完成本案例的过程中，读者应对<div>盒子模型有深刻的认识。任务步骤从效果图可知，整个页面可以分成3部分：头部header、新闻正文content和尾部footer。定义站点和新建文件任务步骤1.在本地磁盘新建一个名为bljt的文件夹，然后在Dreamweaver中定义一个站点，将bljt文件夹设置为站点根文件夹；再将本书配套素材“第8~10章\bljt”文件夹中的“images”文件夹拷贝到站点文件夹中。步骤 01步骤 03步骤 02在站点文件夹根目录中新建一个网页，命名为xinwen.html。另外，本例使用外部样式表文件，因此还要在站点根目录中新建一个名为NewsStyle.css的CSS文件。在后面的操作中，我们将在该文件中书写CSS代码。打开新建的网页文档“xinwen.html”。为了让外部样式表能控制网页，在网页的<head></head>标签对之间输入如下代码。<link href="NewsStyle.css" rel="stylesheet" type="text/css">构建HTML结构任务步骤2.首先插入头部的标签<header>。在设计界面中将插入点置于<body>部分，单击“插入”面板“结构”类别中的“页眉”按钮，在弹出的“插入Header”对话框中单击“确定”按钮，插入<header>标签。步骤 01任务步骤插入正文部分的<div>（id为content），插入时在代码界面中将鼠标光标放在<header>标签的后面，然后插入。步骤 02 插入标签时一定要注意插入位置。当在现有的某个标签对内插入时，原标签和新插入的标签是嵌套（父子）关系；当在标签对外插入时，原标签和新插入的标签是平行关系。我们可在代码界面或设计界面中定位插入点以确定插入位置。在插入某些标签时，还可在弹出的对话框中选择插入位置。任务步骤插入尾部的<footer>标签。参照前面的方法，将插入点置于id为content的<div>标签后面，单击“插入”面板“结构”类别中的“页脚”按钮，打开“插入Footer”对话框，单击“确定”按钮插入<footer>。步骤 03任务步骤在<footer>标签对中输入版权信息。可在设计界面中输入，也可在代码界面中输入。当在设计界面中输入时，其中的版权信息符号?（HTML代码为©）可以利用“插入”面板“常用”类别中的“字符换行符”下拉列表进行插入。步骤 04<body><header>此处为新 header 标签的内容</header><div id="content">此处显示 id "content" 的内容</div><footer>版权信息:©正大软件学院.软件技术系所有<br >2010-2020</footer></body>设置CSS样式任务步骤3.设置整个页面的样式。首先观察：页面的顶部是没有间距的。因此给整个body去掉外边距和内边距，并设置文字的默认大小和背景图像。步骤 01body{ margin: 0px; /*设置外边距*/ padding: 0px; /*设置内边距*/ font-size:14px; /*设置页面所有文字的默认大小*/ background-image: url(images/body.gif); /*设置背景图像*/}任务步骤设置<header>和<footer>标签的公共样式。本例将页面中的内容都放在<header>，<footer>和id为content的<div>标签中，需要为其设置宽度并居中显示。通过观察效果图，可以发现页面中最宽的元素就是顶部的banner图像，因此将主体标签的宽度设置为与该图像的宽度一致，通过查看图像属性得知其宽度是960px。步骤 02header,footer{ width: 960px; /*设置主体页面宽度*/ margin: 0 auto; /*设置主体页面左右居中显示*/ background-color: #FFFFFF; /*设置背景颜色*/}任务步骤设置页面底部<footer>标签的