在WEB 标准成为WEB 开发人员的共识以前,或者说在CSS 语言被广大WEB 开发人员掌握并广泛使用之前,网页布局大量使用表格来实现。其次,使用table、tr、td 等标签来实现布局,使得这些标签丧失了它们本来的语义。再次,大量使用表格实现布局,直接违反了结构和表现分离的原则,从而不符合WEB 标准。在目前的WEB 开发实践中,普遍采用CSS 结合div 标签来实现网页的布局。这样整个页面的版式就受到了控制,从而实现了网页的布局。......
2023-10-19
网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型,在这里就不做一一论述了。其实我们在做设计的时候并没有过多地考虑什么形式,比如我们在一张纸上看到一个圆形的东西,很容易联想到它像太阳,而有些人则联想到月亮等等。这都是一种形式比喻,最重要的是抓住客户的需求,把握网站的定位做出合理的框架布局。
(1)分辨率。
网页的整体宽度可分为三种设置形式:百分比、像素、像素+百分比。通常在网站建设中以像素形式最为常用,行业网站也不例外。我们在设计网页的时候必定会考虑到分辨率的问题,科技发展到现在我们通常用的是1024×768和800×600的分辨率,现在网络上很多都用778个像素的宽度,在800的分辨率下面往往使整个网页很压抑,有种不透气的感觉,其实这个宽度是指在800×600的分辨率上网页的最宽宽度,不代表最佳视觉,不妨试试760~770的像素,不管在1024还是800的分辨率下都可以达到较佳的视觉效果。
(2)合理广告。
目前一些网站的广告(弹出广告、浮动广告、大广告、banner广告、通栏广告等等)让人觉得很繁琐,根本就不愿意看,有时干脆连这个网站都不上了。这样一来网站受到了严重的影响,广告也没达到广告的目的。这些问题都是我们在设计网站之前需要考虑、需要规划的内容之一。
浮动广告有两种,第一种是在网页两边空余的地方可以上下浮动的广告;第二种是满屏幕到处随机移动的广告。建议能使用第一种的情况下尽量使用第一种,不可避免第二种情况时尽量在数量上控制最多一个就好。如果数量过多会直接影响到用户的心理、妨碍到用户浏览信息,适得其反。首页广告不宜过多,适中即可。如在注册或者某个购买步骤的页面上,最好不要出现过多的其他无关内容让用户分心,避免客户流失等。
(3)空间的合理利用。
很多的网页都具有一个特点,用一个字来形容,那就是“塞”,它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上,有多少挤多少,不加以规范,导致浏览时会遇到很多的不方便,主要就是页面主次不分,喧宾夺主,要不就是没有重点,没有很好的归类,整体就像个大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡,也可以用个“散”字来形容。(www.chuimin.cn)
并非要把整个页面塞满了才不觉得空,也并非让整个页面空旷才不觉得满,只要合理的安排、有机的组合,使页面达到平衡,即使在一边的部分大面积留空,同样不会让人感到空,相反这样会给人留下广阔的思考空间,给人回味又达到了视觉效果。
(4)文字编排。
在网页设计中,字体的处理与颜色、版式、图形化等其他设计元素的处理一样非常关键。
①文字图形化。
文字图形化就是将文字用图片的形式来表现,这种形式在页面的子栏目里面最为常用,因为它不仅突出,同时又美化了页面,使页面更加人性化且加强了视觉效果,是文字无法达到的。然而,对于通用性的网站,文字图形化就导致了弊端——扩展性不强。
②强调文字。
如果将个别文字作为页面的诉求重点,则可以通过加粗、加下划线、加大号字体、加指示性符号、倾斜字体、改变字体颜色等手段有意识地强化文字的视觉效果,使其在页面整体中显得出众而夺目。这些方法实际上都是运用了对比的法则。如果在更新频率低的情况下,也可以使文字图形化。
有关玩赚你的网站 网站运营从业人员必备手册的文章
在WEB 标准成为WEB 开发人员的共识以前,或者说在CSS 语言被广大WEB 开发人员掌握并广泛使用之前,网页布局大量使用表格来实现。其次,使用table、tr、td 等标签来实现布局,使得这些标签丧失了它们本来的语义。再次,大量使用表格实现布局,直接违反了结构和表现分离的原则,从而不符合WEB 标准。在目前的WEB 开发实践中,普遍采用CSS 结合div 标签来实现网页的布局。这样整个页面的版式就受到了控制,从而实现了网页的布局。......
2023-10-19
更常见的是三列式布局,具体而言就是整个页面分为左中右3 栏。按照这个思路,首先设置布局容器divLayout 使用绝对定位。添加CSS 代码如下:代码运行结果如图8.22 所示。图8.22自适应左外边距设置为202 像素是来自于4 个部分:左侧divNav 与divLayout 左边界距离10 像素;左侧divNav 宽度是180 像素;divContent 与divNav 的距离10 像素;divNav两条边框线各1 像素。......
2023-10-19
视频教学资源学校目标理解WEB 标准了解XHTML理解结构与表现分离理解CSS 的盒状模型掌握CSS 实现页面布局所需的样式属性本章单词请在预习前完成下列单词的学习,将其写在横线上。在持续多年的网站重构浪潮中,经过广大WEB 设计者和开发者广泛的实践和传播,WEB标准的概念逐渐深入人心。而现在,遵循WEB 标准进行网站和网页设计与开发,已成为业界的共识。......
2023-10-19
一次性接收大量的信息,会对个体的思考能力与分析能力造成负面影响。为了避免落入这一“骗局”,就需要我们在谈判的过程中,学会甄别和提炼有价值的信息,而不是将对方提供的所有信息全盘接收。可以从两方面来说:其一,与博弈事件相关联的信息,能够帮助我们提升博弈成功率的信息;其二,充满误导性的、错误的信息,识别出它们,同样可以避免我们做出错误的判断和决策。......
2023-11-22
综合上述内容,可实现更复杂的三行三列式布局,如图8.23 所示。图8.23三行三列式布局与前一个案例中的三列式布局相比,现在增加了顶部独立的行和底部的页脚行。图8.25向左浮动注意divMain 包含的三个div 的宽度总和并不足以充满布局容器的宽度,这是因为我们打算在三个div 之间留一点间隙。图8.26设置左右两边的外边距最后我们人为地为这些div 设置高度模拟最终效果。图8.28竖排的层2.在HTML 中显示三行三列的表格,使用层给表格添加背景图片。......
2023-10-19
信息时代医学院校图书馆网页建设浅议崔小巍 赵鹏 摘 要:网络化是当今世界经济和社会发展的大趋势,图书馆网页进入一个崭新的时代。笔者试结合河北联合大学建设路校区图书馆的网页现状及建设做一初步的探讨。河北联合大学建设路校区图书馆网页根据这一原则,网页内容包含以下几部分。......
2024-01-22
作为完整的页面往往包含很多个部分,例如Logo、导航、Banner、菜单、主体和版底等,使用Photoshop设计界面时,按照规定的准则命名图层或图层组,不仅有利于快速查找和修改页面效果,还可以大幅提高切图和后期制作的工作效率,如图1-32所示为一款结构完整的网页界面设计。图 1-32下面列举了一些常用的CSS标准化设计命名,在使用Photoshop设计页面时,可以用英文名来命名每个部分。头:he......
2023-11-17
相关推荐