- 1、本文档共16页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
HTML5,CSS3,javasript,网页制作,网页设计第9章网络花店前台页面概要
HTML+CSS+JavaScript网页制作 机械工业出版社同名教材 配套电子教案 * * 9.1 网站的开发流程 9.2 使用Dreamweaver创建站点 9.3 案例:制作网络花店首页 9.4 案例:制作商品展示页 9.5 案例:制作商品详细信息页 9.6 案例:制作查看购物车页 第9章 网络花店前台页面 典型的网站开发流程包括以下几个阶段。 ① 需求分析:包括建站目的及目标定位分析。 ② 站点规划:包括结构规划、内容规划、界面规划及网站功能设置。 ③ 网站制作:包括设置网站的开发环境、创建内容资源、页面设计和布局等。 ④ 测试发布:测试页面的链接及网站的兼容性,并将站点发布到服务器上。 9.1 网站的开发流程 9.1.1 需求分析 1.建站目的 建立网站的目的要么是增加利润,要么是传播信息或观点。显然,创建网络书城网站的目的是第一种:增加利润。随着网上交易安全性方面的逐渐完善,网上购物已逐渐成为人们消费的时尚。同时,通过网上在线销售,可以扩展企业的销售渠道,提高公司的知名度,降低企业的销售成本,网络书城正是在这样的业务背景下建立的。 2.目标定位 提出目标定位是非常简单的事情,更重要的是如何实现目标。在很多Web网站项目中,有包容一切的倾向。实际上一个网站不可能满足所有人的需求,对设计者来说,网站一定要有特定的用户和特定的任务。 9.1 网站的开发流程 9.1.2 站点规划 1.网站结构规划 (1)网站结构图 (2)使用合理的文件夹保存文档 (3)使用合理的文件名称 2.网站内容规划 3.网站界面规划 4.网站功能设置 花店前台页面的主要功能包括:花店首页展示各种类型的鲜花,帮助客户搜索到欲购买的商品,展示商品的详细信息,会员的注册与登录,花店的购物流程和指南,购买商品的购物车,客户确认订单并填写送货地址,选择支付方式和物流方式等。 花店后台页面的主要功能包括:商品管理,订单管理,促销管理,广告管理,文章管理,会员管理和系统设置等。 9.1 网站的开发流程 9.1.3 网站制作 完整的网站制作包括以下两个过程: 1.前台页面制作 前台页面制作包括内容采集整理、图片的处理、背景设置、页面排版及样式设计等。 2.后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。本书主要讲解前台页面的制作,后台程序开发读者可以在动态网站设计的课程中学习。 9.1 网站的开发流程 9.1.4 测试发布 1.测试站点 网站测试与传统的软件测试不同,它不但需要检查是否按照设计的要求运行,而且还要测试系统在不同用户端的显示是否合适,最重要的是从最终用户的角度进行安全性和可用性测试。测试网页主要从以下3个方面着手。 ? 页面的效果是否美观。 ? 页面中的链接是否正确。 ? 页面的浏览器兼容性是否良好。 2.发布站点 当完成了网站的设计、调试、测试和网页制作等工作后,需要把设计好的站点上传到服务器来完成整个网站的发布。Dreamweaver内置了强大的FTP功能,可以帮助用户实现对站点文档的上传。 9.1 网站的开发流程 9.2.1 Dreamweaver基本工作界面 9.2 使用Dreamweaver创建站点 组合面板 活动面板内容 插入工具栏 文档工具栏 文档窗口 属性面板 9.2.2 创建站点与目录结构 1.创建站点 2.创建目录结构 在制作各网页前,用户需要确定整个网站的目录结构。对于中小型网站,一般会创建如下通用的目录结构: images目录:存放网站的所有图片。 style目录:存放网站的CSS样式文件,实现内容和样式的分离。 js目录:存放JavaScript脚本文件。 admin目录:存放网站后台管理程序。 9.2 使用Dreamweaver创建站点 【案例展示】制作网络花店首页,本例文件index.html在浏览器中的浏览效果如图9-8所示。 9.3 案例:制作网络花店首页 布局示意图如图9-9所示。 9.3 案例:制作网络花店首页 制作过程如下: ① 页面布局规划。花店首页包括网站的Logo、导航、分类、特别推荐、花店简介、新品上架、购物车链接、会员登录、最新消息和友情链接等信息,是一个典型的三列布局页面。 ② 外部样式表。在文件夹css下新建一个名为style.css的样式表文件,样式表中各区域的样式设计如下。 ③ 网页结构文件。在当前文件夹中,用记事本新建一个名为index.html的网页文件。 ④ 浏览网页。 9.3 案例:
文档评论(0)