购物商城网站前台的设计与实现

发布时间 : 2024/6/26 22:15:25 星期三 文章购物商城网站前台的设计与实现更新完毕开始阅读

.

(2)传达企业人士的设计理念； (3)加深浏览者对商品的认识 3.整体设计风格

考虑的定位、主要受众群体和设计目标，我们采用的设计风格简洁大方，稳重。 4.配色方案

以橙色主色，以白色为辅助色，字体采用宋体设计。 5.网上商城功能概述： (1)首页，商品展示；

(2)会员注册、登录，建立完整的会员资料库； (3)管理员发布、管理商品信息、上传图片等； (4)支持商品多级分类检索、关键词模糊搜索； (5)支持价格的管理，包括市场价、批发价等； (6)方便快捷的购物车、网上支付； (7)可编辑的订购说明。

第二章 开发技术和工具的介绍

.

.

2.1 开发技术

2.1.1 html

使用html描述的文件，能独立于各种操作系统平台，访问它只需要www浏览器，我们所看到的网页，是浏览器对html文件进行解释的结果。Html是由标记和属性组成的规则。这些规则规定了文字，表格和超在网页中显示等容。 2.1.2 CSS

它是一种用来表现html（标准通用语言的一个应用）或xml（标准通用标记语言的一个子集）等文件样式的计算机语言。

它是用于增强控制网页样式并允许将样式信息与网页容分离的一种标记性语言。 2.1.3 Div+CSS

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统过表格（table）布局定位的方式不同，它可以实现网页页面容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。

2.2开发工具

Dreamweaver 介绍：

一个可视化的网页设计和管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。

.

.

第三章 的总体设计

贵美商城的总体设计结构图如图3.1所示。

贵美商城 首 页 商 品 展 示 商 品 介 绍 页 购 物 车 页 登 录 页 注 册 页 帮 助 中 心 页 页

图3.1贵美商城总体设计结构图

.

.

第四章 的详细设计与实现

4.1首页

4.1.1首页布局的实现

1.首页包括头部、主体部分、和底部三大部分。首页布局如图4.1所示。

顶部（header） 主体部分（main） 底部（footer） 4.1首页整体布局

2.首先建立HTML的组织结构

主页整体布局时分为三个div块，即头部header，中间主体部分main和底部footer。顶部和底部使用iform引用“顶部.html”和“底部.html”。首页的整体布局结构代码如下：