马上就要交网页设计的作业了,短短的几节课之后要做一个网页出来确实有点难。做为华中大在线的一员,理应在这种危急关头挺身而出,指明一条捷径,让同学们不再郁闷。遂成此教程。
本教程撇开繁琐无趣的代码,只为提供一种简单有效的制作网页的思路,很多细节省略了,大家有任何疑问留言即可。
言归正传。
第一步,打开ps,新建一个宽780高随意的画布。
第二步,在此画布上按照你预先设想的那样画出网页。我在这里画了一个最简单的网页,不过有图形有文字有链接。
第三步,选择在视图里面打开标尺,根据页面的布局拉出一条条的辅助线。辅助线都是横平竖直的,网页就是这个样子,四四方方的一块块拼起来的,所以最开始画网页的时候要注意这一点。
第四步,根据拉好的辅助线切图,注意最下面的版权信息的背景我只切了一个像素,因为在html里面背景会自动填充的,所以不必切很多出来。
第五步,把这些切片命名,然后再"文件"里面点击"另存为网页"
第六部,在弹出来的对话框中按住shift选择你需要的切片,保存类型中选择"只保存图片",点保存。此时你保存的地方出现了一个images文件夹。
第七步,打开dreamweaver,新建一个基本页。
第八步,根据页面的结构建一个表格,输入相应的数值,这里我的页面时三行两列的结构,因此我新建一个三行两列宽为780px的表格,其他值为0。
第九步,因为第一行和第三行实际只有一列,所以我按住ctrl把它们的两列合并为一列。在第一行点击图像按钮插入图片。
第十步,把第二行左边这一列的宽度设为202px,右边设为780-202=578px.左边这一列中插入一个表格宽202px边框0,我插入的是一个8行一列的表格,我要在这放置八个按钮。在每一行中插入先头切好的按钮图片。
第十一步,分别点击每一个按钮,给他加上链接,如图所示。
第十二步,在右边这一列中直接输入文字并排版。
第十三步,在最下面这一行插入背景,如前面所说的,它自动填充了一整行。然后在上面直接输入版权信息。
第十四步,网页做好了,保存即可。