网页设计综合实例

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