第章实战开发-电商网站首页面第章实战开发-电商网站首页面

第11章实战开发—电商网站首页面《网页设计与制作（HTML+CSS）（第2版）》学习目标/Target掌握站点的使用方法，能够建立规范的站点并完成初始化设置。掌握大型网页项目的制作方法，能够分步骤完成电商网站首页面的制作。章节概述/Summary在学习了前面的知识后，相信读者已经能够熟练使用HTML结构标签和CSS样式代码对网页进行布局和排版，同时也可以运用CSS3的新特性为网页添加音频、视频以及动画等特效。本章将运用前面章节所学的知识开发一个网站项目——电商网站首页。目录/Contents11.1准备工作11.2首页面详细制作准备工作11.111.1 准备工作作为一个专业的网页制作人员，当拿到一个页面的效果图时，不是直接开始搭建页面，而是做一些准备工作。网页制作的准备工作包括建立站点、效果图分析等。接下来，本节将针对网页制作的相关准备工作进行详细讲解。11.1 准备工作掌握建立站点的方法，能够为网站项目建立站点。学习目标1.建立站点11.1 准备工作1.建立站点为什么要建立站点？11.1 准备工作1.建立站点“站点”系统地管理HTML网页文件、图片、CSS样式表等网站文件。建立站点就是定义一个存放网站中零散文件的文件夹。站点对于网站本身的上传维护，方便站内文件夹及文档的增删查改。11.1 准备工作1.建立站点创建网站根目录新建站点站点建立完成在根目录下新建文件step1step2step3step411.1 准备工作1.建立站点step1

创建网站根目录在电脑本地磁盘任意盘符下创建网站根目录。本书在D盘“案例源码”文件夹下，新建一个文件夹作为网站根目录，命名为“chapter11”。11.1 准备工作1.建立站点step2在根目录下新建文件打开网站根目录chapter11，在根目录下新建“css”文件夹和“images”文件夹，分别用于存放网站所需的CSS样式文件和图像文件。11.1 准备工作1.建立站点step3

新建站点打开Dreamweaver工具，在菜单栏中选择“站点”→“新建站点”选项，在弹出的窗口中输入站点名称。11.1 准备工作1.建立站点step4

站点建立完成在Dreamweaver工具面板组中可查看到站点信息，表示站点创建成功。11.1 准备工作2.站点初始化设置掌握站点初始化设置的方法，能够为网站项目建立HTML文件和CSS文件。学习目标11.1 准备工作2.站点初始化设置网站根目录文件夹下创建HTML文件，命名为index.html。在CSS文件夹内创建对应的样式表文件，命名为index.css。11.1 准备工作3.效果图分析了解效果图分析的过程，能够拆分项目文件，对HTML文件和CSS样式分别进行分析。学习目标11.1 准备工作3.效果图分析HTML结构分析CSS样式分析背景颜色均为通栏显示，因此各个模块的宽度都可设置为100%。精细地分析页面，不难发现大部分字体大小为14px，样式为微软雅黑。头部和版权信息部分链接文字均显示为#999，当鼠标移上时变为#fff，页面中所有input表单和textarea文本域外的蓝边框均删除。头部、导航和视频内容嵌套在一个大盒子里，内容部分可以根据信息的不同划分为三部分，通过三个独立的大盒子构成，底部和版权信息为独立的两部分。11.1 准备工作4.页面布局掌握页面布局的方法，能够运用div标签完成页面的布局。学习目标11.1 准备工作4.页面布局页面布局对于改善网站的外观非常重要，是为了使网站页面结构更加清晰、有条理，而对页面进行的“排版”。11.1 准备工作5.定义公共样式掌握定义公共样式的方法，能够清楚浏览器默认样式。学习目标11.1 准备工作5.定义公共样式为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。首页面详细制作11.211.2 首页面详细制作1.制作头部、导航及视频内容运用HTML标签和CSS样式，完成头部、导航及视频内容部分的搭建。学习目标11.2 首页面详细制作1.制作头部、导航及视频内容（1）分析效果图11.2 首页面详细制作1.制作头部、导航及视频内容（2）准备图片及音视频素材准备各个模块所需的图片，包括头部的Logo，导航模块的小图标，侧边栏的广告图（导航模块右侧部分的小图标和按钮上的小箭头是通过引入字体图标实现的）和广告图片以及按钮部分大的Logo图。准备音频、视频素材，本案例提供下载好的音视频素材文件。在chapter11文件夹内新建audio文件夹和video文件夹，分别用于存放音频和视频文件。11.2 首页面详细制作1.制作头部、导航及视频内容（3）搭建结构11.2 首页面详细制作1.制作头部、导航及视频内容（4）控制样式11.2 首页面详细制作2.制作内容部分（新品）（1）分析效果图11.2 首页面详细制作2.制作内容部分（新品）（2）准备图片及音视频素材准备各个模块所需的图片，包括标题图片、产品图片及产品介绍中的相关小图标。11.2 首页面详细制作2.制作内容部分（新品）（3）搭建结构11.2 首页面详细制作2.制作内容部分（新品）（4）控制样式11.2 首页面详细制作3.制作内容部分（试装）（1）分析效果图11.2 首页面详细制作3.制作内容部分（试装）（2）准备图片及音视频素材准备各个模块所需的图片，包括标题图片、产品图片及产品介绍图。11.2 首页面详细制作3.制作内容部分（试装）（3）搭建结构11.2 首页面详细制作3.制作内容部分（试装）（4）控制样式11.2 首页面详细制作4.制作内容部分（评测）（1）分析效果图11.2 首页面详细制作4.制作内容部分（评测）（2）准备图片及音视频素材准备各个模块所需的图片，包括标题图片及评测公司Logo图。11.2 首页面详细制作4.制作内容部分（评测）（3）搭建结构11.2 首页面详细制作4.制作内容部分（评测）（4）控制样式11.2 首页面详细制作5.注册信息和版权信息部分（1）分析效果图11.2 首页面详细制作5.注册信息和版权信息部分（2）准备图片及音视频素材准备各个模块所需的图片，包括Logo图片和注册按钮图片。11.2 首页面详细制作5.注册信息和版权信息部分（3）搭建结构11.2 首页面详细制作5.注册信息和版权信息部分（4）控制样