商务网页第24课.pptx

6.1.4 首页效果图像制作采用Excel，将首页的各个构件进行布局，制作首页草图（见图6.12）。在此基础上，再用Photoshop等工具，制作出精美的效果图，同时修正草图中比例不合理、配色不合理的地方，对图片做进一步美化处理，一些图片需要做成透明背景色。制作效果图时，应当首先设定好显示屏幕的分辨率，如1024像素×768像素、1366像素×768像素、1600像素×900像素等，并按照1:1的比例制作，以防出现比例偏差。6.1.5 图像切片一个网页往往有尺寸较大的图片，如背景图。如果不拆分成各个小图片，会影响显示速度。同时基于网页布局的要求，局部图像需要添加超链接等。所以，效果图必须分割成各个小图片。图像切片是指把已经做好的网页整体图像，按照网页布局设计的要求和尺寸，裁切成的若干个小图片。各个切片的尺寸必须精准测量并记载好，可利用草图标注尺寸。图像切片的尺寸是精准的，是实现网页图像精准嵌入的保证。在一些需要精确控制图片显示的网页中，制作图像切片是最佳选择。图像切片常用于首页以及以图像显示为重要特征的重要的子网页。并不是所有的网页均需要制作图像切片。制作图像切片可以借助Photoshop等图像处理工具进行制作，以提高制作效率。6.1.6 采用HTML+CSS制作首页 制作主页的框架文件，文件名为index.html。按照布局需要，建立3个网页框架，框架名称分别为top、menu、main，按照图像切片的高度要求，定义好框架的高度，框架的边框必须是“0”。 简单制作3个主页构成网页，即top.html、menu.html、main.html，分别与框架对应。 详细设计制作第二步中的3个网页，实现相应的功能。 按照导航栏的内容制作相应的子网页。本例中，导航栏有6个，其中“首页”链接的是main.html，再制作4个网页分别对应“暑期促销”“笔记本系列”“台式机系列”“技术与服务”“联系我们”这5个导航栏代表的功能，并建立好链接。 将导航栏与主题内容区建立链接关联。当单击导航栏时，在主体内容区显示相应的内容（通过target=main指定目标网页在“main”框架中打开）。6.1.7 设计制作子网页本案例至少包括暑期促销、笔记本电脑系列、台式机系列、技术与服务、联系我们5个子网页，应当采用与首页相同的风格、配色方案。子网页的规划设计与制作步骤同首页，同样需要经过图像准备、网页规划布局与配色、网页主要构件制作、网页效果图像制作、图像切片、采用HTML+CSS进行子网页制作这6个步骤。thank you