网页设计综合实例

第1页第12章

网页设计综合实例本章概述本章的学习目标主要内容网页设计综合实例全文共22页，当前为第1页。第2页本章概述本章将综合本书所讲述的有关网页设计与制作技术，通过几个实例，帮助读者熟悉和掌握整个网页制作过程，同时加深对前面学过知识的综合理解和应用，在学习完本书的所有内容后能够充分掌握网页设计与制作技术，最终达到本书的学习目的。网页设计综合实例全文共22页，当前为第2页。第3页本章的学习目标掌握网页元素的制作方法掌握网页的制作及切片技术掌握手机网页的制作方法网页设计综合实例全文共22页，当前为第3页。第4页主要内容12.1

设计网页元素12.2绘制网页12.3设计制作手机网页12.4本章小结网页设计综合实例全文共22页，当前为第4页。第5页12.1设计网页元素网页元素就是指网页中使用到的一切用于组织结构和表达内容的对象。组织结构包括按钮、布局、层、导航条和链接等。表达内容包括Logo、Banner、文字、图像和Flash动画等。本节介绍运用PhotoshopCC设计各种网页元素的方法。网页设计综合实例全文共22页，当前为第5页。第6页设计网站图标和Logo网站图标指显示在浏览器地址栏左侧的简单明了且视觉效果突出的小图标。网站Logo徽标主要是各个网站用来与其他网站链接的图形标志，可以代表一个网站或网站的一个板块。绘制网站图标网页设计综合实例全文共22页，当前为第6页。第7页设计网站图标和Logo绘制网站Logo一个设计独特的网站Logo能给浏览者以深刻的第一印象，不仅代表了网站本身，也能突出网站的性质，是网站的“眼睛”。网页设计综合实例全文共22页，当前为第7页。第8页设计网页广告图像制作网站BannerBanner是指网页中的广告条，一般使用GIF格式的动态图像文件，也可以使用静态图形。下面设计制作一个时装网站Banner。实例效果是动态的。网页设计综合实例全文共22页，当前为第8页。第9页设计网页广告图像绘制网页通栏广告网页通栏广告是指左右与网页同宽，高度一般为100~200像素的图片广告，这种广告多为静态。下面就以如图所示效果为例，完成一幅950×120像素的通栏广告。网页设计综合实例全文共22页，当前为第9页。第10页设计网页按钮和导航条按钮是网页中用于导航的重要元素。导航条是一组按钮的集合，提供了到网站不同栏目的链接。网页按钮和导航条设计得好，不仅能增强网页的视觉效果，而且能使导航清晰自然。绘制网页按钮本实例绘制一个具有水晶质感的网页按钮，效果如图所示。网页设计综合实例全文共22页，当前为第10页。第11页设计网页按钮和导航条绘制网页导航条导航条不仅要美观、醒目，而且在功能表达上也要一目了然。整个站点中的导航栏风格要一致，方便浏览者了解网站的所有内容，并且知道自己所处的位置。网页设计综合实例全文共22页，当前为第11页。第12页主要内容12.1设计网页元素12.2绘制网页12.3设计制作手机网页12.4本章小结网页设计综合实例全文共22页，当前为第12页。第13页12.2绘制网页PhotoshopCC可以快速创建网站和用户界面原型，并能通过切片和优化将图片直接转换成Web格式。下面将综合使用PhotoshopCC的各种工具完整地制作一个网页作品，使读者对网页制作流程有一个大致的认识。绘制网页创建切片优化切片并导出HTML文件在Dreamweaver中编辑网页网页设计综合实例全文共22页，当前为第13页。第14页12.2绘制网页网页预览效果网页设计综合实例全文共22页，当前为第14页。第15页主要内容12.1设计网页元素12.2绘制网页12.3设计制作手机网页12.4本章小结网页设计综合实例全文共22页，当前为第15页。第16页12.3设计制作手机网页现在的互联网，可以说是名副其实的移动互联网。大家不仅可以利用无线网卡随处随地上网，还可以直接利用手机浏览网页、下载文件，而且现在的无线运营商也正在大力发展无线网络、扩展手机上网带宽。于是，手机网页的制作需求也变多了。本节简单的介绍制作手机网页的基础知识。

手机网页编码所遵循的规范手机网页文档的扩展名网页设计综合实例全文共22页，当前为第16页。第17页新建手机网页制作手机网页要先准备三样东西：网页设计图、Dreamweaver软件和Opera浏览器。网页设计图就是网页未来的摸样，必不可少；用XhtmlMP语言进行手机网页制作和普通网页制作方法一样，因此选择使用DreamweaverCC；而Opera浏览器则对手机网页有很好的支持，可以明确指出网页中的错误。新建手机网页设置网页设计窗口保存手机网页网页设计综合实例全文共22页，当前为第17页。第18页链接CSS文件手机网站的网页语言是XhtmlMP。一提起Xhtml，就绝对离不开Div和CSS。下面介绍CSS文件链接方法和定义方法。网页设计综合实例全文共22页，当前为第18页。第19页添加网页内容经过新建网页、链接CSS文件几个简单步骤，一个手机网页的模型已经初步建立了。接下来就是为这个页面添加更多的内容元素，下面将介绍插入图片、标题、文字链接等方法。插入Div插入图片插入标题添加文字链接添加搜索框添加版权信息网页设计综合实例全文共22页，当前为第19页。第20页添加网页内容手机网页效果网页设计综合实例全文共22页，当前为第20页。第21页主要内容12.1设计网页元素12.2绘制网页12.3设计制作手机网页12.4本章小结

网页设计综合实例全文共22页，当前为第21页。第22页12.4本章小