网站首页布局

一、题目要求：

某大学新成立了一个教学研究中心，现面向所有师生征集中心网站首页方案，请设计并利用PS制作一个首页页面。

二、关键词

网页布局、切片

三、知识点及操作思路

利用Photoshop实现网页布局很好地解决了Dreamweaver下的生硬感，可以很方便的制作出精美的网页。利用PS制作好网页界面后，通常使用切片工具对其进行切片，以方便进一步编辑处理。

网页布局不仅要考虑整体界面的美观，还需注意网站功能，首页想要传达的精神风貌等。

操作思路：

本例中制作的是学校教学研究中心的网页，因此网页设计应该简洁大方，注重功能性。绘制好主体结构后进行切片即可。

四、具体方法

1、新建一个文件，命名为“教学研究中心”，大小为“1024*768像素”。

2、选择矩形工具，设置颜色为蓝色（R59 G109 B246），在页面顶部拖出一个矩形，如图：

3、导入素材“校园组图.jpg”，设置图层混合模式为滤色，不透明度为41%。导入素材“木铎.jpg”。效果如下：

4、选择文本工具，设置字体为华文隶书，大小为52点。输入“北京师范大学教学研究中心”。如图：

5、选择矩形工具，绘制一个矩形长条。选择渐变工具，渐变方式为对称渐变。对绘制好的矩形进行填充。这一部分留作网页中放置栏目名称的地方。如下：

6、置入素材“边框1”，设置不透明度为50%。如下：

7、复制边框1图层，设置不透明度为81%，按下“Ctrl+T键”变换其大小。效果如下：

8、置入素材“边框2”，调整大小和位置，效果如下：

9、置入素材“文字方块”，并在上面输入文字“通知公告”，字体为华文隶书，大小为50点。效果如下：

10、重复上述第五步，在底部插入一个蓝色长条。输入文字“欢迎您的访问！”，字体仍为华文隶书，大小为30点。网页界面设计完成。

11、选择切片工具，在界面中间矩形长条处、两处白色区域处分别进行切片。系统自动在界面上标记切片的序号，形成3个用户切片。其余部分将被系统自动切割，成为自动切片。效果如下：

12、在切片工具状态下右单击界面左侧的切片，在弹出的下拉菜单中选择“编辑切片选项”，将切片类型设为“无图像”，切片背景类型为“白色”。若是设计好的切片背景不是白色，可以选择“其他”，并用拾色器拾取设置好的颜色。点击确定。（注意：非纯色的切片不要进行上述操作，否则会使该切片区域变为纯色）。

13、利用命令“文件”—“存储为web所用格式”，在弹出的对话框底部选择“存储”，系统弹出“将优化结果存储为”对话框，选择保存类型为“HTML和图像”，切片方式为“所有切片”。点击确定，存储完成。

五、课后问题

艺术学院成立了一个舞蹈中心，请按照上述方法，设计舞蹈中心网站的首页，界面要着重突出美观，并留出图片展示区域。

六、文件说明

微视频文档：PS6-3.mp4

文本文档：PS6-3.docx

PPT演示文稿：PS6-3.pptx

网页布局与海报设计-网站首页布局.pptx

查看

下载