作者:李哲定 时间:2019年6月8
制作一个官网必须先要学会怎样去把板块排好,因为一个网站不管是什么网站排版就决定了成果的一大部分,也可以说一个网页可不可以做好就取决与排版的规范,下面我就来说一下我制作学校官网的步骤吧!

首先我们可以看出来这个学校官网的排版已经做出来了,这个排版的布局分为四大部分,第一部分只有导航栏和轮播、第二部分是关于学校的一些相关信息公告之类的、第三部分是来展示学校的视频区域、第四部分是底部栏,总体来说整个排版的风格都是是偏向于欧美的这种简约风格系列,因为这种欧美系列比较简约、不腻味而且从中还带有一些科技感,学校网站也不能像其他的网站那样排设的花里胡哨,所以排版的风格一点要偏向于严谨的思路这样能展现出学校威严的形象,然后就开始制作这个学校官网内部机构了。

首先把官网的logo和名称依次按照如图的摆放位置放置到左上角,随后在把不鸣则已、一鸣惊人(学校校训)横着放置在右上角,接着在到名称的下方使用文字把关于我们、学校新闻、教务教学、师资力量、阳光课堂、合作校企、学习心得、企业案例这八个导航栏依次按照循序横着打上去并且摆放整齐有序(注意字体大小要统一左右间距要对齐),接着再来制作轮播区域,制作轮播首先要上网搜一张素材图搜到之后然后在把这张素材图拖拉进来,随后在把素材图拖拉缩大按照如图的样子进行对齐,接下来再使用椭圆工具拖拉一个白色填充的小椭圆然后拖拉四个白色描边的小椭圆最后按照如图的位置来进行摆放,这样就好不如达到了一种跳转效果,而且还显得页面中不会不会太单调。

接着在轮播的下方使用矩形工具拖拉一个长形灰色的矩形用来当作背景图,然后CTRL+R在把标尺线拖拉出来进行居中,随后再使用文字工具打上招生快讯接着再文字的下方打上它的英文翻译(注意英文翻译的长度不要超出它上方的文字,上下一定要有间距感),然后再使用 矩形工具分别在文字、英文的左和右拖拉一个长方矩形,随后再找三张小素材图按照如图的样子分别和文字左右循环放置(注意前后左右间距对齐)这样就显得页面不会太单调。

然后在放置一个素材图,接着再次使用矩形工具去拖拉一个黑色长方矩形盖住这个素材图,(注意黑色长方矩形的大小不要超出,要刚刚好对齐盖住素材图),然后 再把黑色长方矩形的不透明度设置为 70%填充也设置为 70%,这样就达到了不透明图层效果,接着再使用文字工具打上文字放置在素材图里面,最后再使用椭圆工具拖拉一个蓝色填充的小椭圆放置到文字的下方,然后在到自定形状工具里面拖拉一个小三角形出来(颜色填充为白色)把它放置在蓝色椭圆里面,这样就达到了一种播放视觉效果了。

最后再素材图的下方使用矩形工具拖拉蓝色长方矩形将其用来当背景图,然后再把LOGO和名称拖拉进来缩小之后在放置在蓝色背景图的左上角,接着在按照欧美风格来进行后面的字体排序。

更多推荐

制作学校官网步骤