第3讲网页设计基础ppt课件.ppt

网站建设 授课教师 宁艳Tel QQ 765482378E mail 第三讲网页设计基础 网页设计基础知识 在网站设计上 主页的设计是一个网站成功与否的关键 人们往往看到第一页就已经对你的站点有一个整体的感觉 是不是能够促使浏览者继续点击进入 是否能够吸引浏览者留在站点上 全凭主页设计的 功力 了 所以 主页的设计和制作是绝对要重视和花心思的 一般主页设计和制作占整个制作时间的40 宁可多花些时间在早期 以免出现全部做好以后再修改 那将是最浪费精力的事 网页设计基础知识 主页设计的一般步骤 确定主页的功能模块设计主页的版面处理技术上的细节 网页设计基础知识 主页设计的一般步骤 确定主页的功能模块主页的内容模块是指你需要在主页上实现的主要内容和功能 一般的站点都需要这样一些模块 网站名称 logo 广告条 banner 主菜单 menu 新闻 what snew 搜索 search 友情链接 links 邮件列表 maillist 计数器 count 版权 copyright 网页设计基础知识 主页设计的一般步骤 设计主页的版面设计网页的第一步是设计版面布局版面是指浏览器看到的完整页面 布局 就是以最适合浏览的方式将图片和文字排放在页面的不同位置 版面设计就是组版元素在版面上的计划和安排 优秀的版面设计 都表现出其各构成因素间和谐的比例关系 网页版面设计 必须首先从版面结构入手 从整体布局做起 而形成版面结构基本条件 是正文 标题 图片质和量的关系 字体的变化 文字量的合理搭配 图片的恰当配备 其他特殊效果等等 网页设计基础知识 主页设计的一般步骤 设计主页的版面设计版面应该遵循的原则是 形式为内容服务一般的步骤是 草案 尽可能的发挥你的想象力 将你想到的 景象 画上去 这属于创造阶段 不讲究细腻工整 不必考虑细节功能 只以粗陋的线条勾画出创意的轮廓即可 粗略布局 在草案的基础上 将你确定需要放置的功能模块安排到页面上 注意 必须遵循突出重点 平衡谐调的原则 定案 将粗略布局精细化 具体化 网页设计基础知识 主页设计的一般步骤 设计主页的版面布局一般遵循的原则 1 正常平衡 亦称 匀称 多指左右 上下对照形式 主要强调秩序 能达到安定 诚实 信赖的效果 2 异常平衡 即非对照形式 但也要平衡和韵律 当然都是不均整的 此种布局能达到强调性 高注目性的效果 1 2 网页设计基础知识 主页设计的一般步骤 设计主页的版面布局一般遵循的原则 3 对比 所谓对比 不仅利用色彩 色调等技巧来作表现 在内容上也可涉及古与今 新与旧 贫与富等对比 4 凝视 所谓凝视是利用页面中人物视线 使浏览者仿照跟随的心理 以达到注视页面的效果 一般多用明星凝视状 3 4 网页设计基础知识 主页设计的一般步骤 设计主页的版面布局一般遵循的原则 5 空白有两种作用 一方面对其他网站表示突出卓越 另一方面也表示网页品位的优越感 这种表现方法对体现网页的格调十分有效 6 尽量用图片解说 此法对不能用语言说服 或用语言无法表达的情感 特别有效 图片解说的内容 可以传达给浏览者更多的心理因素 5 6 网页设计基础知识 主页设计 色彩的运用网页色彩搭配的原则色彩的鲜明性 网页的色彩要鲜艳 容易引人注目 色彩的独特性 要有与众不同的色彩 使得给人的印象强烈 色彩的合适性 就是说色彩和所表达的内容气氛相适合 如用粉色体现女性站点的柔性 色彩的联想性 不同色彩会产生不同的联想 蓝色想到天空 黑色想到黑夜 红色想到喜事等 选择色彩要和网页的内涵相关联 网页设计基础知识 主页设计 色彩的运用网页色彩搭配的技巧用一种色彩 先选定一种色彩 然后调整透明度或者饱和度 使色彩变淡或加深 产生新的色彩 用于网页 这样的页面看起来色彩统一 有层次感 用两种色彩 先选定一种色彩 然后选择它的对比色 如主页用蓝色和黄色就是这样确定的 整个页面色彩丰富但不花哨 网页设计基础知识 主页设计 色彩的运用网页色彩搭配的技巧用一个色系 简单的说就是用一个感觉的色彩 例如淡蓝 淡黄 淡绿 或者土黄 土灰 土蓝 用黑色和一种彩色 网页设计基础知识 主页设计 色彩的运用网页色彩搭配的忌讳不要将所有颜色都用到 尽量控制在三种色彩以内 背景和前文的对比尽量要大 尽量不要用花纹繁复的图案作背景 以便突出主要文字内容 网页设计基础知识 主页设计 色彩的运用 案例 福克斯新闻网 白色调为主 加上蓝色与红色 强调新闻真实与权威 网页设计基础知识 主页设计 色彩的运用 案例 百事可乐 网站 蓝色为主 突出新潮中的精彩 网页设计基础知识 主页设计 色彩的运用 案例 阿迪达斯 网站 黑色为主 加浅灰和淡蓝 强调运动着的凝重与飘逸 网页设计基础知识 Nike 网站 淡灰为主 色彩鲜艳的图片为辅 突出自由随意的运动主题 可口可乐 网站 红色为主 突出喜庆和兴奋的心情 网页设计基础知识 索尼 网站 主调是灰色 配上橙色的点缀 强调高科技产品主题 柯达 网站 白色背景 配以灰色和黃色 突出公司一贯形象 快乐和迅速 网页设计基础知识 尼康 网站 白色背景 黑色中加上黄色 令网站特别抢眼 突出公司雄厚的背景与高科技下的新概念 肯德鸡 网站 红色和米色调为主 充满欢乐气氛 兼有刺激食欲之意 网页设计基础知识 主页设计 字体的使用网页设计中字体使用原则 仅供参考 不要使用超过3种以上的字体 字体太多则显得杂乱 没有主题 不要用太大的字 因为版面是宝贵 有限的 粗陋的大字体不能带给访问者更多信息 不要使用不停闪烁的文字 想让浏览者多停留一会儿的话 就不要使用闪烁的文字 原则上标题的字体较正文大 颜色也应有所区别 网页设计基础知识 网页设计与制作常用工具网页设计 美化工具 PhotoshopFireworksFlash 网页设计基础知识 网页美化工具 PhotoshopPhotoshop是由Adobe公司开发的图形处理软件 它是目前公认的PC机上最好的通用平面美术设计软件功能完善 性能稳定 使用方便 所以在几乎所有的广告 出版 软件公司 Photoshop都是首选的平面制作工具 网页设计基础知识 网页美化工具 FireworksFireworks是由Macromedia公司开发的图形处理工具 是第一套专门为制作网页图形而设计的软件 同时也是专业的网页图形设计及制作的解决方案 作为一款为网络设计而开发的图像处理软件 Fireworks还能够自动切割图像 生成光标动态感应的JavaScript程序等等 而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器 网页设计基础知识 网页美化工具 FlashFlash是Macromedia公司开发的矢量图形编辑和动画创作的专业软件 它是一种交互式动画设计工具 用它可以将音乐 声效 动画以及富有新意的界面融合在一起 以制作出高品质的网页动态效果 Flash广泛应用于网页动画制作 教学动画演示 网上购物 在线游戏等的制作中 网页设计基础知识 网页设计与制作常用工具网页制作工具 超文本标识语言 HTML FrontPageDreamweaver 网页设计基础知识 网页制作工具 超文本标识语言 HTML HTML HypertextMarkupLanguage 是一种专门用于Web页制作的编程语言 用来描述超文本各个部分的内容 告诉浏览器如何显示文本 怎样生成与别的文本或图像的链接点 HTML文档由文本 格式化代码和导向其他文档的超链接组成 网页设计基础知识 网页制作工具 FrontPageFrontPage是由Microsoft公司推出的新一代Web网页制作工具 FrontPage使网页制作者能够更加方便 快捷地创建和发布网页 具有直观的网页制作和管理方法 简化了大量工作 FrontPage界面与Word PowerPoint等软件的界面极为相似 为使用者带来了极大的