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

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