《电子商务实训》课件项目三 网店装修

Contents目录01装修网店02店铺招牌的设计与制作03店铺广告的设计与制作04动态店招的设计与制作05商品详细描述06常用的网页制作技术●了解LOGO的相关知识和代表的意义。●了解店标设计的过程和方法。●了解店铺招牌的制作方法。●了解店铺广告的制作方法。●学习如何进行商品描述。●掌握店标的制作方法。●掌握店铺招牌的制作方法。●掌握店铺广告的制作方法。●掌握商品描述的方法。※知识目标※技能目标三维目标●让学生具备一定的审美能力,具有颜色搭配、整体布局的能力。●在装修店铺过程中,具备搜寻资料、独立解决问题的能力。●在装修分工上,学会团结合作,形成围绕同一个目标共同努力的理念。※情感目标任务一装修网店任务导入LOGO是徽标或者商标的英文说法,起到对徽标所属公司的识别和推广的作用,形象的LOGO可以让消费者记住公司主体和品牌文化。我们如何来设计符合自己店铺的LOGO呢?工作流程在店铺装修过程中,首先要确定整体的风格,制作好店标、店铺招牌和广告,同时要做好商品的拍摄和处理,并进行相关的描述。在资料准备齐全的前提下,进行资料的上传。流程图如图所示。任务一装修网店知识储备1.Fireworks简介Fireworks是第一个完全为网店页面制作者设计的软件。作为一个图像处理软件,Fireworks能够自由地导入各种图像(如Macintosh的PICT、FreeHand,Illustrator,CorelDraw8的矢量文件、Photoshop文件、GIF、JPEG、BMP、TIFF等),甚至是ASCII的文本文件,而且Fireworks可以辨认矢量文件中的绝大部分标记以及Photoshop文件的层。作为一款为网络设计而开发的图像处理软件,Fireworks除了能够自动切图、生成鼠标动态感应的JavaScript外,还具有十分强大的动画功能和几乎完美的网络图像生成器(Export)功能。2.LOGO的国际标准网络中的LOGO徽标主要是各个网站用来与其他网站链接的图形标志,代表一个网站或网站的一个板块。为了便于在Internet上进行信息传播,形成了统一的LOGO国际标准。其中关于网站的LOGO,目前有四种规格(如表3—1所示):LOGO的四种规格知识储备3.常见颜色代表的意义红色,最引人注目的色彩,具有强烈的感染力,象征热情、喜庆、幸福,另一方面又象征警觉、危险。黄色是阳光的色彩,象征光明、希望、高贵、愉快。浅黄色表示柔弱,灰黄色表示病态。蓝色是天空的色彩,象征和平、安静、纯洁、理智,另一方面又有消极、冷淡、保守等意味。绿色是植物的色彩,象征着平静与安全,带灰褐的绿色则象征着衰老和终止。橙色,是所有色彩中最温暖的色彩。橙色象征快乐、健康、勇敢。紫色象征优美、高贵、尊严,另一方面又有孤独、神秘等意味。序号LOGO规格备注188×31互联网上最普遍的LOGO规格2120×60用于一般大小的LOGO规格3120×90用于大型的LOGO规格4200×70这种规格LOGO也已经出现任务一装修网店知识储备4.图像格式类型(1)有损压缩。有损压缩可以减少图像在内存和磁盘中占用的空间,在屏幕上观看图像时,不会发现它对图像的外观产生太大的不利影响。因为人的眼睛对光线比较敏感,光线对景物的作用比颜色的作用更为重要,这就是有损压缩技术的基本依据。有损压缩的特点是保持颜色的逐渐变化,删除图像中颜色的突然变化。生物学中的大量实验证明,人类大脑会利用与附近最接近的颜色来填补所丢失的颜色。例如,对于蓝色天空背景上的一朵白云,有损压缩的方法就是删除图像中景物边缘的某些颜色部分,当在屏幕上看这幅图时,大脑会利用在景物上看到的颜色填补所丢失的颜色部分。有损压缩技术使某些数据被有意地删除了,且不可再恢复。(2)无损压缩。无损压缩的基本原理是相同的颜色信息只需保存一次。压缩图像的软件首先会确定图像中哪些区域是相同的,哪些是不同的。包括了重复数据的图像(如蓝天)就可以被压缩,只有蓝天的起始点和终结点需要被记录下来。但是蓝色可能还会有不同的深浅,天空有时也可能被树木、山峰或其他的对象掩盖,这些就需要另外记录。任务一装修网店知识储备从本质上看,无损压缩的方法可以删除一些重复数据,大大减小要在磁盘上保存的图像尺寸。但是,无损压缩的方法并不能减少图像的内存占用量,这是因为,当从磁盘上读取图像时,软件又会把丢失的像素用适当的颜色信息填充进来。如果要减少图像占用内存的容量,就必须使用有损压缩方法。无损压缩方法的优点是能够比较好地保存图像的质量,但是相对来说这种方法的压缩率比较低。如果需要把图像用高分辨率的打印机打印出来,最好使用无损压缩。几乎所有的图像文件都采用各自简化的格式名作为文件扩展名,从扩展名就可知道这幅图像是按什么格式存储的,应该用什么样的软件去读写等。5.五种图像文件格式(1)BMP图像文件格式。BMP是一种与硬件设备无关的图像文件格式,使用非常广泛。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。BMP文件的图像深度可选1bit、4bit、8bit及24bit。BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。任务一装修网店知识储备5.五种图像文件格式由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准,因此在Windows环境中运行的图形图像软件都支持BMP图像格式。典型的BMP图像文件由四部分组成:位图文件头数据结构,它包含BMP图像文件的类型、显示内容等信息;位图信息数据结构,它包含有BMP图像的宽、高、压缩方法,以及定义颜色等信息;颜色信息,它包含若干个表项,每个表项是一个RGBQUAD类型的结构,定义一种颜色;图形数据,它记录了位图的每一个像素值或该对应像素的颜色表的索引值。(2)GIF文件格式。

GIF(GraphicsInterchangeFormat)的原意是“图像互换格式”,是CompuServe公司在1987年开发的图像文件格式。GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右,它不属于任何应用程序。目前几乎所有相关软件都支持它,公共领域有大量的软件在使用GIF图像文件。任务一装修网店知识储备GIF图像文件的数据是经过压缩的,而且是采用了可变长度等压缩算法。所以GIF的图像深度从1bit到8bit,即GIF最多支持256种色彩的图像。GIF格式的另一个特点是在一个GIF文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。GIF解码较快,因为采用隔行存放的GIF图像,在边解码边显示的时候可分成四遍扫描。第一遍扫描虽然只显示了整个图像的八分之一,第二遍的扫描后也只显示了1/4,但这已经把整幅图像的概貌显示出来了。在显示GIF图像时,隔行存放的图像的显示速度看起来似乎要比其他图像快一些,这是隔行存放的优点。(3)PSD文件格式。这是Photoshop图像处理软件的专用文件格式,文件扩展名是“.psd”,可以支持图层、通道、蒙版和不同色彩模式的各种图像特征,是一种非压缩的原始文件保存格式。扫描仪不能直接生成该种格式的文件。PSD文件有时容量会很大,但由于可以保留所有原始信息,在图像处理中对于尚未制作完成的图像,选用PSD格式保存是最佳的选择。任务一装修网店知识储备(4)PNG图像文件格式。

PNG(PortableNetworkGraphics)的原名称为“可移植性网络图像”,是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供24位和48位真彩色图像支持以及其他诸多技术性支持。由于PNG非常新,所以目前并不是所有的程序都可以用它来存储图像文件,但Photoshop可以处理PNG图像文件,也可以用PNG图像文件格式存储。(5)JPEG文件格式。JPEG是JointPhotographicExpertsGroup(联合图像专家组)的缩写,文件后缀名为“.jpg”或“.jpeg”,是最常用的图像文件格式,由一个软件开发联合会组织制定,是一种有损压缩格式,能够将图像压缩在很小的储存空间,图像中重复或不重要的资料会被删除,因此容易造成图像数据的损伤。尤其是使用过高的压缩比例,将使最终解压缩后恢复的图像质量明显降低,如果追求高品质图像,不宜采用过高压缩比例。但是JPEG压缩技术十分先进,它用有损压缩方式去除冗余的图像数据,在获得极高的压缩率的同时能展现十分丰富生动的图像,换句话说,就是可以用最少的磁盘空间得到较好的图像品质。任务一装修网店知识储备而且JPEG是一种很灵活的格式,具有调节图像质量的功能,允许用不同的压缩比例对文件进行压缩,支持多种压缩级别,压缩比率通常在10∶1到40∶1之间,压缩比越大,品质就越低;相反的,压缩比越小,品质就越好。比如可以把1.37MB的BMP位图文件压缩至20.3KB。当然也可以在图像质量和文件尺寸之间找到平衡点。JPEG格式压缩的主要是高频信息,对色彩的信息保留较好,适合应用于互联网,可减少图像的传输时间,可以支持24bit真彩色,也普遍应用于需要连续色调的图像。JPEG格式是目前网络上最流行的图像格式,是可以把文件压缩到最小的格式,在Photoshop软件中以JPEG格式储存时,提供11级压缩级别,以0~10级表示。其中0级压缩比最高,图像品质最差。即使采用细节几乎无损的10级质量保存,压缩比也可达5∶1。以BMP格式保存时得到4.28MB图像文件,在采用JPG格式保存时,其文件仅为178KB,压缩比达到24∶1。经过多次比较,采用第8级压缩为存储空间与图像质量兼得的最佳级别。JPEG格式的应用非常广泛,在网络和光盘读物上,都能找到它的身影。目前各类浏览器均支持JPEG这种图像格式,因为JPEG格式的文件尺寸较小,下载速度快。任务一装修网店岗位资讯店铺装修属于图形图像设计师的工作,设计师要求有一定的审美能力、构图能力及整体布局方面的能力,具体要求如下:(1)具有清晰的思路,知道店铺的特色与适合的风格;(2)具有多种店铺装修风格的设计能力;(3)熟练掌握图形图像设计软件Photoshop、Fireworks;(4)良好的沟通能力,动手能力强,做事主动、积极,有团队合作精神;(5)具备良好的艺术美感和创意性,有较强的审美能力与视觉效果表现能力。任务一装修网店任务实施1.店标的设计与制作店标作为店铺标识符号,反映着民族、国家、地域等不同的特征。从店标的演变过程可以看到店标艺术风格、特点的变化。店标设计的信息化、视觉化、现代化是当前的世界潮流,一个优秀的店标需要很好的创意和艺术家的妙手才能够打造出来。店标也叫店标图片,是网店形象识别系统的重要组成元素之一,是网店特色和内涵的集中体现,也是网店形象识别系统最直接的表现。店标是店铺的标志,一个好的店标图片可以让消费者浏览网店时体会到店主的良苦用心,从而会对网店产生比较深刻的印象,这样就增加了交易的可能性。店标的首要任务就是向消费者传达店铺信息,最终目的就是让消费者记住自己的网店,使网店区别于其他网店。任务一装修网店任务实施店标设计借鉴和运用原始符号,并赋予原始符号以更高的艺术高度。现代店标设计是人类文明高容量的载体,是人类文化的缩影。纵观历史,从原始社会的记号到图腾,从商周的象形符号到秦汉的印章,再从唐宋的幌子到明清的洋化店标,店标的变化无不体现了当时整个社会的历史文化状况。任务一装修网店任务实施红色店铺标志的制作步骤如下:(1)使用钢笔工具绘制一片花瓣,注意钢笔的节点位置,填充如图所示的颜色。(2)复制出一片花瓣,按住Shift键,使用缩放工具适当缩小它的形状,并填充白色,使用对齐工具,将它们居中对齐,如图所示。(3)同理,绘制出第三片花瓣,并将三个路径组合(Ctrl+G)成一个整体,如图所示。任务一装修网店任务实施(4)复制一个花瓣出来,并填充颜色,通过任意变形工具,将复制出来的花瓣旋转45度,如图3—6所示。提示:对于8片花瓣的对齐,可以在中间画一个圆,每个花瓣旋转的度数要精准,不能使用鼠标进行旋转。任务一装修网店小思考(1)本任务中红色系的LOGO适合销售哪些商品种类的店铺使用?思路提示:红色代表最引人注目的色彩,具有强烈的感染力,象征热情、喜庆、幸福,可以使用在女装、花店等店铺中。(2)如图中的两个知名LOGO,分别给你什么印象,从这两个LOGO中我们能学习到哪些知识?思路提示:不同的LOGO有不同的特点,同时也代表着不同产品的风格。任务一装修网店任务二店铺招牌的设计与制作任务实施店铺招牌——这里指虚拟商店的招牌,一般有统一的大小要求,如淘宝店的招牌为950*150,格式为jpg、gif。如图所示的红色系店铺招牌的设计与制作步骤如下:(1)新建一个Fireworks文档,其中参数设置如图所示。任务二店铺招牌的设计与制作任务实施(2)绘制一个矩形,填充颜色为红色,大小和画布一致,作为店铺背景(3)将它命名为“店铺背景红色”,并锁定任务二店铺招牌的设计与制作任务实施（4）绘制一个矩形,大小为950PX*30PX,填充线性渐变色,边框笔尖大小为2,并填充金色,与店铺背景红色下对齐(5)在相应的位置上输入文字,效果如图所示。任务二店铺招牌的设计与制作任务实施(6)使用钢笔工具绘制一个盾牌形状,并填充线性渐变颜色,复制出一个盾牌形状,填充红色底纹,并等比例缩小,如图所示。(7)将两个盾牌通过对齐工具居中对齐,文字输入后效果如图所示。任务二店铺招牌的设计与制作任务实施(8)绘制一个如图3—20所示的50PX*50PX的矩形,其填充和边线的设置(9)使用钢笔工具绘制一个如图所示的图形,并填充好颜色,将矩形和这个图形对齐组合。任务二店铺招牌的设计与制作任务实施(10)同理完成其他图形的制作,效果如图所示。(11)复制出一个相同的图形,并垂直翻转。(12)绘制一个矩形,白色到黑色线性渐变填充,如图所示。任务二店铺招牌的设计与制作任务实施(10)同理完成其他图形的制作,效果如图所示。(11)复制出一个相同的图形,并垂直翻转。(12)绘制一个矩形,白色到黑色线性渐变填充,如图所示。任务二店铺招牌的设计与制作任务实施(13)将两个对象组合成蒙版,倒影效果呈现,同理,完成其他图标倒影的制作。(14)将其他文字补充输入,至此,店铺广告制作完成,如图所示。小思考图中的广告效果是如何制作的,尝试做一做。思路提示:颜色、大小、文字设置结合上文所学。任务二店铺招牌的设计与制作任务三店铺广告的设计与制作任务实施店铺广告信息是用来显示店铺的动态信息、商品促销、服务信息等内容的,普通店铺广告一般显示在店铺首页的中上部位。而店铺广告的位置、尺寸和播放方式都有一定的要求,只能在有限区域内发挥作用。以图3—32所示的福临门粮油商品广告为例,其制作步骤提示如下:(1)使用矩形工具绘制一个长方形,大小为400*300,填充粉色。(2)在矩形上面输入促销的文字,如图所示。(3)将粮油图片抠出,放置在文字的右侧,效果图如图所示。小思考本任务中的字体若要加上描边效果,试问哪种颜色比较合适?任务四动态店招效果的设计与制作任务实施任务三完成的是静态的店招效果,下面我们利用在线制作动态店招功能来完成下图所示的动态店招的设计制作,其步骤提示如下:(1)打开网页浏览器,在地址栏输入,登录三角梨在线制作网站,如图所示。任务四动态店招效果的设计与制作任务实施(2)点击“在线制作”,进入在线制作界面,如图所示,选择“店铺店招”。(3)在浏览店铺店招界面选择需要制作的店招图,进入制作界面,点击“点此开始制作”,如图所示。任务四动态店招效果的设计与制作任务实施(4)在制作图片的界面内,输入想要的标题1、标题2、标题3,分别对应的位置如图所示,标题1可以输入店铺名称,标题2可以输入小标题,标题3可以输入淘宝店铺的网址。(5)这样动态店铺店招就制作完成,效果如图所示。小思考通过本任务的学习,你学会了在线制作动态效果店招了吗?请尝试在线制作你想要的动态店招。任务五商品详细描述任务实施商品描述包括的内容有正面图、细节图、搭配效果图(平铺或者街拍、棚拍)、包装、吊牌等。商品描述要求图片清晰,尽量多角度;展示整体效果、彰显整体性;展示局部细节特性;展示品质、引起买家购物欲望;展示产品包装。进行商品描述时建议单品图片展示时增加细节图和体现产品情感诉求的语言词汇;单品描述的图片和文字描述应相结合,方便买家浏览;通过增加产品注释,来体现单品的设计理念、产品特色等信息。(1)商品描述资料主要来自于以下几个方面:1)首先向自己的供货商索要详细的宝贝信息。宝贝图片不能反映的信息主要包括:宝贝材料、宝贝产地、宝贝的售后服务、宝贝生产厂家、宝贝的性能等。并不是每一样都要非常详细地写出来,只是相对于同类产品有优势和特色的信息一定要详细地描述出来,这本身也是产品的卖点。任务五商品详细描述任务实施任务五商品详细描述2)买家的提问和用后反馈信息。这个也是收集宝贝描述信息的重要途径。有心的淘宝网商一般非常重视这个信息渠道,因为既可以完善自己网店的宝贝信息,同时也能够辅助自己发现宝贝新卖点和做好市场细分。3)到同行中去参考。淘宝网商有许多优秀者和后起之秀,可以去他们的网店转转,看看他们的宝贝描述是怎么写的。特别要重视自己的同行中做得好的网商。4)留意生活,挖掘与宝贝相关的生活故事。这个严格来说不属于宝贝描述信息的范畴,但是一个与宝贝相关的感人故事更加容易打动消费者。(2)下面以涂改液描述为例:1)涂改液的产品描述(包括名称、品牌、规格等。2)商品特色描述,如图所示。任务五商品详细描述

3)产品细节描述,如图所示。任务五商品详细描述

4)物流方式、支付方式和联系方式描述,如图所示。小思考在商品描述中,起标题也是一个很重要的问题,你会怎么给本任务中的涂改液起标题?思路提示:中文品牌+英文品牌+商品用途+商品特色+促销价格(文字在20字左右)。任务六常用的网页制作技术任务导入

无论我们用何种html标签进行网页布局和内容编排,要实现更好的网页美化效果,都必须用到css样式表,因此掌握和熟练运用css样式表对制作一个漂亮网页十分重要。下面我们通过Dreamweaver这个强大的网页制作软件,并利用div、ul、li等html标签和css样式表,通过一些简单易学的实例掌握常用的网页布局、列表、图文混排等。任务六常用的网页制作技术工作流程知识储备由于我们学习的内容是如何利用div+css进行网页布局,所以运用到网页中都是静态的,我们只需要建立简单的站点就可以。以下是进行站点建设前需要了解的一些知识,“站点”其实就是一个存放网站的文件夹而已,不过站点内存放的文件和文件夹命名有一定的要求,主要是站点内存放的文件、文件夹不要用中文命名,可以用拼音或拼音+数字命名,文件及文件夹命名需要有一定的意义,以方便管理,比如图片文件夹我们可以用images或img,首页命名我们可以用index.htm、default.html等。任务六

常用的网页制作技术岗位资讯简单站点设置说明:因为练习制作的全部为静态网页,所以我们不需要设置服务器。任务六常用的网页制作技术任务实施1.一列固定宽度制作如图3—47所示的网页效果,任务六

常用的网页制作技术图3—47任务实施(1)新建文档,如图3—48所示。任务六常用的网页制作技术图3—48任务实施(2)创建并保存网页到自己站点内,命名为lx1.html。选择工具栏的“插入div标签”工具,工具按钮如图3—49所示。任务六

常用的网页制作技术图3—49

在对话框的ID框中写入id的名称#kuang,然后在css面板中新建css样式,或者直接点击下边的新建css样式按钮,创建成功后会自动插入id名称,点击确定即可看到div标签已经插入到页面中了。任务实施css样式表设置如下:选择“背景”分类,设置背景,如图3—50所示。任务六常用的网页制作技术图3—50任务实施选择“方框”分类,设置div大小,如图3—51所示。任务六

常用的网页制作技术图3—51任务实施选择“边框”分类,设置边框,如图3—52所示。任务六常用的网页制作技术图3—52完成后保存,可预览效果。小思考(1)如何将列宽设置为自适应宽度?思路提示:另存lx1.html为lx1_2.html,修改css样式表分类中方框的宽为90%,预览效果。(2)如何将列固定宽度居中?思路提示:另存lx1.html为lx1_3.html,参照图3—53,修改css样式表(修改红色方框内的设置),预览效果。任务六

常用的网页制作技术图3—53任务实施2.两列固定宽度居中制作如图3—54所示的网页效果,主要步骤如下:任务六常用的网页制作技术图3—54任务实施(1)新建网页保存为lx2.html。(2)插入第一个div,ID为main,如图3—55所示。任务六

常用的网页制作技术图3—55接下来可以通过两种方法来建立css样式表:方法一:直接点击“确定”插入div,然后再点击“新建css规则”按钮建立css样式表(优点:可以边修改css样式表设置,边看效果,方便调试,建议用这个方法)。方法六r:点击“新建css样式”按钮直接设置css样式表(优点:不用再点新建css按钮来设置;缺点:无法边浏览效果边调试)。任务实施以下是采用第一种方法的做法:选中div,如图3—56所示。(3)建立css样式表,如图3—57所示,点击红色下划线处按钮建立css样式表。以下是新建css规则对话框,如图3—58所示。任务六

常用的网页制作技术图3—56图3—57任务实施以下是新建css规则对话框,如图3—58所示。任务六常用的网页制作技术图3—58任务实施“选择器类型”的基本知识补充。类:此类型的样式表命名必须以英文“.”开始,且样式表名不能以数字开头,也不能用中文(例如:“.title2”正确,“.2title”错误),此类样式表可以重复使用。标签:给所有的html标签建立css样式表,这种样式表单独使用的比较少,一般会和其他类型样式表混合使用或者设置页面属性body等。高级:此类样式表比较复杂,有下文用的id类型,a:hover类型,还有复合类型等。id类型的样式表名在一个网页中只允许出现一次,不可重复使用。定义在:主要是用来设置保存css样式表位置,“仅对该文档”表示样式表保存到当前的网页内,“新建样式表文件”表示当前样式保存到一个扩展名为“.css”的单独文件内。任务六

常用的网页制作技术任务实施给ID为main的div建立样式表,设置如下:选择“方框”分类,设置宽度和边界,如图3—59所示。说明:设置边界,左、右为“自动”可以让div实现在浏览器中居中的显示效果。任务六常用的网页制作技术图3—59任务实施(4)在id为main的div中分别插入两个div,如图3—60所示。任务六

常用的网页制作技术图3—60(5)建立类类型css样式表,“.left”用在id为main内的第一个div上,如图3—61所示。任务实施“.left”设置如下:背景设置为浅灰色,如图3—62所示。任务六常用的网页制作技术图3—62任务实施设置“方框”:宽为200像素,高为300像素,浮动为左对齐(设置浮动的目的是使得临近两个div能够并排显示),如图3—63所示。任务六

常用的网页制作技术图3—63任务实施设置“边框”:样式为实线,宽度为1像素,颜色为#A9C9E2,如图3—64所示。任务六常用的网页制作技术图3—64任务实施应用“.left”到第一个div上,如图3—65所示。任务六

常用的网页制作技术图3—65任务实施(6)建立类类型css样式表,“.right”用在id为main内的第六r个div上,设置“背景”如图3—66所示。任务六

常用的网页制作技术图3—66任务实施“方框”设置:宽200像素,高300像素,浮动为左对齐,如图3—67所示。任务六常用的网页制作技术图3—67任务实施边框设置如图3—68所示。任务六

常用的网页制作技术图3—68任务实施应用css样式表“.right”到第六r个div上,如图3—69所示。任务六

常用的网页制作技术图3—69保存预览并点击预览按钮进行预览,如图3—70所示。小思考如何将两列实现左列固定宽度、右列自适应?思路提示:在上面练习的css设置内容中进行修改。修改“#main”宽度为100%。清除“.right”宽度和浮动,并进行如图3—71所示的设置。任务六常用的网页制作技术图3—71任务实施3.左列文字列表,右列图文混排,整体居中显示制作如图3—72所示的网页效果,主要步骤如下:任务六

常用的网页制作技术图3—72任务实施(1)新建网页lx3.html,并参照图3—73,在网页中插入div,第一个div的id为main。任务六常用的网页制作技术图3—48(2)建立css样式表“#main”,设置“方框”宽度为904像素,并实现居中显示效果,如图3—74所示。任务实施设置“定位”:宽度为904像素,溢出为“隐藏”,如图3—75所示。任务六

常用的网页制作技术图3—75任务实施(3)建立css样式表“.left”、“.right”,分别应用到剩余的两个div里,如图3—76所示。任务六常用的网页制作技术“.left”设置如下:“方框”设置:宽度为220像素,浮动为左对齐,如图3—77所示。图3—76任务实施“边框”设置如图3—78所示。任务六

常用的网页制作技术图3—78任务实施“.right”设置如下:“方框”设置:宽度为670像素,浮动为左对齐,边界—左:10像素,如图3—79所示。任务六常用的网页制作技术图3—79任务实施“边框”设置如图3—80所示。任务六

常用的网页制作技术图3—80当前显示效果如图3—81所示。任务实施Div实际宽度计算知识补充:Div实际占用的宽度是由宽+左右(填充)+左右(边界)+左右(边框)构成,而不仅由宽度来决定,如本例中main、left、right的宽度计算如下:Div实际宽度计算说明:“#main”宽度904。“.left”实际占用宽度为:宽+左右(填充)+左右(边界)+左右(边框),即:200+0+0+2=222像素。因此,在制作网页前必须进行必要的计算和设计才能让网页正常显示。(4)左侧标题及列表制作:本例中标题、列表分别由h3和项目列表ul、li来实现,先添加如图3—82所示的布局。任务六常用的网页制作技术图3—82任务实施给标题h3建立css样式表效果,可以单独建立类类型css样式表,也可以建立混合类型的样式表,本例主要建立混合类型的样式表。混合类型样式表可以为同一标签设置相同的效果,从而减少一个个单独的使用。选中h3标签,添加如图3—83所示的混合样式表,“.left

h3”表示此样式表,.left下所属的所有h3都执行当前样式表的设置。任务六

常用的网页制作技术图3—83任务实施“.left

h3”设置如下:“类型”分类设置:字体大小为16像素,行高为30像素,颜色为#333333,如图3—84所示。任务六常用的网页制作技术图3—84任务实施“背景”设置如图3—85所示。任务六

常用的网页制作技术图3—85任务实施“区块”设置如图3—86所示,文字缩进15像素,实现“列表标题”向右缩进15像素的显示效果,如果不设置,则文字左对齐显示。显示效果如图3—87所示。任务六常用的网页制作技术图3—86图3—87任务实施“方框”设置高为30像素,上下边界为0。说明:设置方框:高与类型中行高为相同的大小可以实现文本内容垂直居中的效果。上下边界为0,可以让h3贴近顶部div和下面的ul,如果不设置,则h3自动会与上下内容产生距离,如图3—88所示,设置后显示如图3—89所示。任务六

常用的网页制作技术图3—88图3—89任务实施为ul标签建立css样式表“.lst1”,如图3—90所示。任务六常用的网页制作技术图3—90任务实施“.lst1”设置如下:设置“方框”分类如图3—91所示,左(填充)为15像素,使得ul距离左边距的div距离为15像素。任务六

常用的网页制作技术图3—91任务实施设置“列表”类型为无,项目符号图像为无,如图3—92所示,此设置目的是去掉项目符号。任务六常用的网页制作技术图3—93选中“li”标签,如图3—93所示,建立复合类型样式表“.lst1

li”,实现对li效果的设置。图3—92任务实施“.lst1

li”类型设置如图3—94所示。任务六

常用的网页制作