网页设计综合实例

第18页
添加网页内容


经过新建网页、链接CSS文件几个简单步骤，一个手 机网页的模型已经初步建立了。接下来就是为这个页 面添加更多的内容元素，下面将介绍插入图片、标题 、文字链接等方法。 插入Div 插入图片 插入标题 添加文字链接 添加搜索框 添加版权信息
第1章 网页设计与制作基础
第12章 网页设计综合实例
本章概述 本章的学习目标 主要内容
网页设计与制作教程
第1章 网页设计与制作基础
第1页
本章概述

本章将综合本书所讲述的有关网页设计与制作技 术，通过几个实例，帮助读者熟悉和掌握整个网 页制作过程，同时加深对前面学过知识的综合理 解和应用，在学习完本书的所有内容后能够充分 掌握网页设计与制作技术，最终达到本书的学习 目的。
网页设计与制作教程
第1章 网页设计与制作基础
第8页
设计网页广告图像

绘制网页通栏广告 网页通栏广告是指左右与网页同宽，高度一般为 100~200像素的图片广告，这种广告多为静态。 下面就以如图所示效果为例，完成一幅950×120 像素的通栏广告。
网页设计与制作教程
第1章 网页设计与制作基础
第9页
网页设计与制作教程
第1章 网页设计与制作基础
第22页
网页设计与制作教程
第1章 网页设计与制作基础
第12页
12.2 绘制网页




Photoshop CC可以快速创建网站和用户界面原 型，并能通过切片和优化将图片直接转换成Web 格式。下面将综合使用Photoshop CC的各种工 具完整地制作一个网页作品，使读者对网页制作 流程有一个大致的认识。 绘制网页 创建切片 优化切片并导出HTML文件 在Dreamweaver中编辑网页


现在的互联网，可以说是名副其实的移动互联网 。大家不仅可以利用无线网卡随处随地上网，还 可以直接利用手机浏览网页、下载文件，而且现 在的无线运营商也正在大力发展无线网络、扩展 手机上网带宽。于是，手机网页的制作需求也变 多了。本节简单的介绍制作手机网页的基础知识 。 手机网页编码所遵循的规范 手机网页文档的扩展名
网页设计与制作教程
第1章 网页设计与制作基础
第2页
本章的学习目标
掌握网页元素的制作方法 掌握网页的制作及切片技术 掌握手机网页的制作方法

网页设计与制作教程
第1章 网页设计与制作基础
第3页
主要内容
12.1 12.2 12.3 12.4 设计网页元素 绘制网页 设计制作手机网页 本章小结
网页设计与制作教程
第1章 网页设计与制作基础
第来自百度文库页
12.1 设计网页元素

网页元素就是指网页中使用到的一切用于组织结 构和表达内容的对象。组织结构包括按钮、布局、 层、导航条和链接等。表达内容包括Logo、 Banner、文字、图像和Flash动画等。本节介绍 运用Photoshop CC设计各种网页元素的方法。
网页设计与制作教程
第1章 网页设计与制作基础
第5页
设计网站图标和Logo


网站图标指显示在浏览器地址栏左侧的简单明了 且视觉效果突出的小图标。网站Logo徽标主要是 各个网站用来与其他网站链接的图形标志，可以 代表一个网站或网站的一个板块。 绘制网站图标
网页设计与制作教程
第1章 网页设计与制作基础
第6页
设计网站图标和Logo

绘制网站Logo 一个设计独特的网站Logo能给浏览者以深刻的第 一印象，不仅代表了网站本身，也能突出网站的 性质，是网站的“眼睛”。
网页设计与制作教程
第1章 网页设计与制作基础
第7页
设计网页广告图像

制作网站Banner Banner是指网页中的广告条，一般使用GIF格式 的动态图像文件，也可以使用静态图形。下面设 计制作一个时装网站Banner。实例效果是动态的 。
设计网页按钮和导航条


按钮是网页中用于导航的重要元素。导航条是一 组按钮的集合，提供了到网站不同栏目的链接。 网页按钮和导航条设计得好，不仅能增强网页的 视觉效果，而且能使导航清晰自然。 绘制网页按钮 本实例绘制一个具有水晶质感的网页按钮，效果 如图所示。
网页设计与制作教程
第1章 网页设计与制作基础
网页设计与制作教程
第19页
添加网页内容

手机网页效果
网页设计与制作教程
第1章 网页设计与制作基础
第20页
主要内容
12.1 12.2 12.3 12.4 设计网页元素 绘制网页 设计制作手机网页 本章小结
网页设计与制作教程
第1章 网页设计与制作基础
第21页
12.4 本章小结



本章通过几个综合实例介绍了整个网页制作的过 程，以达到熟悉和掌握本书所讲述的网页设计与 制作有关技术的目的。 首先，讲述了设计网页元素的实例。 接下来，详细讲述了绘制网页的步骤。 最后，讲述了一个设计制作手机网页的实例。
第1章 网页设计与制作基础
网页设计与制作教程
第16页
新建手机网页

制作手机网页要先准备三样东西：网页设计图、 Dreamweaver软件和Opera浏览器。网页设计图 就是网页未来的摸样，必不可少；用Xhtml MP语 言进行手机网页制作和普通网页制作方法一样， 因此选择使用Dreamweaver CC；而Opera浏览 器则对手机网页有很好的支持，可以明确指出网 页中的错误。
新建手机网页 设置网页设计窗口 保存手机网页
网页设计与制作教程
第1章 网页设计与制作基础
第17页
链接CSS文件

Wap2.0手机网站的网页语言是Xhtml MP。一提 起Xhtml，就绝对离不开Div和CSS。下面介绍 CSS文件链接方法和定义方法。
网页设计与制作教程
第1章 网页设计与制作基础
第10页
设计网页按钮和导航条

绘制网页导航条 导航条不仅要美观、醒目，而且在功能表达上也 要一目了然。整个站点中的导航栏风格要一致， 方便浏览者了解网站的所有内容，并且知道自己 所处的位置。
网页设计与制作教程
第1章 网页设计与制作基础
第11页
主要内容
12.1 12.2 12.3 12.4 设计网页元素 绘制网页 设计制作手机网页 本章小结
第1章 网页设计与制作基础
网页设计与制作教程
第13页
12.2 绘制网页

网页预览效果
网页设计与制作教程
第1章 网页设计与制作基础
第14页
主要内容
12.1 12.2 12.3 12.4 设计网页元素 绘制网页 设计制作手机网页 本章小结
网页设计与制作教程
第1章 网页设计与制作基础
第15页
12.3 设计制作手机网页