网页基本框架,网页基本框架结构代码

http://www.itjxue.com  2023-01-05 00:03  来源:未知  点击次数: 

常见的几种WEB网页布局结构(PC端)

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构:

6.上下框架型

上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。一半深色一半浅色,一般用于设计型站点。

优点是视觉冲击力强,缺点是很难将两部分有机地结合起来

网页的基本构成元素都有哪些?

导航栏、栏目、及正文内容这三大要素组成。

1、导航栏

导航栏是构成网页的重要元素之一,是网站频道入口的集合区域,相当于网站的菜单。

2、栏目

栏目是指网页中存放相同性质内容的区域。在对页面内容进行布局时,把性质相同的内容安排在网页的相同区域,可以帮助用户快速获取所需信息,对网站内容起到非常好的导航作用。

3、正文内容

正文内容是指页面中的主体内容。例如一个文章类页面,正文内容就是文章本身;而对于展示产品的网站,正文内容就是产品信息。

网页设计的要点:

1、整体风格

网站的整体风格及其创意设计是最难以学习的,难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。

风格是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

2、色彩搭配

无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。

用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。用两种色彩。先选定一种色彩,然后选择它的对比色。用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。

在网页配色中,还要切记一些误区:不要将所有颜色都用到,尽量控制在三至五种色彩以内。背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

什么是网页框架

■ 什么是框架型网页?

如果一个网页的左边导航菜单是固定的,而页面中间的信息可以上下移动,这一般就可以认为是一个框架型网页。此外,一些框架型站点的模板在其页面上方放置了公司的LOGO或图片。不过这一块也是位置固定的。而页面的其它部分则可以上下左右移动。有的框架型站点模板还会在其固定区域中放入链接或导航按钮。

在一些关于搜索引擎优化方面的文章中,基本上都认为网站用框架来设计是极不可取的。这是由于大多数的搜索引擎都无法识别网页中的框架,或者无法对框架中的内容进行遍历或搜索。

■ 为什么使用框架的网页无法被正确索引?

我们将向大家解释为何使用框架的网页无法被使用网络蜘蛛(spiders)或网络爬虫(crawlers) 的搜索引擎(如Google)正确索引的主要原因。在一个框架网页的后台代码中,我们一般能够看到的是网页的标题标记(Meta Title)、描述标记(Meta Description)、关键字标记(Meta Keywords)及其它原标记(Meta Tags),同时你还会看到一个框架集标记(Frameset Tag)。框架中的内容在后台代码中是无法被体现的,而对于那些主要搜索引擎的搜索程序来说,如Google的GoogleBot和Freshbot,其设计思路都是完全忽略某些HTML代码,转而直接锁定网页上的实际内容进行索引。这样一来,网络蜘蛛在那些一般性的框架网页上根本找不到要搜索的内容。这是由于那些具体内容都被放到我们称之为“内部网页”中去了。

使用“Noframes”标记进行优化

使用了框架型网页并不意味着就完全无法对其网页进行优化。实际上在HTML标记中,有一个叫做NOFRAME的标记,如果使用得当的话我们就可以有效地对页面进行优化了,从而使得搜索引擎能够正确索引你框架网页上的内容信息。也有网站这样使用NOFRAMES标记:他们在NOFRAMES标记里放上这么一段话:“本网页使用了框架,但您的浏览器不支持框架。请下载新的浏览器观看。”

让我们看看那些专业的搜索引擎优化公司是怎么做的吧。他们在使用了框架的网页中,有效的提供含有丰富关键字和关键短语的重要文字和内容,从而有效帮助网站在SERP(搜索引擎搜索结果页)中取得较高的排名(页面等级)。

这样优化的结果,其实就是让主要搜索引擎不但读取了你的网页后台代码中的标题和其它原标记,而且对那些不支持框架的浏览器所无法显示的页面内容信息,也进行了索引。如果你出于某种原因非要使用框架结构,那么请紧记:在你的后台代码中一定要正确的使用NOFRAMES标记,这一点非常重要。

很显然,我们所说的这些优化措施,只有对那些网页内容经过精心撰写,并且在内容中充分使用了重要关键字和关键短语的网站才起作用。

综上所述,不管是使用框架技术的网站还是非框架技术的网站,只要你采用的是恰当的技术和正确的技巧,都可以进行完美的优化从而取得理想的页面等级。

什么是框架

前面我们介绍了很多网站的页面是用表格制作的,还有一种更方便的工具,就是使用框架。

框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页。

iframe/iframe

将文档分割为几个框架后,Dreamweaver会自动产生一个没名字的框架体文件,比如我们看到的一个简单的左右框架页面,实际上包含3个不同的文件,一个是框架体文件,还有两个在框架中显示内容的文件。

框架体文件中保存页面中框架的数量,框架的尺寸、位置及每个框架的网页源文件和其它可定义的属性。

网页设计框架怎么做

网页设计框架做法如下:学习网页设计框架推荐咨询【达内教育】。

1、第一步:新建网页

首先;打开软件,选择菜单栏下“修改”——“框架集”——“拆分为左右框架”。进行三个网页的保存。

2、第二步:制作左边的框架网页

首先插入表格并设置基本属性:选择主菜单下的“插入”——“表格”。接着设置表格的属性:(4行1列的表格“高300像素、宽100像素”,表格边框为黄色、背景为绿色。)其中的高,边框颜色都是使用代码输入。

3、第三步:设置css样式

首先打开css面板,选择该面板的下面的“+”号,出现下图所示的效果。设置样式。选择“id”类型,取名为“stlye1”,保存了“仅存为该文档”。设置样式属性。“华文楷体、14磅、加粗、黑色”。

4、第四步:使用css样式

在表格中书写相应的文字。选中所有的文字,然后来到属性面板。选择“类”——“stlye1”,;就设置好css样式。

5、第五步:设置文字的位置。

选中文字,来到属性面板,设置“水平”,“垂直”的属性等。感兴趣的话点击此处,免费学习一下

想了解更多有关框架的相关信息,推荐咨询【达内教育】。达内与阿里、Adobe、红帽、ORACLE、微软、美国计算机行业协会(CompTIA)、百度等国际知名厂商建立了项目合作关系。共同制定行业培训标准,为达内学员提供高端技术、所学课程受国际厂商认可,让达内学员更具国际化就业竞争力。达内IT培训机构,试听名额限时抢购。

(责任编辑:IT教学网)

更多

推荐HTML/Xhtml文章