网页设计概要PPT课件.ppt

模块一网页制作概要 1 项目一了解网页制作基础知识 步骤1了解网页的定义网页是WWW中的基本文档 它是用HTML或者其他语言编写的 步骤2了解网页的分类1 根据网页的执行过程分 静态网页 动态网页 含数据库的动态网页2 根据网页的功能和内容分 门户网站 个人网站 专业网站 职能网站 步骤3我们网站的定位1 服务对象2 设置目的3 开发目标4 应用领域5 规格描述6 实现要求 任务1了解网页的定义和分类 2 任务2了解网页的相关术语 1 WWW2 WWW服务器3 WWW浏览器4 网页5 网站 站点 6 主页7 超文本8 URL 项目一了解网页制作基础知识 9 域名10 Logo11 Banner12 导航条13 超链接14 HTML15 脚本16 发布 3 1 Logo2 导航条3 文本元素4 图像5 表格6 表单7 超链接8 多媒体元素 项目一了解网页制作基础知识 任务3了解页面元素 4 任务4了解页面各区域的构成 1 页眉区包括 网站标志 Logo 横幅广告 Banner条 顶部标签 英文导航条 等 2 导航区 除了页眉区有起导航作用的顶部标签外 在页眉和主内容之间有上导航栏 主导航条 主内容区左侧有左导航栏 形成复合导航区 3 主内容区 是页面设计的主体元素所占区域 一般是二级页面内容链接的标题 内容提要 部分摘录 有图像 文字 小动画等多种网页元素 4 友情链接区 主要分为三类 包括校内站点 校外站点 常用站点 5 页脚区 标注站点所属单位的名称 地址 网站版权 电子邮箱的超链接等 项目一了解网页制作基础知识 5 1 常见网页布局形式 1 厂 字型 2 口 字型 3 对称布局 4 同 或 国 字型 5 POP布局 6 三 字型 任务4了解页面布局 项目一了解网页制作基础知识 6 2 页面布局原则整个网站页面的布局应该相对保持一致 不应该有大的跳跃感 做到 主次分明 突出重点 导航清晰 浏览便利 布局合理 逻辑性强 一个页面 尤其主页 左右不宜拖动 最好计算为刚好一屏的宽度 上下可以拖动 但不易过长 三到四屏即可 否则用户会忽略后面的内容 页面布局类型对同一网站不宜过多借鉴成功相似网站的页面布局 项目一了解网页制作基础知识 7 3 页面布局技术CSS DIV表格框架 可编辑 8 项目一了解网页制作基础知识 1 配色原则 1 整个网站的色系要保持一致 2 网站应该使用企业原有CI CI 也称CIS 是英文CorporateIdentitySystem的缩写 目前一般译为 企业视觉形象识别系统 颜色 需要简洁 新颖 舒服 大方 充分体现企业的文化形象 3 尽量使用浏览器支持的216个Web安全颜色 4 遵循三色原则 除了黑色和白色以外 主要颜色不要超过3种 5 网页元素应该选择与网站主体相一致的色调 6 图像的颜色应该尽可能少 减小图片尺寸 2020 3 27 项目一了解网页制作基础知识 任务5了解网站的颜色搭配 9 2 配色方案配色方案即是色彩搭配 可根据网站的设计目标 主题 使用人群设计不同的配色方案 配色方案的选择往往是决定网站成败的一个关键因素 网页设计师通常通过不同颜色来呈现网站风格定位 表达情感和意图 任务5了解网站的颜色搭配 项目一了解网页制作基础知识 10 常见颜色的含义如下 1 红色 是非常容易吸引人注意力的颜色 能够给人以温暖热情的感觉 2 黄色 象征希望 权力和功名 还带有神秘的宗教色彩 有时候 黄色还能给人明亮 充满甜蜜和幸福感的感觉 很多设计师通常在作品中运用黄色来表现喜庆和华丽的感觉 3 蓝色 给人以冷漠 性格朴实而内向的感觉 可以为活跃 具有较强扩张力的色彩提供深远 平静的空间 4 绿色 是最平和 安稳 柔顺 恬静 优美的色彩 代表希望 5 紫色 是低明度的颜色 还可给人沉闷和神秘的感觉 6 白色 色感光明 代表实 纯洁 快乐 还可给人圣洁的不容侵犯的感觉 网页色彩是把握网页制作的一个重点和难点 可以使用一些专门的网页配色软件来帮助创建网页配色方案 如AdobeKuler ColorImpact等 项目一了解网页制作基础知识 11 可口可乐公司的网站采用了代表着热情和活力的红色色调 让人看过后很难忘记 深圳慧衡科技公司的网站采用灰蓝色做为标准色彩 呈现的是企业的稳健 深远 平静和谐 配有一些橙色使稳健增添了活力 项目一了解网页制作基础知识 配色实例 12 任务6 了解网站的字体原则 1 正文英文字体 TimeNewRoman Arial 2 正文中文字体 宋体 12像素或14像素 3 特殊效果字体应放在图像中 4 段落行文本不宜过长 不要横跨整个浏览器窗口 5 改变页边距 行边距和颜色增加字体效果 6 字体在整个网站中保持一致性 同类型的数据或信息应使用同一种字体 项目一了解网页制作基础知识 13 项目二选择网页制作工具 任务1选择网页图像设计工具 Photoshop Fireworks 任务2选择网页排版工具 Dreamweaver 任务3选择动画制作工具 Flash 14 项目三了解网站建设基本流程 15 项目三了解网站建设基本流程 任务1了解案例网站建设基本流程 步骤1准备所需的素材1 网页的主要素材 1 文字素材 2 图片素材 3 动画素材 4 声音素材 5 视频素材2 网页素材获取途径 1 由需要制作网站的客户提供 2 由网站制作人员从网上搜索获取 3 由网页制作的专业人员编辑制作 16 步骤2规划设计站点1 网站需求分析2 制作项目规划文档3 网站主题及风格规划 1 网站主题 网站所要包含的主要内容 选择网站主题的原则 主题要小而精 题材不能太滥 目标不要太高 2 网站风格 站点整体形象及给浏览者的综合感受 选择网站风格的原则 网站风格应以网站内容为依据 网站风格应明确所传达的理念 网站风格应与网站的主题匹配 项目三了解网站建设基本流程 17 4 网站内容的规划 包括规划网站的名称 域名 网站概述 首页要求 前台有及网站内容后台内容等 规划网站时遵循的原则 网站名称容易记忆 网站域名有意义 网站的首页能体现整个网站页面的布局 背景 色调等 页面及后台内容规划一般简要地划分前后或后台栏目 标明栏目间的层次结构和栏目简介 5 网站信息结构设计 1 导航栏 2 划分栏目6 网站的层次结构设计7 网站目录结构设计 项目三了解网站建设基本流程 18 步骤3设计网页版面1 网页版面基本区块 1 标志块 Logo 2 页眉区 3 导航条 4 内容块 5 友情链接区 6 页脚区2 网页布局设计的思路 1 网站亮点布局 2 网站主体布局 3 功能板块布局 4 内容板块协调 3 网页版面制作 项目三了解网站建设基本流程 19 步骤4制作第一个任务网页1 网页布局网页布局有许多方式 如表格 层 框架等 2 网页元素编辑 1 文本元素 2 图像元素3 网页美化 1 样式表 2 CSS修饰 步骤5使用模板创建网页步骤6增加网页的交互功能1 表单的创建2 框架的创建步骤7将网页链接起来 项目三了解网站建设基本流程 20 步骤8增加网页的动态特效1 插入Flash对象2 插入Shockwave对象3 插入ActiveX控件4 插入Java脚本程序步骤9网站的发布与维护1 检查和修改网站 1 网站测试 网页测试 程序及数据库测试 服务器稳定性 安全性测试 2 检查浏览器 3 查看站点地图 4 检查 更改链接 项目三了解网站建设基本流程 21 2 申请网页域名和空间 1 申请域名 2 申请空间3 网页的发布 1 建立远程站点连接 2 上传站点内容 3 下载站点内容4 网页的更新维护 1 上传文件更新网站 2 下载文件更新 3 同步本地与远程服务器文件 4 使用模板更新 项目三了解网站建设基本流程 22 任务2根据本书案例具体制作过程准备着手制作网站 步骤1准备网站结构 项目三了解网站建设基本流程 1 设置网站的栏目 慧衡 科技网站主页的导航条 23 任务2根据本书案例具体制作过程准备着手制作网站 步骤1准备网站结构 项目三了解网站建设基本流程 2 规划站点结构 深圳慧衡科技有限公司 网站的站点结构图 24 任务2