《第17讲：网页布局和网页元素.ppt》由会员分享，可在线阅读，更多相关《第17讲：网页布局和网页元素.ppt（22页珍藏版）》请在三一文库上搜索。
1、网页设计之未雨绸缪 图像处理软件 一、课前导入 通过网页效果图案例欣赏，互相讨论，找出你认为好 和不好的网页效果图，并说明原因。 二、课程目标 01 掌握网页设计的基本流程 02 熟悉网页的框架架构 03 初步掌握滤镜的应用 三、课程任务 任务1理解网页设计的思路和流程 任务2掌握滤镜的基本应用 01策划阶段 一、网站名称 二、网站的类型 三、简述网站的建设方案 1.网站作用 2.网站规模 3.网站目标客户 4.网站特色 01策划阶段 四、网站的风格及配色方案 1.网站主题 2.网站标准色（主色调70%，辅助色25%，点缀色5%） 3.网站标准字体（主要使用一种文字） 4.网站特色（创意点，亮
2、点） 六、网站的栏目设计（画出栏目结构图） 01策划阶段 首页设计（重点） 首页设计是整个网站整体形象的浓缩，要进行创意设计，效 果图要美观简洁，大气。及高端大气上档次。 01策划阶段 首页设计(准备阶段） 1.网站主题（根据主题订风格） 2.网站标准色（主色调70%，辅助色25%，点缀色5%） 3.网站标准字体（主要使用一种文字） 4.网站特色（创意点，亮点） 5.元素搜集 01策划阶段 内页设计 1.风格 内页设计在风格上追求与首页保持一致，但仍需保留自己的特色。 2.根据内页功能选择合适版式 如以文字为主的内页和以图片展示为主的内页 01策划阶段 内页设计 1.风格 内页设计在风格上追求
3、与首页保持一致，但仍需保留自己的特色。 2.根据内页功能选择合适版式 如以文字为主的内页和以图片展示为主的内页 02网页的框架结构 网页布局结构 “国”字型布局 1. 上面是网站的标题及横幅广告条， 2. 左右分列一些内容， 3. 中间是主要部分，与左右一起罗列到底 4. 最下面是网站的一些基本信息、联系方式、版权声明等 02网页的框架结构 网页布局结构 T型布局 1. 上部是“网站标志+广告条”， 2. 左面是主菜单， 3. 右面是主要内容。 4. 优点：页面结构清晰、主次分明 5. 缺点：页面呆板，如果不注意细节上的色彩，很容易让人“看之乏 味”。 02网页的框架结构 02网页的框架结构
4、网页布局结构 POP布局 指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。 02网页效果图初步设计 网页的构成元素 1. 文字 （字体设计，字体颜色，排版的疏密变化） 2. 图像（图像尺寸、图像作用，图像） 3. 超链接 4. 多媒体 5. 动画等。 02网页效果图初步设计 小图像 大图像 02网页效果图初步设计 网页结构 1.页头 02网页效果图初步设计 网页结构 2.导航栏 设计原则：简洁，易用。 02网页效果图初步设计 3.banner 四、课程总结 1、本讲主要讲解网页设计的前期工作。 2、通过欣赏优秀网页设计，培养学生的设计 思维。 五、课程作业 完成页头和导航栏的设计