如何设置网页的背景及技巧--
网页布局方案

网页布局方案第1篇网页布局方案一、项目背景随着互联网技术的不断发展和普及,网页作为信息传播的重要载体,其界面布局的合理性、美观性和用户体验成为越来越受到重视的环节。
为满足客户需求,提高用户访问体验,确保网页信息的有效传达,特制定本网页布局方案。
二、目标定位1. 确保网页界面整体风格统一,符合品牌形象;2. 优化网页布局,提高用户体验,降低用户访问跳出率;3. 提高网页加载速度,满足不同设备访问需求;4. 合理安排内容布局,提升网页信息传达效果。
三、布局原则1. 简洁明了:界面设计简洁,易于用户理解和操作;2. 层次清晰:内容布局层次分明,便于用户快速找到所需信息;3. 一致性:整体风格、色彩搭配、字体选择等方面保持一致性;4. 灵活性:适应不同设备、分辨率和浏览器,提高兼容性;5. 响应式:根据用户行为和设备环境进行智能化布局调整。
四、具体布局方案1. 头部区域:- 标志:放置品牌标志,增强品牌形象;- 导航栏:提供全局导航,方便用户快速切换到其他页面;- 搜索框:便于用户快速查找内容。
2. banner区域:- 轮播图:展示重要信息、广告或活动,吸引用户关注;- 简洁明了,突出主题。
3. 内容区域:- 主体内容:根据用户需求,合理安排信息展示顺序,突出重点;- 侧边栏:提供辅助信息、推荐阅读等内容,提高用户粘性;- 分页:合理划分内容,提高加载速度。
4. 底部区域:- 版权信息:注明版权所有,增强法律意识;- 导航链接:提供网站地图、友情链接等,方便用户浏览;- 联系方式:提供联系方式,便于用户咨询和反馈。
五、实施步骤1. 需求分析:深入了解客户需求,明确项目目标;2. 设计草图:根据需求,绘制初步布局草图;3. 设计稿制作:根据草图,制作详细设计稿;4. 前端开发:遵循W3C标准,进行HTML、CSS和JavaScript编写;5. 测试与优化:在不同设备和浏览器上测试,优化布局效果;6. 上线部署:确认无误后,进行上线部署;7. 持续优化:根据用户反馈,持续优化网页布局。
如何设置页面背景和水印

如何设置页面背景和水印页面背景和水印是网页设计中常用的元素之一,可以增加页面的美观度和专业感。
本文将介绍如何设置页面背景和水印,帮助您创建一个独特而吸引人的网页。
一、页面背景的设置在设计网页时,选择合适的背景色或背景图案是至关重要的。
以下是设置页面背景的一些方法:1. 使用纯色背景选择一种与网页主题相符的纯色背景,可以使页面看起来整洁而简单。
一般来说,浅色背景能够提供更好的可读性,而深色背景则能给人以神秘和高端的感觉。
2. 使用背景图案如果您想要一个更有趣和丰富的页面背景,可以选择合适的背景图案。
这些图案可以是纹理、图形或艺术品,能够为网页增添独特的风格和视觉效果。
3. 设置背景图片除了使用背景图案,您还可以选择一张高质量的背景图片。
这些图片可以是您自己的照片、插图或者免费提供的图片资源。
为了保持页面的一致性,在选择背景图片时建议考虑主题和内容的一致性。
二、水印的添加水印是一种透明的文字或图像覆盖层,用于使网页内容更加安全和可辨识。
以下是添加水印的一些方法:1. 使用透明度设置在设置水印时,您可以通过调整文字或图像的透明度来实现不同的效果。
透明度的设置可以根据个人喜好来调整,一般来说,适当的透明度能够使水印既显眼又不影响正文内容的阅读。
2. 使用文本水印文本水印是添加文字信息作为水印的一种方式。
您可以在网页的角落、边框或其他合适位置添加文字水印。
这些文字可以是作者的名字、网页的标题或者其他特定的标识信息。
3. 使用图像水印图像水印是添加图片作为水印的一种方式。
您可以使用网页制作软件中的插件或者图像处理软件来创建一个透明的图片水印。
这种水印通常包含网页的徽标、标识符或其他具有辨识度的图像。
三、设置页面背景和水印的技巧和注意事项设置页面背景和水印时,还需要注意以下一些技巧和注意事项:1. 考虑页面加载速度选择合适的背景图像和水印会增加页面的加载时间。
要确保页面的速度和性能,可以通过压缩图像、优化代码和使用适当的图片格式来减少文件大小和加载时间。
如何设置网页的背景颜色

如何设置网页的背景颜色
在浏览网页的时候,默认的背景都是白色的,我们可以设置另外一种颜色,可以让网页的显示更具有个性化,今天店铺来详细地说一说怎么设置网页的背景颜色。
设置网页的背景颜色的方法
首先打开Ie浏览器,点击上面菜单栏中的工具选项,如图所示。
在弹出的菜单中选择最下面的internet选项,点击此选项打开选项设置页面。
在浏览器选项页面的最下面,有一个外观的设置项,其中左起第一个就是颜色的设置,我们可以通过这里来设置一下网页显示的颜色。
点击此颜色按钮,然后跳出一个颜色设置窗口,在这个窗口中,有一个选项是默认被选定的,即使用windows颜色,这个是默认的选项。
如果我们要自定义,就要取消选定这个选项。
取消选定之后,下面的各种设置项就处于可点击的状态了,我们要设置背景颜色,就点击背景后面的那个灰色的按钮。
然后出现一个颜色选择窗口,我们可以选择任意的颜色,比如选择一种绿色的比较护眼的颜色,然后点击确定按钮。
现在我们看到,在背景后面的颜色按钮上面,已经变成了我们所选择的绿色了,现在点击颜色设置窗口的确定按钮,然后再点击internet选项的确定按钮,退出设置。
现在我们来看一看网页中显示的情况,如图所示,在经验编辑器的文字输入框中,背景的颜色已经由原来的白色变成我们现在所设置的绿色了,当然并不是在所有的背景中都显示为绿色,只有在一些特定的网页中才会显示。
END。
网页布局色彩搭配技巧

⽹页布局⾊彩搭配技巧⽹页设计的基础--⽹页布局正如您现在看到的,⽹页的布局变得越来越重要。
访问者不愿意再看到只注重内容的站点。
虽然内容很重要,但只有当⽹页布局和⽹页内容成功结合时,这种⽹页或者站点才是招⼈喜欢的。
缺任何⼀⾯你都⽆法留住太过“挑剔”的访问者。
⽹页布局的基本理念最开始⽹页呈现在你⾯前的时侯,它就好像⼀张⽩纸,它需要挥洒你的设计才华。
假如你知道什么是⼀种约定俗成的标准或者说⼤多数访问者的浏览习惯,那么你可以在此基础上加上⾃⼰的东西。
总结出来就是先锋在线⽹站制作⼈员对⽹页布局的设计理念:1.页⾯尺⼨:⼀般分辨率在800×600的情况下,页⾯显⽰尺⼨为780×428象素;分辨率在640×480的情况下页⾯显⽰尺⼨为620×311象素;分辨率在1024×768的情况下,页⾯显⽰尺⼨为1007×600。
分辨率越⾼页⾯尺⼨越⼤。
我们经常看到有的⽹页上的说明:本⽹页适合在1024×768分辨率下浏览...不要搞成这样!永远不要让浏览者调整分辨率去适应你的⽹页尺⼨,⽽是应该⾃动适应浏览者的分辨率尺⼨,这就是使⽤者(浏览者)优先原则。
浏览器的⼯具栏也是影响页⾯尺⼨的原因。
⼀般⽬前的浏览器的⼯具栏都可以取消或者增加,那么当你显⽰全部的⼯具栏时,和关闭全部⼯具栏时,页⾯的尺⼨是不⼀样的。
在⽹页设计过程中,向下拖动页⾯⼤概是惟⼀给⽹页增加更多内容(尺⼨)的⽅法。
但我想提醒⼤家除⾮你能肯定站点的内容能吸引⼤家拖动,否则不要让访问者拖动页⾯超过三屏。
虽然现在很多⿏标都有滚轮设计,但是⽹页的设计布局是越少⽤到⿏标越好。
2.整体形象:是图形与⽂本的结合应该是层叠有序的整体。
虽然,显⽰器和浏览器都是矩形,但对于页⾯的造型,你可以充分运⽤⾃然界中的其它形状以及它们的组合:矩形、圆形、三⾓形、菱形等轮廓。
对于不同的形状,它们所代表的意义是不同的。
⽐如矩形代表着正式,规则,你注意到很多ICP和政府⽹页都是以矩形为整体造型;圆形轮廓代表柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页⾯整体造型轮廓;三⾓形、梯形代表着⼒量,权威,牢固,侵略等,许多⼤型的商业站点为显⽰它的权威性常以三⾓形为页⾯整体造型;菱形代表着平衡,协调,公平,⼀些交友站点常运⽤菱形作为页⾯整体造型。
如何设置页面背景颜色

如何设置页面背景颜色在网页设计中,页面背景颜色是一个重要的元素。
通过设置页面背景颜色,我们可以为用户呈现出不同的氛围和风格。
本文将介绍一些常见的方法来设置页面背景颜色,帮助您打造出美观舒适的网页。
一、使用内联样式设置页面背景颜色使用内联样式表是一种简单快捷的方法来设置页面背景颜色。
您可以直接在网页标签中添加style属性,并设置背景颜色的数值或颜色名称。
例如:```html<body style="background-color: #F0F0F0;"><!-- 网页内容 --></body>```通过设置background-color属性的值,可以将页面背景颜色设置为特定的十六进制颜色码,如#F0F0F0,或使用颜色名称,如"white"。
根据需要调整数值或颜色名称来实现您想要的背景颜色效果。
二、使用CSS样式表设置页面背景颜色除了内联样式表,您还可以使用外部CSS样式表来设置页面背景颜色。
首先,您需要创建一个新的CSS文件(例如style.css),然后在HTML文件的头部引用该文件。
接下来,在CSS文件中添加如下代码:```cssbody {background-color: #F0F0F0;}```通过将背景颜色规则应用于body元素,您可以全局设置整个网页的背景颜色。
同样,您可以根据需求调整背景颜色的数值或颜色名称。
三、使用背景图片作为页面背景除了纯色背景,您还可以使用图片作为页面背景。
这样可以为网页增添一些视觉元素和艺术感。
要设置背景图片,可以使用以下CSS规则:```cssbody {background-image: url("background.jpg");background-repeat: no-repeat;background-size: cover;}```在上述代码中,我们通过background-image属性指定了背景图片的URL。
网页用什么背景色最保护眼睛——底色和字体搭配——网页颜色搭配技巧

⽹页⽤什么背景⾊最保护眼睛——底⾊和字体搭配——⽹页颜⾊搭配技巧⽹页⽤什么背景⾊最保护眼睛——底⾊和字体搭配 ——⽹页颜⾊搭配技巧⽹页⽤什么背景⾊最保护眼睛?程序、⽹页背景⾊设置成淡绿⾊有助于保护眼睛。
现在,⼈们不管是娱乐还是⼯作,都离不开电脑。
但电脑屏幕尤其是⽹页的底⾊,主要都是刺眼的⽩⾊。
看得时间长了,眼睛就会酸疼甚⾄流眼泪。
如果⽹页底⾊变成淡淡的苹果绿,这个问题就能有效地缓解。
操作⽅法:⾸先,在桌⾯上点击⿏标右键,再依次点击 “属性”和“外观”、“⾼级”按钮,然后在“项⽬”下拉列表⾥选择“窗⼝”,再打开右边对应的“颜⾊”列表,选择其中的“其他”⼀项,在打开的对话框中,把“⾊调”、“饱和度”、“亮度”三项的参数分别设置成85 ,90,205,然后点击“确定”退出设置。
注意,以上部分设置影响普通应⽤程序的背景⾊。
⼀下设置影响⽹页的背景⾊,可能会影响⽹页美观和表现效果。
建议普通⽤户慎重修改。
最后,打开IE浏览器,选择“⼯具”菜单中的“Internet选项”,点击“辅助功能”按钮,在“不使⽤⽹页中指定的颜⾊”前打钩。
这样,⽹页的底⾊就成了绿⾊,⽽且⽂件夹、⽂档,甚⾄ word⾥的背景页⾯都变成淡淡的绿⾊了。
下⾯介绍下不伤眼睛的⽂字背景⾊苹果绿 RGB 204,255,204#CCFFCC杏仁黄 rgb 250 249 222#FAF9DE青草绿 rgb 227 237 205#E3EDCD海天蓝 rgb 220 226 241#DCE2F1⾖沙绿 RGB 199 237 204 (这个最被推荐)#C7EDCC灰⾊ RGB235,235,228#EBEBE4/1xUvQykVwMC- gOELL5VPxw==/605452674922033541.jpg眼科医⽣推荐的颜⾊是柔和淡绿⾊,绿⾊对眼睛有好处。
我们把背景设置成淡绿⾊,既不影响窗⼝内容的显⽰,⼜可以保护眼睛。
XP下设置颜⾊保护眼睛的技巧桌⾯右击〉属性〉外观〉⾼级〉项⽬〉窗⼝〉颜⾊〉其它〉⾃定义颜⾊〉填写⾊调:84,饱和度:91,亮度:205博客的背景也是⼀样,选择柔和的冷⾊⽐较好,因为太艳的⾊彩对眼睛伤害很⼤,尤其是⼤红⾊,对眼睛刺伤⼒特别⼤,⼤红的背景⾊下,⽂字,图的⾊彩都不好搭配,总让⼈感到有不⼤⽅,不清秀甚⾄于有喧宾夺主之感觉,把你要展⽰的图⽂风光占尽。
网页颜色搭配技巧文字字体、字号、字体排版等
⽹页颜⾊搭配技巧⽂字字体、字号、字体排版等对于做⽹页的初学者可能更习惯于使⽤⼀些漂亮的图⽚作为⾃⼰⽹页的背景,但是,浏览⼀下⼤型的商业⽹站,你会发现他们更多运⽤的是⽩⾊、蓝⾊、黄⾊等,使得⽹页显得典雅,⼤⽅和温馨。
更重要的是,这样可以⼤⼤加快浏览者打开⽹页的速度。
⼀般来说,⽹页的背景⾊应该柔和⼀些、素⼀些、淡⼀些,再配上深⾊的⽂字,使⼈看起来⾃然、舒畅。
⽽为了追求醒⽬的视觉效果,可以为标题使⽤较深的颜⾊。
下⾯是我做⽹页和浏览别⼈的⽹页时,对⽹页背景⾊和⽂字⾊彩搭配积累的经验,这些颜⾊可以做正⽂的底⾊,也可以做标题的底⾊,再搭配不同的字体,⼀定会有不错的效果,希望对⼤家在制作⽹页时有⽤。
BgcolorΚ″#F1FAFA″———做正⽂的背景⾊好,淡雅BgcolorΚ″#E8FFE8″———做标题的背景⾊较好BgcolorΚ″#E8E8FF″———做正⽂的背景⾊较好,⽂字颜⾊配⿊⾊BgcolorΚ″#8080C0″———上配黄⾊⽩⾊⽂字较好BgcolorΚ″#E8D098″———上配浅蓝⾊或蓝⾊⽂字较好BgcolorΚ″#EFEFDA″———上配浅蓝⾊或红⾊⽂字较好BgcolorΚ″#F2F1D7″———配⿊⾊⽂字素雅,如果是红⾊则显得醒⽬BgcolorΚ″#336699″———配⽩⾊⽂字好看些BgcolorΚ″#6699CC″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#66CCCC″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#B45B3E″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#479AC7″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#00B271″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#FBFBEA″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂BgcolorΚ″#D5F3F4″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂BgcolorΚ″#D7FFF0″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂BgcolorΚ″#F0DAD2″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂BgcolorΚ″#DDF3FF″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂浅绿⾊底配⿊⾊⽂字,或⽩⾊底配蓝⾊⽂字都很醒⽬,但前者突出背景,后者突出⽂字。
如何设置页面边框和背景色
如何设置页面边框和背景色在现代的网页设计中,设置页面边框和背景色是非常重要的一部分。
页面边框和背景色能够增加网页的美观程度,提升用户的阅读体验。
本文将介绍如何设置页面边框和背景色,并提供一些实用的技巧和建议。
一、页面边框的设置页面边框是指网页中各个模块之间的分隔线,设置页面边框可以使网页更加结构化和清晰。
下面是一些设置页面边框的方法:1. CSS边框属性:可以使用CSS的边框属性来设置页面的边框,如border-style、border-width和border-color等。
例如,可以通过设置border-style属性为solid,border-width属性为1px,border-color属性为#000000来设置一个黑色的边框。
2. 使用HTML表格:如果网页内容较为复杂,可以使用HTML表格来划分页面,通过设置表格的边框属性来实现页面边框的效果。
可以使用table标签和相应的CSS样式来设置表格的边框样式。
3. 使用框架(Frameset):框架(Frameset)是一种将网页分割成多个窗口或框架的技术,可以通过设置框架的边框属性来实现页面边框的效果。
可以使用frameset标签和相应的CSS样式来设置框架的边框样式。
二、背景色的设置背景色是指网页的背景部分的颜色,合适的背景色选择可以让网页看起来更加美观和舒适。
下面是一些设置背景色的方法:1. 使用CSS的background-color属性:可以使用CSS的background-color属性来设置网页的背景色,可以设置为十六进制颜色值或预定义的颜色名字。
例如,可以使用background-color属性设置背景色为#F0F0F0,即浅灰色。
2. 使用HTML的bgcolor属性:可以使用HTML的bgcolor属性来设置网页的背景色,可以设置为十六进制颜色值或预定义的颜色名字。
例如,可以使用bgcolor属性设置背景色为#F0F0F0,即浅灰色。
如何使用WordPress主题和布局自定义网站外观
如何使用WordPress主题和布局自定义网站外观一、介绍WordPress作为目前最流行的网站建设平台之一,提供了丰富的主题和布局选项,使用户能够轻松自定义网站的外观。
本文将介绍如何使用WordPress主题和布局来自定义网站外观。
二、选择主题在开始自定义网站外观之前,我们需要选择一个合适的主题。
登录到WordPress后台,点击“外观”-“主题”,浏览并选择一个你喜欢并且与网站主题相关的主题。
在选择时,可以考虑主题的设计风格、布局结构、功能扩展等因素。
如果找不到合适的主题,可以考虑购买或使用第三方开发的主题。
三、安装和激活主题选定主题后,需要将其安装到WordPress中并激活。
点击“外观”-“主题”,然后点击“添加新主题”按钮,选择已下载到本地的主题文件并上传。
上传完成后,点击“启用”按钮即可激活主题。
四、主题设置每个主题都有自己的设置选项,可以在WordPress后台找到。
通常,这些选项可以在“外观”-“主题”设置页面或主题自带的设置页面中找到。
根据主题的要求和你的需求,可以进行一系列的设置,如更改网站标题、网站标语、背景图片、导航菜单等。
在这些设置中,还可以启用主题提供的各类功能,如社交媒体链接、页面模板、小工具等。
五、自定义外观除了主题设置外,WordPress还提供了丰富的自定义外观选项,使你可以自由修改网站的外观。
点击“外观”-“自定义”,打开定制页面。
在这里,你可以修改网站的标题、标语、颜色、字体等。
此外,还可以自定义网站的头部、背景、导航菜单、页面布局等。
六、使用页面生成器为了更加灵活和便捷地自定义网站外观,可以考虑使用WordPress的页面生成器插件。
页面生成器插件可以让你通过拖拽和设置参数的方式轻松创建和布局网站页面。
安装并激活一个页面生成器插件后,可以在WordPress后台的页面编辑界面找到相应的工具和选项。
使用页面生成器,你可以自由调整页面的布局、添加或删除模块、定义模块的样式等。
网页设计中色彩搭配原则及方法
网页设计中色彩搭配原则及方法网页的色彩搭配设计影响着网站的美观度,用户都希望页面美观,功能简便又强大。
下面店铺为大家整理了网页设计中色彩搭配原则及方法,希望能帮到大家!网页设计中色彩搭配原则及方法篇1一、色彩搭配原则在选择网页色彩时,除了考虑网站本身的特点外还要遵循一定的艺术规律,从而设计出精美的网页。
1、色彩的鲜明性:如果一个网站的色彩鲜明,很容易引人注意,会给浏览者耳目一新的感觉。
2、色彩的独特性:要有与众不同色彩,网页的用色必须要有自己独特的风格,这样才能给人浏览者留下深刻的印象。
3、色彩的艺术性:网站设计是一种艺术活动,因此必须遵循艺术规律。
按照内容决定形式的原则,在考虑网站本身特点的同时,大胆进行艺术创新,设计出既符合网站要求,又具有一定艺术特色的网站。
4、色彩搭配的合理性:色彩要根据主题来确定,不同的主题选用不同的色彩。
例如,用蓝色体现科技型网站的专业,用粉红色体现女性的柔情等。
二、网页色彩搭配方法网页配色很重要,网页颜色搭配的是否合理会直接影响到访问者的情绪。
好的色彩搭配会给访问者带来很强的视觉冲击力,不恰当的色彩搭配则会让访问者浮躁不安。
1、同种色彩搭配:同种色彩搭配是指首先选定一种色彩,然后调整其透明度和饱和度,将色彩变淡或加深,而产生新的色彩,这样的页面看起来色彩统一,具有层次感。
2、邻近色彩搭配:邻近色是指在色环上相邻的颜色,如绿色和蓝色、红色和黄色即互为邻近色。
采用邻近色搭配可以里是网页避免色彩杂乱,易于达到页面和谐统一的效果。
3、对比色彩搭配:一般来说,色彩的三原色(红、黄、蓝)最能体现色彩间的差异。
色彩的强烈对比具有视觉诱惑力,能够起到几种实现的作用。
对比色可以突出重点,产生强烈的视觉效果。
通过合理使用对比色,能够使网站特色鲜明、重点突出。
在设计时,通常以一种颜色为主色调,其对比色作为点缀,以起到画龙点睛的作用。
4、暖色色彩搭配:暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
如何设置网页的背景及技巧--
网页的背景色和背景图选择得好,会是页面增色不少。
如果选取单一的背景色,难免显得单调,如果选择整个图片做背景,由于图片本身的文件大,造成网页的加载时间长,一般用户很难有耐性等待下去。
网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象。
那么带背景的网页是如何制作出来的?
很简单,一般是采用一幅很小的图片,然后铺展开,形成很漂亮的背景。
对背景图的要求当然是越漂亮越好,文件越小越好。
这里我们不谈论图片的制作了。
当你有了一幅可以自然拼接的图像后,在Dreamweaver中,我们可以设置background图片。
打开源文件我们可以看到〈BODY〉标签中多了一串代码。
代码的表达式如下:
<BODY background="/images/back001.gif" BGCOLOR="#FFFFFF" >
这里的images/back001.gif就是BACKGROUND的值,其图像文件名为一个URL。
当然我们可以在源代码中直接加入上面的代码。
下面是一个小例子。
假如我们有了一幅适合做背景的小图,文件为back001.gif,下面就可以重新编写HTML代码了。
<HTML>
<HEAD>
<TITLE>8888888888</TITLE>
</HEAD>
<BODY background="/kfq/Service enterprise/0823175403x.jpg"
BGCOLOR="#FFFFFF">
<P><FONT FACE="Arial" SIZE="5"
COLOR="#0000ff"></FONT><FONT FACE="5"
COLOR="#0000ff"></FONT></P>
</BODY>
</HTML>
如果你经常注意别人的网站,你应该会发现在不同的网站上,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。
究竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由好IP网络来为大家作一个比较完整的总结。
1.颜色背景
颜色背景的设计是最为简单的,但同时也是最为常用和最为重要的,因为相对于图片背景来说,它有无与伦比的显示速度上的优势。
在网页文件中,一般通过标签来指定页面的颜色背景,其HTML语法为:
其中的"color"表示不同的颜色,可以用各种不同的颜色表示方法,比较常用的有直接用颜色的英文名称,如blue、yellow、black等等,还可以用颜色的十六进制表示方法,如#0000FF、#FFFF00、#000000等等,此外还可以用百分比值法和整数法,其效果都是一样的。
颜色背景虽然比较简单,但也有不少地方需要注意,如要根据不同的页面内容设计背景颜色的冷暖状态,要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。
2.沙纹背景
沙纹背景其实属于图片背景的范畴,它的主要特点是整个页面的背景可以看作是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。
初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是,却发现浏览器上显示出来的不仅仅是一个照片,而是同一照片在水平和竖直方向上的反复排列。
这就是浏览器处理图片背景时的规律方法,利用这一规律我们可以用一小块图片作为页面背景,让它自动在页面上重复排列,铺满整个页面,从而使网页的体积大大减小。
读者到现在恐怕都已经知道了沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但注意要使最后的背景看起来要像一个整体,而不是若干图片的堆砌。
其实现的HTML语法如下:
其中的"picture"表示背景图片的URL路径。
3.条状背景
条状背景与沙纹背景是比较相似的,它适用于页面背景在水平或竖直方向上看是重复排列的,而在另一方向上看则是没有规律的。
它也是利用浏览器对图片背景的自动重复排列,与沙纹背景所不同的是它只让图片在一个方向上重复排列。
以在竖直方向上排列为例,首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片,其长度与页面的宽度相当。
也通过
将其设为页面背景,经浏览器显示后,就成为整个页面从左到右蓝白渐变的分栏颜色背景。
当然,也可以用类似的方法实现条状背景在水平方向上的重复排列。
4.照片背景
把自己或朋友的照片作为页面的背景让大家看到,是有点令人激动的事情,但浏览器对图片的自动重复排列却使这一愿望难以实现。
怎么办呢?只有想不
到的,没有做不到的,这里我们用上一点简单的CSS。
在网页文件的……之间加入下面的CSS 语句:
这样,在网页页面中,就可以看到你的照片位于页面的正中间,而且在拉动浏览器窗口的滚动条时,照片仍然位于页面的正中间而不随页面内容一起滚动。
如果你觉得照片位于页面的正中间不满意,你也可以随意地调整它在页面中的位置,只需要调整"background-position"的值就可以了。
5.复合背景
如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。
这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的颜色背景取而代之。
它的设计方法,就不用我再多说了吧!
6.局部背景
前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。
最为常见的是在表格的设计当中,我们可以为表格设置一个不同于页面的背景,甚至在不同的表格单元中,我们也可以设置各个表格单元自己的背景。
请看下面这个表格例子:
在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。
除此之外,我们还可以单独为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相当不错,这也需要用上一些CSS。