长春工业大学:《电子商务》课程教学资源(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 设计首页布局
按次数下载不扣除下载券;
注册用户24小时内重复下载只扣除一次;
顺序:VIP每日次数-->可用次数-->下载券;
- 因特网多媒体技术(PPT讲稿).ppt
- International Trade Forms.ppt
- 香港理工大学:Building Robust Wireless LAN for Industrial Control with DSSS-CDMA Cell Phone Network Paradigm.ppt
- 香港浸会大学:《Experiencing Cluster Computing》Class 8 Case Studies.ppt
- 中国科学技术大学:《计算机体系结构》课程教学资源(PPT课件讲稿)动态调度(Cont)、推断执行和ILP.ppt
- 《多媒体教学软件设计》课程PPT教学课件:第13章 多媒体教学软件中脚本编程技巧.ppt
- 山西国际商务职业学院:《网页设计与制作》课程教学资源(PPT课件)第一章 网页设计基础知识.ppt
- 《算法设计技巧与分析》课程教学资源(PPT讲稿)Lecture 8 贪婪法则 Greedy Approach.ppt
- 山东大学:《计算机图形学》课程PPT教学课件(Programming with OpenGL)Part 3:Three Dimensions.ppt
- Integrated analysis of regulatoryand metabolic networks revealsnovel regulatory mechanisms inSaccharomyces cerevisiae.ppt
- 基于语义关联和信息增益的TFIDF改进算法研究.ppt
- 《C程序设计》课程PPT教学课件(电子教案)第六章 函数.ppt
- 安徽理工大学:《汇编语言》课程教学资源(PPT课件讲稿)第五章 循环与分支程序设计.ppt
- 四川大学:Object-Oriented Design and Programming(Java,PPT课件).ppt
- 《编译原理和技术》课程PPT教学课件:第十三章 函数式语言的编译.ppt
- 《Microsoft Access 2003》教程PPT:第9章 报表设计.ppt
- 北京大学远程教育:《计算机应用基础》课程PPT教学课件(专科)串讲(综合复习).pptx
- 计算机问题求解(PPT讲稿)B树.pptx
- 香港理工大学:INSTRUCTION SETS 指令.pptx
- 《计算机网络原理》课程教学资源(PPT课件讲稿)第二章 网络实现模型.ppt
- 数据传送类指令(PPT讲稿).ppt
- Lower bound for sorting, radix sort.ppt
- 《ASP动态网页设计实用教程》教学资源(PPT课件讲稿)第8章 Web数据库基础.ppt
- 卷积码的概率译码(PPT讲稿).ppt
- 电子工业出版社:《计算机网络》课程教学资源(第五版,PPT课件讲稿)第十章 下一代因特网.ppt
- 复旦大学:Trapping in scale-free networks with hierarchical organization of modularity.pptx
- Network and System Security Risk Assessment(PPT讲稿)Introduction.ppt
- 香港科技大学:Latent Tree Models.pptx
- 《汇编语言程序设计》课程教学资源(PPT课件讲稿)循环与分支程序设计.ppt
- ARM Tachnology:Chapter 3 STM32 Clock and Configuration.ppt
- 《软件工程简介》课程PPT教学课件(可行性研究、需求分析、总体设计、详细设计).ppt
- 利用NetRiver实验系统实现IP协议交互和TCP协议交互.ppt
- 江苏海洋大学(淮海工学院):《Java面向对象程序设计》课程教学资源(PPT课件讲稿)第3章 Java 面向对象编程 3.1 面向对象软件开发概述.pptx
- 《数字图像处理 Digital Image Processing》课程教学资源(PPT课件讲稿)第2章 图像的基本知识及运算.ppt
- 西安电子科技大学:《操作系统 Operating Systems》课程教学资源(PPT课件讲稿)Chapter 02 进程和线程 Processes and Threads.ppt
- 《计算机辅助设计 Computer Aided Design》课程PPT教学课件:第一篇 CAD技术 第一章 几何造型方法介绍和分类.ppt
- 清华大学:高校信息门户建设(PPT讲稿).ppt
- 《汇编语言》课程PPT教学课件:第三章 80x86寻址方式和指令系统.ppt
- 《网站设计与建设 Website design and developments》课程教学资源(PPT课件讲稿)第一部分 Web基础知识 第3章 图形与Web设计.ppt
- 香港城市大学:Introduction to Real-Time Systems(Design and Analysis of Algorithms).pptx