网页设计与制作项目化教程（微课版）课件 项目7-“舒适家居”企业网站

WEB“舒适家居”企业网站项目7HTML5+CSS3项目化教程4个任务·9个学习小节模块2综合项目07项目7“舒适家居”企业网站本章任务01需求分析2个小节02网站设计2个小节03资源准备2个小节04网页制作3个小节模块2综合项目|项目7“舒适家居”企业网站027.1需求分析任务说明详见教材对应章节知识点·概念本任务以综合实操为主，概念要点参见教材相应说明。语法格式标签结构：<标签名属性="值">内容</标签名>样式规则：选择器{属性:值;}任务效果图图任务7.1任务效果主要环节1项目背景2需求说明模块2综合项目|项目7“舒适家居”企业网站|任务7.103网站规划要求规

划

说

明网站目标该企业位于某市经济开发区，现有专业的家装设计师十余人，业务范围遍布全省。建设网站的主要目的是展示企业形象与设计作品，为客户提供更好、更快、更方便的服务网站定位展示企业形象网站栏目栏目内容主要有室内设计动态信息，如卧室、客厅等效果图示网站语言版本中文网站创意网站形象主页面创意内容主页面创意动画效果创意网站动态旗帜广告Banner创意子页面创意

网站售后服务网站推广网站维护（一年内网站内容免费更新）数据库维护培训两名维护人员7.1.1项目背景任务7.1需求分析“舒适家居”是一家专门提供装修设计的小型企业，其业务以为客户提供居家装饰/装修的设计图与装修材料为主体…本节要点实操任务本节以浏览器实操演示为主，按教材步骤完成页面制作与效果验证。模块2综合项目|项目7“舒适家居”企业网站047.1.2需求说明任务7.1需求分析企业网站大体分为功能型网站、展示型网站、综合型网站，各类电子商务网站即为综合型网站。根据当前客户需求…本节要点实操任务本节以浏览器实操演示为主，按教材步骤完成页面制作与效果验证。模块2综合项目|项目7“舒适家居”企业网站057.2网站设计任务说明详见教材对应章节知识点·概念本任务以综合实操为主，概念要点参见教材相应说明。语法格式标签结构：<标签名属性="值">内容</标签名>样式规则：选择器{属性:值;}任务效果图图任务7.2任务效果主要环节1网站主题设计2网站风格设计模块2综合项目|项目7“舒适家居”企业网站|任务7.206页

面

风

格设

计

要

求颜色风格颜色设计体现出家的温情、明快和个性化等特点。确定网站采用环保绿色系，以深绿色为主色调，辅助灰色、白色，点缀少许橘色等温暖色彩布局风格主页面采用通栏布局模式。子页面采用两列布局模式内容风格该网站信息主要由图片和文本组成，为了加强页面视觉效果，以图片为主体，通过文本进行强调说明语言风格由于企业服务主要限于省内，因此语言采用中文版本7.2.1网站主题设计任务7.2网站设计“舒适家居”企业网站是典型的展示型网站，这类网站的主要作用是通过网络展示的方式，宣传自己的企业形象及产品…本节要点实操任务本节以浏览器实操演示为主，按教材步骤完成页面制作与效果验证。模块2综合项目|项目7“舒适家居”企业网站077.2.2网站风格设计任务7.2网站设计网站风格是一个比较抽象的概念，没有固定的模式与标准，可以简单理解为网站自身的特点，企业网站的风格定位比较困难…本节要点颜色风格：营造目标类型网站的整体气氛，包括标志、字体、标语等的色彩，勾勒出网站的整体视觉布局风格：规划页面的各功能区域，其布局通常有左右、上下、通栏等主要形式内容风格：内容风格是网站的信息支撑，是控制网站风格的根本，也是风格个性化的主导因素语言风格：要注意不同的语言字符对网站的影响不尽相同根据客户需求，确定“舒适家居”企业网站的风格设计特征，具体如表7-2-1所示模块2综合项目|项目7“舒适家居”企业网站087.3资源准备任务说明详见教材对应章节知识点·概念本任务以综合实操为主，概念要点参见教材相应说明。语法格式标签结构：<标签名属性="值">内容</标签名>样式规则：选择器{属性:值;}任务效果图图任务7.3任务效果主要环节1网页布局2网页切片模块2综合项目|项目7“舒适家居”企业网站|任务7.3097.3.1网页布局任务7.3资源准备主页面设计效果如图7-3-1所示，主要体现以下3个要点。本节要点主页面布局设计分析子页面布局设计分析模块2综合项目|项目7“舒适家居”企业网站107.3.2网页切片任务7.3资源准备打开已完成的主页面、子页面，进行页面区域划分，页面区域划分也被称为切片，这是页面规范制作的基础，具体过程如下。本节要点设计原则设计过程模块2综合项目|项目7“舒适家居”企业网站117.4网页制作任务说明详见教材对应章节知识点·概念本任务以综合实操为主，概念要点参见教材相应说明。语法格式position:relative/fixed;position:absolute;left:50%;任务果图图任务7.4任务效果主要环节1环境搭建2制作主页面3制作子页面模块2综合项目|项目7“舒适家居”企业网站|任务7.4127.4.1环境搭建任务7.4网页制作在完成网站设计及页面切片设计后，进入利用HTML+CSS在页面中整合各种元素的阶段，即网页制作阶段。在这个阶段…本节要点安装IIS服务器制作主页面和子页面测试页面模块2综合项目|项目7“舒适家居”企业网站137.4.1环境搭建本节实现过程1/1实现步骤1安装IIS服务器（1）在Windows中找到搜索栏，输入“控制面板”，如图7-4-1所示；（2）单击“打开”按钮或按回车键，打开控制面板…2制作主页面和子页面利用HTML+CSS完成主页面和子页面的网页整合过程，具体过程见7.4.2节和7.4.3节3测试页面在页面测试中，要考虑到相关浏览器的兼容性问题，主页面和子页面已在谷歌浏览器和360浏览器中完成了测试模块2综合项目|项目7“舒适家居”企业网站|本节实现过程147.4.2制作主页面任务7.4网页制作启动SublimeText3软件，打开C:\inetpub\wwwroot下的网站unit7…本节要点网页背景制作网页内容制作HTML结构代码CSS样式代码父元素的设置语法格式position:relative/fixed;模块2综合项目|项目7“舒适家居”企业网站157.4.2制作主页面本节实现过程1/1实现步骤1网页背景制作本页设计规划：；从图7-4-9中可以看出…2网页内容制作网页内容如图7-4-10所示；按从上到下，先行后列的整合原则…代码实现▍网页背景制作position:relative/fixed;position:absolute;left:50%;margin-left:(元素宽度的一半)position:relative/fixed;display:absolute;left:50%;margin-top:(元素宽度的一半)body{background-color:#2a3a00;/*深绿色背景*/（本步其余16行见教材）▍网页内容制作.container{display:flex;width:100%;height:500px;justify-content:space-around;align-items:center;<divid="pic"><imgsrc="images/pic.jpg"alt="图片"/></div>#picimg{（本步其余16行见教材）提示：完整代码见教材代码6-2-6、代码7-4-2模块2综合项目|项目7“舒适家居”企业网站|本节实现过程167.4.3制作子页面任务7.4网页制作本项目中的网站子页面为page1.html，该页面采用的是典型的上、中、下结构，遵照网页设计与制作原则…本节要点网页背景制作网页内容制作第1行head区域技术实现第2行middle区域技术实现第3行footer区域技术实现语法格式background-color:#2a3a00;模块2综合项目|项目7“舒适家居”企业网站177.4.3制作子页面本节实现过程1/1实现步骤1网页背景制作因为本页面中内容较多，所以背景颜色设置得比较简单，为单一背景颜色…2网页内容制作网页内容如图7-4-12所示，按从上到下，先行后列的整合原则…代码实现▍网页背景制作body{background-color:#2a3a00;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;▍网页内容制作<divid="head">/*左栏：Logo区域*/<divid="logo"></d