《电子商务》实验指导书.doc

电子商务实验指导书编制：王江涛重庆工商大学商务策划学院 2目 录实验一 电子商务美工应用1实验二 电子商务网站建设与网页设计14参考文献1819实验一 电子商务美工应用一、 本实验目的和实验内容要求：（一）实验目的通过对PhotoShop图像处理软件的熟悉，掌握图像软件的操作，并学会用其进行简单的设计与制作。（二）实验内容要求PhotoShop基本操作选区操作图层与路径操作通道与蒙板操作（三）实验类型验证二、本实验的基本原理和方法(含实验数据处理的基本步骤)1.掌握工具栏及其他基本操作。2.学会选区、图层、路径、通道、蒙板操作，并能够进行简单的抠图与合成。（一）文件操作新建文件。打开图像保存图像置入图像（二）辅助工具标尺、网络窗口显示模式（三）选区（观看教师操作，并练习掌握）1.选框工具2.套索工具3.魔棒工具4.编辑选区（移动、自由变换、修改、扩大）5.修饰选区（填充、描边）（四）操作图层与蒙版将两幅图拖入同一图的不同图层中将上面图层的图添加蒙版将前景色与背景色置为默认状态用画笔在选中蒙版的图层涂抹，以透出下层力的部分。三、本实验使用的仪器设备及其基本工作原理使用教师自备教具，配合实验室电脑设备和实验场地进行实验。位图处理软件通过对图像的色阶、曲线等要素进行操作，可以改变图像的最终效果；同时通过选区、通道、蒙板等工具，可以制作出超现实风格的虚拟效果。使用计算机进行PhotoShop图像处理软件的操作，通过理解色阶、曲线等相关概念控制最终处理效果四、实验基本步骤1.魔杖抠图（1） 用魔杖选择图中纯黑的部分，如果选择不够彻底，则会有部分非黑的部分未被选中。（2） 在此情况下，可以点击主菜单“选择色彩范围”，利用其中的色彩容差进行调查。（3） 选择过程中，可以通过加入Shift(加)或ALT（减）键辅助多选。（4） 选择成功后，按热键CTRL+I反选。（5） 按CTRL+C键复制选区（6） 在新的图上粘贴。2.钢笔抠图（1）通过铁笔工具建立选区（2）在路径工作面板，选择“建立选区”，返回到图层面板，查看是否选中图像所在层。然后按CTRL+C复制（3）打开背景图形，将此选区复制在其中。（4）选择“图像调整色彩平衡”，将当前复制对象颜色的色温调整到与背景层相似。3.克隆印章打开PH作业2印章文件夹中的“颐和园.JPG”图像文件，用橡皮印章工具将相片水中的竹竿擦除，操作步骤如下：打开“颐和园.JPG”图像相片文件，如图73-3所示。单击工具箱的橡皮印章工具，再按住Alt键并单击要复制的水区域，拖动鼠标在水区域上来回移动。在竹竿上拖动鼠标按水形状移动即将竹竿覆盖掉，如图所示。 4.漆桶工具下面以设计一种镜框为例，使用漆桶工具制作步骤如下： 打开“风景画1.jpg”图像文件。 单击工具箱的“矩形框” 工具，在离图像边缘一定距离处画一矩形选择框，按【Shift+Ctrl+I】键进行反向选择，如图7.59所示，这时选择的是边框。 按【D】键选择默认前、背景色，按【Del】键将图像边缘填充为背景色白色，如图7.60所示。 图7.59 图7.60 按【Shift+Ctrl+I】键进行反向选择，此时选择的是图像，按【Ctrl+Alt+D】键打开羽化设置对话框，输入羽化半径为20。 按【Shift+Ctrl+I】键进行反向选择，此时选择的是边框。 单击工具箱中的漆桶工具，使漆桶工具为当前工具属性栏，在工具属性栏中设置Mode为Normal(正常)。将光标置于图像左上角后单击鼠标左键，如图7.61所示。 图7.61 图7.62 按【Ctrl+D】键取消选择区域，就可以得到如图7.62所示。 若从上述第六步按如下步骤设计将制作另一种镜框效果： 单击工具箱中的漆桶工具，使漆桶工具为当前工具属性栏，在工具属性栏中设置Mode为Dissolve(溶入)。 将光标置于图像左上角后单击鼠标左键，如图7.63所示。 图7.63 图7.64 按【Ctrl+D】键取消选择区域，就可以得到如图7.64所示。5. 拼接大幅扫描图象：（1）按Ctrl+O打开两个扫描后的RGB图象，为方便起见把左侧的叫做第一部分，右侧的叫做第二部分，如图2-1所示。 图2-1 （2）如果图象上没有“状态栏”，选择“窗口”中的“显示状态栏”命令，显示“状态栏”。 （3）选择第二部分的图象,按下Alt的同时，单击状态栏的左侧第二栏，从弹出的信息框中记下该图象文件的宽度值。如图2-2所示。 图2-2（4）选择第一部分的图象，选择菜单“图象”中的“画布尺寸”，在打开的对话框中将画布的宽度加长至步骤三记下的图象宽度，如图2-3所示。按“确认”得到图示效果。 图2-3（5） 选择第二部分的图象，按【Ctrl+A】选择全部图象，按【Ctrl+C】将所选图象复制，选择第一部分的图象，按【Ctrl+C】粘贴至第一幅图象中，并将图象置于基本对齐的位置，这时第二部分的图象就会被复制在“图层 1”图层中，如图2-4所示。 图2-4（6） 如果屏幕上没有“图层”面板，选择“窗口”中的“显示图层”命令，打开“图层”面板，设置“图层 1”的“不透明度”为“50%”，以显示出图象中重叠的部分，并且在图层 1中按【Ctrl+I】反转图象的色彩，得到如图2-5的效果。 图2-5（7）在工具盘中选择“缩放”工具，单击图象的重叠部分放大图象，然后按【V】选择“移动工具”，拖动图象到对齐为止，也可以通过按方向键每次移动图象一像素，精准的对齐图象。（8）在“图层 1”上按【Ctrl+I】进行图象反转的操作，并恢复该图层的“不透明度”为“100%”，得到图2-6所示效果。 图2-6（9） 这时在图象重叠部分往往还会出现图象色调不一致的接缝。在工具盘中选择“矩形框选择工具”，如图2-7所示，选择“图层 1”中的重叠边缘侧。 图2-7（10）按【Ctrl+Alt+D】进行羽化操作，在打开的对话框中设置“羽化半径”为“20像素”，按“确认”后按Delete删除所选区域，按Ctrl+D取消选择区域。（11） 选择“图层”中的“合并图层图象”命令，合并图象中的图层。如图2-8所示，使用“矩形框选择工具”选择图象区域，选择菜单“图象”中的“裁剪”，完成制作。 图2-86. 给灰度图像着色 知识重点：复杂选区的建立、Alpha通道的应用，以及使用Hue/Saturation【色相/饱和度】命令着色的方法。 具体操作步骤： 打开如图3.354所示的源图片，单击菜单ImageModeRGB Color【图像/模式/RGB颜色】命令，将图像由灰度模式转换为RGB模式。 图3.354 图3.355 图3.356 图3.357 用磁性套索工具沿着人体轮廓拖动鼠标建立选区，如图3.355所示。在Channels(通道)调板中单击按钮，将人体轮廓选区保存为一个通道，系统自动将其命名为Alpha l，如图3.356所示。按快捷键【Ctrl+D】取消现有选区，然后使用磁性套索等工具选中头发的大致轮廓。在Channels(通道)调板中单击按钮，将头发选区保存为一个通道，系统自动将其命名为Alpha 2。 单击菜单SelectColor Range命令(选择色彩范围)，弹出Color Range对话框，如图3.357所示。在Select(选择)列表框中选择Sampled Colors(取样颜色)项，并单击吸管按钮，然后在对话框预览图中的头发位置处单击，与单击处颜色相近的像素被选中。拖动Fuzziness(颜色容差)滑块调整容差，直至选中头发范围(预览图中白色的部分)，单击【OK】按钮，选区如图3.358所示。再按【Shift】键同时用椭圆工具将头发中间区域加选，如图3.359所示。 图3.358 图3.359 图3.360 单击菜单ImageAdjustmentsHueSaturation【图像/调整/色相/饱和度】命令，弹出Hue/Saturation【色相/饱和度】对话框，如图3.360所示。在对话框中选中Colorize (着色)复选框为，然后拖动Hue(色相)滑块调整头发的颜色，拖动Saturation(饱和度)滑块调整颜色的饱和度，拖动Lightness(明度)滑块调整亮度，将黑发女郎变成了金发女郎。 按快捷键【Ctrl+D】取消现有选区。使用磁性套索等工具选中人物的衣服，如图3.361所示。单击菜单SelectLoad Selection【选择/载入选区】命令，弹出如图3.362所示的Load Selection对话框。在对话框的Channel(通道)列表框中选择Alpha 2指定将该通道作为选区载入，并选中Subtract from Selection(从选区中减去)单选钮，选择从现有选区中减去载入的选区，单击【OK】按钮。在Channels(通道)调板中单击按钮，将衣服选区保存为一个通道，系统自动将其命名为Alpha 3通道，Channels(通道)调板如图3.363所示。 按步骤同样的方法，单击菜单ImageAdjustmentsHueSaturation【图像/调整/色相/饱和度】命令，弹出Hue/Saturation（色相/饱和度）对话框，调整衣服的颜色，按图3.364所示的设置，将女郎的衣服由白色染成红色，如图3.365所示。 图3.361 图3.362 图3.363 图3.364 图3.365 图3.366 按快捷键【Ctrl+D】取消现有选区，然后按住【Ctrl】键在Channels(通道)调板中单击通道Alpha l载入人体轮廓选区，再单击Layers (图层)调板，双击Background背景层将其设为Layer 0层，人体轮廓选区如图3.366所示。单击菜单SelectLoad Selection【选择/载入选区】命令，弹出Load Selection对话框，在对话框的Channel(通道)列表框中选择Alpha 2指定将该通道作为选区载入，并选中Subtract from Selection(从选区中减去)单选钮，实现从现有选区中减去载入的头发选区，然后单击【OK】按钮。 再次单击菜单菜单SelectLoad Selection命令【选择/载入选区】弹出Load Selection对话框，在对话框的Channel(通道)列表框中选择Alpha 3指定将该通道作为选区载入，并选中Subtract from Selection(从选区中减去)单选钮，实现从现有选区中减去载入的衣服选区，单击【OK】按钮，剩下的皮肤选区如图3.367所示。再按【Alt】键同时用椭圆工具并将残留的头发区域减选，如图3.368所示。 图3.367 图3.368 图3.369 单击菜单ImageAdjustmentsHueSaturation【图像/调整/色相/饱和度】命令，弹出Hue/Saturation（色相/饱和度）对话框，按图3.369所示调整皮肤的颜色。按快捷键【Ctrl+D】取消现有选区，然后按住【Ctrl】键在Channels(通道)调板中单击通道Alpha l载入人体轮廓选区，再单击Layers (图层)调板，选中Layer 0层为当前图层，按快捷键【Ctrl+Shift+I】将选区反向，选中背景区域，如图3.370所示。 单击菜单ImageAdjustmentsVariations【图像/调整/变化】弹出Variations对话框，对话框中列出了偏向各种颜色的预览图，单击任意样式即调整背景的颜色，按快捷键【Ctrl+D】取消现有选区，设置结果如图3.371所示。 图3.370 图3.371 方法总结：给灰度图片着色有两个难点：一是建立准确的选区将图片分为不同的区域，二是使用HueSaturation等命令着色。建立选区时一定要耐心，并且要充分利用各种工具、命令，例如在本例中，除了使用一般的选框、套索工具外，还使用到了Color Range、Load Selection等命令。着色时不要指望一次成功，要不断地调整颜色参数，以达到最佳效果。7. 在图片中添加彩虹效果 知识重点：渐变的应用。 操作步骤： 打开如图19.1所示的源图片，在Layers (图层)调板中单击按钮创建一个新图层，系统自动将其命名为Layer 1，确认选中了该层。 在工具箱中单击渐变工具，然后在工具选项栏中单击右端的下拉箭 头，并在弹出的渐变式样调板中单击图标选择七彩虹渐变。在工具选项栏中单击线性渐变按钮，然后在图像窗口中横向拖动图标绘制出渐变色带，如图19.2所示。 图19.1 图19.2 图19.3 单击菜单命令FilterDistortShear【滤镜扭曲切变】打开如图19.3所示的Shear对话框。在对话框的曲线图中用鼠标拖动曲线，将其调整为如图19.3所示的形状，单击【OK】按钮后，渐变色带如图19.4所示。 图19.4 图19.5 图19.6 按快捷键【Ctrl+T】使渐变色带显示变换框，拖动变换框上的控制点将其调整为如 图19-5所示的形状，然后按【Enter】键确认。 单击工具箱中按钮切换到快速蒙版编辑状态，再在工具箱中单击渐变工具，然后在工具选项栏中单击右端的下拉箭头，并在弹出的渐变式样调板中单击图标，选择Fore ground to Background (前景色到背景色)渐变。 在工具选项栏中单击 线性渐变按钮，然后在彩虹的靠近左端处由右至左拖动鼠标绘制出渐变色带，如图19.6所示。 单击工具箱中按钮退出快速蒙版编辑状态，快速蒙版被转换为选区，然后按 【Delete】键删除选区内的彩虹，如图19.7所示。 图19.7 图19.8 图19.9 按同样的方法对彩虹的另一端进行处理后，效果如图19.8所示； 单击菜单命令FilterBlurGaussian Blur【滤镜模糊高斯模糊】打开如图19.9 所示的Gaussian Blur对话框。在对话框中将模糊半径设置为5，单击【OK】按钮后，彩虹效果如图19.10所示； 如图19.11所示，在Layers (图层)调板中将Layer l层的混合模式设置为Screen (屏幕)，即可得到最终效果，如图19.12。 图19.10 图19.11 图19.128.自由创意五、实验记录与数据处理要求记录基本操作步骤，并写下所观察与了解的功能模块及其基本功用。对于综合性操作则尽可能记录其主要步骤。六、实验中的注意事项熟悉基础功能之后进行，并在实验过程中分析为什么这样做。七、实验思考题深入思考色阶、曲线、通道、图层等概念的精义。八、实验报告的基本要求（一）基本要求：注明实验时间、实验地点、实验课程、实验班级、姓名、学号（二）扩展要求：写出实验内容，包括：操作步骤、实验记录、实验结论。九、实验前的预习内容（含实验所使用的专业软件的概述）PhotoShop的基本功能。实验二 电子商务网站建设与网页设计一、 本实验目的和实验内容要求：（一）实验目的通过对观摩优秀网页设计，运用以往多媒体技术，使用DreamweaverMX软件制作网页首页。（二）实验内容要求1.上网访问10个国内外的商务网站，寻找可以体现网站主题的代表性词句，现时了解各网站的整体风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）、网站主页的风格和各个二级与三级页面的风格，看看这些风格与网站宣传或体现的主题是否相符或者搭配。2.在网上找出4种不同版面布局的网站结构形式，并从消费者的角度比较这些网站版面布局之间的优势和劣势。网站版面布局的结构大致有如下类型：（1）“T”结构布局（2）“口”型（“国”字型）布局（3）“三”字型布局（4）对称对比布局（5）POP布局（6）拐角型布局（7）标题正文型（8）封面型（主题图片型）3.根据实验内容第2项的比较，选择你喜欢的网站，查看该网站的源代码，熟悉HTML语言及该语言及该语言的语法结构4.在实验内容第3项的基础上，根据自己的兴趣和爱好，设计制作一个网站，包含以下内容。（1）网站要明确的建立目的和主题（2）网站至少要有主页、二级页面；（3）拟购买的域名和空间（服务商、购买域名、空间、支持程序和数据库类型、费用、理由）注意事项：（1）不一定要在网站建成后才去申请域名，尤其是比较好的域名，更要抢先注册，以防止他人恶意抢注；（2）实验中不用真的购买域名，但需要对域名进行查询，看看拟购买的域名是否存在；（3）实验中不需要购买空间，但要做出对比分析报告，该报告的内容必须包括选择空间的类型、选择服务商的情况。5.填充网站内容并测试各功能模块及网站的整体框架建成后，便可填充内容，并线下测试（三）实验类型综合二、本实验的基本原理和方法(含实验数据处理的基本步骤)1.Dreamweaver操作优秀的网页设计需要良好的配色、文字架构等基础知识，实验者在此基础上运用所学，并使用Dreamweaver软件创建网页。使用计算机进行Dreamweaver软件的基本操作，实验者通过上手操作，将以前学到的美学理论与网页设计原则、多媒体软件操作技巧等综合运用。2.HTML简介HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。HTML的标记总是封装在小于号在大于号之间构成的一对尖括号中，包括以下类型：（1）单标记某些标记称为“单标记”，因为它只需要单独使用就能完整地表达意思，这类标记的语法是：最常用的是，它表示一个段落的结束，并在段落后加一空行。（2）双标记与单标记相对应的另一类标记称为“双标记”，它由“始标记”和“尾标记”两部分构成，必须成对使用，其中始标记告诉Web浏览器从此处开始执行该标记所的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记，这类标记的语法是：内容其中“内容”部份就是被这对标记施加作用的部分。例如，你想突出对某段文字的显示，就将此段文字放在一对“”标记中：重庆工商大学（3）标记属性许多单标记和双标记的始标记号内可以包含一些属性，其中语法是：各属性之间无先后次序，属性也可以省略，例如单标记表示在文档当前位置画一条水平线，一般是从窗口中当前行的最左端一直画到最右端，在HTML3.0中此标记允许带一些属性：其中SIZE属性定义线的粗细，属性值取整数，缺省为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值）、CENTER（居中）、RIGHT（右对齐）；WIDTH属性定义线的长度，可取相对值（百分比），也可取绝对值（整数表示）。对于HTML的标记方式略作了解即可，许多专业软件能够完成HTML的可视化操作（如Dreavmweaver）。三、本实验使用的仪器设备及其基本工作原理使用教师自备教具，配合实验室电脑设备和实验场地进行实验。主要采用可视化网页编辑软件Dreamweaver进行。四、实验基本步骤掌握DreamweaverMX软件基本操作。通过网站需求分析、网站风格定位、网站内容组织、网站页面设计等工作完成一个综合性的静态网页设计工作。五、实验记录与数据处理要求1.第一部分：写一份多个网站的主题与网络之间的简要对比分析报告。2.第二部分：比较4种不同版面布局结构的网站，写出简要的对比分析报告。3.第三部分：写出一个网站的设计方