案例2：“初生花草网”网页界面设计

（1）创建画布

首先，打开Photoshop软件，创建一个新的项目。单击文件按钮，选择“新建”（或者按下快捷键“Ctrl+N”）创建画布。在弹出的对话框中，设定宽度为“1000像素”，高度为“1700像素”（像素的大小可根据自己的需求来定），分辨率为“96像素/英寸”（为了保证图片的清晰度）（图3-48）。

图3-48

（2）制作导航

画布创建好后，画布的背景色还是以白色为主，接着制作网页导航条的颜色。创建一个新的图层（或者按下快捷键“Ctrl+Shift+N”）。用矩形工具制作出宽度为“1000像素”、高度为“53像素”的矩形，并与背景顶端左右对齐；接着给这个图层上色，颜色为“#6fd79d”，这个颜色用来表示该网站的主题颜色（这个颜色是经过前期网上问卷调查得出的结果）。

导航栏主要分为两大部分：第一部分是标志的摆放位置；第二部分包含“首页”“关于我们”“产品推荐”“养花知识”“联系我们”5个板块。

第一部分的标志摆放，只要位置合理即可。第二部分5个板块中的内容字体为“黑体”，字号为“9#”（现在的显示器的正常显示字号为9#、10#）；在导航条右上角添加两个小内容——注册和登录，字体为“黑体”，字号为“6#”。

另外，为了使界面更加美观，可在5个内容中用深色的直线来分隔每项内容（图3-49）。

图3-49

导航条作为网页设计的精髓，要为用户提供更好的服务。这样的排版可以为用户提供友好的体验，清晰且容易操作。

（3）Banner制作

Banner既可以作为网站页面的横幅广告，又可以作为游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明地表达最主要的情感思想或宣传中心。

Banner的大小可设置宽度为“1000像素”，长度为“421像素”。在网页制作时，可与Flash相结合插入一个小动画，也可以采用多张图片来表达本网页的活动主题或中心意思。本案例就是采用了3张图片来表达活动的主题（图3-50）。(https://www.daowen.com)

图3-50

图3-51

（4）Body部分

Body部分是网页制作的主要部分，它是首页的主要内容。本案例制作的是关于花草方面的内容，可以把关于花的内容分为三大块。

①制作首页的版式及内容。首页的字体为“黑体”，大小为“9#”，字体颜色为“#525252”。为了更加美观，首页结合了英文，“HOME”的字体为“汉仪中圆简”，大小为“14#”，英文字母颜色为“#064e26”。字母下方的直线起到装饰的作用，颜色为“#7abf70”。剩下的4条直线都可起到辅助作用，颜色为“#7abf70”。

②制作3个椭圆形，颜色为“#afd9a9”，分别如图3-51所示排开。三大块的文字内容分别是“鲜花对象订购”、“节日鲜花订购”和“开业花篮订购”。字体为“汉仪中圆简”，大小为“9#”，颜色为“#525252”。

鲜花的版式排列无须采用很规整的形状来表现，不然会显得比较呆板，没有吸引力。在版式上，既要保证整块网页的统一性，又要看起来有趣味性，还要保证用户的互动性，不要让客户觉得整个网页画面没有吸引之处。

（5）收尾工作

网页界面制作的收尾工作是填写一些基本信息，以此表现公司的完整性、安全性、信誉度等。例如，填写本公司电话、公司的全称、公司网站的许可证等内容。可将字体设置为“仿宋”，颜色为“#9b9a9a”（图3-52）。

图3-52

这样，一个完整的首页就制作完成了。