商务网页设计与制作（第2版）课件 第24课 响应式网页制作重要技术

第6章 商务网页制作实战6.1响应式网页制作重要技术6.2响应式商务网页制作步骤6.1.1制作响应式导航栏响应式网页设计与制作对中，导航栏的制作相对复杂一些。不仅需要分别设计成横向、纵向导航栏样式，还要根据终端屏幕大小的变化自动套用哪种排列布局样式。当采用纵向导航栏样式时，应当出现导航栏图标，点击导航栏图标可以弹出或隐藏导航栏。通常，只有进入手机屏幕区间时，才切换为纵向导航栏布局，在平板屏幕区间和PC机屏幕区间均采用横向导航栏布局。响应式导航栏常见布局如图6.1所示。第6章商务网页制作实战为了快速、便捷地制作横向、纵向导航栏的样式，通常使用无序列表ul制作导航栏。制作导航栏需要定义一个导航栏容器，本范例为nav容器，然后分别制作2个导航栏样式既横向导航栏和纵向导航栏，采用@media(条件表达式)”条件语句实现屏幕尺寸与导航栏的自动适配。为了控制纵向导航栏的显示和隐藏，需要使用输入项input标签、label标签实现与ul的联动，并制作一个导航栏图标作为纵向导航栏显示隐藏的控制开关，制作要点如下：1.制作横向导航栏样式本范例基于PC机端优先的布局方案，故应当首先制作横向导航栏。在容器nav内再制作一个ul列表，将列表项的内容分别设成首页、台式计算机、笔记本电脑、支持与服务、联系我们，同时让列表项的内容承载指向不同功能模块的超链接（本示例中以空链接代替）即可。为了让列表项横向显示，需要将列表项li的display属性值设为“inline-block”，使其具有内联元素的排列特性。为了让菜单项之间有空间分隔不拥挤，可设置列表项li左边距为3-6px为宜。2.制作纵向导航栏样式纵向导航栏的制作相对复杂一点，因为纵向导航栏是为手机用户准备的。由于手机屏幕小，为了节约屏幕空间，在不使用导航栏时需要将其隐藏起来，通过点击导航栏图标来控制其显示和隐藏。为了实现这一功能，需要定义一个输入项input，类型为cheched。然后再定义一个输入项标注标签label，将label的内容设为导航栏图标，并与输入项input绑定实现联动。设置好后点击导航栏图标就相当于点击输入项，这个导航栏图标就像列表ul的控制开关，当输入项的值为cheched状态时显示ul列表（导航栏），否则隐藏该列表。然后再定义ul列表的纵向显示样式。因列表内容在制作横向导航栏中已经制作完成，故此处主要调整列表的显示外观。列表显示的位置应当确定好，显示宽度应当合适，与网页整体布局协调一致。在ul列表中，应当将列表项li的display属性值设为“block”，保证列表纵向显示。在纵向导航栏样式中，必须将display属性设为“display:none;”，其作用是将列表ul设置为隐藏，并能防止input输入项被遮挡失去开关作用。3.制作超链接及其伪类的样式超链接及其伪类的样式制作不是必须的，但能增强导航栏的显示效果，几乎所有网页的导航栏都会制作超链接及其伪类的显示样式。4.自动适配屏幕尺寸样式为了自动适配屏幕尺寸大小，主要技术点有2处：一是在头文档中通过元数据<meta>设置浏览器与手机屏幕适配，二是在CSS中使用“@media(条件表达式)”条件语句制作不同屏幕区间的显示样式。采用PC机端优先方案的屏幕适配参考示例如下：/*屏幕大于992px不予细分*/

.style1{

}

.style2{

}

.style3{

}

......

@media(max-width:992px){

/*当屏幕小于992px时，套用以下样式*/

.style1{

}

.style2{

}

.style3{

}

......

}

@media(max-width:720px){

/*当屏幕小于720px时，套用以下样式*/

.style1{

}

.style2{

}

.style3{

}

......

}

@media(max-width:480px){

/*当屏幕小于480px时，套用以下样式*/

.style1{

}

.style2{

}

.style3{

}

......

}如果采用手机端优先方案，则需使用“min-width:区间分界值”表达式，初始定义的显示样式为最小屏幕区间的样式，第一次使用“@media(条件表达式)”语句来订车第二小屏幕区间的样式，第二次使用“@media(条件表达式)”语句来定义第三小屏幕区间的样式，以此类推。采用手机端优先方案的屏幕适配参考示例如下：

/*当屏幕小于480px时屏幕不予细分*/

.style1{

}

.style2{

}

.style3{

}

......

@media(min-width:480px){

/*当屏幕大于480px时，套用以下样式*/

.style1{

}

.style2{

}

.style3{

}

......

}

@media(min-width:720px){

/*当屏幕大于720px时，套用以下样式*/

.style1{

}

.style2{

}

.style3{

}

......

}

@media(min-width:992px){

/*当屏幕大于992px时，套用以下样式*/

.style1{

}

.style2{

}

.style3{

}

......

}5.在HTML中创建导航栏在HTML主文档中创建导航栏，首先应当采用div创建一个容器，套用导航栏容器样式，完成导航栏容器的创建。如果导航栏包含在页眉中，需要在页眉容器中创建导航栏容器。然后再导航栏容器中先创建一个input输入项，类型为cheched。然后再创建一个label标识标签，将其内容设为导航栏图标，并与input输入项绑定。这时这个导航栏图标就成了控制导航栏是否显示的开关，初始状态为不显示（既在横向导航栏样式中不显示）。之后再创建ul列表，套用列表样式，创建列表项（列表项样式中display属性设成“inline-block”保证横向显示），并让列表项承载超链接，就完成了横向导航栏的制作。当屏幕小于720px（本范例的屏幕区间分界值）时，会自动套用纵向导航栏样式。此时，导航栏图标会显示出来，就像开关一样控制导航栏显示或隐藏。基于上述方法制作一个完整的响应式导航栏，采用PC机端优先布局方案。CSS样式采用外部链接形式，文件名为“nav.css”，存放在子路径CSS下面，HTML文件名称为“响应式导航栏示例.html”，存放在项目的主路径下。（具体代码内容见示例源文件）6.1.2制作BannerBanner几乎是网站不可或缺的构件之一，是网站展示公司代表性产品或服务的主要方式。Banner实际上就是动画，制作动画有以下两种主要方法。1.采用HTML+CSS方法采用HTML+CSS技术制作动画，首先要采用CSS技术完成相关样式的制作，然后采用HTML技术完成动画创作。这种制作方法相对简洁高效，无需掌握动画制作工具，程序员即可自行完成制作。这种方法需要掌握animation属性和@keyframes命令的使用，制作步骤如下：第一步：制作Banner容器样式按照布局要求，定义Banner容器，宽度通常设备100%，高度可设成百分比或固定像素值如45%、360px等。Banner容器应当设置其显示次序值，必须低于导航栏的显示次序值，以防止其遮挡导航栏。第二步：制作动画播放容器样式在Banner容器中定义一个动画播放的弹性容器。本范例采用横向滑动广告条，所以宽度定义为3幅图像的总宽度，按照每幅图像100%的宽度计算，总宽度为300%，该容器的高度应与Banner容器高度保持一致。同时还应设置overflow属性值为“hidden”，将超出容器边界的图像隐藏起来，不影响整体播放效果。制作动画容器时必须将该容器定义为弹性容器，主轴为横轴，不折行，以确保3幅图像前后相接不串行，这是制作动画的关键点。最后采用animation属性指向动画名称（由@keyframes命令创建），定义每轮动画播放时间以及是否连续播放等属性值。第三步：定义图像显示样式在动画播放容器中定义图像的显示样式，其宽度与高度应与Banner容器的值一致。第四步：制作动画播放动作样式以上3个步骤主要解决动画播放的容器以及显示尺寸，既动画在哪里播放、尺寸大小、图像大小等静态属性，本步骤制作动画播放具体动作。制作动画播放动作需要使用CSS中的@keyframes命令，使用该命令创建动画名称（与第三步animation属性指向的动画名称保持一致），同时定义一轮动画播放的进度，通常以百分比的形式来定义。动画通常选择从左向右滑动，或者从右向左滑动。上下滑动方式较难控制图片占位，初学者不建议采用。第五步：在HTML主文档中创建Banner在HTML主文档中创建Banner。首先采用div创建一同容器，套用Banner容器样式，完成Banner容器的创建；然后在Banner容器里面再用div创建一个容器，套用动画播放弹性容器样式，完成动画播放弹性容器的创建，并在动画播放容器中装入需要播放的几幅图像，套用img标签选择符样式，就完成了Banner的制作过程。2.采用动画制作工具方法采用动画制作工具，制作GIF动画，在网页中正常以图像标签的形式放在网页中即可。这种方法对编写网页代码而言特别简单，但需要掌握动画制作工具的使用方法。将需要制作动画的图像导入动画制作工具中，按照动画工具提供的动画合作方式，进行调试制作，最后导出gif格式的动画图形文件，完成Banner制作。6.2响应式商务网页制作步骤商务网页制作是一项综合性的工作，设计与制作过程中，涉及美术、音乐、计算机等方面的知识，应当因地制宜制定好工作步骤。6.2.1图像准备与网页图像制作按照网页宣传的产品准备图像制作元素，包括产品、道具、模特、摄像师、摄像场所等，精心拍照，选取合适的照片进行编辑处理，适合网站上使用。6.2.2响应式网页布局设计首先进行弹性页面的适配。根据多数用户的应用场景和使用习惯，对终端用户的屏幕尺寸分为几个屏幕区间，决定采用PC端优先或手机端优先的布局方案。本范例将屏幕分为PC机、平板、手机共3个屏幕区间，确定PC机屏幕宽度以1280像素代表、平板以992像素为代表、手机以720像素为代表，根据这些宽度值分别设计3种布局方案。然后进行响应式网页布局设计。一是认真分析网站的主要功能，并以此进行页面布局设计；二是按照响应式网页的设计要求，对网页功能进一步模块化，制定排列顺序和流式布局排列变化规则，适应流式布局的需要；三是根据营销特点和产品特点，进行网页创意设计，确定网页风格和配色。大部分企业网站营销的产品较少，更应当注意图像在布局中的作用。并根据图像的颜色确定网页配色，保证背景图像、产品图像、网页配色的视觉效果相协调。1．页面整体布局设计该公司产品较少，有两大系列6个子品牌，建设网站的主要目的是宣传公司产品，提供在线销售、技术支持与服务、联系方式等功能。综合考虑，选择典型的四层显示区域布局方案。考虑到响应式设计需要，将页眉区和导航栏区合并，在屏幕的最顶端布局页眉和导航栏内容，并将页眉做漂浮效果处理，不受网页其它内容的影响。

其中，各个区域还可根据网站建设内容和排版的需要细分为若干小的区域；页眉区和导航栏区可以合并，Banner区、主题内容区和页脚区较少合并。下面我们以“云之雷科技有限公司”的网站为例，确定该网站的布局及配色。2．创意设计因为该公司生产的是计算机产品，需要营造科技感，故主题颜色以沉稳高贵的灰色为主，背景颜色以淡灰色为主色调。文字以黑色为主，灰色、白色为辅。页眉设置半透明深灰色，Logo为白色，公司名称为微软雅黑字体，白色文本，导航栏为白色文本，幼圆字体。超链接光标悬停时显示粉色、倾斜、放大字体，带有动感。Banner的3幅广告分别以黑灰色、绿色、深红色为主颜色，代表商务、节能、性能3个鲜明的技术特点，烘托产品。文档标题以微软雅黑、黑体为主，文本字号加大、倾斜，小时效果醒目。一般文字均为幼圆字体，网页显示效果比较柔和。页脚区：为黑色、5号的黑体字。3.流式布局设计因应响应式网页设计的需要，网页主功能区必须进行模块化设计，而且适合流式布局需要。为此，需要将一些相近的功能设计成一种风格或相近的风格、尺寸相同，当浏览设备屏幕尺寸变化后，可以很好地流动，自动形成新的布局方案，无需通过代码调整。流式布局中，主内容区通常设置1个总容器即可，内装各个模块，根据终端设备屏幕的宽度自动重新组合排版（可通过调整浏览器窗口宽度模拟屏幕尺寸变化），就好像各个模块在容器箱体内流动一样。各个模块可以根据其内部内容的特点确定是否设立二级弹性容器，弹性容器可以多层嵌套。按照PC机优先的布局方案，应当事先做好PC机端的页面布局，其次做好平板端的页面布局，最后做好手机端的页面布局。各个屏幕区间的功能主页设计效果见图6.5。6.2.3网页主要构件设计制作功能主页的主要构件有以下几个：页眉、主内容区和页脚三个组成部分。1．制作页眉本范例中页眉采用当前比较流行的布局风格，背景色为半透明深灰色，做成漂浮效果，固定在屏幕最顶端，以半透明的形态漂浮在其它内容至上，不独占屏幕空间。页眉内容包括公司Logo、公司名称，以及导航栏。制作响应式、漂浮式的页眉，应当定义一个漂浮式弹性容器，position设为fixed，宽度定义为100%，高度以固定高度为宜，建议在50-60像素之间选定高度。公司Logo、公司名称标识通常靠左显示，导航栏靠右显示。所以，弹性容器应当设置为横轴为主轴、不折行、子元素按照两端对齐方式排列。其中，公司Logo、公司名称标识应当封装在一个企业标识div中，导航栏封装在nav中。应响应式布局的需要，页眉中各元素的尺寸大小等显示样式会随屏幕区间变化而变化。页眉布局见图6.6所示。（1）制作公司Logo和公司名称标识公司名称为云之雷科技有限公司，公司的产品以速度快著称，快如闪电，所以logo融入闪电元素。因其放在页眉区灰色区域，故其做成透明背景格式，图形为白色。因为云之雷科技有限公司不是著名企业，社会公众对其Logo并不了解甚至从未见过，故不能简单以Logo代表企业，应当制作醒目的公司名称的文字标识，以加深浏览者对公司的印象。公司名称标识可以做成精美的文字图片形式（透明背景格式），可也可以采用文本元素加以修饰达到较好效果。本范例采用文本修饰的方法制作公司标识，字体为微软雅黑、36像素大小、白色文字，放在灰色页眉区内。公司Logo和名称标识做好后，建议封装在一个div中以更好适应屏幕布局需要，布局效果见图6.3左侧部分。根据响应式网页设计要求，公司Logo和公司名称标识应当按照不同的屏幕尺寸区间，设置不同的显示大小，满足响应式网页制作要求。（2）制作响应式导航栏本范例导航栏有：首页、台式计算机、笔记本电脑、支持与服务、联系我们5个栏目，采用PC机端优先布局方案，按照992px以上、992px-720px、720px以下三个屏幕区间进行设计制作。当屏幕尺寸大于992px时，采用横向导航栏样式，字号最大；当屏幕尺寸在992px-720px之间时，也采用横向导航栏样式，但字号可根据美观需要适当变小；当屏幕尺寸小于720px时，采用纵向导航栏样式，字号再变小一些。横向导航栏和纵向导航栏的显示效果如图6.1所示。2．制作主内容区的网页内容本范例中，主内容区包括Banner和模块化内容两个区域，需要分别制作两个弹性容器来布局Banner和模块化内容。（1）制作BannerBanner是公司最重要的广告区，应当把产品最靓丽的一面展现出来。该公司以商务、节能、性能为3大特色，故分别选择3种机型的代表图片加工制作，最后合成动画。为了保证Banner的效果，应由几幅图像合成。本范例采用3幅图像制作Banner，3幅Banner图像见图6.7所示。（2）制作展示图像功能主页通常会有代表性商品的展示功能，我们配合营销方案，对具有代表性商品的图像进行再次筛选，选出几张适合在功能主页进行展示的图像，并根据整体布局要求和营销展示要求，将图像进一步裁切、美化，使其适合在网页上展示。本例展示图像包括：促销图像、台式计算机的代表机型图像和笔记本电脑的代表机型图像。如图6.8、图6.9和图6.10所示。（3）制作模块化内容模块化设计是流式布局的提前。模块化设计既要考虑页面的整体效果协调，还要考虑重点内容突出，更要考虑流式布局的需要。3．制作页脚页脚内容相对简单，也建议设立一个弹性容器，将相关内容装在其中。6.2.4功能主页效果图制作本范例是响应式网页设计与制作，并采用PC机端优先方案，故以电脑端的布局为基准，兼顾平板端、手机端的应用场景。采用Excel，将功能主页的各个构件进行布局，制作功能主页草图（见图6.11）。在此基础上，再用Photoshop等工具，制作出精美的效果图，同时修正草图中比例不合理、配色不合理的地方，对图像做进一步美化处理，一些图像需要做成透明背景格式。6.2.5图像切片一个网页往往会有尺寸较大的图像，如背景图。如果不拆分成各个小图像，会影响显示速度。同时基于网页布局的要求，局部图像需要添加超链接等。所以，效果图必须分割成各个小图像。图像切片是指把已经做好的网页整体图像，按照网页布局设计的要求和尺寸，裁切成的若干个小图像。各个切片的尺寸必须精准测量并记录好，可利用草图标注尺寸。图像切片的尺寸是精准的，是实现网页图像精准嵌入的保证。在一些需要精确控制图片显示的网页中，制作图像切片是最佳选择。图像切片常用于功能主页以及以图像为主要内容的子网页。并不是所有的网页均需要制作图像切片。图像切片可以借助Photoshop等图像处理工具进行制作，以提高制作效率。随着移动互联网广泛普及应用，以及响应式网站的应用，图像切片的作用日趋减弱。6.2.6采用HTML+CSS制作响应式网页第一步：制作欢迎主页HTML文件。文