苏城美食网的设计与实现
目录
引言 1
一、 开发技术和软件简绍 2
（一）DIV + CSS技术 2
（二）应用软件的介绍 2
1.网页制作软件Dreamweaver 2
2.平面设计软件Photoshop 2
二、总体架构 2
（一）功能和模块的介绍 2
1.美食展示模块 2
2.美食地点展示模块 2
3.留言板模块 3
4.购物车模块 3
5.登录和注册模块 3
（二）网站的运行环境 3
（三）网站的整体结构 3
三、 设计内容 4
（一） 首页设计 4
1.结构框架的排版 4
2.主题风格的定位 5
3.网页页头的设计 5
（二） 子页设计 6
1.美食列表的设计 6
2.美食店铺的设计 6
3.留言板的设计 7
4.购物车的设计 8
5.登录和注册 9
四、总结 11
致谢 12
参考文献 12
付：网站效果图 13
引言
在当今的信息化时代中，网络技术的发展给我们的生活带来了巨大的变化，特别是在21世纪初期，而它与现在人们的生活息息相关，可以说是互利共生。因为当今的人们已经离不开网络，而网络的持续发展更依赖与人类。现在许许多多的网站已出现，网站的建立与现在大大小小的企业密不可分，而当今最流行的“线上线下”的电商模式更是火热，现在的宅男、宅女的出现不就是因为这些吗？在家里只需要网络所需要的都能够买到，而这种网络销售平台，在网联网的应用中规模也越来 *好棒文|www.hbsrm.com +Q: *351916072*
越大，而且被在现在的新一代创业者更加看中。对于网络销售平台的需求，可以寄生与当今的几大平台，也可以自立门户。而网站的建立是div+css来布局的，所以选择了此题。
此论文详细论述了苏城美食网站开发的设计过程。运用了 Dreamweaver为该网站开发工具，再使用 HTML结合 JavaScript 语言，这样的构造很有利于以后对网站系统开发和新内容的更新，并为以后的开对网站开发上积累了一定的宝贵经验，提高自己对div+css的掌握能力。
本文介绍了如何实现了首页、美食列表、美食店铺、留言板等功能，系统性迎合一个销售网站的需求。
论文的组织大体内容如下：先介绍了关于div+css理论知识；又介绍了制作该网站所用到的两个软件：Dreamweaver和Photoshop；再者对网站的一个整体规划，和一些制作的详细设计，包括网页的设计和连接，各功能模块的实现；最后对网站进行了整体性的测试。
一、 开发技术和软件简绍
（一）DIV + CSS技术
HTML英文全称：HyperText Markup Language，又叫做超文本标记语言。是当今最为热门的网页文档编辑语言，对于怎样理解超文本，通俗说就是我们日常所说链接，它其实是一种指向型的文档链接。就是把服务器中大量的文档链接起来，用户不在大量信息中反复的寻找自己需要的内容，只要点击下链接，页面就会在大量的信息中跳转到自己要找的文档中。而DIV + CSS一般都是与HTML相结合，DIV + CSS的特点符合W3C标准、兼容性强、CSS简洁代码、表现和结构分离。
（二）应用软件的介绍
1.网页制作软件Dreamweaver
Dreamweaver是我接触到的第一款网页编辑器，同时它也是专业编写和管理网页的编辑器。使用它能够很容易的去编写网页代码并且可以直接的看到编辑的效果。因此，Dreamweaver对于初学者来说网页编写显得更加直观、简单。网页设计基本上都是以代码为主，在成品网站做成后，Dreamweaver同时也能起到后期对网站的维护和更新。
2.平面设计软件Photoshop
Photoshop，便是我们常说的“PS”。是对图片进行处理的工具，通过它可以将图片切成任意所需要的形状。而对网页设计，我们可以把网页切成很多的小模块，网页的打开速度页大大的提高。网站的质量有很大一部分与图片关系，通过Photoshop处理的图片有着尺寸合理、清晰度更高的特点。因此Photoshop是制作网页必备的工具之一。
二、总体架构
（一）功能和模块的介绍
1.美食展示模块
该功能模块主要实现对苏城美食的图片展示。
该功能模块以图片、文字介绍为主，全面的对各种美食的特色和做法的介绍。
2.美食地点展示模块
该功能模块主要实现对特色的美食的产地介绍。
该功能模块以文字介绍为主，图片为辅的方法，对各种分布在苏州各地的美食地点详细的介绍，如：
图2-1 美食地点展示组成图
3.留言板模块
该功能模块顾名思义就是顾客对我们服务的一些意见和建议。
4.购物车模块
该功能模块主要实现对选择商品的数量和价格的计算。
5.登录和注册模块
该功能模块主可以让顾客进行登录和注册，以便使用我们网站的一些功能。
（二）网站的运行环境
在基本的编码完成后，要对源程序进行实际测试。而测试的目的是为了不要出现一些常见的技术性问题，如：网页排版，图片显示的问题，从而进一步的对网站代码进行改正。消除网站乱码，保证程序可以可靠的安全的运行，最后把一个确保全美的网站交给客户们使用。
在网站中的测试的正中之重就是对网站的浏览器兼容性测试。在网页测试的时候我安装了IE、360等现在常用的浏览器进行了逐个测试。在测试过程中遇到了很多问题大都关于DIV在页面上的浮动问题，改了许久都没能改回来，最后还是在指导老师的指导和同学的帮助热情下，使得各个网页在各种浏览器中都能正常显示。
（三）网站的整体结构
图2-2 网站总体结构图
1.美食首页是一个是该网站的门面，美食首页上主要以一个动态的浮窗去介绍当下苏州美食的实时状态，然后下面就是介绍每日美食精品。
2．美食列表主要介绍主要以一张诱人的图片来吸引顾客的眼球，展示各种特色美食和对美食的介绍。
3.美食店铺：对分布在苏州各地的美食店铺进行跟踪，发掘他们的特色美味，有我们的美食侦探完成，简绍这些店铺的地点和导航。
图3-3 美食列表代码
2.美食店铺的设计
美食店铺同样是我们网站的组成的正要部分之一，它基本上与美食列表的设计代码风格基本上都一样，下面图片是美食店铺的效果图如下：
图3-4 美食店铺实际效果图
3.留言板的设计
留言板的设计是我感觉最好的亮点，消费者不论在消费前还是消费后都可以在留言板上留下自己的足迹，可以让各个消费者对我们的服务和美食的口味有着进一步的交流，留言板的设计是文本框与div+css的结合，更加体现了div+css的灵活性。以下是效果图和代码：
引言 1
一、 开发技术和软件简绍 2
（一）DIV + CSS技术 2
（二）应用软件的介绍 2
1.网页制作软件Dreamweaver 2
2.平面设计软件Photoshop 2
二、总体架构 2
（一）功能和模块的介绍 2
1.美食展示模块 2
2.美食地点展示模块 2
3.留言板模块 3
4.购物车模块 3
5.登录和注册模块 3
（二）网站的运行环境 3
（三）网站的整体结构 3
三、 设计内容 4
（一） 首页设计 4
1.结构框架的排版 4
2.主题风格的定位 5
3.网页页头的设计 5
（二） 子页设计 6
1.美食列表的设计 6
2.美食店铺的设计 6
3.留言板的设计 7
4.购物车的设计 8
5.登录和注册 9
四、总结 11
致谢 12
参考文献 12
付：网站效果图 13
引言
在当今的信息化时代中，网络技术的发展给我们的生活带来了巨大的变化，特别是在21世纪初期，而它与现在人们的生活息息相关，可以说是互利共生。因为当今的人们已经离不开网络，而网络的持续发展更依赖与人类。现在许许多多的网站已出现，网站的建立与现在大大小小的企业密不可分，而当今最流行的“线上线下”的电商模式更是火热，现在的宅男、宅女的出现不就是因为这些吗？在家里只需要网络所需要的都能够买到，而这种网络销售平台，在网联网的应用中规模也越来 *好棒文|www.hbsrm.com +Q: *351916072*
越大，而且被在现在的新一代创业者更加看中。对于网络销售平台的需求，可以寄生与当今的几大平台，也可以自立门户。而网站的建立是div+css来布局的，所以选择了此题。
此论文详细论述了苏城美食网站开发的设计过程。运用了 Dreamweaver为该网站开发工具，再使用 HTML结合 JavaScript 语言，这样的构造很有利于以后对网站系统开发和新内容的更新，并为以后的开对网站开发上积累了一定的宝贵经验，提高自己对div+css的掌握能力。
本文介绍了如何实现了首页、美食列表、美食店铺、留言板等功能，系统性迎合一个销售网站的需求。
论文的组织大体内容如下：先介绍了关于div+css理论知识；又介绍了制作该网站所用到的两个软件：Dreamweaver和Photoshop；再者对网站的一个整体规划，和一些制作的详细设计，包括网页的设计和连接，各功能模块的实现；最后对网站进行了整体性的测试。
一、 开发技术和软件简绍
（一）DIV + CSS技术
HTML英文全称：HyperText Markup Language，又叫做超文本标记语言。是当今最为热门的网页文档编辑语言，对于怎样理解超文本，通俗说就是我们日常所说链接，它其实是一种指向型的文档链接。就是把服务器中大量的文档链接起来，用户不在大量信息中反复的寻找自己需要的内容，只要点击下链接，页面就会在大量的信息中跳转到自己要找的文档中。而DIV + CSS一般都是与HTML相结合，DIV + CSS的特点符合W3C标准、兼容性强、CSS简洁代码、表现和结构分离。
（二）应用软件的介绍
1.网页制作软件Dreamweaver
Dreamweaver是我接触到的第一款网页编辑器，同时它也是专业编写和管理网页的编辑器。使用它能够很容易的去编写网页代码并且可以直接的看到编辑的效果。因此，Dreamweaver对于初学者来说网页编写显得更加直观、简单。网页设计基本上都是以代码为主，在成品网站做成后，Dreamweaver同时也能起到后期对网站的维护和更新。
2.平面设计软件Photoshop
Photoshop，便是我们常说的“PS”。是对图片进行处理的工具，通过它可以将图片切成任意所需要的形状。而对网页设计，我们可以把网页切成很多的小模块，网页的打开速度页大大的提高。网站的质量有很大一部分与图片关系，通过Photoshop处理的图片有着尺寸合理、清晰度更高的特点。因此Photoshop是制作网页必备的工具之一。
二、总体架构
（一）功能和模块的介绍
1.美食展示模块
该功能模块主要实现对苏城美食的图片展示。
该功能模块以图片、文字介绍为主，全面的对各种美食的特色和做法的介绍。
2.美食地点展示模块
该功能模块主要实现对特色的美食的产地介绍。
该功能模块以文字介绍为主，图片为辅的方法，对各种分布在苏州各地的美食地点详细的介绍，如：
图2-1 美食地点展示组成图
3.留言板模块
该功能模块顾名思义就是顾客对我们服务的一些意见和建议。
4.购物车模块
该功能模块主要实现对选择商品的数量和价格的计算。
5.登录和注册模块
该功能模块主可以让顾客进行登录和注册，以便使用我们网站的一些功能。
（二）网站的运行环境
在基本的编码完成后，要对源程序进行实际测试。而测试的目的是为了不要出现一些常见的技术性问题，如：网页排版，图片显示的问题，从而进一步的对网站代码进行改正。消除网站乱码，保证程序可以可靠的安全的运行，最后把一个确保全美的网站交给客户们使用。
在网站中的测试的正中之重就是对网站的浏览器兼容性测试。在网页测试的时候我安装了IE、360等现在常用的浏览器进行了逐个测试。在测试过程中遇到了很多问题大都关于DIV在页面上的浮动问题，改了许久都没能改回来，最后还是在指导老师的指导和同学的帮助热情下，使得各个网页在各种浏览器中都能正常显示。
（三）网站的整体结构
图2-2 网站总体结构图
1.美食首页是一个是该网站的门面，美食首页上主要以一个动态的浮窗去介绍当下苏州美食的实时状态，然后下面就是介绍每日美食精品。
2．美食列表主要介绍主要以一张诱人的图片来吸引顾客的眼球，展示各种特色美食和对美食的介绍。
3.美食店铺：对分布在苏州各地的美食店铺进行跟踪，发掘他们的特色美味，有我们的美食侦探完成，简绍这些店铺的地点和导航。
图3-3 美食列表代码
2.美食店铺的设计
美食店铺同样是我们网站的组成的正要部分之一，它基本上与美食列表的设计代码风格基本上都一样，下面图片是美食店铺的效果图如下：
图3-4 美食店铺实际效果图
3.留言板的设计
留言板的设计是我感觉最好的亮点，消费者不论在消费前还是消费后都可以在留言板上留下自己的足迹，可以让各个消费者对我们的服务和美食的口味有着进一步的交流，留言板的设计是文本框与div+css的结合，更加体现了div+css的灵活性。以下是效果图和代码：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1654.html
