第10章 实战开发—好趣艺术设计部落首页面（新）.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * 10.2 首页面详细制作 1、制作头部和导航 3.搭建结构 准备工作完成后，接下来开始搭建网页的头部和导航结构。打开index.html文件，在index.html文件内书写头部和导航的HTML结构代码。 10.2 首页面详细制作 1、制作头部和导航 4.控制样式 接下来在样式表index.css中书写对应的CSS样式代码。 10.2 首页面详细制作 1、制作头部和导航 5.添加JS特效 在index.js中书写对应的JavaScript代码。 2、banner和通告 10.2 首页面详细制作 效果图如下所示： 1.分析效果图 2、banner和通告 10.2 首页面详细制作 2.准备图片素材 2、banner和通告 10.2 首页面详细制作 3.搭建结构 在首页面文档index.html中添加banner和通告模块的结构代码。 2、banner和通告 10.2 首页面详细制作 4.控制样式 在样式表index.css中书写CSS样式代码。 2、banner和通告 10.2 首页面详细制作 5.添加JS特效 在index.js中书写对应的JavaScript代码。 1 正确使用自增运算符。 2 正确的获取要操作的对象。 3 正确的判断是否切换到了最后一张图片。 10.2 首页面详细制作 3、主体内容区域 效果图如下所示： 1.分析效果图 10.2 首页面详细制作 3、主体内容区域 2.准备图片素材 10.2 首页面详细制作 3、主体内容区域 3.搭建结构样式 首页面主体内容区域包含了很多模块，这里将先按照整体布局搭建一个完整的结构，再依次为各个模块添加结构代码。 10.2 首页面详细制作 3、主体内容区域 4.添加JS特效 在index.js中书写实现tab栏切换效果的JavaScript代码。 10.2 首页面详细制作 4、底部版权区域 效果图如下所示： 1.分析效果图 10.2 首页面详细制作 4、底部版权区域 2.搭建结构 在index.html文件的基础上书写版权信息区域的HTML代码。 10.2 首页面详细制作 4、底部版权区域 3.控制样式 打开index.css样式文件，并添加控制版权信息模块的CSS样式。 * * * * * * * * * * * * * * * * ? 第十章 实战开发—好趣艺术设计部落首页面 HTML 了解切图工具 · 站点的建立 · 页面的制作 学习目标 掌握站点的建立，能够建立规范的站点。 1 2 了解切图工具，能够运用切片裁切效果图。 3 掌握首页面的制作，并能够实现简单的JavaScript特效。 了解 掌握 掌握 ? 目录 10.1 准备工作 10.2 首页面详细制作 ?点击查看本小节知识架构 ?点击查看本小节知识架构 ? 知识架构 10.1 准备工作 1 2 建立站点 站点初始化设置 3 4 切片 效果图分析 5 页面布局 6 定义公共样式 ? 知识架构 9.3 布局常用属性 10.2 首页面详细制作 ? 知识架构 1 2 制作头部和导航 banner和通告 3 主体内容区域 4 底部版权区域 如何进行网站项目的开发？ 章节概要 10.1 准备工作 拿到效果图后先要进行准备工作 定义一个存放网站中零散文件的文件夹。这样，可以形成明晰的站点组织结构图。 建立站点 把效果图中有用的部分剪切下来作为网页制作时的素材，这个过程被称为“切图”。 切 片 站点初始化设置 10.1 准备工作 拿到效果图后先要进行准备工作 只有熟悉页面的结构及版式，才能更加高效地完成网页的布局和排版。 效果图分析 切定义公共样式 页面布局 10.1 准备工作 为什么要建立站点？ 1、建立站点 “站点”对于制作维护一个网站很重要，它能够帮助我们系统地管理网站文件。简单地说，建立站点就是定义一个存放网站中零散文件的文件夹。 10.1 准备工作 1、建立站点 10.1 准备工作 1、建立站点 创建网站根目录 新建站点 站点建立完成 在根目录下新建文件 step1 s