长春工业大学：《电子商务》课程教学资源（PPT课件）第9章 网络鞋城前台页面

BUSINESS 器e出 t。 c 第9章网络鞋城前台页面 長春工主大孝CCUT经济管理学院 CHANGOHUN UNIVERSITY OF TECHNOLOGY

内容概览 网站的开发流程 看., aDDED面BB面B面 ● 2设计首页布局 里日 3首的制作 制作商品展示页 面量日日 目面 5制作商品详细信息页 6制作查看购物车页 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

内 容 概 览 网站的开发流程 设计首页布局 首页的制作 制作商品展示页 制作商品详细信息页 制作查看购物车页

91网站的开发流程 典型的网站开发流程包括以下几个阶段。 ①规划站点:包括确立站点的策略或目标、确定所 面向的用户以及站点的数据需求 ②网站制作:包括设置网站的开发环境、规划页面 设计和布局、创建内容资源等。 ③测试站点:使用 Dreamweaver测试页面的链接及 网站的兼容性 ④发布站点:使用 Dreamweaver将站点发布到服务 器上 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

典型的网站开发流程包括以下几个阶段。 ① 规划站点：包括确立站点的策略或目标、确定所 面向的用户以及站点的数据需求。 ② 网站制作：包括设置网站的开发环境、规划页面 设计和布局、创建内容资源等。 ③ 测试站点：使用Dreamweaver测试页面的链接及 网站的兼容性。 ④ 发布站点：使用Dreamweaver将站点发布到服务 器上。 9.1 网站的开发流程

91网站的开发流程 9.1.1站点规划 1.网站结构规划 (1)网站结构图 (2)使用合理的文件夹保存文档 (3)使用合理的文件名称 2.网站内容规划 3.网站界面规划 4.网站功能设置 鞋城前台页面的主要功能包括:鞋城首页展示各种鞋类商品,帮助 客户搜索到欲购买的商品,展示商品的详细信息,会员的注册与登录, 鞋城的购物流程和指南,购买商品的购物车,客户确认订单并填写送货 地址,选择支付方式和物流方式等 鞋城后台页面的主要功能包括:商品管理,订单管理,促销管理, 广告管理,文章管理,会员管理和系统设置等。 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

9.1.1 站点规划 1．网站结构规划 （1）网站结构图 （2）使用合理的文件夹保存文档 （3）使用合理的文件名称 2．网站内容规划 3．网站界面规划 4．网站功能设置 鞋城前台页面的主要功能包括：鞋城首页展示各种鞋类商品，帮助 客户搜索到欲购买的商品，展示商品的详细信息，会员的注册与登录， 鞋城的购物流程和指南，购买商品的购物车，客户确认订单并填写送货 地址，选择支付方式和物流方式等。 鞋城后台页面的主要功能包括：商品管理，订单管理，促销管理， 广告管理，文章管理，会员管理和系统设置等。 9.1 网站的开发流程

91网站的开发流程 9.1.2网站制作 完整的网站制作包括以下两个过程: 1.前台页面制作 当网页设计人员拿到美工效果图以后,编写HTM、CSS, 将效果图转换为.html网页,其中包括图片收集、页面布局规 划等工作。 2.后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连 接、动态网页编程等。本书主要讲解前台页面的制作,后台 程序开发读者可以在动态网站设计的课程中学习 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

9.1.2 网站制作 完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS， 将效果图转换为.html网页，其中包括图片收集、页面布局规 划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连 接、动态网页编程等。本书主要讲解前台页面的制作，后台 程序开发读者可以在动态网站设计的课程中学习。 9.1 网站的开发流程

91网站的开发流程 9.1.3测试网站 在把站点上传到服务器之前,要先在本地对其测试。实 际上,在站点建设过程中,最好经常对站点进行测试并解决 出现的问题,这样可以尽早发现问题并避免重犯错误。测试 网页主要从以下3个方面着手 应该确保在目标浏览器中,页面能够正常显示和正常使 用,所有链接都正常,页面下载也不会占用太长时间,这几 点很重要。 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

9.1.3 测试网站 在把站点上传到服务器之前，要先在本地对其测试。实 际上，在站点建设过程中，最好经常对站点进行测试并解决 出现的问题，这样可以尽早发现问题并避免重犯错误。测试 网页主要从以下3个方面着手。 应该确保在目标浏览器中，页面能够正常显示和正常使 用，所有链接都正常，页面下载也不会占用太长时间，这几 点很重要。 9.1 网站的开发流程

91网站的开发流程 9.1.4发布站点 在创建一个功能齐全的Web站点后,可以使用 Dreamweaver将文件上传到远程Web服务器以发布该站点。 Dreamweaver中包含管理站点的工具,可以向远程服务器和从 远程服务器传输文件,设置存回/取出过程来防止覆盖文件, 以及同步本地和远端站点上的文件。 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

9.1.4 发布站点 在创建一个功能齐全的Web站点后，可以使用 Dreamweaver将文件上传到远程Web服务器以发布该站点。 Dreamweaver中包含管理站点的工具，可以向远程服务器和从 远程服务器传输文件，设置存回/取出过程来防止覆盖文件， 以及同步本地和远端站点上的文件。 9.1 网站的开发流程

92设计首页布局 9.2.1使用 Dreamweaver创建站点 1.建立站点 2.建立目录结构 在制作各网页前,用户需要确定整个网站的目录结构。 对于中小型网站,一般会创建如下通用的目录结构: ● Images目录:存放网站的所有图片。 ● style目录:存放网站的CSS样式文件,实现内容和样式的 分离。 ●js目录:存放 JavaScript脚本文件。 ● admin目录:存放网站后台管理程序 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

9.2.1 使用Dreamweaver创建站点 1．建立站点 2．建立目录结构 在制作各网页前，用户需要确定整个网站的目录结构。 对于中小型网站，一般会创建如下通用的目录结构： ⚫images目录：存放网站的所有图片。 ⚫style目录：存放网站的CSS样式文件，实现内容和样式的 分离。 ⚫js目录：存放JavaScript脚本文件。 ⚫admin目录：存放网站后台管理程序。 9.2 设计首页布局

92设计首页布局 9.2.2页面布局规划 网络鞋 鞋城首页包括网站 的Logo、导航、分类、 畅销排行榜、新品上架、 购物车链接等信息,是 新品上架 个典型的两列布局页 面。鞋城首页的效果如 门形 图98所示。 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

9.2.2 页面布局规划 鞋城首页包括网站 的Logo、导航、分类、 畅销排行榜、新品上架、 购物车链接等信息，是 一个典型的两列布局页 面。鞋城首页的效果如 图9-8所示。 9.2 设计首页布局

92设计首页布局 9.2.2页面布局规划 wrapper 布局示意图如图9-9 header 所示。 site title header right menubar top_nav search maIn sidebar content slider-wrapper sidebar box sidebar box footer 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

9.2.2 页面布局规划 布局示意图如图9-9 所示。 9.2 设计首页布局