网页美工_网页布局设计

1、网站美工 1网站美工 2网页美工网站美工 3课程重点 、难点项目重点、难点项目重点、难点l网页布局元素网页布局元素l网页布局原则网页布局原则l网页布局版式欣赏网页布局版式欣赏重点重点网站美工 4合理应用网页元素合理应用网页元素选择恰当的布局选择恰当的布局经典布局赏析经典布局赏析实战演练实战演练作业作业授课内容网站美工 5 案例案例2 2 选择恰当的布局选择恰当的布局LOGO和公司名和公司名网站美工 6案例案例2 2 选择恰当的布局选择恰当的布局 网页是供千千万万的浏览者浏览的，网页是供千千万万的浏览者浏览的，他们使用的计算机可能千差万别，所用的他们使用的计算机可能千差万别，所用的浏览器的类型与

2、版本也有许多类别。因此浏览器的类型与版本也有许多类别。因此，在开始设计网页之前，我们需要了解一，在开始设计网页之前，我们需要了解一些约定俗成的标准或访问者的浏览习惯。些约定俗成的标准或访问者的浏览习惯。怎样才能让我们把网页内容设计的更好、怎样才能让我们把网页内容设计的更好、更能吸引浏览者的眼球。更能吸引浏览者的眼球。选择恰当的选择恰当的布局布局网站美工 7案例2 分析 思考：下面两个主页给我们什么样的感觉？思考：下面两个主页给我们什么样的感觉？网站美工 8案例2 分析 思考：下面两个主页给我们什么样的感觉？思考：下面两个主页给我们什么样的感觉？网站美工 9案例2 分析 分享：分享： 内容乱无章

3、；内容乱无章； 链接不显眼；链接不显眼； 整体不集中，色彩使用过多；整体不集中，色彩使用过多； 不专业。不专业。网站美工 10案例案例2 2 选择恰当的布局选择恰当的布局学习经验分享：学习经验分享： 告诉你一些网页布局应遵循的基本原则。告诉你一些网页布局应遵循的基本原则。网站美工 11案例案例2 2 选择恰当的布局选择恰当的布局网站美工 12案例案例2 2 选择恰当的布局选择恰当的布局 页面尺寸和显示器大小及分辨率有关系。页面尺寸和显示器大小及分辨率有关系。 单位：像素单位：像素选择恰当的选择恰当的布局布局1、 页面尺寸页面尺寸分辨率分辨率页面尺寸页面尺寸8006007804281024768

4、1007600网站美工 13案例案例2 2 选择恰当的布局选择恰当的布局1、 页面尺寸页面尺寸建议：建议： 不要让浏览者向下拖动页面超过三屏。不要让浏览者向下拖动页面超过三屏。 不要出现水平滚动条。不要出现水平滚动条。网站美工 14案例案例2 2 选择恰当的布局选择恰当的布局 网页的整体形象，图形与文本的结合网页的整体形象，图形与文本的结合应该是层叠有序的。虽然浏览器是矩形的应该是层叠有序的。虽然浏览器是矩形的，但对于页面的造型，你可以充分运用自，但对于页面的造型，你可以充分运用自然界中的其他形状以及它们的组合：然界中的其他形状以及它们的组合： 选择恰当的选择恰当的布局布局2、 整体造型整体造

5、型网站美工 15不同形状代表的意义不同形状代表的意义网站美工 16矩形设计矩形设计网站美工 17圆形设计圆形设计网站美工 18三角形设计三角形设计请你上网查一查？请你上网查一查？网站美工 19案例案例2 2 选择恰当的布局选择恰当的布局 页眉也称为页头，其作用是定义网页页眉也称为页头，其作用是定义网页的主题。例如，网站的名称通常都放在页的主题。例如，网站的名称通常都放在页眉中。眉中。 页眉是整个页眉是整个 网页设计的关键，它将网页设计的关键，它将牵涉到下面的更多设计和整个网页的协调牵涉到下面的更多设计和整个网页的协调性。性。 选择恰当的选择恰当的布局布局3、 页眉页眉网站美工 20案例案例2

6、2 选择恰当的布局选择恰当的布局3、 页眉页眉网站美工 21案例案例2 2 选择恰当的布局选择恰当的布局3、 页眉页眉页眉设计页眉设计网站美工 22案例案例2 2 选择恰当的布局选择恰当的布局 文本在网页中出现都以行或者段落出文本在网页中出现都以行或者段落出现，决定着整个网页布局的可视性。现，决定着整个网页布局的可视性。选择恰当的选择恰当的布局布局4、 文本文本网站美工 234、 文本文本网站美工 24案例案例2 2 选择恰当的布局选择恰当的布局 页脚和页眉相呼应。页眉是放置站点页脚和页眉相呼应。页眉是放置站点主题的地方，而页脚是放置制作者或者公主题的地方，而页脚是放置制作者或者公司信息的地方

7、。基本上网页的制作信息都司信息的地方。基本上网页的制作信息都放置在页脚。放置在页脚。选择恰当的选择恰当的布局布局5、 页脚页脚网站美工 255、 页脚页脚页脚的内容网站美工 26案例案例2 2 选择恰当的布局选择恰当的布局 图片和文本是网页的两大构成元素，图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置缺一不可。如何处理好图片和文本的位置是整个网页布局的关键，而一个网页的布是整个网页布局的关键，而一个网页的布局是否合理也将体现于此。局是否合理也将体现于此。选择恰当的选择恰当的布局布局6、 图片图片网站美工 276、 图片图片网站美工 28案例案例2 2 选择恰当的布局选择恰当的布局 网页中还可以添加声音、动画、视频网页中还可以添加声音、动画、视频等其他媒体。在设计等其他媒体。在设计选择恰当的选择恰当