电子商务网页设计与制作精致版

1、000001000010000100000010000000001000000001000000010000000000101111000000000001000010000000100010001000000100000001000000000010000100001000100000100100010000100000000110001000010010000100010000100000010000001000000000010001000010000100010000100100010000100000000110001000010000000010010000100000000100

2、0001000000001,电子商务网页设计与制作,目录,项目一网站鉴赏与网站规划,项目二网页设计基础,项目三网页设计的基本应用,项目一网站鉴赏与网站规划,项目1网络鉴赏与网站规划,一、不同类型网站的设计要求二、网站鉴赏分析三、SEO网站优化四、网站规划,任务,我们通常在网上做什么？,任务1.1不同类型网站的设计要求,资讯门户类网站,1,设计要求,统一的平台风格,全面的内容频道,良好的导航体验,电子商务类网站,2,设计要求,清晰的导航结构,清晰的图片展示,丰富的交易外功能,交通旅游类网站,3,设计要求,1导航清晰2网站内容丰富3网页配色亮丽,行业企业类网站,4,设计要求,1.网页布局合理2.网

3、页导航清晰3.网页配色专业,要求,1,整体布局1.LOGO、导航突出2.统一的平台风格3.链接布局合理,任务1.2网站鉴赏分析,页面头部,2,45度同类色,180度互补色,135度对比色,90度邻近色,网页配色技巧,3,导航设计,（1）主导航结构和名称清晰。（2）网站导航采用文本链接。（3）面包屑导航。（4）导航阅读习惯。,网站图片设计,4,使用图片需要考虑与网站的总体设计协调、考虑放置位置，并预计浏览器是否支持该图像的显示、用户能接受其下载速度等。,任务1.3SEO网站优化,搜索引擎工作原理,（1）让设计与制作的网页在搜索引擎结果中有一个较好的排名；（2）网页能够吸引用户的目光，增加被点击几

4、率；（3）用户进入网页后，网页能达到用户期望，从而减少跳失率；（4）网页和网站能提供用户额外价值，最终提高网站转化率，提高用户满意度。,搜索引擎优化下网页设计目标,网站主题优化,网站主题的确定（1）主题内容定位，做到小而精，主题定位小，内容精；（2）主题明确，凸显重点，去除与主题无关的内容；（3）专题内容丰富，展现高品质的产品和服务。,2,网站布局优化,1页面定位的优化（1）网页标题：在Firefox和IE浏览器中，网页的标题显示在窗口的顶部或地址栏下方的标签页上。（2）URL：URL应当对网页的内容有所反映，比如本理财案例对应的URL路径money目录。,3,（3）路径导航：对于用户来说，这

5、些链接能够清楚表明他们正在网站的哪个层级，当前正在浏览什么页面。（5）段落标题：也能帮助用户确定网页位置。（6）标志和标语：人们普遍认为能从网页的左上角得知自己正在访问的网站及位置。（7）分类导航按钮：本案例没有体现，通常体现在左右侧边栏的分类导航按钮。,2弹簧高跷浏览行为优化,optimize,（1）增加左侧导航栏，页面跳转时，不会出现明显的网站各层级之间跳转的用户感受；,（2）主栏目清晰并且全站统一。,3冰山效应网页优化,在图中，有效地避免了网页冰山效应，立即购买和加入购物车在网页的第一屏已醒目地显示出来，用户如需更多的信息可以转向第二屏。用户打开网页后，所见到的信息能反映网页的全貌，加强

6、了用户继续阅读的信心。,4.Flash网站优化,虽然能从搜索结果中了解梦洁为家纺类上市企业，但进入网站后用户容易无所适从，从图中，我们可以通过点击链接继续访问，但网站内容和主题不直观，营销用户体验以及Flash动画也对搜索引擎的提取等问题都待改善。,1.Title信息优化（1）首页：网站名称或者网站名称_提供服务介绍或产品介绍（2）频道页：频道名称_网站名称（3）文章页：文章Title_频道名称_网站名称（4）标题主题明确，应包含该网页中最重要的内容核心关键字（5）简明精练，不罗列与网页内容不相关的信息（6）遵循从左到右的阅读习惯，重要的内容应该放到Title的靠前的位置,网页Titlefon

7、t-size:16px;color:#F00;内联样式表内部样式表,（3）外部样式表HTML代码为：,CSS盒子（框）模型,4.1.2,认识和使用DIV,DIV是division的简称，可定义文档中的分区或节，是XHTML所支持的标签，是XHTML中指定的专门用于布局设计的容器对象。DIV的最终代码只可能拥有以下两种形式：,任务4.2CSS网页布局,4.2.1,DIV的并列与嵌套结构,1.实现步骤,4.2.2,2.编辑XHTML文档打开DW,新建HTML文档，在“拆分视图”下，选择“插入”“布局对象”“DIV标签”，在弹出的“插入DIV标签”。,（2）从模板中分离网页的操作步骤打开“FW-1.

8、html”“修改”“模板”“从模板中分离”新建文档”选“模板中的页”“创建”“模板”创建的页面保存,2.编辑XHTML文档打开DW,新建HTML文档，在“拆分视图”下，选择“插入”“布局对象”“DIV标签”，在弹出的“插入DIV标签”。,3.应用CSS样式组建网页（1）Header层CSS编码。（2）main层CSS编码。（3）Sidebar层与Container层CSS编码。（4）Footer层CSS设置。,CSS合适布局,合适布局有两层含义：1.一列固定宽度在布局网页时要选择合适的具有语意的元素来制作网页；2.一列自适应宽度指可以根据需要设置元素的宽度和高度。,4.2.3,横向导航,任务4

9、.3CSS网站元素设计,4.3.1,具体代码,纵向导航,4.3.2,在CSS规则面板中找到#navulli选择器，双击，在CSS规则定义面板方框选项板中去掉或设置Float属性的值为None。同样去掉#navullia选择器的Float属性。并修改列表的容器ID为nav的高度和宽度,具体代码,下拉及多级弹出式菜单,1.网页新建完成后，点击插入SprySpry菜单栏在打开的Spry菜单栏中选择水平点击确定后插入，2.修改菜单栏整体样式,4.3.2,表单设计,1.改变输入框及文本域的样式,2.改变单选或多选菜单样式,4.3.4,文字排版,任务4.4CSS内容排版,4.4.1,（1）Font-fam

10、ily为样式设置字体系列,（2）Font-size定义文本大小,（3）Font-style指定“正常”、“斜体”或“偏斜体”作为字体样式,（4）Line-height设置文本所在行的高度,1.CSS字体,（5）Text-decoration该属性用来向文本中添加下划线、上画线或删除线，或使文本闪烁。,（6）Font-weight。该属性用来对字体应用特定或相对的粗体量，“正常”等于400，“粗体”等于700。,（8）Text-transform。该属性用来将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。,（7）Font-variant。该属性用来设置文本的小型大写字母变体,CS

11、S字体,（9）color。该属性为颜色属性，用来设置文本颜色。,图片基础控制,1.新建网页并保存为logo.html，在页面中插入一个标题标签，并在标签内插入一个超链接标签2.为标签新建ID为Logo的样式，并设置背景图片，不重复，x、y定位为0；然后根据图片的宽度和高度设置Logo样式的width和height3.设置文本“helloworld”为隐藏,4.4.2,表格样式控制,（1）Width表格的宽度（2）Border-collapse表格的边框是否被合并为一个单一的边框（3）Height表格的高度（4）Text-align和Vertical-align表格中文本对齐方式（5）Paddi

12、ng控制表格中内容与边框的距离（6）Margin表格外边框的属性（7）border或Color和Background-color表格颜色,4.4.3,id与class,1.CSS选择器概述CSS规则由两个主要的部分构成：一是选择器，二是一条或多条声明。选择器通常是需要改变样式的HTML元素，而每条声明由一个属性和一个值组成。属性（Property）是希望设置的样式属性（Styleattribute）。,任务4.5CSS高级应用,05,4.5.1,2.CSS选择器的分类（1）CSS元素选择器。（2）选择器分组。（3）通配符选择器。（4）类（class）选择器。（5）ID选择器。,DIV与span

13、,DIV是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过DIV来布局定位网页中的每个区块。,4.5.2,span是一个内联元素，没有实际意义，可以作为文本的容器。它的存在纯粹是为了应用样式，给一段内容加上标记可以通过在span上定义样式来设定其内容的样式。,CSS样式缩写,1.颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000；#336699可以缩写为#369。2.盒尺寸盒尺寸主要是指元素的margin（外边距）和padding（内边距）属性通常有下面四种书写方法。如下：,4.5.3,（1）property:value

14、1，表示所有边都是一个值value1；比如“margin：10px”含义为该元素的上、下、左、右外边距均为10像素。（2）property:value1value2，表示top和bottom的值是value1,right和left的值是value2。比如，“padding：10px20px”含义为该元素的上下内边距为10px，左右内边距为20px。（3）property:value1value2value3，表示top的值是value1，right和left的值是value2，bottom的值是value3。（4）property:value1value2value3value4，4个值依次表

15、示top，right，bottom，left。方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：“margin:1em,3.边框(border)边框的属性在没有缩写时，按照如下规则书写：border-width:1px;border-style:solid;border-color:#000;,可以缩写为一句：border:1pxsolid#000;语法是border:widthstylecolor;即宽度、边框样式、边框颜色。,4.背景(Backgrounds)背景的属性在没有缩写时，按照如下规则书写：background-color:#f00;设置背景颜色

16、background-image:url(background.gif);设置背景图片background-repeat:no-repeat;是否平铺背景图像，值可以是repeat-x或repeat-ybackground-attachment:fixed;设置背景关联，防止背景图片滚动background-position:00;设置背景图片在网页中的起始位置，第一个值为水平位置，第二个值为垂直位置。,以上内容可以缩写为一句：background:#f00url(background.gif)no-repeatfixed00;语法是background:colorimagerepeatatt

17、achmentposition;,5.字体(fonts)字体的属性在没有缩写时，按照如下规则书写：font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:LucidaGrande,sans-serif;,以上内容可以缩写为一句：font:italicsmall-capsbold1em/140%LucidaGrande,sans-serif;注意，如果缩写字体定义，至少要定义font-size和font-family两个值。,6.列表(list)取消

18、默认的圆点和序号可以这样写：list-style:none;,list的属性如下:list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);,以上内容可以缩写为一句：list-style:squareinsideurl(image.gif);语法规则为list-style:list-style-typelist-style-positionlist-style-image,项目1网络鉴赏与网站规划,1.、Flash应用2.、Fireworks应用3.、网页特效与JS代码应用4.、CMS系统

19、模板建站,任务,我们怎样来设计网页、制作网页？,1.网页动画的制作执行菜单“文件”“新建”命令弹出的对话框中选择“常规”“Flash文档”选项单击“确定”按钮，新建一个影片文档。,5.1.1,任务5.1Flash应用,网页动画、广告与片头,MTV制作,传统的MTV制作过程是比较复杂的，往往需要花费大量的人力、物力及财力才能达到最佳的视觉效果。然而FlashMTV与传统的MTV的制作形式则有很大不同，它的完成无需华丽的场景，不用专业的演员，更无需设定固定的故事情节，只需要掌握一定的Flash软件操作技巧，就可以让观众享受视觉上的冲击。,5.1.1,5.2.1LOGO制作,网站的LOGO尺寸，主要

20、有4种规格：88像素31像素；120像素60像素；120像素90像素；200像素70像素。相关设计主要有三种内容：文字表现形式设计；具象表现形式设计；抽象标志设计。,任务5.2Fireworks应用,5.2.2Banner的制作,5.2.3图片切割和图片优化,1.图片切割（1）启动Fireworks软件“文件”“打开”打开素材库中的图像xxx（2）选择左侧工具箱中的切片工具，对图像进行切片分割（3）切片完成后，按快捷键“Ctrl+A”，全选所有切片执行“文件”菜单“导出”命令，打开导出对话框更改文件名为“”，保存类型为“HTML和图像”勾选复选框“将图像放入子文件夹”，单击“浏览”按钮，选择桌

21、面新建的“images”文件夹，将所有切片后的图片保存在images文件夹中（4）启动Dreamweaver，新建页面选择“插入图像对象FireworksHTML”命令，单击“浏览”按钮，选择“.htm”文件，单击“确定”，即可将该网页文件中的图像导入页面之中。,2.图片优化（1）在Fireworks中优化图形涉及的操作。选择最佳文件格式。设置格式特定的选项。调整图形中的颜色,1.Javascript应用了解决服务器端语言。2.jQurey插件应用jQuery是继prototype之后又一个优秀的Javascript框架。3.Ajax技术应用Ajax实际上是一个客户端Javascript技术，

22、通过Ajax，因特网应用程序可以变得更完善，更友好。,任务5.3网页特效与JS代码应用,5.3.1Javascript、jQurey和Ajax,5.4.1搭建CMS网站,1.服务器软件Wamp安装（1）登录网址“,任务5.4CMS系统模板建站,5.3.2网页菜单设计,1.水平下拉菜单2.垂直下拉菜单3.颜色渐变菜单4.Flash效果的导航菜单,5.3.3网页图片特效设计,1.滚动栏目特效2.弹性滑动对联广告特效3.浮动广告特效4.栏目展示特效,5.3.4网页文字特效设计,1.下陷的超链接文字特效2.依次显示的状态栏文字特效3.限制输入的文本框特效4.不同单击效果的文本框特效,（1）登录网址“,

23、2.数据库软件NavicatforMySQL安装,3.CMS系统软件“织梦”CMS软件安装（1）登录网址“,5.4.2设计CMS模板,5.4.3使用模板搭建企业网站,1.DeDeCMS模板的下载（1）打开百度输入关键字“DeDeCMS模板下载”弹出检索页面，如百度检索到的下载页面（2）检索到的网址大部分都提供DeDeCMS模板的下载服务，但是不少下载的模板都不完整，或是一些收费的模板。（3）挑选适合的模板下载到本地硬盘，完成模板的下载。,2.DeDeCMS模板的安装找到下载文件中模板的核心文件夹“templets”,这是放置模板的默认目录覆盖服务器根目录下的“templets”文件夹，或将下载

24、的模板文件夹中的文件粘贴到服务器根目录下的“templets”文件夹中启动服务器进入网站后台单击左侧“模板”模块点击“默认模板管理”选项点击“上传模板”将新模板中的关键模板上传至服务器点击左侧“生成”模块单击“一键更新网站”，完成各级页面的生成打开网站首页，检查模板生成效果,3.DeDeCMS模板的应用（1）单击桌面右下角服务器图标选择设置Localhost选项，弹出网站首页在地址栏里当前网址后面输入“dede”进入网站后台页面弹出登录页面输入初始用户名和密码：admin进入网站后台管理页面。（2）点击左侧“核心”模块选择“网站栏目管理”选项点击“增加顶级栏目”按钮，添加网站栏目（3）依次添加

25、4个网站栏目“行业资讯”、“公司新闻”、“公司产品”、“联系我们”点击“更新栏目HTML”按钮，生成栏目页面（4）单击栏目列表第一项“行业资讯”，进入该栏目文档列表页单击“添加文档”按钮根据素材库中的word文档内容，完成文章标题、简略标题、自定义属性、Tag标签、缩略图、文章内容的编辑等操作点击“保存”按钮，完成文档的发布,（1）创建文本链接的方法,打开DreamweaverCS4程序，新建HTML文档并保存为“wy3-10.html”，输入文本并适当设置属性，选定要创建链接的文本“2012世界末日”，单击“属性”面板中“浏览文件”按钮，弹出“选择文件”对话框选择链接目标文件后，单击“确定”

26、按钮，再设置链接目标窗口，即完成文本链接创建，保存并预览单击链接对象，可检测链接设置是否正确。,（2）创建图像链接的操作步骤,打开“wy3-10.html”文档，选择要创建链接的图像，单击“属性”面板中“指向文件”按钮，选择链接目标文件后，再设置链接目标窗口，即完成图像链接创建，保存并预览；单击链接对象，可检测链接设置是否正确。,（3）创建图像热点链接的操作步骤,打开“wy3-10.html”文档，选择要创建链接的图像，单击“属性”面板中“地图”按钮，可创建图像热点区域，选择链接目标文件并设置目标窗口，即完成图像热点链接创建，保存并预览；单击链接对象，可检测链接设置是否正确。,（4）创建锚点链

27、接的操作步骤,新建HTML文档并保存为“wy3-11.html”，导入文本并适当设置属性。在每篇文章标题处设置锚记，如“蝴蝶效应”前插入锚记，锚记名称为“T1”，其余依次类推。选定标题文本，如“蝴蝶效应”创建链接，在链接文本框中，键入“#T1”，依次类推。保存并预览；单击链接对象，可检测链接设置是否正确。,（5）创建电子邮件链接的操作步骤,新建HTML文档并保存为“wy3-12.html”，导入文本并适当设置属性，将光标定位于“邮件链接”后，单击“插入”菜单中“电子邮件链接”命令，如图3185所示。弹出“电子邮件链接”对话框，设置“文本”和“E-mail”参数。单击“确定”按钮，即可插入邮件链

28、接，保存并预览，单击“联系我们”，可弹出创建电子邮件对话框，说明设置正确。,（6）创建脚本链接的操作步骤,打开“wy3-12.html”文档，将光标定位于“脚本链接”后，键入“执行脚本链接”文本并选定，在“属性”面板“链接”文本框内输入“javascript:alert（你单击了我哟！）”；切记，所有字符或标点符号为英文半角字符。保存并预览，单击“执行脚本链接”，可弹出信息提示对话框，说明设置正确。,（7）创建空链接的方法,“空链接”就是没有链接对象的链接，空链接上的目标URL用“#”表示，通常用于向页面上的对象或文本附加行为。在制作空链接时，只需将“属性”面板中的“链接”文本框内输入“#”标记即可。,CSS入门学前准备入门教程提高教程精彩布局,横向导航的HTML代码如下：,CSS代码：*padding:0;margin:0;list-style-type:none;#navheigh