7. 第五章 网页设计综合案例.pptx

HTML+CSS+JavaScript网页设计主讲：孟宪宁、赵春霞目 录第一章 网页设计综述第二章 HTML语言CONTENTS第三章 CSS第四章 JavaScript第五章 网页设计综合案例05网页设计综合案例目 录5.1 网站介绍及定位5.2 准备工作5.3 网页布局分析5.4 网页头部分析与实现5.5 导航部分分析与实现5.6 广告部分分析与实现5.7 主体部分的分析与实现5.1 网站介绍及定位 腾讯网（）作为门户网站，从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等创新形式，改变了用户获取资讯的方式和习惯。5.2 准备工作5.2.1 建立站点站点对于制作维护一个网站很重要，它能够帮助我们系统地管理网站中的各类文件，一个网站通常包括图片文件、网页文件、样式文件、脚本文件、视频文件等。建立站点就是创建一个存放网站文件的文件夹，并对其中的文件进行合理的分类和管理，可以在网站文件夹中创建文件夹对文件进行分类，创建images文件夹来管理图片文件、创建css文件夹来管理样式文件等，这样就形成了清晰的站点组织结构图，方便增加或删除网站的文件，这对于网站本身的上传维护、移植等都有重要的影响5.2.1 建立站点下面介绍使用webstorm讲解创建网站的过程。1.创建项目网站根目录，在D盘下创建“腾讯首页”文件夹，作为网站根目录。2.在根目录下新建“css”、“images”、“js”文件夹，用于存放网站所需的css文件、图片文件和js脚本文件。3. 新建站点项目，在webstorm菜单栏中，选择【file】-【new】-【project】选项，在弹出的窗口中选择项目位置为E:\腾讯首页，单击“保存”按钮，完成站点的创建。5.2.2 素材准备由于是仿作腾讯网站首页，因此需要网站上的各类图片或视频，下面介绍两种获取网站上的图片的方法。1.使用“图片另存为...”方法来获取图片2.通过网站源代码分析图片的地址获取图片5.3 网页布局分析从网页的效果图可分析出整个页面可以分为头部、导航、广告和焦点轮播图、快速链接、主体部分和版权信息6个模块。采用div+css对网页进行布局设计，遵循内容和样式分离原则，并且使网站的页面结构更加清晰和条例。5.3.1 网页整体布局!DOCTYPE htmlhtmlhead meta charset=gb2312 title腾讯首页/title meta content=资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent name=Keywords link rel=stylesheet href=index.css type=text/css charset=utf-8/headbodydiv class=layout !--头部开始-- div class=qq-top /div !--头部结束-- !--导航开始-- div class=qq-nav /div !--导航结束-- !--广告开始-- div class=qq-gg /div !--广告结束-- !--主体内容开始-- !--要闻开始-- div class=qq-main /div !--要闻结束-- !--主体内容结束--/div/body/html5.3.2 标签页图标和文字显示 当我们打开一个网站时，在网站的标签上显示的图标称为标签页图标。在head头标签中添加如下代码即可实现。title腾讯首页/titlelink rel=shortcut icon href=favicon.ico type=image/x-icon5.3.2 标签页图标和文字显示 一般要求标签页图标格式是.ico格式，文件名一般命名为favicon,favicon是favorites icon的缩写。对于不同的浏览器，要求不同，对于IE浏览器，要求favicon.ico文件必须放置在网站根目录下，浏览器会自动检索。而对于火狐浏览器或谷歌浏览器图标格式没有IE那么严格，GIF和PNG格式的图标也可以显示，图标名称也可以不是favcion，文件位置也可以不是网站根目录。5.3.2 标签页图标和文字显示 当我们打开一个网站时，在网站的标签上显示的图标称为标签页图标。在head头标签中添加如下代码即可实现。title腾讯首页/titlelink rel=shortcut icon href=favicon.ico type=image/x-icon5.3.3 定义公共样式为了清除浏览器和各个HTML元素的