天下网吧 >> 网吧天地 >> 网吧技术 >> 网吧网络 >> 正文

教你一招制作简单网页的小技巧

2009-1-19CFAN整理佚名

  一篇文章配上一个漂亮的版面,可以使人耳目一新或着是一种视觉享受。版面设计可以用photoshop软件制作,用PS制作网页版面可以很好的控制和调整网页框架的布局或色彩的协调搭配,也便于整体的修改和局部的细致刻画,使网页更具个性化。

  用PS制作网页前,应对制作的网页有个初步的构思,等把大的色块做好后,再调整色块间的明暗度、对比度、饱和度进行调整,而后再把小的插件放到网页上,先整体后局部的制作过程。由于百度空间受文字字数(4000字)或图片大小(500KB)的限制,所以在网页框架的制作中尽量的简化其结构,图片的格式也尽量的选择GIF格式。还要考虑空间文章区像素的大小,本人空间的文章区宽度是950像素,所以本人的网页框架图片一般设置为920像素。

  让我们先来了解一下版面布局的步骤:

  一.草案
  新建页面就象一张白纸,没有任何表格,框架和约定俗成的东西,你可以尽可能的发挥你的想象力,将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔,当然用作图软件photoshop等也可以)。这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张,最后选定一个满意的作为继续创作的脚本。

  二.粗略布局
  在草案的基础上,将你确定需要放置的功能模块安排到页面上。(注:功能模块我们在"首页设计-引子"中提过,主要包含网站标志,主菜单,新闻,搜索, 友情链接,广告条,邮件列表,计数器,版权信息等)。注意,这里我们必须遵循突出重点、平衡谐调的原则,将网站标志,主菜单等最重要的模块放在最显眼,最突出的位置,然后在考虑次要模块的排放。

  三.定案
  将粗略布局精细化,具体化。(靠你的智慧和经验,旁敲侧击多方联想,才能作出具有创意的布局。)

  网页框架完成后,下一步就是做成适应网页框架的背景图,可以用PS将整图切割成4部分(图1)(这里你可以根据自己的构思,进行切割)背景图1 为LOGO区域,(LOGO制作)背景图2为过渡区,也可以把1-2区域合并为一个区域,本人的意图是为了减少LOGO区域背景图的文件的大小,背景图3 为文章区,这里应注意图片上下的衔接,因该区域的高度是根据文章内容而定的,背景图4为网页的底部。

  

  图1

  用PS完成框架的制作及切割后,就可以用FrontPage2003搭建我们的网页了,该软件可以在OFFICE安装光盘里可以找到,你只要会word,相信这个也不难掌握。

  1、打开FrontPage 2003-新建-文件
  2、使用“插入表格”,插入1列4行表格(这里根据框架背景图数而定),
  3、选中表格,右键-表格属性,将单元格衬距、单元格间距、边框粗细设置为0,再选中“指定宽度”,选“像素”,把该值设为“920”(这里也是根据你的框架宽度的像素而定的)
  4、选上第一行,右键-单元格属性-选上“使用背景图”,打开你上传到空间里的图片,将背景图片的地址复制粘贴到地址栏里,再根据图片的高度,点选“指定高度”输入图片的高度(像素)值。
  5、以此类推,选中第二行,方法同上。
  6、在设置第三行(文章区)时,可以不设定高度值,其高度是有文章内容而定的。

  详细方法看图2

  
  图2

  完成总体框架的设定后,就该对每个单元格进行细部编辑了。第一行的LOGO区,有“文章索引”、“常用查询”等各项的超级连接的编辑,处于对版面的美观,文字使用的图片形式,加入连接就不能用文字类型的超级连接,只能放入图片制作超级连接,为不影响版面效果,这里使用的是“透明的图片”,这在PS中很容易做到。

本文来源:CFAN整理 作者:佚名

声明
声明:本站所发表的文章、评论及图片仅代表作者本人观点,与本站立场无关。文章是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢。 Email:support@txwb.com,系统开号,技术支持,服务联系微信:_WX_1_本站所有有注明来源为天下网吧或天下网吧论坛的原创作品,各位转载时请注明来源链接!
天下网吧·网吧天下
  • 本周热门
  • 本月热门
  • 阅读排行