（本科）第6章 综合案例ppt课件.pptx

课程主讲人：第6章 综合案例第6章综合案例设计网页效果图 利用模板制作子页面 网站规划 制作首页 HTML 学习目标熟悉了解了解熟悉制作首页和利用模板制作子页面12了解网站规划，能够了解网站规划的基本内容了解设计网页效果图和切图3从本章开始我们将逐步深入的讲解网站综合案例的制作。通过前面章节的学习，我们掌握了静态网页制作的基本知识，但如果要整体设计一个网站，还需要把以前学习的内容综合运用，本章我们就设计制作一个综合案例，包括网站规划、网页效果图设计、切图、网页首页和子页面的制作等知识。章节概要 目录6.16.1网站规划点击查看本小节知识架构6.26.2设计网页效果图6.36.3切图6.46.4建立站点 目录6.56.5制作首页点击查看本小节知识架构6.66.6制作网页模板6.76.7利用模板制作子页面点击查看本小节知识架构 知识架构6.1 网站规划6.1.1确定网站主题6.1.2规划网站结构6.1.3准备网站素材 知识架构6.5 制作首页6.5.1首页效果图分析6.5.2搭建首页 知识架构6.7 利用模板制作子页面6.7.1制作新品发布页面6.7.2制作新闻列表页面6.1 网站规划6.1.1 确定网站主题企业类网站的设计要符合企业的文化，要从企业的业务领域特点和消费群体进行定位。本章的综合案例是设计一个服装设计企业的网站，目的是让网站成为企业的网络名片，展示企业信息，和访问者在网站上互动交流。1、网站定位6.1 网站规划6.1.1 确定网站主题本章的综合案例网站采用扁平化设计风格，界面简洁，各网站模块布局合理，由于是企业类网站，所以一些网站模块是必须的，比如LOGO、导航栏、banner、公司介绍、新闻列表、产品展示、底部版权信息等，这些模块通过不同的色调、布局进行区分。设计上尽量让访问者一目了然，体现了网站的易用性。2、网站风格6.1 网站规划6.1.1 确定网站主题网站采用的颜色不用太多，本网站采用了两种主色调：酒红色#a62020和深灰色4d4646。酒红色代表高贵、经典和优雅，和深灰色搭配，使整个网站不失时尚、典雅。3、网站配色6.1 网站规划6.1.2 规划网站结构网站结构的规划包括策划网站各页面的内容及层次关系，要提炼网站的基本内容，把重要的内容做成页面，本章综合案例是一个企业网站，包括首页和两个子页面，分别是新品发布页面和新闻动态页面，各页面通过导航栏中的超链接互相访问。网站结构规划完成后，可以用笔纸或Axure、Balsamiq Mockups等原型工具软件绘制出网站各网页的原型图，有助于网页中各模块的布局。6.1 网站规划6.1.3 准备网站素材文字素材可以根据自己网站的定位撰写，也可以从网络等渠道搜集公开资料并进行加工，准备好的文字素材可以先用文本文件保存，以便在设计网页时使用。要根据网站各页面的需求准备相应的文字素材，页面中的文字不能太多，不然会让访问者觉得枯燥乏味。1、文字素材6.1 网站规划6.1.3 准备网站素材图片素材可以用图像处理软件，比如Photoshop、Illustrator等自己设计，也可以在互联网中搜寻公开的图片进行再创作。搜集到的图片素材可以存放在文件夹中，合理给每个图片命名，比如做背景的图片可以命名为bg.jpg等，避免文件名太乱影响工作效率。图片的尺寸也要根据设计需要来调整，比如网页中需要一张宽400像素、高300像素的图片，那么尽量将图片素材用图像处理软件调整成该尺寸后再插入网页中，避免把一张很大尺寸的图片不经过尺寸调整直接作为小图插入网页中，因为图片尺寸越大，那么该图片存储时所占用的空间越大，意味着打开网页需要传输的数据越多，会影响网页打开的速度。图片有很多种格式，每种格式有各自的特点，要根据需要来选择相应格式，比如经常作为logo的图片要求背景透明，这时候要选择图片文件后缀名为.gif或.png格式的图片，而一般的图片选择.jpg或.png都可以。2、图片素材6.1 网站规划6.1.3 准备网站素材网页中的多媒体素材一般是指视频、音频、动画等，可以原创设计，比如拍摄视频后使用会声会影等视频软件进行处理，或者录制音频后使用Audition等音频处理软件进行编辑，也可以从互联网上搜集公开的音视频资料，然后进行再次编辑创作，比如使用格式工厂等软件进行视频格式转换或视频裁剪或使用一些音频软件进行音频提取、裁剪等操作，以获得满足自己要求的音视频素材。一般来说，网页中的音视频文件不宜太大，不然会影响网页加载速度。网页中动画素材可以通过Flash等软件设计创作或从互联网下载公开素材，动画文件的后缀名为.swf。当然，也可以利用CSS中的Animation动画属性制作所需的动画效果。3、多媒体素材6.2 设计网页效果图在经过前面网站规划和素材准备工作后，为了让最终制作的网页更美观，一般要先设计网页效果图。网页效果图设计是网站项目开发中非常重要的一环。通过效果图，可以把自己想展示的内容以图像的方式表现出来，因此效果图设计阶段是网站开发中很重要的阶段，往往要占据网站开发时间的三分之一以上。实际网站开发中，设计师根据前期掌握的客户需求使用Photoshop、Illustrator等图像处理软件制作出网页效果图，即网页最终的呈现效果，然后和客户进行沟通交流，反复修改，最终确定展示效果，然后网站前台人员以效果图为模型，使用Adobe Dreamweaver、Sublime Text等网页制作软件搭建成真正的网站。6.2 设计网页效果图首页6.2 设计网页效果图新品展示页面6.2 设计网页效果图新闻列表页面6.3 切图切图是指将网页中不能用编码实现的内容剪切下来并保存成图片文件，在设计时插入网页或作为图片背景使用。网页切图的原则是：能用CSS实现的效果尽量不切图，采用编码实现，因为图片反而会让网页在浏览器中的加载速度变慢，另外，只要能实现网页效果，尽量切出最小的图来实现，比如一个渐变背景效果，通常不用切出整个背景图，只需要切取其中1像素宽度的图片，然后采用CSS中的背景平铺来实现整个背景效果。常用的切图工具有Adobe Photoshop和Adobe Fireworks，下面我们以Adobe Photoshop CC为例介绍网页的切图操作。6.3 切图（1） 设置参考线启动Adobe Photoshop CC，打开需要切图的首页效果图，选择“视图”菜单，点击“标尺”， 如图6-4所示，将在编辑窗口的左侧和上方显示出标尺。然后选择移动工具，分别在左侧和上侧的标尺处按住鼠标左键并拖拽，拉出水平和垂直的参考线，把需要切图的部分框起来，如图6-5所示。为了选择准确，可以将图片放大。6.3 切图（2） 绘制切片在工具箱中选择切片工具，如图6-6所示，并使用切片工具在切图区域划出切片，如图6-7所示。6.3 切图（2） 导出切片选择“文件”菜单，点击“存储为Web所用格式”，如图6-8所示。在弹出的对话框中的下拉选项中选择导出图片的存储格式，如“JPEG”，如图6-9所示。单击“存储”按钮，打开“将优化结果存储为”对话框，修改保存的文件名，并在“格式”项选择“仅限图像”，在“切片”项选择“所有用户切片”，如图6-10所示，单击“保存”按钮，切片就在本地存为图片。6.4 建立站点网站文件夹里面一般包含一些子文件夹，分别用来存放不同类别的文件，比如images文件夹存放、css文件夹存放样式文件、video文件存放视频文件、fonts文件夹存放字体文件等。本章案例在D盘建立了一个网站文件夹，名为chapter6，在里面再建立了images和css文件夹，分别用来存放网站中用到的图片和样式文件，网站的首页命名为index.html，子页面分别命名为sub1.html和sub2.html，样式文件命名为style.css，存放在css文件夹中。1、建立网站文件夹6.4 建立站点打开Adobe Dreamweaver软件，选择“站点-新建站点”，在弹出的对话框中输入站点名称，单击“浏览文件夹”图标，选择D盘的网站文件夹，如图6-11所示。设置完成后，单击“保存”按钮，在右下角“文件”面板中可以看到网站所有的文件和文件夹，双击某个文件即可打开编辑，如图6-12所示。2、建立站点6.5 首页制作6.5.1 首页效果图分析首页从结构上分析，首先有个版心，里面从上到下，依次包含头部、导航栏、大图、主体内容、新品展示和底部，其中头部包含左侧的logo标志和右侧导航，内容内容部分又包括左中右三部分，分别是公司简介、新闻动态和联系我们，如图6-13所示，各模块编码时对应的命名如表6-1所示。1、HTML内容结构分析模块模块命名命名模块模块命名命名版心版心container主体内容main头部头部header公司简介about头部头部logologo新闻动态news头部导航头部导航topnav联系我们contact导航栏导航栏nav新品展示product广告大图广告大图banner底部footer6.5 首页制作6.5.1 首页效果图分析从首页效果图分析可以看出，首页版心的宽度为1000像素，头部、导航栏、广告大图、主体内容、新品发布、底部等模块宽度和版心相同，也是1000像素，具体首页的布局如图6-14所示。2、CSS样式分析6.5 首页制作6.5.2 搭建首页新建文件index.html，生成HTML架构后，按照从上到下的原则，依次布局各个模块，完成首页的总体布局。1、页面布局6.5 首页制作6.5.2 搭建首页不同的浏览器对HTML相同标签可能有不同的默认样式，会导致兼容问题发生，可以在CSS文件中进行初始化避免这些问题。在CSS文件夹中新建样式文件style.css，编写全局公共样式。2、定义全局公共样式6.5 首页制作6.5.2 搭建首页网页的版心相当于一个大容器，把网页的其他部分包含在里面，要实现网页在浏览器里水平居中，只需要把版心设置为居中即可。版心就是一个盒子，通常使用DIV标签，本案例版心命名为container，网页其他的HTML标签都放在版心里面。一般来说，版心的尺寸就是网页主体的尺寸，版心在浏览器中水平居中。3、插入版心6.5 首页制作6.5.2 搭建首页首页的头部是一个名为header的DIV盒子，里面左侧有一个名为logo的DIV盒子，右侧是一个名为topnav的盒子，首先搭建HTML结构，打开index.html文件编写HTML编码，然后打开style.css编写样式。4、制作首页头部6.5 首页制作6.5.2 搭建首页导航栏是一个名为nav的DIV盒子，里面是一些超链接文字，鼠标移上去会有效果变化。首先编写HTML结构，打开index.html文件，在其中编写代码。再打开style.css文件，编写CSS样式。5、制作导航栏6.5 首页制作6.5.2 搭建首页广告大图banner部分是一个名为banner的div盒子，里面插入一张图片。首先编写结构，打开index.html文件进行编码。6、制作banner6.5 首页制作6.5.2 搭建首页在首页主体部分先插入一个名为main的div盒子，在其中从左到右依次插入名为about、news和contact的三个div盒子。打开index.html文件，编写结构。再打开style.css文件，编写CSS样式。7、制作主体内容6.5 首页制作6.5.2 搭建首页在新品展示部分先插入一个名为product的div盒子，利用无序列表标签实现产品的展示效果。打开index.html文件，编写结构。再打开style.css文件，编写CSS样式。8、制作新品展示部分6.5 首页制作6.5.2 搭建首页在底部先插入一个名为footer的div盒子，输入版权信息文字，©代表版权符号。打开index.html文件，编写结构。再打开style.css文件，编写CSS样式。9、制作底部6.6 制作网页模板一个网站包含首页和若干子页面，这些页面的风格基本一致，都有很多相同的部分，比如网页的头部、导航栏和底部等内容都相同，这时候就不需要每一个页面都从空白开始制作，而是可以采用模板生成新的页面，这样不仅可以提高网站开发的工作效率，还能保证页面风格的一致性。Adobe Dreamweaver软件提供了制作网页模板的功能，我们可以利用已经制作完成的首页来做成模板，模板里包括可编辑区域和不可编辑区域，把相同内容部分设置为不可编辑区域，把需要改变的部分设为可编辑区域，这样可快速制作出子页面。6.6 制作网页模板打开Adobe Dreamweaver软件，在“文件”面板中选择站点chapter6，双击index.html文件，选择菜单“文件-另存为模板”，在弹出的对话框中输入模板名称template，如图6-20所示，单击“保存”按钮创建一个模板文件。1、新建模板6.6 制作网页模板删除原来页面中需要更改部分的内容，比如banner，选中banner标签，单击鼠标右键，选择“模板-新建可编辑区域”命令。2、创建可编辑区域6.7 利用模板制作子页面6.7.1 制作新品发布页面启动Adobe Dreamweaver软件，选择菜单“文件-新建”命令，在打开的“新建文档”对话框中选择“模板中的页”，可以看到上一节创建的模板文件，单击“创建”按钮，创建一个网页，保存为sub1.html。在可编辑区域r1处编写HTML代码。再打开style.css文件，编写样式。6.7 利用模板制作子页面6.7.2 制作新闻列表页面启动Adobe Dreamweaver软件，选择菜单“文件-新建”命令，在打开的“新建文档”对话框中选择“模板中的页”，可以看到上一节创建的模板文件，单击“创建”按钮，创建一个网页，保存为sub2.html。在可编辑区域r1处编写HTML代码。再打开style.css文件，编写样式。本章通过一个综合案例介绍了设计一个网站的总体过程，包括确定网站主题、搜集网站素材、设计网页效果图、切图、建立站点、首页制作、制作网页模板和利用模板制作子页面等内容。通过本章的学习，读者能理解网站设计的步骤，掌握网站设计过程中各个环节的基本操作，能根据实际需求制作出符合要求的网站。本章小结