网页设计综合实例PPT课件.ppt

第12章网页设计综合实例 第1页 本章概述本章的学习目标主要内容 本章概述 本章将综合本书所讲述的有关网页设计与制作技术 通过几个实例 帮助读者熟悉和掌握整个网页制作过程 同时加深对前面学过知识的综合理解和应用 在学习完本书的所有内容后能够充分掌握网页设计与制作技术 最终达到本书的学习目的 第2页 本章的学习目标 掌握网页元素的制作方法掌握网页的制作及切片技术掌握手机网页的制作方法 第3页 主要内容 12 1设计网页元素12 2绘制网页12 3设计制作手机网页12 4本章小结 第4页 12 1设计网页元素 网页元素就是指网页中使用到的一切用于组织结构和表达内容的对象 组织结构包括按钮 布局 层 导航条和链接等 表达内容包括Logo Banner 文字 图像和Flash动画等 本节介绍运用PhotoshopCC设计各种网页元素的方法 第5页 设计网站图标和Logo 网站图标指显示在浏览器地址栏左侧的简单明了且视觉效果突出的小图标 网站Logo徽标主要是各个网站用来与其他网站链接的图形标志 可以代表一个网站或网站的一个板块 绘制网站图标 第6页 设计网站图标和Logo 绘制网站Logo一个设计独特的网站Logo能给浏览者以深刻的第一印象 不仅代表了网站本身 也能突出网站的性质 是网站的 眼睛 第7页 设计网页广告图像 制作网站BannerBanner是指网页中的广告条 一般使用GIF格式的动态图像文件 也可以使用静态图形 下面设计制作一个时装网站Banner 实例效果是动态的 第8页 设计网页广告图像 绘制网页通栏广告网页通栏广告是指左右与网页同宽 高度一般为100 200像素的图片广告 这种广告多为静态 下面就以如图所示效果为例 完成一幅950 120像素的通栏广告 第9页 设计网页按钮和导航条 按钮是网页中用于导航的重要元素 导航条是一组按钮的集合 提供了到网站不同栏目的链接 网页按钮和导航条设计得好 不仅能增强网页的视觉效果 而且能使导航清晰自然 绘制网页按钮本实例绘制一个具有水晶质感的网页按钮 效果如图所示 第10页 设计网页按钮和导航条 绘制网页导航条导航条不仅要美观 醒目 而且在功能表达上也要一目了然 整个站点中的导航栏风格要一致 方便浏览者了解网站的所有内容 并且知道自己所处的位置 第11页 主要内容 12 1设计网页元素12 2绘制网页12 3设计制作手机网页12 4本章小结 第12页 12 2绘制网页 PhotoshopCC可以快速创建网站和用户界面原型 并能通过切片和优化将图片直接转换成Web格式 下面将综合使用PhotoshopCC的各种工具完整地制作一个网页作品 使读者对网页制作流程有一个大致的认识 绘制网页创建切片优化切片并导出HTML文件在Dreamweaver中编辑网页 第13页 12 2绘制网页 网页预览效果 第14页 主要内容 12 1设计网页元素12 2绘制网页12 3设计制作手机网页12 4本章小结 第15页 12 3设计制作手机网页 现在的互联网 可以说是名副其实的移动互联网 大家不仅可以利用无线网卡随处随地上网 还可以直接利用手机浏览网页 下载文件 而且现在的无线运营商也正在大力发展无线网络 扩展手机上网带宽 于是 手机网页的制作需求也变多了 本节简单的介绍制作手机网页的基础知识 手机网页编码所遵循的规范手机网页文档的扩展名 第16页 新建手机网页 制作手机网页要先准备三样东西 网页设计图 Dreamweaver软件和Opera浏览器 网页设计图就是网页未来的摸样 必不可少 用XhtmlMP语言进行手机网页制作和普通网页制作方法一样 因此选择使用DreamweaverCC 而Opera浏览器则对手机网页有很好的支持 可以明确指出网页中的错误 新建手机网页设置网页设计窗口保存手机网页 第17页 链接CSS文件 Wap2 0手机网站的网页语言是XhtmlMP 一提起Xhtml 就绝对离不开Div和CSS 下面介绍CSS文件链接方法和定义方法 第18页 添加网页内容 经过新建网页 链接CSS文件几个简单步骤 一个手机网页的模型已经初步建立了 接下来就是为这个页面添加更多的内容元素 下面将介绍插入图片 标题 文字链接等方法 插入Div插入图片插入标题添加文字链接添加搜索框添加版权信息 第19页 添加网页内容 手机网页效果 第20页 主要内容 12 1设计网页元素12 2绘制网页12 3设计制作手机网页12 4本章小结 第21页 12 4本章小结 本章通过几个综合实例介