实战开发(上)—传智播客设计学院首页面

让IT教学更简单，让IT学习更有效让IT教学更简单，让IT学习更有效第十章实战开发（上）•建立站点•站点初始化设置•切片的使用•首页面详细制作让IT教学更简单，让IT学习更有效目录准备工作首页面详细制作让IT教学更简单，让IT学习更有效10.1准备工作•10.1.1建立站点−“站点”对于制作维护一个网站很重要，他能够帮助我们系统地管理网站文件。一个网站，通常由HTML网页文件、图片、CSS样式表等构成。−简单地说，建立站点就是定义一个存放网站中零散文件的文件夹。这样，可以形成明晰的站点组织结构图，方便增减站内文件夹及文档等，这对于网站本身的上传维护，内容的扩充和移植都有着重要的影响。下面将详细讲解建立站点的步骤。让IT教学更简单，让IT学习更有效10.1准备工作（1）创建网站根目录在电脑本地磁盘任意盘符下创建网站根目录。这里在D盘“HTML+CSS网页制作”文件夹下新建一个文件夹作为网站根目录。命名为chapter10，如图所示。建立根目录•10.1.1建立站点让IT教学更简单，让IT学习更有效10.1准备工作（2）在根目录下新建文件打开网站根目录chapter10，在根目录下新建css和images文件夹，分别用于存放网站所需的css样式表和图像文件，如下图所示。图片和样式表文件夹•10.1.1建立站点让IT教学更简单，让IT学习更有效10.1准备工作（3）新建站点打开Dreamweaver工具，在菜单栏中选择【站点】→【新建站点】选项，在弹出的窗口中输入站点名称。然后，浏览并选择站点根目录的存储位置，如图所示。新建站点选择站点根目录•10.1.1建立站点让IT教学更简单，让IT学习更有效10.1准备工作（4）站点建立完成点击上一步所示界面中的“保存”按钮，这时，在Dreamweaver工具面板组中可查看到站点的信息，表示站点创建成功，如图所示。站点信息•10.1.1建立站点让IT教学更简单，让IT学习更有效10.1准备工作•10.1.2首页面效果图分析观察效果图，不难看出整个页面大致可以分为头部、导航、banner广告图、通知公告、主体内容、版权信息等六个模块，具体结构如图所示。让IT教学更简单，让IT学习更有效10.1准备工作1、HTML结构分析首页面效果图分析头部banner广告图通知公告主体内容版权信息导航•10.1.2首页面效果图分析让IT教学更简单，让IT学习更有效10.1准备工作2、CSS样式分析−仔细观察页面的各个模块，可以看出，页面导航和版权信息模块通栏显示，其他模块均宽1000px且居中显示。所以，页面的版心为1000px。−精细地分析页面，不难发现除了banner部分的文字为微软雅黑和黑体外，其余文字均为宋体。主体内容中链接文字均显示为#222、宋体、12px。这些共同的样式可以做成CSS公用样式表文件供所有页面调用，以减少代码冗余。•10.1.2首页面效果图分析让IT教学更简单，让IT学习更有效10.1准备工作•10.1.3站点初始化设置−首先，在网站根目录文件夹下创建四个HTML文件，分别为index.html、about_us.html、course.html、course_info.html。−然后，在CSS文件夹内创建各个页面对应的样式表文件，分别为index.css、about_us.css、course.css、course_info.css。−另外，由于不同页面中相同的样式可以循环调用，所以需要建立一个公用样式表文件style.css。为了使文件的命名与网站中对应页面的关系更加清晰，下面，逐一介绍下本项目中各个页面的命名。让IT教学更简单，让IT学习更有效−index.html：首页面−about_us.html：关于我们页面−course.html：课程介绍页面−course_info.html：课程介绍详情页面−style.css：公用样式表文件−index.css：首页面CSS文件−about_us.css：关于我们页面CSS文件−course.css：课程介绍页面文件CSS文件−course_info.css：课程介绍详情页面CSS文件10.1准备工作•10.1.3站点初始化设置让IT教学更简单，让IT学习更有效−页面创建完成后，网站形成了明晰的组织结构关系，站点根目录文件夹结构如图所示。站点根目录文件夹结构图10.1准备工作•10.1.3站点初始化设置让IT教学更简单，让IT学习更有效−为了清除各浏览器的默认样式，使得网页在各浏览器中的显示效果一致，在创建好所需的HTML和CSS样式文件后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。打开页面公用样式文件style.css，编写公用样式，具体如下：10.1准备工作•10.1.3站点初始化设置让IT教学更简单，让IT学习更有效/*重置浏览器的默认样式*/body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0;border:0;list-style:none;}/*全局控制*/body{font-family:Arial,Helvetica,sans-serif,宋体;font-size:12px;}.contianer{width:100%;text-align:center;}.main{width:1000px;margin:0auto;clear:both;text-align:left;}a:link,a:visited{color:#222;text-decoration:none;}/*未点击和点击后的样式*/a:hover{color:#FD4913;}/*鼠标移上时的样式*/10.1准备工作•10.1.3站点初始化设置让IT教学更简单，让IT学习更有效•10.1.4切片−为了提高浏览器的加载速度，或是满足一些版面设计的特殊要求，通常需要把效果图中有用的部分剪切下来作为网页制作时的素材，这个过程被称为“切图”。−切图的目的是把设计效果图转化成网页代码。常用的切图工具主要有Photoshop和Fireworks。10.1准备工作让IT教学更简单，让IT学习更有效•10.1.5页面布局页面布局对于改善网站的外观非常重要，是为了使网站页面结构更加清晰、有条理，而对页面进行的“排版”。10.1准备工作让IT教学更简单，让IT学习更有效•10.2.1制作头部和导航观察效果图不难看出，网页的头部可以分为左（Logo）、中（pic）、右（操作菜单）三部分。导航菜单结构清晰，可以通过无序列表来定义，同时由于其通栏显示，所以，还需要在无序列表的外边加上一层大盒子。网页头部和导航的具体结构如图所示。导航菜单PICLOGO操作菜单10.2首页面详细制作让IT教学更简单，让IT学习更有效•10.2.2制作banner和通告仔细观察效果图，容易看出banner模块和通告模块均由左右两部分构成。其中，banner模块的左侧为广告图、右侧为课程介绍，通告模块的左侧为通告标题、右侧为通告内容，具体结构如图所示。10.2首页面详细制作让IT教学更简单，让IT学习更有效•10.2.3制作主体内容区域分析首页面主体内容效果图可以看出，主体内容模块大体上由上、下两部分构成，上面部分又可以分为左、中、右三部分，每部分都分别由两个上下结构的模块构成。下面部分由左右两部分构成，分别是数据统计版块和资源中心版块。主体内容区域的具体结构如图所示。主体内容下主体内容上10.2首页面详细制作让IT教学更简单，让IT学习更有效•10.2.4制作底部版权区域观察效果图底部版权区域可以看出，版权信息模块大致可以分为top按钮和内容两部分。由于其背景通栏显示，所以需要在top按钮和内容外加上一层大盒子。网页底部版权区域的具体结构如图所示。内容TOP按钮10.2首页面详细制作让IT教学更简单，让IT学习更有效本章小结•本章首先介绍了网页制作前的准备工作，包括建立及初始化站点、效果图的分析、切片的使用以及如何进行页面布局等步骤。然后分步骤地分析了传智播客设计学院首页面的制作思路及流程，最后完成首页面的制作。•通过本章的学习，初学者应该熟悉网页制作前的相关准备工作，并且能够对列表、浮动、定位、CSS精灵以及滑动门技术等有更充分、更深入的理解。熟练掌握好这些知识，可以大大地提高网页制作的效率。