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

《教你一招制作简单网页的小技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、教你一招制作简单网页的小技巧一篇文章配上一个漂亮的版面，可以使人耳目一新或着是-•种视觉拿受。版面设计可以川photoshop软件制作，用PS制作网页版面可以很好的控制和调整网页框架的布局或色彩的协调搭配，也便于整体的修改和局部的细致刻画，使网页更具个性化。用PS制作网页前，应对制作的网页有个初步的构思，等把人的色块做好后，再调整色块间的明暗度、对比度、饱和度进行调密，而后再把小的插件放到网页上，先密体后局部的制作过程。由于百度空间受文字字数（4000字）或图片大小（500KB）的限制,所以在网页框架的制作中尽量的简化其结构，图片的格式也尽量的选择G

2、IF格式。还耍考虑空间文章区像素的大小,木人空间的文章区宽度是950像索，所以木人的网页框架图片一般设登为920像索。讣我们先來了解一下版而布局的步骤:一.草案新建页面就象一张H纸，没冇任何表格，框架和约定俗成的东術，你可以尽可能的发挥你的想象力，将你想到的”呆象”训上去（我们建议您用一张口纸和一支铅笔，当然用作图软件photoshop等也可以）。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画儿张，最后选定一个满意的作为继续创作的脚本。二.粗略布局在草案的皋础上，将你确定需要放置的功能模块安排到页

3、面上。（注：功能模块我们在”首页设计•弓I了”中提过，主要包含网站标志,主菜单，新闻，搜索，友情链接,广告条，邮件列表，计数器，版权信息等）。注意,这里我们必须遵循突出重点、平衡谐调的原则，将网站标志,主菜单等最重耍的模块放在最显眼,最突出的位登，然后在考虑次要模块的排放。三.定案将粗略布局粘细化，具体化。（靠你的智款和经验，旁敲侧击多方联想，才能作出具有创懣的布局。）网页框架完成后，下一步就是做成适应网页框架的背景图，可以用PS将整图切割成4部分（图1）（这里你可以根据口己的构思，进行切割）背景图1为LOGO区域，（LOGO制作）背景图2为过渡区,

4、也可以把1・2区域合并为一个区域，本人的意图是为了减少LOGO区域背景图的文件的大小，背景图3为文章区，这里应注盘图片上下的衔接，因该区域的高度是根据文章内容而定的，背景图4为网页的底部。文■素引書匸沁；文當用童演用PS完成框架的制作及切割后，就可以用FrontPage2003搭建我们的网页了，该软件叮以在OFFICE安装光盘里可以找到，你只要会word,相信这个也不难拿握。仁打开Frontpage2003-新建•文件2、使用“插入表格"，插入1列4行表格（这里根据框架背景图数而定），3、选中表格，右键■表格属性，将单元格衬距、单元格间距、边框粗细设

5、置为0,再选屮“指定宽度”,选“像素”，把该值设为“920”（这里也是根据你的框架宽度的像索而定的）4、选上第一行，右键■单元格属性•选上“使用背景图”，打开你上传到空间里的图片，将背景图片的地址复制粘贴到地址栏里，再根据图片的高度，点选“指定高度”输入图片的高度（像素）ffio5、以此类推，选中第二行，方法同上。6、在设習笫三行（文章区）时，可以不设定高度值，其高度是有文章内容而定的。详细方法看图2完成总体框架的设定后，就该对毎个单元格进行细部编辑了。第一行的LOGO区，仃“文章索引”、“常用杳询”等各项的超级连接的编辑，处于对版而的美观，文字使用

6、的图片形式，加入连接就不能用文字类型的超级连接，只能放入图片制作超级连接，为不影响版面效果:，这里使用的是“透明的图片”，这在PS中很容易做到。（-）LOG0区的编辑1.在第一行里右键■单元格屈性■设置“水平对齐方式”为“屈中”，“垂直对齐方式”为“顶部对齐”，插入4列1行单元格。2、调整总的宽度，与底图设置相一致，选中各列，设置“平均分布各列”。3、在各列复制粘贴上“透明的图片”，使用”菜单上的“格式”•“段落”•“段落前间距”，调整“透明的图片”高度，与图片上文字相吻合。4、调報吻合后，选中各“透明的图片”■右键■“超连接...”，在“地址”栏里

7、加入连接。这样就完成了LOGO去的编辑。5、第二行是过渡区，不用考虑。（二）文章区的编辑应该说这部分的制作比较费事，在这个区域屮分为文章区和左侧文章连接区，这样可以使版面不至于太单调，即丰富了页面的内容，乂使版面更美观。下面是具体的制作方法：蠡竭蠢Hg滋脚器翩¥pja>小JTF-1Mb~——-—--«OOOT)<50CKB)的舉■•廉以

8、作中尽leiwitJCMrw.田片的格式也尽■的«hgif«式.还2«xeGit«的大小.*人立直的文■世wsriBW・mu^AirjRJHWM图片「itafiwerir--j«tMMBttS.味訝以足可IV*)♦»

9、-••w•»P、W!的規*勾■诃■的鸵U一个箱馮fM作的幅*・1、设置该单元格为“居中”"顶部对齐”，然后插