计算机与信息技术基础 课件 第4章 网页设计与布局_第1页
计算机与信息技术基础 课件 第4章 网页设计与布局_第2页
计算机与信息技术基础 课件 第4章 网页设计与布局_第3页
计算机与信息技术基础 课件 第4章 网页设计与布局_第4页
计算机与信息技术基础 课件 第4章 网页设计与布局_第5页
已阅读5页，还剩30页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章网页设计与布局01标准流02盒子的浮动04利用盒子浮动布局03盒子的定位目录Content05超链接标记及用法06导航菜单制作08在网页中使用特效07网站开发过程标准文档流标准文档流是指不使用其他与排列和定位相关的特殊CSS规则，按照css默认规定的块级元素和行内元素的排列方式。<body><h1><span>第1个span</span><span>第2个span</span>

</h1><div>

<h3>小标题</h3>

<p>段落文本内容，段落文本内容，段落文本内容，段落文本内容，段落文本内容，段落文本内容，段落文本内容，段落文本内容。</p></div></body>对body里面的各元素设置边框和背景色嵌套关系：父层元素套住子层元素。并列关系：块级元素之间按上下顺序排列；行内元素之间按左右顺序排列标准流排列规则树型层次结构页面布局盒子的浮动利用浮动属性可以改变盒子默认的排列方式。属性值说明none元素为标准流，默认值left元素向父级元素的左侧浮动right元素向父级元素的右侧浮动Inherit继承父级元素的浮动属性浮动的特点（1）浮动元素脱离标准流，向其父元素（或前一个浮动元素）的左侧或右侧靠紧（多个同方向浮动的元素会水平依次排列，空间不足时自动换行。）。（2）如果没有未显式设置宽度，浮动元素的宽度会收缩至刚好包裹里面内容的宽度；如果通过width属性显式设置宽度，则调整为指定宽度。（3）其它后续的元素会忽略该元素向上移动填补上来，上移元素里面的内容围绕着浮动的元素显示。利用浮动属性实现环绕效果div设置右浮动，span设置左浮动，后续的内容位置上移，形成环绕效果pspan首字下沉span{font-size:43px;

float:left;}div右浮动div{float:right;}bodydivPspan利用Float属性实现水平排列布局浮动属性还可以实现多个并列的兄弟元素由默认的上下排列方式改变为左右排列的布局效果。左浮动#num1{

width:220px;

float:left;}左浮动或者右浮动#num2{

width:220px;

float:left;}清除浮动属性在CSS中可以通过clear属性清除前面浮动元素的影响。属性值说明定义left清除前面元素左浮动对其位置的影响clear:left;right清除前面元素右浮动对其位置的的影响clear:right;both清除前面元素所有浮动对其位置的的影响clear:both;扩展父盒子的高度1．直接设定父元素的高度值2．利用clear属性:在#father里面最后一个浮动盒子#num2后面插入一个空的块级<divid=“back1”>元素，然后设置清除属性#back1{clear:both}3．利用overflow属性

#father{

overflow:hidden;}盒子的定位利用属性position，称为定位属性，可以实现将元素精确地定位在固定的网页位置。属性值说明static静态定位，即标准流，默认值relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相对于其上最近的已定位父元素进行定位fixed固定定位：相对于浏览器窗口进行定位相对定位是指网页元素相对于它原来的位置进行偏移定位，其后续的元素位置不受影响。一般情况下，如果元素选择相对定位方式，需要通过top、bottom、left和right等属性值调整偏移位置。若没有设置偏移量相对定位的元素在原位置不变。相对定位relative#num1和#num2分别相对定位后的位置变化绝对定位是指网页元素脱离标准流，以离它最近的一个已经定位的祖先元素所在位置进行偏移定位，若没有已经定位的祖先元素则以<body>位置（即是浏览器窗口）进行偏移定位，元素的宽度改变为刚好能显示里面的内容或指定宽度，同时绝对定位元素变成块级类型，其后续的元素位置受影响，向前移动填补上来。已经定位的元素是指设置非静态定位方式的元素。绝对定位absolute#num2设置绝对定位的效果及偏移情况固定定位是指网页元素脱离标准流变成块级类型，元素的宽度改变为刚好能显示里面的内容或指定宽度，总是相对于浏览器窗口即<body>进行偏移定位，其后续的元素位置受影响，向前移动填补上来。固定定位fixed固定定位的浏览器显示效果z-index属性用于指定元素的堆叠顺序。z-index#num1和#num2的层叠效果#num1{ background-color:#3CC; border:4pxdashed#F0F; position:absolute; top:20px; right:60px; z-index:2;}#num2{ background-color:#F9C; border:4pxdotted#00f; position:absolute; top:5px; right:120px;z-index:1;}利用盒子浮动布局DIV+CSS技术是目前进行网页布局比较流行的方式，DIV负责对网页内容区域的划分，CSS负责网页样式效果的呈现。DIV+CSS的设计布局一般会将网页中要作为一个整体的对象进行设计布局的所有html内容放在一个<div>中，然后用CSS对<div>设计其大小、对齐方式与排列方式等等。一列布局常见的类型是一列固定宽度居中布局和一列自适应宽度居中布局固定宽度是设置一列的宽度为固定值。一列布局一列布局的效果两列布局是指将网页内容排列为左右两列的排列方式，这种布局常用于一列为导航侧栏另一列为主要内容栏。根据DIV+CSS技术为需要左右排列的两组内容分别添加<div>标记，再利用CSS设计两列外观与布局。标准文档流下两个<div>是上下排列关系，利用浮动实现左右排列布局。两列布局两列（侧栏在左、内容在右）居中布局三列布局是指网页内容排列为左中右三列水平显示的排列方式。为需要水平排列的三组内容分别添加<div>标记，标准文档流下三个<div>是上下排列关系，可以利用浮动属性设置为三列布局，三列布局三列固定宽度居中布局超链接标记及用法超链接是网站不可或缺的一个部分。同一个网站可以由很多网页组成，超链接技术实现网页之间的跳转和返回，即一个网页能通过鼠标单击操作访问另一个网页、定位到网页的某个位置、或下载文件等等。一个友好的网站可以通过超链接让用户遍历整个网站内的所有网页。创建文本超链接的代码如下：

<ahref=""target="_blank">链接到网易</a><ahref="base/book.html">科幻书籍</a>，创建文本超链接属性说明href规定链接所指向的页面路径target规定在何处打开链接时的目标窗口title超链接文字说明，鼠标悬停在链接时显示该提示download规定当用户单击超链接时将下载目标1．绝对路径绝对路径是指文件的完整路径，路径包含协议名称、主机名称、层级文件夹名称和文件名称。一般链接到其他网站的文件用绝对路径。如下所示：<ahref="/news/file.html">链接到网易</a>2．相对路径相对路径是以当前文件所在位置为起点到目标文件所经过的路径。一般在同一个站点中的两个文件之间的链接都要用相对路径。利用相对路径书写可以省略当前文件和目标文件的共同、路径部分。两个网页文件在同一个文件夹中。目标文件在源文件的下一级文件夹目标文件在当前文件的上一级文件夹超链接路径1．设置图片的超链接:<ahref=”read.html”><imgsrc=”../img/book1.jpg”/></a>2．设置锚点链接设置一个锚点链接的步骤分为两步：①在网页的目标位置建立锚点（又称书签），在目标位置的标签中添加id属性：<标记id=”id”>内容</标记>②使用<a>标记的href属性设置跳转到目标锚点：<ahref=”URL#id”>链接文本</a>3．下载文件链接超链接变为下载链接，弹出下载窗口，可允许“learn.docx”文档保存到本地。<ahref="base/learn.docx">学习方法</a>4．电子邮件链接创建电子邮件链接，邮件地址是：suggetion2025@163.com。<ahref="mailto:suggetion2025@163.com">联系</a>其他类型的超链接导航菜单制作导航菜单是网站中最常见的导航功能，通常导航菜单里必须由超链接组成，好的导航可以引导用户快速找到所需信息。设计出既美观又实用性强的导航菜单至关重要。目前比较流行的导航菜单是采用DIV+CSS布局方式，常规一般是在一个div里放置一个序列表，在每个列表项li里设置超链接，然后通过设置列表的样式进行制作。下面介绍如何利用超链接伪类设置导航菜单。在HTML中，标记<a>用于设计超链接实现跳转功能。默认的超链接有四个伪类，所谓的伪类是指HTML中并不实际存在的类，通常是指某些元素的某个状态。超链接伪类超链接伪类说明传统浏览器中默认样式a:link正常的、未访问的链接状态蓝色文字且带下划线a:visited已访问过的链接状态紫色文字且带下划线a:hover将鼠标悬停在链接上时的状态文字颜色不变，鼠标变成手型a:active被鼠标点击时的链接状态红色文字且带下划线在HTML中，列表主要有无序列表和有序列表两种类型。目前很多导航菜单HTML结构都是基于列表构建的，对于列表网页元素除了可以设置和其他元素一样的CSS属性以外，还可以设置列表独特起效的CSS列表属性列表样式属性说明list-style在一条声明中设置列表的以下三个属性list-style-type列表项标记的类型list-style-image指定图片作为列表项标记list-style-position设置列表项标记的位置1．纵排导航菜单是一种将链接从上到下以垂直方式排列的布局方式。利用DIV+CSS布局制作一个基于列表的简单纵排导航菜单。具体步骤：（1）搭建导航菜单的HTML架构，在div里放一个无序列表<ul>标记，每个菜单项都放在一个序列项<li>标记里，每个序列项里放一个超链接<a>标记。（2）对<div>以及里面各个子元素分别设置CSS样式。纵排导航菜单2．带子菜单的纵排导航菜单带子菜单的纵排导航菜单是一种不论是主菜单还是其包含的子菜单都是垂直排列的导航菜单。当鼠标经过菜单序列项时，弹出子菜单，当鼠标离开菜单序列项时，隐藏子菜单。纵排导航菜单1．简单的横排导航菜单横排导航菜单是一种将链接菜单项从左往右水平排列的布局方式。横排导航菜单需要搭建的HTML架构和竖排导航菜单的一样。由竖排菜单转为横排菜单主要是需要设置菜单项<li>的宽度、浮动性，以及整个菜单的宽度需要加宽到能容纳所有的菜单项水平排成一行。横排导航菜单2．带下拉菜单的横排导航菜单带下拉菜单的横排导航菜单是一种横排的主菜单项和对应的下拉菜单组成的导航菜单。带下拉菜单的横排导航菜单HTML架构和带子菜单的在纵排导航菜单一样。横排导航菜单网站开发过程1．确定网站的定位2．收集素材3．规划栏目及页面布局设计4．制作页面5．调试网站与上传6．维护网站在网页中使用特效在Web标准中，网页由结构、表现和行为组成。JavaScript可以制作特效控制网页的行为，使网页具有交互功能和动态功能。

结构网页“是什么”表现网页“什么样”行为网页“做什么”CSSHTMLJavascriptJavaScript的主要特点：（1） JavaScript是一种动态类型的语言，支持在运行期间检查数据类型，变量的类型可以改变。（2） JavaScript是一种解释型语言，代码在运行时被解释执行。（3） JavaScript支持事件驱动，脚本程序可以由事件（例如鼠标单击、页面载入等）发生时驱动运行（4） JavaScript是一种基于对象的语言，不提供面向对象语言的功能，只是将其他语言创建的对象统一起来使用JavaScript简介（1）为HTML标记的事件添加JavaScript脚本JavaScript脚本程序支持事件驱动，可以对HTML文档的标记添加事件属性触发脚本的运行。例：

<imgsrc="images/story_bg.jpg"ondblclick="alert('双击图片触发脚本')"/>（2）在HTML文档中嵌入JavaScript脚本利用<script>标记直接将脚本程序嵌入到HTML文档中，成为HTML文档的一部分。引入的语法格式为：<scripttype="text/javascript">……

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论