网页设计基础

第1章网页设计基础朱金华网页设计基础全文共20页，当前为第1页。教学目标熟悉网页设计的相关概念。掌握网站开发流程。了解Web设计的原则、网站结构规划（栏目、目录）的原则。了解网页布局设计的原则、布局设计的类型、布局设计元素、布局设计技术。了解网站内容设计的元素（文本、多媒体）和如何进行内容排版。了解网页设计的构成要素和风格设计的类型。了解网页色彩设计的基础知识。网页设计基础全文共20页，当前为第2页。导入为什么要学习此课程？Why?传统信息的发布主要形式：张贴广告、发送传单、报刊杂志、广播电视，其缺点主要为：受众范围窄、费用高、不及时、不丰富。而网络的出现给每个人提供了平等获取信息的机会。以企业建站为例，商机无限。What?结合前面已学的相关课程（网络视觉设计、电脑图文设计），能独立或团队完成一个网站的设计或模拟某个网站完成制作。How?以实践为主，多动手，多讨论充分利用课堂时间，在课堂完成内容的入门。形成对网页设计与制作的兴趣，尝试制作你所见到的每一个网页或网页特效，不局限在课堂的范围之内。提高自己解决问题的能力！网页设计基础全文共20页，当前为第3页。1.1网页概述B/S结构（Browser/Server，浏览器/服务器模式）WWW（Web）统一资源定位器（URL）基本语法：scheme://host.domain:port/path/filename网站（WebSite）网页（Webpages）首页（Homepage）网页编辑器浏览器制作网页的三大技术：HTML（超文本标记语言）、CSS（层叠样式表）、JavaScript网页设计基础全文共20页，当前为第4页。1.2网站开发流程网页设计基础全文共20页，当前为第5页。1.3Web设计基础1.3.1Web设计原则1.3.2网站结构规划网页设计基础全文共20页，当前为第6页。1.3.1Web设计原则1.明确站点类型2.保持站点简洁明确3.网页设计一致性4.注重用户体验研究用户有效的导航和位置设计保持整个网站一致性的设计清晰准确的内容设计，便于用户快速的获得所需的任何信息网页设计基础全文共20页，当前为第7页。1.3.2网站结构规划1.网站栏目规划栏目内容一定要紧扣主题栏目的目录设计要求简洁，结构层次清晰，以方便网站的管理栏目的内容要突出重点，对于用户经常要访问的内容应直接放入主栏目下为方便用户使用，一般情况下访问者应能够在3-5次鼠标点击后可查询到相关问题2.目录结构规划建立目录的建议目录规划原则网页设计基础全文共20页，当前为第8页。1.4布局设计1.4.1布局设计原则1.4.2布局设计类型1.4.3布局设计元素1.4.4布局设计技术网页设计基础全文共20页，当前为第9页。1.4.1布局设计原则网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式网页布局应区分栏目模块的重要程度网页布局必须尊重用户习惯网页设计基础全文共20页，当前为第10页。1.4.2布局设计类型1.传统布局类型“国”字型“匡”字形布局标题正文型框架型、封面型Flash型“三”或“川”字形布局2.网页设计趋势响应式网页设计全幅背景单页式网页固定式菜单扁平化设计微动画卡片式设计隐藏式菜单超大的字体幽灵按钮网页设计基础全文共20页，当前为第11页。1.4.3布局设计元素页面规格Logo设计页头文本页脚图片多媒体留白网页设计基础全文共20页，当前为第12页。1.4.4布局设计技术1.TABLE表格布局2.DIV+CSS布局3.框架布局4.响应式布局网页设计基础全文共20页，当前为第13页。1.5内容设计1.5.1文本1.文字的格式化2.文字的强调3.文字的颜色1.5.2多媒体1.5.3内容排版网页设计基础全文共20页，当前为第14页。1.6风格设计1.6.1网页设计构成要素1.点的构成2.线的构成3.面的构成4.混合的构成1.6.2网页设计的风格类型1.平面风格2.矢量风格3.像素风格4.三维风格网页设计基础全文共20页，当前为第15页。1.7色彩设计1.7.1色彩基础1.7.2网页中的色彩1.7.3网页配色方案网页设计基础全文共20页，当前为第16页。1.7.1色彩基础1.色彩的感觉色彩的醒目性、色彩感觉的偏差2.色彩的属性色相、明度、纯度3.常用的基本概念原色、间色、复色、补色、邻近色、类似色、同类色、暖色、冷色4.网页色彩的色调组合色调、色彩的对比、色彩的调和网页设计基础全文共20页，当前为第17页。1.7.2网页中的色彩1.网页安全色216种2.网页色彩模式RGB色彩模型3.网页设计中使用色彩的基本原则整体性、适用性、独特性4.网页设计中色彩的作用视觉区域划分、引导主次关系、营造活跃气氛网页设计基础全文共20页，当前为第18页。1.7.3网页配色方案1.色彩的象征情感红色的热情、橙色的华丽、黄色的明快、绿色的活力、蓝色的博大、紫色的高贵、黑色的神秘、灰色的内涵、白色的纯洁2.三种以上的色彩搭配常规的网页配色方法——不要超过三种以上的颜色3.主题色彩印象不同年龄段的印象、性别的印象、活力休闲的印象、优雅浪漫的印象、简洁质朴的印象、古典神秘的印象、自然舒适的印象、华丽高贵的印象、速度力量的印象网页设计基础全文共20页，当前为第19页。1.8小结本章包括网页相关概念、网站开发流程、Web设计原则、网站结构规划、布局设计的原则和类型、布局设计的元素、布局设计技术、网页文本与多媒体设计、网页内容排版、网页设计的构成要素与风格类型设计、色彩基础知识与网页配色。Html、CSS、JavaScript是制作网页的三大法宝。他们在网页设计中扮演了重要的角色。Html是基础架构，CSS用来美化页面，而JavaScript用来实现网页的动态性、交互性。有效的Web设计不是