网页设计与制作教程 第12章 网页设计综合实例

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