网页设计与制作项目教程(项目一--任务01)PPT课件.ppt

项目一 网页基础 任务 了解网页设计与制作基础知识 1了解网站类型 2了解网页的组成与结构 3了解网站建设流程 学习内容 4了解网页制作的基本原则 5了解网页编辑工具 6了解常见网站建设术语 学习目标 知识目标 通过系统学习使学生了解网页设计的基本原则和技巧 分析优秀网页的布局结构 颜色搭配 视觉效果 基本掌握网页设计与制作的基本知识 为学习制作网页奠定基础 技能目标 通过讲解辅导与作业练习 要使学生能熟练掌握网站建设的流程及网页制作的内容 培养对优秀网站和网页的鉴赏能力 素质目标 1 具有勤奋学习的态度 严谨求实 创新的工作作风 2 具有良好的心理素质和职业道德素质 3 具有高度责任心和良好的团队合作精神 4 具有一定的科学思维方式和判断分析问题的能力 5 具有较强的网页设计创意思维 艺术设计素质 任务 了解网页设计与制作基础知识 任务描述打开导航类型的网站 通过其分类总结网站的类型 并通过该网站打开其他不同类型的网站 分析不同类型网站的布局结构 认识网站的组成元素 分别浏览 汇源果汁 集团 浏览 凤凰古城 中国儿童资源网 网站等优秀网站 观赏其页面布局 导航设计 色彩搭配 动感效果等 给出鉴赏报告 图1 1网站 任务实施 1 分析hao123网站hao123网址之家及时收录包括综合资讯 购物 音乐 视频 小说 游戏等热门网站 与搜索完美结合 提供最简单便捷的网上导航服务 是数千万网民的上网主页 它从用户的角度对网站进行归类 以网站热门程度进行排列 其内容组成如图1 2分析所示 内容分析 图1 2hao123网站内容 1 分析hao123网站Hao123网站的整体布局为 匡 字型布局 整体看起来如一个 匡 字 此布局突出内容 使主内容有更大的视觉空间 如图1 3所示 布局分析 图1 3hao123网站的布局结构 1 分析hao123网站Hao123网站为导航型网站 主要内容由导航网址组成 除此之外 页面上还有网站站标 logo 网站广告 banner 邮箱登录入口及搜索框 网站备案号等 如图1 4所示 元素组成分析 图1 4hao123网站的组成元素 任务实施 2 分析 汇源果汁 网站 1 打开IE浏览器 在地址栏输入网站地址 任务实施 2 分析 汇源果汁 网站 2 鉴赏分析 汇源果汁网站的首页整体以橙色为基调 网站的界面清新活泼 其左上角是企业的标志 中上方是其网站栏目导航 清晰地展示整个网站的所有功能及服务项目 在网站的颜色处理上 以产品色为基调 加深人们对企业产品的认知度 在设计的过程中 充分运用视觉形象系统 让人觉得网站内容丰富而又不混乱 同时在制作上充分运用一些动态效果 渲染页面的设计表现力 简洁清晰 展示出良好的企业生命力和创造力 整个首页洁净 自然 静中有动 动静相宜 让人赏心悦目 给网页的设计也增添了浓厚的艺术氛围 任务实施 3 分析 凤凰古城 网站 1 打开IE浏览器 在地址栏输入网站地址 访问效果如图所示 任务实施 3 分析 凤凰古城 网站 2 鉴赏分析该首页给人的视觉效果是一种古朴的气息迎面扑来整体色彩 图文搭配十分协调 咖啡色的运用和图片的搭配十分和谐 主页题头的凤凰古城图片恰到好处 突出了主题 同时也起到了广告作用 导航栏的文字颇具特色 首页的布局结构合理 内容划分清晰 任务实施 4 分析 中国儿童资源网 网站 体验经典的色彩搭配 1 打开IE浏览器 在地址栏输入网站地址 访问效果如图所示 任务实施 4 分析 中国儿童资源网 网站 体验经典的色彩搭配 2 鉴赏分析 首页主要列出了导航菜单 简洁明了 排列整齐 颜色的选择上虽然运用了多种明亮的色调 但搭配却非常和谐 该网页给人的视觉感受是和谐美观 在模块的划分上比较明显每个内容板块都采用了不同颜色和形式做标题装饰 在视觉方面也给人以醒目和新颖的感觉 1 Internet与WWWInternet一词来源于英文Interconnectnetworks 即 相互联系的各个网络 简称 互联网 中文译名为 因特网 Internet是专指全球范围内最大的 由众多网络相互连接而成的 基于TCP IP协议的计算机网络 WWW是WorldWideWeb 世界范围蜘蛛网 的简称 也称Web网 中文译名为 万维网 WWW是Internet提供的应用最普及 功能最丰富 使用最方便的信息服务系统 WWW是由遍布在Internet上的无数称之为Web服务器的计算机组成 它将不同信息资源以网页的形式 通过超链接 Hyperlink 有机地联系在一起 由Web浏览器软件进行浏览 知识链接 基本概念 2 网站与网址一般来说 网站是一个相互链接的网页的集合 严格来讲 网站是有独立地址和独立空间的内容集合 这些内容可能是网页文件 也可能是其他文件 如 新浪 和 百度 就是两种服务内容不同的网站 网址是网络资源地址的简称 也称URL UniformResourceLocator 统一资源定位器 URL是用来统一标识Internet各种资源的位置 其格式为 协议名 主机名 端口号 文件路径 文件名例如 其中 http是超文本传输协议 HypertextTransferProtocol 是网页文件在Internet中传输的标准 主机名可以是域名 也可以是IP地址 域名其实是IP地址的字符表示 知识链接 基本概念 3 网页与主页网页是由HTML 超级文本标识语言 或者其他语言编写的 通过Web浏览器 如IE 编译后供用户获取信息的页面 也称为Web页 其中可包含文字 图像 声音 动画和超链接等各种网页元素 网页是WWW的基本信息单位 每个网页以独立文件形式存放 其扩展名有 htm html asp jsp等 主页是网站中的一个特殊网页 它是进入网站的第一个页面 其中包含指向其他网页的超链接 主页是网站的 门面 其作用远比其他网页更重要 设计时必须精心考虑 主页的名称一般是固定的 通常为index html或index asp等 知识链接 基本概念 4 静态网页与动态网页静态网页与动态网页网站中的网页一般包括静态网页和动态网页两种形式 静态网页是纯粹的HTML格式的网页 内容相对固定 当需要改变其信息内容时 必须重新使用网页制作工具来对其进行修改 修改后的网页还要重新上传到服务器上覆盖原来的页面 静态网页文件一般以 htm html shtml xml为扩展名 在静态网页上 可以出现各种动态的效果 如GIF动画 Flash 滚动字幕等 这些动态效果只是视觉上的 与动态网页是不同的概念 静态网页的执行流程如图所示 知识链接 基本概念 4 静态网页与动态网页动态网页通常是需要在线获取 修改或更新数据的网页 一般由数据库和相应的应用程序构成 动态网页也可以是纯文本的内容 也可以是包含各种动画的内容 这些只是网页具体内容的表现形式 无论网页是否具有动态效果 只要采用动态网站技术生成的网页都称为动态网页 动态网页文件一般以 asp jsp php perl为扩展名 动态网页的执行流程如图所示 知识链接 基本概念 5 浏览器与服务器浏览器 Browse 是用于阅读网页中信息的一种软件工具 它安装在用户计算机上 如InternetExplorer IE 等 浏览器的作用是 翻译 HTML标记语言 并按规定格式把内容显示出来 服务器 Server 是提供网络服务与管理的计算机 例如 提供网页服务和管理的计算机就称作Web服务器 Web采用浏览器 服务器 B S 工作模式 工作原理如图所示 知识链接 基本概念 一 网站类型1 资讯门户类网站2 企业品牌展示类网站3 电子商务类网站4 社区网站5 办公及政府机构网站6 功能性网站 知识链接 网站类型 门户网站门户 portal 原意是指正门 入口 现多用于互联网的门户网站和企业应用系统的门户系统 所谓门户网站 是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统 比较知名的中文门户网站有 搜狐 中文雅虎 新浪 等 知识链接 网站类型 电子商务型网站如B2B B2C网站按照交易过程可分为商品检索 商品采购 订单支付三个阶段电子商务通常是指使用计算机技术 网络技术和远程通信技术 实现整个商务过程的电子化 数字化和网络化 知识链接 网站类型 二 网页的基本元素不同性质的网站 其页面元素可能有所不同 一般构成网页的元素包括Logo Banner 导航栏 文本 图像 声音 视频 动画 特效 表格 框架 超链接 表单等 如图所示 知识链接 网页元素 二 网页的组成元素1 标题2 网站LOGO 知识链接 网页元素 3 页眉4 主体内容 知识链接 网页元素 5 页脚6 功能区 知识链接 网页元素 7 导航区 知识链接 网页元素 8 广告区 广告区 知识链接 网页元素 三 网页布局结构网页布局大致可分为 国 字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型等 知识链接 网页布局 1 国 字型 知识链接 网页布局 2 拐角型 知识链接 网页布局 3 标题正文型 知识链接 网页布局 4 左右框架型 知识链接 网页布局 5 上下框架型 知识链接 网页布局 6 综合框架型 知识链接 网页布局 7 封面型 知识链接 网页布局 8 Flash型 知识链接 网页布局 9 变化型 知识链接 网页布局 四 网站建设流程 知识链接 开发流程 第一步 企业网站提出需求第二步 设计建站方案第三步 查询申办域名第四步 网站系统规划第五步 确定合作第六步 网站内容整理第七步 网页设计 制作 修改第八步 网站提交企业网站审核并发布第九步 网站网站推广及后期维护 知识链接 开发流程 人员分工 知识链接 开发流程 五 网页制作内容网页制作包括网站的选题 内容采集整理 图片的处理 页面的排版设置 背景及其整套网页的色调等 知识链接 六 网页编辑工具1 FrontPage2 Dreamweaver3 Fireworks4 Photoshop5 Flash6 CuteFTP7 FlashFXP 知识链接 七 常见网站建设术语1 静态网页2 动态网页3 域名4 IP地址5 域名解析服务 DNS 6 虚拟主机7 租赁服务器 8 主机托管9 ASP10 ASP NET11 PHP12 CGI 知识链接 网站标志Logo设计标志的设计创意来自网站的名称和内容 可以分为三个方面 网站有代表性的人物 动物 花草 可以用它们作为设计蓝本 加以卡通化和艺术化 网站有代表性的物品 可以用物品作为标志 用自己网站的名称作标志 采用不同的字体 字母的变形制作标志 知识链接 网页的设计原理与技巧 页面色彩的搭配技巧特色鲜明搭配合理讲究艺术性合理使用邻近色合理使用对比色巧妙使用背景色严格控制色彩的数量 知识链接 网页的设计原理与技巧 页面中图像应用网页中图像在信息传达上应用具备以下功能 要有良好的视觉吸引力 能吸引浏览者的注意力 要简洁明确地传达网站信息 能使人们一目了然地抓住网站信息的重点 要有强而有力的诱导作用 造成鲜明的视觉感受效果 从观看过程中产生愿望和欲求 知识链接 网页的设计原理与技巧 网页页面内容的编排主次分明 中心突出大小搭配 相互呼应图文并茂 相得益彰适当留空 清晰易读 知识链接 网页的设计原理与技巧 网页页面内容的分块利用留空和划线进行分块利用色块进行分块利用线框分块 知识链接 网页的设计原理与技巧 网页文字的处理标题大小 粗细要合适标题使用突出的色彩利用空间突出标题网页中正文文本 其字号一般设置为10 12磅 知识链接 网页的设计原理与技巧 网页设计原则1 主题鲜明2 形式与内容统一网页设计所追求的形式美必须符合主题的需要 同时 要确保网页上的每一个元素都有存在的必要性 不要为了炫耀使用冗余的技术 3 强调整体风格统一导航方便 明了布局设计统一 合理 知识链接 网页的设计原理与技巧 巩固练习 在搜索引擎中搜索 网络公司 查看不同的网络公司的网站 了解建设流程与企业建设要求