7. 第五章 网页设计综合案例
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</body>
</html>
第5章 网页设计综合案例
5.3.2 标签页图标和文字显示 当我们打开一个网站时，在网站的标签上显示的图标称为标签页图标。 在head头标签中添加如下代码即可实现。 <title>腾讯首页</title> <link rel="shortcut icon" href="favicon.ico" type="image/xicon">
第5章 网页设计综合案例
5.3.2 标签页图标和文字显示 一般要求标签页图标格式是.ico格式，文件名一般命名为 favicon,favicon是favorites icon的缩写。对于不同的浏览器，要求不同， 对于IE浏览器，要求favicon.ico文件必须放置在网站根目录下，浏览器会自 动检索。而对于火狐浏览器或谷歌浏览器图标格式没有IE那么严格，GIF和 PNG格式的图标也可以显示，图标名称也可以不是favcion，文件位置也可 以不是网站根目录。
第5章 网页设计综合案例
5.2 准备工作
5.2.1 建立站点 站点对于制作维护一个网站很重要，它能够帮助我们系统地管理网站中 的各类文件，一个网站通常包括图片文件、网页文件、样式文件、脚本文件、 视频文件等。建立站点就是创建一个存放网站文件的文件夹，并对其中的文 件进行合理的分类和管理，可以在网站文件夹中创建文件夹对文件进行分类， 创建images文件夹来管理图片文件、创建css文件夹来管理样式文件等，这 样就形成了清晰的站点组织结构图，方便增加或删除网站的文件，这对于网 站本身的上传维护、移植等都有重要的影响
第5章 网页设计综合案例
第5章 网页设计综合案例
5.1 网站介绍及定位
腾讯网（http://www.qq.com）作为门户网站，从2003年创立至今， 已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一 体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽 车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注 不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等 创新形式，改变了用户获取资讯的方式和习惯。
第5章 网页设计综合案例
5.3.2 标签页图标和文字显示 当我们打开一个网站时，在网站的标签上显示的图标称为标签页图标。 在head头标签中添加如下代码即可实现。 <title>腾讯首页</title> <link rel="shortcut icon" href="favicon.ico" type="image/xicon">
<!--导航开始-->
<div class="qq-nav"> </div> <!--导航结束--> <!--广告开始--> <div class="qq-gg">
</div> <!--广告结束--> <!--主体内容开始--> <!--要闻开始--> <div class="qq-main">
</div> <!--要闻结束--> <!--主体内容结束--> </div>
第5章 网页设计综合案例
5.3.3 定义公共样式 为了清除浏览器和各个HTML元素的默认样式，使得网页在个浏览器中 显示的效果一致、通常要对元素的CSS样式进行初始化，并声明一些通用的 样式。
第5章 网页设计综合案例
/* 重置浏览器的默认样式*/
body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0p x;padding:0px;list-style:none;}
HTML+CSS+JavaScript 网页设计
主讲：孟宪宁、赵春霞
目录
CONTENTS
第一章 网页设计综述 第二章 HTML语言 第三章 CSS
第四章 JavaScript
第五章 网页设计综合案例
第5章 网页设计综合案例
05
网页设计综合案例
第5章 网页设计综合案例
目录
5.1 网站介绍及定位 5.2 准备工作 5.3 网页布局分析 5.4 网页头部分析与实现 5.5 导航部分分析与实现 5.6 广告部分分析与实现 5.7 主体部分的分析与实现
第5章 网页设计综合案例
5.2.2 素材准备 由于是仿作腾讯网站首页，因此需要网站上的各类图片或视频，下面介 绍两种获取网站上的图片的方法。 1.使用“图片另存为...”方法来获取图片 2.通过网站源代码分析图片的地址获取图片
第5章 网页设计综合案例
5.3 网页布局分析
wk.baidu.com
从网页的效果图可分析出整个页面可以分为头部、导航、广告和焦点 轮播图、快速链接、主体部分和版权信息6个模块。
采用div+css对网页进行布局设计，遵循内容和样式分离原则，并且 使网站的页面结构更加清晰和条例。
第5章 网页设计综合案例
5.3.1 网页整体布局
<!DOCTYPE html> <html> <head>
<meta charset="gb2312"> <title>腾讯首页</title> <meta content="资讯,新闻,财经,房产,视频,NBA, 科技,腾讯网,腾讯,QQ,Tencent" name="Keywords"> <link rel="stylesheet" href="index.css" type="text/css" charset="utf-8"> </head> <body> <div class="layout"> <!--头部开始--> <div class="qq-top"> </div> <!--头部结束-->
第5章 网页设计综合案例
5.2.1 建立站点 下面介绍使用webstorm讲解创建网站的过程。 1.创建项目网站根目录，在D盘下创建“腾讯首页”文件夹，作为网站 根目录。 2.在根目录下新建“css”、“images”、“js”文件夹，用于存放网站 所需的css文件、图片文件和js脚本文件。 3. 新建站点项目，在webstorm菜单栏中，选择【file】-【new】【project】选项，在弹出的窗口中选择项目位置为E:\腾讯首页，单击“保 存”按钮，完成站点的创建。
</html>
第5章 网页设计综合案例
5.3.2 标签页图标和文字显示 当我们打开一个网站时，在网站的标签上显示的图标称为标签页图标。 在head头标签中添加如下代码即可实现。 <title>腾讯首页</title> <link rel="shortcut icon" href="favicon.ico" type="image/xicon">
第5章 网页设计综合案例
5.3.2 标签页图标和文字显示 一般要求标签页图标格式是.ico格式，文件名一般命名为 favicon,favicon是favorites icon的缩写。对于不同的浏览器，要求不同， 对于IE浏览器，要求favicon.ico文件必须放置在网站根目录下，浏览器会自 动检索。而对于火狐浏览器或谷歌浏览器图标格式没有IE那么严格，GIF和 PNG格式的图标也可以显示，图标名称也可以不是favcion，文件位置也可 以不是网站根目录。
第5章 网页设计综合案例
5.2 准备工作
5.2.1 建立站点 站点对于制作维护一个网站很重要，它能够帮助我们系统地管理网站中 的各类文件，一个网站通常包括图片文件、网页文件、样式文件、脚本文件、 视频文件等。建立站点就是创建一个存放网站文件的文件夹，并对其中的文 件进行合理的分类和管理，可以在网站文件夹中创建文件夹对文件进行分类， 创建images文件夹来管理图片文件、创建css文件夹来管理样式文件等，这 样就形成了清晰的站点组织结构图，方便增加或删除网站的文件，这对于网 站本身的上传维护、移植等都有重要的影响
第5章 网页设计综合案例
第5章 网页设计综合案例
5.1 网站介绍及定位
腾讯网（http://www.qq.com）作为门户网站，从2003年创立至今， 已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一 体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽 车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注 不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等 创新形式，改变了用户获取资讯的方式和习惯。
第5章 网页设计综合案例
5.3.2 标签页图标和文字显示 当我们打开一个网站时，在网站的标签上显示的图标称为标签页图标。 在head头标签中添加如下代码即可实现。 <title>腾讯首页</title> <link rel="shortcut icon" href="favicon.ico" type="image/xicon">
<!--导航开始-->
<div class="qq-nav"> </div> <!--导航结束--> <!--广告开始--> <div class="qq-gg">
</div> <!--广告结束--> <!--主体内容开始--> <!--要闻开始--> <div class="qq-main">
</div> <!--要闻结束--> <!--主体内容结束--> </div>
第5章 网页设计综合案例
5.3.3 定义公共样式 为了清除浏览器和各个HTML元素的默认样式，使得网页在个浏览器中 显示的效果一致、通常要对元素的CSS样式进行初始化，并声明一些通用的 样式。
第5章 网页设计综合案例
/* 重置浏览器的默认样式*/
body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0p x;padding:0px;list-style:none;}
HTML+CSS+JavaScript 网页设计
主讲：孟宪宁、赵春霞
目录
CONTENTS
第一章 网页设计综述 第二章 HTML语言 第三章 CSS
第四章 JavaScript
第五章 网页设计综合案例
第5章 网页设计综合案例
05
网页设计综合案例
第5章 网页设计综合案例
目录
5.1 网站介绍及定位 5.2 准备工作 5.3 网页布局分析 5.4 网页头部分析与实现 5.5 导航部分分析与实现 5.6 广告部分分析与实现 5.7 主体部分的分析与实现
第5章 网页设计综合案例
5.2.2 素材准备 由于是仿作腾讯网站首页，因此需要网站上的各类图片或视频，下面介 绍两种获取网站上的图片的方法。 1.使用“图片另存为...”方法来获取图片 2.通过网站源代码分析图片的地址获取图片
第5章 网页设计综合案例
5.3 网页布局分析
wk.baidu.com
从网页的效果图可分析出整个页面可以分为头部、导航、广告和焦点 轮播图、快速链接、主体部分和版权信息6个模块。
采用div+css对网页进行布局设计，遵循内容和样式分离原则，并且 使网站的页面结构更加清晰和条例。
第5章 网页设计综合案例
5.3.1 网页整体布局
<!DOCTYPE html> <html> <head>
<meta charset="gb2312"> <title>腾讯首页</title> <meta content="资讯,新闻,财经,房产,视频,NBA, 科技,腾讯网,腾讯,QQ,Tencent" name="Keywords"> <link rel="stylesheet" href="index.css" type="text/css" charset="utf-8"> </head> <body> <div class="layout"> <!--头部开始--> <div class="qq-top"> </div> <!--头部结束-->
第5章 网页设计综合案例
5.2.1 建立站点 下面介绍使用webstorm讲解创建网站的过程。 1.创建项目网站根目录，在D盘下创建“腾讯首页”文件夹，作为网站 根目录。 2.在根目录下新建“css”、“images”、“js”文件夹，用于存放网站 所需的css文件、图片文件和js脚本文件。 3. 新建站点项目，在webstorm菜单栏中，选择【file】-【new】【project】选项，在弹出的窗口中选择项目位置为E:\腾讯首页，单击“保 存”按钮，完成站点的创建。