项目三 电子商务网站设计与开发 任务实施

项目三电子商务网站设计与开发【任务实施】任务1制作冬藏网站首页（静态）实验目的：（1）了解电商网站的主要功能。（2）掌握使用Dreamweaver软件制作网页整体布局方法和技巧。（3）掌握使用Dreamweaver软件制作网页页眉、导航栏、轮播图片、图书列表、网页页脚的方法和技巧。（4）掌握使用Dreamweaver软件编写、修改CSS样式表代码的方法和技巧。（5）掌握使用Dreamweaver软件调试网页的方法和技巧。实验要求（1）安装DreamweaverCC2018中文版（或其它相近版本的Dreamweaver软件）。（2）掌握Dreamweaver软件的使用方法。（3）对HTML标签知识和CSS代码知识比较熟悉。实验目标（1）完成冬藏网站站点的建立。（2）完成冬藏网站首页index.html文件的制作。（3）加深对电商网页整体布局的了解。问题分析（1）不知怎样确定网页的风格。（2）对网页布局的方法掌握不好。（3）轮播图片不会制作。（4）对HTML5和CSS3新增标签不熟悉。（5）对CSS样式表的优先级不熟悉。解决办法（1）确定电商网页的风格，要以简洁明快为主，少有冷色的颜色，多用暖色或中性的颜色。（2）电商网页中包括的内容很多，尤其是网站的首页，更是如此。要比较好的设计一个网页的布局，尽量将网页的功能分成不同的模块，按内容展现的先后顺序完成布局设计。尽量减少模块中内容的嵌套。（3）制作轮播图片的方法比较多，一般使用html、css、js代码配合完成。纯CSS3制作的轮播图片实用性比较差。也可以使用插件制作轮播图片。基础差的学生可以使用在线制作轮播图，然后再自己修改。（4）HTML5和CSS3已经成为目前网页前端开发的主流标准，许多新增标签和CSS3代码提升了网页的制作效率。在网页制作过程中，遇到自己不熟悉的HTML标签和CSS代码，打开CSS3菜鸟教程网站，里面有比较纤细的介绍。通过学习教程中的知识和规模其实例，对我们有很大帮助。（5）如果对CSS样式表的优先级不熟悉，同样可以CSS3菜鸟教程和类似的网站去学习，此外还可以打开一些著名的网站，将其网页保存，阅读分析其网页源代码和CSS代码来学习。实验步骤（1）冬藏网站index.html网页的最终效果，如图3-1所示。图3-1（2）创建本地站点。=1\*GB3①建立本地站点文件夹d:\dongcang。并在dongcang文件夹内新建css、images、js三个文件夹，用于存放网页的各类文件。如图3-2所示。图3-2=2\*GB3②打开Dreamweaver软件，选择菜单“站点—新建站点”，选择前面建好的d:\dongcang作为本地站点文件夹。并选择“高级设置”，将dongcang文件夹中的images文件夹作为存放网页图片的默认文件夹。如图3-3、3-4、3-5所示。图3-3图3-4图3-5（3）制作网站站标。网站标志（Logo）简称“站标”，是网站特色和内涵的集中体现。“冬藏”网上书店网站站标力求简单明快，这里使用文字的排列来体现网站的主题，如图3-6所示。（说明：除了用PS等软件制作外，还可以利用在线制作工具来制作网站LOGO）图3-6（4）“冬藏”网上书店网站首页布局示意图。布局结构如图3-7所示。图3-7（5）创建index.html网页文件和index.css、style.css样式表文件。如图3-8、3-9、3-10、3-11、3-12所示。图3-8图3-9图3-10图3-11图3-12（6）在index.html网页中链接引入index.css和style.css样式表文件。如图3-13所示。（说明：使用外部样式，每次修改样式表文件的内容后，都要保存样式文件，然后预览网页，才能看到新设置或新修改的样式对网页所起的作用。）图3-13（7）打开style.css文件，在其中添加如图3-14红框中所示的内容，这3段CSS代码的作用是CSS页面样式初始化。如图3-14所示。（说明：通过初始化CSS，可以消除各浏览器对CSS默认的设置，保持网页在各浏览器中的外观保持一致；另外通过初始化还能提高编码质量，省去设置很多重复的css样式。）图3-14（8）制作index.html页面的topnav部分。1）打开index.html的代码视图，将图3-15红框中的代码添加到网页的body区，制作网页的topnav部分的导航功能。如图3-15所示。图3-152）在style.css文件中为topnav部分编写CSS代码。如图3-16所示。图3-163）保存style.css文件，网页显示效果如图3-17所示。接下来还需要编写CSS代码对右侧的“登录、注册”等文字进行格式设置。图3-174）在style.css文件中继续为topnav部分插入如图3-18所示的样式。图3-185）保存style.css文件，右侧的文字分散开排列，鼠标指向某个导航项目时，其背景颜色会发生变化，网页显示效果如图3-19所示。接下来还需要编写CSS代码对右侧的“登录、注册”等文字进行格式设置。图3-196）为“登录”、“问答”等导航项目应用小图标样式。从/article/10287.html下载iconfont文件，将下载的文件解压到D:\dongcang\css文件夹中在index.html网页文件的头部区，链接引入Rjdaoico.css文件。如图3-20红框中内容所示。图3-20保存index.html网页文件并预览，效果如图3-21所示。图3-21（9）制作index.html页面的网店LOGO和搜索框购物车等部分内容。1）在网页代码视图中插入<header>标签，如图3-22所示。在style.css创建如图3-23所示的样式。图3-22图3-23（说明：<header>是html5中一个语义化标签，是一种有导航作用的结构元素，可能包含一些标题元素和其他元素，如搜索表单、导航、logo等，一般会出现在页面的顶端或接近这个位置的header元素，就成为整个页面的页眉。使用语义化标签可以让代码结构清晰，方便阅读，有利于团队合作开发，也有利于搜索引擎优化（SEO。）2）在网页代码视图<header>标签后面插入如图3-24红框中所示内容，制作网站LOGO。在style.css中创建如图3-25所示的样式。保存网页文件和样式表文件后，预览效果如图3-26所示。图3-24图3-25图3-263）在网页代码视图<header>标签后面插入如图3-27红框中所示内容，制作网站搜索框。在style.css中创建如图3-28所示的样式。保存网页文件和样式表文件后，预览效果如图3-29所示。图3-27图3-28图3-294）在网页代码视图<header>标签后面插入如图3-30所示内容，制作我的收藏。在style.css中创建如图3-31所示的样式。保存网页文件和样式表文件后，预览效果如图3-32所示。图3-30图3-31图3-325）在网页代码视图插入如图3-33所示内容，制作我的购物车。在style.css中创建如图3-34所示的样式。保存网页文件和样式表文件后，预览效果如图3-35所示。图3-33图3-34图3-35（10）制作index.html页面的导航栏。1）在网页代码视图插入如图3-36红框中所示内容，制作网站导航栏。这段代码要添加在</header>标签之前。在style.css中创建如图3-37所示的样式。保存网页文件和样式表文件后，预览效果如图3-38所示。（说明：<nav>是HTML5的新标签，只是作为标注一个导航链接的区域。）图3-36图3-37图3-382）在style.css中创建如图3-39所示的样式，设置导航栏右侧“客服”、“关于我们”两项的显示效果。保存样式表文件后，预览效果如图3-40所示。图3-39图3-40（11）制作index.html页面中的轮播图片。轮播图片是网站首页中常见的一种信息展示方式。制作轮播图片一般采用html代码、CSS代码和JavaScript脚本代码三者配合来完成的。轮播图片的JavaScript脚本代码可以到到jquery之家网站下载。网址：/jQuery/1）准备好4张1180px*400px的轮播图片。2）在index.html网页代码视图插入如图3-41红框中所示内容，制作轮播图片。这段代码要添加在</header>标签之后。打开index.css文件，在其中创建如图3-42红框中所示内容的样式。保存网页文件和样式表文件后，预览效果如图3-43所示。（说明：完成以上操作，网页中只能显示第一张轮播图片，还不能实现多张图片交替显示的效果）图3-41图3-42图3-43为了让轮播图片能够动起来，需要在index.html网页代码中加入JavaScript脚本。首先在index.html网页代码的头部区链接jquery.js和lyz.delayLoading.min.js这2个外部JavaScript文件，如图3-44红框中所示内容。接着在index.html网页代码视图中插入一段JavaScript脚本代码，如图3-45红框中所示内容。（说明：这里实际是用到jquery.js、lyz.delayLoading.min.js和slider.js3个JavaScript文件，由于文件内容太长，这里不截图显示其具体代码了）保存网页文件，预览效果如图3-46、如图3-47所示。图3-44图3-45图3-46图3-47（12）制作index.html页面中的图书主题banner和热销排行。在网页代码视图插入如图3-48所示内容，制作网站导航栏。在style.css中创建如图3-49所示的样式。保存网页文件和样式表文件后，预览效果如图3-50所示。图3-48图3-49图3-50（13）制作index.html页面中的热销排行图书列表。1）在网页代码视图插入如图3-51所示内容，制作热销排行图书列表的显示区域。在style.css中创建如图3-52所示的样式。保存网页文件和样式表文件，这部分目前没有可以预览显示的内容。图3-51图3-522）在网页代码视图插入如图3-53红框中所示内容，制作热销排行图书列表的具体项目。在style.css中创建如图3-54所示的样式。保存网页文件和样式表文件，预览显示效果如图3-55所示。图3-53图3-54图3-553）在网页代码视图下插入如图3-56中红框所示内容，制作热销排行图书列表的文字信息。在style.css中创建如图3-57、3-58、3-59所示的样式。保存网页文件和样式表文件，预览显示效果如图3-60所示。（说明：由于目前只制作一本图书的列表项目，所以是居中显示的，当添加更多图书项目时，就会呈现1行有4列内容的显示效果了）图3-56图3-57图3-58图3-59图3-604）在网页代码视图中，复制如图3-61所示的所有代码，然后在这段代码后面粘贴3次，并修改复制后代码的图片名称和对应的书名、价格和销售数量等文字信息。具体内容如图3-62画红框部分内容所示。保存网页文件，预览显示效果如图3-63所示。（说明：在Dreamweavercc2018的代码视图中，当点击了双标签中的始标签后，系统会自动将这对标签呈现红色高亮显示，这一功能有助于我们完整准确的复制一段html代码。标签代码的高亮效果如图3-51所示）图3-61图3-62图3-63（14）制作index.html页面中的新书推荐版块。1）在网页代码视图插入如图3-64下方红框所示内容，制作新书推荐板块。在style.css中已有titname样式，不用再添加新的样式。保存网页文件，预览效果如图3-65所示。（说明：新书推荐的代码要添加在<divclass="mslist">这对标签的尾标签后面。为了看清楚html代码结构，在网页代码视图中可以使用行号后面的、按钮，折叠或展开某模块的代码）图3-64图3-652）在网页代码视图中，将前面操作步骤（10）制作完成的热销排行图书列表的全部代码，复制到新书推荐标签后面。具体内容如图3-66下方红框所示。预览显示效果如图3-67所示。（说明：为了截图方便，这里对两段<divclass="item">代码进行了折叠收起操作，见图中箭头指向部分。）图3-66图3-673）在网页代码视图中，选中最后一段<divclass="item">代码，如图3-68所示，将其复制到本段代码的下一行处，这样的复制操作共进行4次。然后对这些代码修改图片名称和对应的书名、价格和销售数量等图书信息。修改图书信息后代码内容如图3-69、3-70所示。网页预览效果如图3-71所示。图3-68图3-69图3-70图3-71（15）制作index.html网页页脚信息。页脚信息包括“购物指南”、“支付方式”等内容和“联系客服”、“友情链接”等两部分。这两部分内容都放到<footer></footer>标签内。<footer>和<herder>一样，也是html5新增的语义标签。<footer>标签一般用于定义文档的页脚，用于网页的底部布局，表示页脚，包含文档的版权信息、使用条款的链接、联系信息等等。1）在网页代码视图中插入<footer>标签，如图3-72所示。在style.css文件中创建如图3-73所示的样式。（说明：<footer></footer>标签插在index.html网页代码的结尾处，</body>标记的前面。）图3-72图3-732）在网页代码视图<footer>标签内，插入如图3-74红框中所示内容。制作网页页脚的第一部分内容。在style.css文件中创建如图3-75、3-76所示的样式。保存网页文件和样式表文件，预览效果如图3-77所示。图3-74图3-75图3-76图3-773）在网页代码视图</footer>标签前面，插入如图3-78红框中所示内容。制作网页页脚的第一部分内容。在style.css文件中创建如图3-79所示的样式。保存网页文件和样式表文件，预览效果如图3-80所示。图3-78图3-79图3-80至此，完成冬藏网站index.html静态页面的制作任务。任务2制作网站的图书类目页面（静态）1.实验目的：（1）了解电商网站商品类目页面的主要功能。（2）掌握使用Dreamweaver软件制作网页整体布局的方法和技巧。（3）掌握使用Dreamweaver软件制作网页商品类目页面的方法和技巧。（4）掌握使用Dreamweaver软件编写、修改CSS样式表代码的方法和技巧。掌握使用Dreamweaver软件调试网页的方法和技巧。2.实验要求（1）安装DreamweaverCC2018中文版（或其它相近版本的Dreamweaver软件）。（2）掌握Dreamweaver软件的使用方法。对HTML标签知识和CSS代码知识比较熟悉。3.实验目标（1）完成冬藏网站首页goods-list.html文件的制作。完成冬藏网站首页index.html文件和goods-list.html文件的链接制作。4.问题分析（1）有了网站首页文件，怎么快速制作出其他页面。图书分类页面选择项需要设置哪些内容。5.解决办法（1）要快速制作出整体风格一致，功能有所不同的网页，有多种方法，如使用Dreamweaver软件的网页模板功能，使用Dreamweaver的库功能，使用自助建站等，这些方法各有利弊。而建立一套规范可靠的CSS外部样式表文件，是保证网页风格统一，建站高效快捷的关键因素。（2）电商网站，图书分类页面选择区域，需要设置哪些内容，主要是考虑浏览者和顾客的需要。不同的浏览者需求和浏览习惯会有所不同，在项目设置上，要选择多数浏览者都需要的分类方式。如开发者没有经验，可以参考其他网站的设置方法。6.实验步骤（1）冬藏网站goods-list.html网页的最终效果，如图3-81所示。图3-81（2）将任务一中制作完成的index.html网页文件复制一份，改名为goods-list.html,存放在站点D:\dongcang文件夹下。（3）在Dreamweavercc2018软件中，打开goods-list.html文件。（4）打开代码视图，删除goods-list.html文件中如图3-82所示的代码。（说明：这是原来首页文件中的轮播图片到热销排行部分的代码）图3-82（5）在代码视图下，继续往下移动鼠标，找到新书推荐这行代码，将其删除。如图3-83所示。保存网页，预览效果如图3-84所示。图3-83图3-84（6）打开文件，新建一个goods.css样式表文件，保存在D:\dongcang\css文件夹下。如图3-85、3-86所示。图3-85图3-86（7）切换到goods-list.html文件代码视图，将光标放到网页代码的头部区，链接引入goods.css样式表文件。如图3-87红框处所示。图3-87（8）在goods-list.html文件代码视图下，将光标放到</header>标签后面空白处。如图3-88所示。图3-88（9）在网页代码视图中插入如图3-89红框中所示内容。在goods.css创建如图3-90所示的样式。保存网页和样式表文件，预览效果如图3-91中箭头指向地方所示。图3-8