《第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、通过欣赏优秀网页设计,培养学生的设计 思维。 五、课程作业 完成页头和导航栏的设计