如何制作一个简单的网页

添加时间:2021-11-21 11:00:00

一篇布局优美的文章,可以让人耳目一新或是一种视觉享受。利用Photoshop软件进行版面设计,PS制作的页面布局可以很好地控制和调整网页边框的布局或颜色的协调。它还便于整体修改和局部详细描述,使网页更加个性化。

在用PS制作网页之前,我们应该对网页有一个初步的想法。制作大色块后,我们可以调整色块之间的亮度、对比度和饱和度,然后把小插件放在网页上,这是一个先于本地制作的全过程。由于百度空间受字数(4000字)或图片大小(500kb)的限制,我们尽量简化网页框架结构,尽量选择GIF格式。还要考虑空间文章区域像素的大小,我的空间文章区域宽度是950像素,所以我的网页框架图像一般设置为920像素。

让我们看看布局步骤

1、 新的草稿页就像一张白纸,没有任何形式、框架和约定。你可以尽可能地运用你的想象力来画出你想到的“场景”(我们建议你用一张白纸和一支铅笔,当然,也可以使用绘图软件Photoshop等)。这属于创作阶段。它不注重精致和整洁,也不需要考虑细节的功能。它只能用粗线条勾勒出创意的轮廓。画尽可能多的图片,最后选择一个令人满意的脚本继续创作。

2、 粗略布局基于草稿,您确定需要放置的功能模块排列在页面上。(注:我们在“主页设计-简介”中提到了功能模块,主要包括网站标识、主菜单、新闻、搜索、友情链接、广告栏、邮件列表、柜台、版权信息等)。在这里我们要考虑的重点和次要模块的协调性,即重点和重点放在重点和次要模块上。

3、 最终的决定将使粗略的布局更加精细和具体。(凭你的智慧和经验,你可以做一个有创意的布局

在网页框架完成后,下一步就是制作适合网页框架的背景图。你可以用PS把整个图片分成四个部分(图1)(这里你可以根据自己的想法进行裁剪)背景图像1是logo区域,(logo制作)背景图像2是过渡区域,1-2个区域可以合并成一个区域。我的意图是缩小背景图中logo区域的大小。背景图3是文章区域。要注意图片顶部和底部的连接,因为区域的高度是由文章内容决定的,背景图4是网页的底部。

在用PS制作和裁剪框架之后,我们就可以用frontpage2003来构建我们的网页了。软件可以在office安装CD中找到。只要你知道这个词,掌握它并不难。

1打开frontpage2003-新建-文件

2使用“插入表格”可插入一列4行的表格(取决于框架背景图片的数量),

3选择表格,右键单击表格属性,将单元格边距、单元格间距和边框厚度设置为0,然后选择“指定宽度”,选择“像素”,并将值设置为“920”(这也由边框宽度的像素决定)

4选中右键单击-单元格属性-选择“使用背景图像”,打开上传到空间的图像,将背景图像的地址复制粘贴到地址栏中,然后根据图像的高度,点击“指定高度”输入图像的高度(像素)值。

在设置了整体框架之后,是时候详细编辑每个单元格了。在logo区域,有“文章索引”和“公共查询”等超链接。它们是在美丽的布局和文字的图片形式。如果加入链接,则不能使用文本类型的超级连接。你只能把图片放到超级连接上。为了不影响版面效果,这里使用了“透明图像”,这在PS中很容易实现。