网页设计学到了什么知识-《电子商务网站建设与网页设计》教案.doc

搭建电子商务网站教学内容 1. 电子商务网站设计指南 2. 电子商务网站结构设计 3. 使用Dreamweaver创建网站的教学要求 【知识目标】 1. 理解电子商务的定义网站并熟悉网页的元素。 2.掌握电子商务网站的设计准则。 3、熟悉并掌握常见电子商务网站的结构。 4． 掌握如何在 DreamweaverCS6 中创建站点。 【技能目标】 1.能够根据网站设计指南设计电子商务网站结构。 2. 能够使用 Dreamweaver 创建网站。 教学重点 1.了解电子商务网站的定义，熟悉网页的组成部分。 2.掌握电子商务网站的设计准则。 3、熟悉并掌握常见电子商务网站的结构。 4． 掌握如何在 DreamweaverCS6 中创建站点。 教学难点 1、根据网站设计准则，设计电子商务网站结构。 2. 使用Dreamweaver 创建站点。 教学方法 讲授法、案例法 课时数 教学内容 第一节 电子商务网站设计指南 《电子商务网站建设与网页设计（微课版）》 电子教案 1、电子商务网站 （一）电子商务网站的定义电子商务网站 （二）网页与网页设计 （三）网页组成 文本、图像、动画、超链接等是构成网页的基本元素。 此外网页设计学到了什么知识，网页的组成部分还包括网站标志、导航栏、表格、框架和表单等。 2、电子商务网站设计指南（1）明确网站建设的目的和用户需求（2）清晰的整体设计主题（3）设计人性化的交互界面（4）统一网页形式和内容（5）准确的链接（6）网站信息的及时性（7）合理使用多媒体功能（8）努力提高网站性能第二节E-商务网站结构设计 1.网站的物理结构 (1)扁平结构 (2)树形结构 2.网站的逻辑结构 网站的逻辑结构也称为链接结构网页设计学到了什么知识，主要指形成的逻辑结构通过网页的内部链接。

与物理结构类似，网站的逻辑结构也可以分为两种：扁平型和树型。 3、网站构成 一般来说，一个网站至少有两种类型的页面，首页和内页。 首页的基本功能首先是为访问网站的用户提供导航。 其次，是体现和凸显网站主题的作用。 根据用户的不同需求，内部页面会有不同的风格表情包设计，但必须遵循一点，那就是内容取胜。 4.网页的空间结构（1）网页的顶部（2）网页的主体（3）网页的底部5.网页的布局结构（1）》 《国》字形结构布局（二）《工厂》字形结构布局（三）《返回》《字形结构布局（四）框架结构布局（五）自由式结构布局》电子商务网站建设与网页设计（微课版） ）》电子教案第三节使用Dreamweaver创建网站一、Dreamweaver简介Dreamweaver是美国著名多媒体软件开发商Macromedia推出的一套专业可视化网页开发工具。与Flash、Fireworks并称为“网络三剑客”。Flash用于制作网页动画，Fireworks用于制作网页图像吉祥物，Dreamweaver用于制作网页动画。网页设计与制作。Dreamweaver具有制作效率高的优点、网站管理系统，控制能力强。 2、建站准备 （1）注册域名 （2）申请空间。 网站空间按类型可分为三种类型。 从低到高的顺序是：虚拟主机、VPS（虚拟专用服务器）、独立服务器。

3. 创建和设置站点 (1) 创建站点 (2) 编辑站点 (3) 删除站点 (4) 修改站点 (5) 复制站点 (6) 导出和导入站点 总结和改进 有哪些内容通过本章的学习我们了解到它是一个电子商务网站。 掌握电子商务网站的设计原理、电子商务网站的结构设计以及使用Dreamweaver创建网站的方法和技巧。 如今，网络购物已成为人们生活中重要的消费渠道。 电子商务网站海量的产品信息和便捷的购物方式吸引着越来越多的消费者。 我们掌握了电子商务网站页面设计和布局的方法，可以用来吸引消费者的注意力，增加销量。 《电子商务网站建设与网页设计（微课版）》电子教案使用Photoshop制作网页排版教学内容 1. Photoshop基本操作 2. 使用Photoshop制作文字特效 3. 使用Photoshop制作图像特效效果 4.电子商务网站主页设计 5、促销活动页面设计 教学要求 [知识目标] 1.了解Photoshop的工作界面。 2.了解图像文件的基本操作。 3.掌握基本的图像编辑工具。 【技能目标】 1、学习使用Photoshop制作文字效果和图像效果。 2. 能够使用Photoshop设计电子商务网站首页。 3. 能够使用Photoshop设计促销页面。 教学重点 1.使用Photoshop制作文字效果。

2.使用Photoshop创建图像效果。 教学难点 1、使用Photoshop设计一个电子商务网站的首页。 《电子商务网站建设与网页设计（微课版）》电子教案2.使用Photoshop设计推广页面。 教学方式 讲授法、案例法 课时数 教学内容 第一节 Photoshop 基本操作 1. 了解 Photoshop 工作界面 (1) 菜单栏 (2) 工具栏 (3) 选项栏 (4) 编辑窗口和面板组 2 . 图像基本文件操作 对图像文件的基本操作包括创建、打开、保存和导出图像文件。 3.使用工具编辑产品图片。 最常用的图像编辑工具：（1）选择工具（2）绘图工具（3）形状工具第二节使用Photoshop创建文字效果1.添加文字（1）输入文字（2）设置文字属性（3）创建段落文字（4）创建变形文字（5）将文字转换为路径（6）将文字图层转换为普通图层2.浮雕文字特效在设计广告或制作网页时，有浮雕文字和图案可以给人一种三立体感增强视觉冲击力。 3、金属文字特效金属文字特效通常用于珠宝首饰等产品的广告中，可以更好地衬托出产品的奢华和质感。 《电子商务网站建设与网页设计（微课程版）》电子教案四、磨砂涂鸦文字特效 磨砂涂鸦文字是网络广告中常用的文字效果。

5、晶莹剔透的文字效果晶莹剔透的文字也是网络广告中常用的文字效果。 第三节 使用Photoshop制作图像特效 1、调整图像尺寸 在电商网页设计中，对图像的尺寸大小有着严格的要求。 例如，横幅广告是互联网广告中最基本的广告形式。 过去常用的尺寸是468像素×60像素或233像素×30像素。 但现在随着大屏幕显示器的出现，Banner的表现尺寸越来越大，760像素。 70像素、1000像素、70像素的大尺寸Banner也悄然出现。 通常，使用工具栏中的裁剪工具来调整图形的大小，也可以使用菜单命令进行操作。 2. 调整图像颜色和色调。 在电商网站的制作过程中，比较常用的命令有：（2）亮度/对比度（3）色相/饱和度3.应用滤镜特效滤镜是Photoshop中用途最多的。 最令人惊叹的效果工具之一，包括：（1）“扭曲”滤镜：创建球形效果（2）“渲染”滤镜：创建镜头光晕效果（3）“风格化”滤镜：创建拼写效果粘贴效果（4）“模糊”滤镜：创建放射状模糊效果 第四节 电子商务网站首页设计 1、页眉的制作 网站首页页眉的制作主要涉及搜索框和导航栏的制作。 2、左侧生产页面左侧部分是产品分类。 具体步骤为： （1）使用矩形选框工具在左侧绘制一个矩形选区，然后右键单击该选区，选择“描边”命令，并在弹出的对话框中设置相关参数和单击“确定”按钮。

(2) 使用“横向文本工具”输入所需文本并设置字符属性。 3、页面中右侧的制作（1）网络广告的主要展示形式有：Banner、轮播、主题、按钮、擎天柱、动画等，占据了首页的大部分内容。网站，尤其是网页的中间和右侧。 (2)电子商务网站广告基本上都是GIF、JPG、SWF等格式的图片文件，大小一般是固定的。 《电子商务网站建设与网页设计（微课版）》电子教案四、页面底部制作网页底部也是整个首页的重要组成部分，浏览者可以从中获得基本的知识。网站的信息。 如果在网站设计中忽略了页面的底部，那么网页的整体布局就会不完整。 第五节 促销活动页面设计 促销活动页面的设计必须具有强烈的视觉冲击力，给买家留下深刻的印象。 这就要求设计必须准确到位，并且具有独特的创意形式，使布局清晰、简洁、明朗。 总结与改进通过本章的学习，我们了解了Photoshop的基本操作，学会了用它来制作文字效果和图像效果，并利用这个工具设计了电子商务网站首页和促销活动页面。 Photoshop是一款集图像扫描、编辑修改、图像制作、广告创意于一体的图形图像处理软件。 凭借其便捷、专业的图像处理功能，它已成为网页设计和制作的必备工具。

通过学习Photoshop，我们可以创建具有专业外观的网页布局。 使用 Flash 制作网页广告动画教学内容 1. 了解 Flash 工作界面 2. Flash 工具的应用 3. 使用 Flash 制作导航菜单 4. 使用 Flash 制作横幅广告 教学要求 【知识目标】 1. 掌握基本知识Flash菜单栏、常用工具、时间线、“属性”面板等的操作。 2.掌握电子商务网站导航菜单的分类和设计方法。 3、掌握Flash横幅广告的设计方法。 【技能目标】《电子商务网站建设与网页设计（微课版）》电子教案 1、能够使用Flash制作电子商务网站导航菜单。 2. 能够使用Flash为电子商务网站创建横幅广告。 教学重点是Flash工具的应用。 2.使用Flash制作电子商务网站导航菜单。 3.使用Flash制作电子商务网站横幅广告。 教学难点 1.使用Flash制作电子商务网站导航菜单。 2.使用Flash制作电子商务网站横幅广告。 教学方法 讲授法、案例法 课时数 教学内容 第一节 了解Flash工作界面 1、菜单栏 菜单栏提供了几乎所有的操作命令，包括“文件”、“编辑”、“查看”、“插入”和“插入”。修改“文本”、“命令”、“控制”、“调试”、“窗口”和“帮助”等菜单项。

2. 基本功能区 Flash CS6 提供了多种软件工作区预设。 您可以在“基本功能”下拉列表中选择相应的工作区预设。 3.舞台舞台是场景白色区域中的内容，即放置动画内容的区域。 编辑动画时，您可以在整个场景中绘制或编辑图形，包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑等。您还可以根据需要更改舞台的属性和形式。 4.“时间轴”面板“时间轴”面板是Flash CS6工作界面的重要组成部分。 用于对《电子商务网站建设与网页设计（微课版）》电子教案规定时间内的文档内容进行组织和控制。 播放的层数和帧数可以放置在主窗口的下部或作为单独的窗口显示，也可以隐藏。 “时间轴”面板由图层、帧、播放头等组成，几乎所有的动画都需要在“时间轴”面板中制作。 5.“属性”面板 Flash CS6提供了多种自定义工作区的方法，其中“属性”面板是常用的一种。 它是位于窗口右侧的活动面板的集合。 它显示舞台或时间轴上当前所选项目的常见属性，例如当前文档、文本、符号、形状、位图、视频、框架或工具的信息和设置。 6. 工具栏 Flash 工具栏位于工作界面的右侧。 它提供了很多工具，通过这些工具可以在工作区中进行绘图、调整等操作。

常用的工具有选择工具、套索工具、文本工具、3D 旋转工具、画笔工具、油漆桶工具、橡皮擦工具、手形工具和填充颜色工具等。 第二节 Flash 工具的应用 1. 文本工具可以创建各种表格Flash中静态文字和动态文字的结合，让消费者从简洁、易记、朗朗上口的文字中感受和品味网站产品的深层含义和内涵。 、兴趣和精神信息。 2. 绘图工具 创建和编辑矢量图形主要是通过工具栏中的绘图工具来完成。 (1) 直线工具 直线工具用于绘制直线。 Flash中有6种笔画样式：实线、虚线、虚线、之字形、点画和斑马线。