第二章网页制作的排版办法

最新推荐文章于 2024-10-01 23:20:42 发布

若云熙

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量661

点赞数 20

文章标签： css 前端

本文链接：https://blog.csdn.net/2302_82186635/article/details/142257310

版权

2.1文字与段落排版

2.1.1段落标签

ailgn;设置段落文字的对齐方式

center;居中

left；左对齐

right；右对齐

默认为left

2.1.2标题标签

<h1>一级标题</h1> <h1>最大 <h6>最小

2.1.3换行标签

<p> <br>;换行标签可以用来插入一个换行符

江西应用工程职业学院<br/>(换行）

校训；爱国明志敢为人先

</p>

2.1.4水平线标签

<hr/>·

2.1.5预格式化标签

<pre>预格式化标签<pre>保持源文本的空格和换行

<pre>

江西应用工程职业学院

校训；爱国明志敢为人先

</pre>

2.1.6缩排标签

<blockquote>通常用来表示引用或特使段落的缩进

爱国明支敢为人先

</blockquote>

2.1.7案例

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>实例</title>
    </head>
    <body>
		<h1 align="center">淘宝热卖商场</h1>
		<hr align="center" size="10" color="yeelow" width="100%" noshade="noshade"/>
		<p align="left">&nbsp;&nbsp;&nbsp;销售超数万品牌，3000万种商品，包括家电、手机、电脑、服装、居家、健康、游戏、个护、食品、旅游等品类。<br/></p >
		<pre>淘宝尊贵会员	免费体验10天！ 更多优惠尽在淘宝！</pre>
		<blockquote>淘宝秉承客户为先， 100％正品行货保障，提供全国联保，机打发票，专业配送，售后服务！</blockquote>
	</body>
</html>

2.2超链接

一个网站是由多个页面组成的，创建超链接有利于页面之间的转跳，从而将整个网站中的页面关联起来，它是网站的重要元素。超链接在本质上属于网站的一部分，通过超链接将各个网页连接在一起后组成一个网站

1.超链接简介

所谓超链接(Hyperink)，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

·2.超链接的分类

根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等;根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等

3.路径

URL--统一资源定位器，指的就是每一个网站都具有的独立的地址

路径通常有3种表示方式:绝对路径、根目录相对路径和文档目录相对路径

绝对路径；绝对路径就是主页上的文件或目录在硬盘上真正的路径(URL和物理路径)

根目录相对路径；根目录相对路径是指从站点根文件夹到被链接文档经过的路径

文档目录相对路径；他是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。相对路径适合创建网站内部链接

2.2.2超链接的应用

超链接的另外一个叫法称为锚，它是使用<a>标签标记的，可以用两种方式表示，一是通过使用<a>标签的href属性来创建超文本链接，以链接到同一文档的其他位置或其他文档中，在这种情况下，当前文档就是链接的源，href属性的值就是URL的目标;二是通过使用<a>标签的name属性或id属性在文档中创建一个文档内部的书签

1.锚点标签<a>....</a>

属性target:设定链接被单击后所要开始窗口的方式有以下4种:

1)blank：在新窗口中打开被链接的文档

2)sef：默认值，在相同的框架中打开被链接的文档。

3)parent：在父框架集中打开被链接的文档。

4)top：在整个窗口中打开被链接的文档

2.指向其他页面的超链接

创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接

3.指向书签的超链接

在浏览页面时，如果页面篇幅很长，要不断地拖动滚动条，就给用户浏览带来不便。浏览者需要既可以从头阅读到尾，又可以很快寻找到自己感兴趣的特定内容进行部分阅读时就可以通过书签链接来实现。当浏览者单击页面上的某一“标签”，就能自动跳到网页相应的位置进行阅读，给浏览者带来方便。
书签就是用<a>标签对网页元素作一个记号，其功能类似于用于固定船的锚，所以书签也称锚记或锚点。如果页面中有多个书签链接，对不同目标元素要设置不同的书签名。

4.指向下载文件的超链接

如果希望制作下载文件的超链接，只需要在链接地址中输入文件所在的位置当浏览器用户单击超链接后，浏览器会自动判断文件类型，以做出不同的处理

5.指向电子文件的超链接

网页中电子邮件地址的超链接，可以使网页浏览者将有关信息以电子邮件发送给你设置的邮

2.3图像

2.3.1网页图像的格式及使用要点

1.常见的图象格式；

GIF;是 Intemet上应用最广泛的图像文件格式之一，是一种索引颜色的图像式，此格式在网页中使用较多

JPEG;是Intemet 上应用最广泛的图像文件格式之一，适用于摄影或连续色酒图像

PNG;是一种新型的无专利权限的图像格式，兼有GIF和JPG的优点

2.使用网页图像的要点

(1)高质量的图像因其图像体积过大，不太适合网络传输

(2)网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力

(3)如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像

2.3.2图像标签

1.图像的替换文本说明

有时，由于网速过慢或者用户在图片还没有下载完全就单击了浏览器的停止键，在浏览器中就看不到要看到图片，这时替换文本说明就十分有必要了

2.设置图像大小

在 HTML 中，通过img 标签的属性 width 和 height 来调整图像大小，其目的是通过图像的高度和宽度加快图像的下载速度

3图像的边框

在网页中显示的图像如果没有边框，会显得有些单调，可以通过img标签的border属性为图像添加边框，添加边框后的图像显得更醒目、美观

4.图像的超链接；<a href="http1:// www.baidu.com">

5设置网页的背景图像

在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用

6图文混排

图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。在制作网页时往往要在网页中的某个位置插人一个图像，使文本环绕在图像的周围

2.4列表

在制作网页时，列表经常被用到写提纲和品种说明书。通过列表标记的使用能使这些内容在网页中条理清晰、层次分明、格式美观地表现出来

1.无序列表

<ul>

<li>无序列表第一项</ui>

<li>无序列表第二项</ui>

<li>无序列表第三项</ui>

<ul>

在<ul>后面指定符号的样式，可设定直到</ul>的加重符号

<ul type = " dise" >                                符号为实心圆点●
<ul type = " cirele" >                             符号为空心圆点○
<ul type = " square" >                           符号为方块
<ul img src= " graph .gif" >                   符号为指定的图片文件

在<li>后面指定符号的样式

<li type = " dise" >                                符号为实心圆点●
<li type = " cirele" >                             符号为空心圆点○
<li type = " square" >                           符号为方块
<li img src= " graph .gif" >                   符号为指定的图片文件

2.有序列表

有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记

3.定义列表

定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释

4.嵌套列表

所谓的嵌套列表，就是无序列表和有序列表混合使用。嵌套列表可以把页面分为多个层次，给人很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可以分为无序列表中嵌套有序列表、有序列表中嵌套无序列表、无序嵌套无序、有序嵌套有序，可灵活使用