美妆商城”网站开发
目录
一、引言 1
（一）开发背景 1
（二）选题内容 1
1.课题的总体介绍 1
2.指导思想及技术路线 1
3.能力要求及目标 1
（三）应解决的主要问题 1
二、开发工具、开发语言介绍 2
（一）Dreamweaver简介 2
（二）Photoshop简介 2
（三）HTML简介 2
（四）CSS样式表概述 3
（五）JavaScript简介 3
（六）JQuery概述 3
三、网站需求分析 4
（一）网站开发目的 4
（二）功能性需求 4
（三）非功能性需求 5
四、详细设计 6
（一）网站的制作步骤 6
（二）创建站点 6
（三）图片素材处理 6
（四）网站首页制作 7
（五）子页制作 10
五、网站测试 22
六、总结 22
七、谢辞 23
参考文献 24
一、引言
（一）开发背景
时代的变迁，经济的飞速的发展，网上购物的巅峰时代来临。越来越多的网民选择在家里网上购物，既方便又快捷。这意味着一般的线下商店，传统企业也要跟着时代的步伐来改变他们的传统的营销方式。那最好的解决办法就是创建一个网上购物平台，让网民能够在网站上浏览到公司所要销售的产品，最好能够达到线上线下于一体的销售模式。架起一座买卖的桥梁。
创建网上购物平台首先就得必须要把整个网站的页面设计好，整个网站页面的排版和布局，整个页面的色彩搭配等等。本网站就是在这现在 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
网上购物流行的时代的背景下，设计这一购物网站。
（二）选题内容
1.课题的总体介绍
为网民提供一个网上购物平台。
网页大致有注册页面，购物页面、商品的详细页面、购物列表页面、关于公司介绍的页面等等。因为做的是静态页面，没有接入数据库等后台，大致的web前端页面都布局设置完成。
2.指导思想及技术路线
本购物商城主要采用div+css来布局整个网站页面；使用JavaScript和JQuery来增加网站页面的特效，增加网站美观度。使用photoshop来制作网站页面使用到图片素材。
3.能力要求及目标
利用大学三年所学到的知识，尽我所能，来设计出这一网站购物平台，使用户浏览这个页面能感觉到页面的整体搭配什么的都合理，使用起来方便快捷。
（三）应解决的主要问题
网站页面只能限定某个浏览器浏览，兼容性调试不成功。 二、开发工具、开发语言介绍
(一)Dreamweaver简介
Adobe Dreamweaver，简称“DW”，在中国称它为“梦想编织者”，它是制作网站和网站管理于一体的网页编辑器，由美国MACROMEDIA公司开发。特别是对专业的网页设计师来说，Dreamweaver是一个可视化的Web开发工具。你可以用它来轻松地创建跨平台、跨浏览器限制的动感网页。
对于大部份用户来说，Dreamweaver是一个在网页设计和制作方面使用最为广泛，功能最为强大的软件。随着Dreamweaver新版本的发布，尤其是Dreamweaver 8.0发布之后，为它在该领域奠定了基础。它的制作效率非常快，能够快速的将一些软件或档案移动到网页上。快捷键的使用，更加能够让工作事半功倍。Dreamweaver编写方式灵活，可视化的编辑界面，多功能的CSS支持等等。
（二）Photoshop简介
Adobe Photoshop，简称“PS”，它是由Adobe Systems开发和发行的一款专为图片设计的图像处理制作一体化软件。它大大地简化了图片设计的工作难度，可以有效地进行图片编辑工作。它有非常强大的功能，在图像、图形、文字等各个方面都有所涉及。不管对于专业设计者还是业余爱好者来说，它无疑是网页编辑的最佳伴侣。
同样，在使用photoshop时，便捷的快捷键大大的提高了图片处理速度。而且它可以将图片保存为你想要的任何一种格式，处理方式较多。而且photoshop不止在网页编辑这个范围所涉及，它的范围比你想象中还要多，它在平面设计、广告摄影、影像创意、视觉创意等方面都有立足之地。
（三）HTML简介
HyperText Markup Language超文本标记语言，简称“HTML”。制作网页最基本的语言就是HTML+CSS。这是每个想要学习网页制作的人最需要掌握的知识点。HTML通常是网页制作者用来编辑WEB的前端页面。一个好的网站最基本的就是有一个好看的页面，有了好看的页面之后浏览人数的增多，网站就能推广出去。HTML虽然制作文档简洁，但它有很强大的功能，它能够让页面变得更加的生动，我们能够在页面中插入音频、视频等各色各样的内容。它能够描述文本，包括图像、声音以及其他能够出现在网页中的各种元素。
HTML基本结构：
（四）CSS样式表概述
Cascading Style Sheets层叠样式表，简称“CSS”，是目前基于文本的显示的最佳性能的设计语言。可以根据不同用户的理解能力，为各类的人群简化或优化写法，有很强的可读性。事实上，CSS样式表是一组样式，它增加了更多的样式定义方法来协助HTML。样式是一组用一个特定的名称来识别和保存一组相关的字符和段落格式。它就像我们使用word，选中我们需要修改的文字，来改变文字的样式，大小 ，字形等。同样地，通过CSS我们可以将网页的元素来定义各种样式，例如文字的颜色，图片的大小，图片的位置等等。还有，我们可以使用样式表的三种方式用于网站页面中。
1.外联式样式表
使用外联式样式表是方便其他网页能够调用，比如在juli文件夹中新建一个样式表，名称为style，将外布的样式表链接到网页中：
2.内联式样式表
通常使用内联式样式表是只针对当前页面所要定义的样式，把样式表定义的语句放在标签中，把它放在网页标签内。
3.嵌入式样式表
嵌入式样式表是非常简单的，只要在网页html中的要应用样式的各个标签后面写入CSS属性就行了。比如想要调整某个标签内文字的样式：
（五）JavaScript简介
JavaScript是一种简单的、基于对象的、跨平台的直译式脚本语言。它是浏览器的一部分，是被广泛用于客户端的开发。JavaScript提供了先进的技术，能够帮助一个网页设计师在构建动态页面方面有着其他工具无法比拟的优势。它的组成部分是由ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。JavaScript的特点也较多，简单、安全、动态和跨平台等等。而且它能够在多个软件内编写应用。由此可见，JavaScript是网页设计的一大热门语言。
（六）JQuery概述
图4-2网站logo效果图
一、引言 1
（一）开发背景 1
（二）选题内容 1
1.课题的总体介绍 1
2.指导思想及技术路线 1
3.能力要求及目标 1
（三）应解决的主要问题 1
二、开发工具、开发语言介绍 2
（一）Dreamweaver简介 2
（二）Photoshop简介 2
（三）HTML简介 2
（四）CSS样式表概述 3
（五）JavaScript简介 3
（六）JQuery概述 3
三、网站需求分析 4
（一）网站开发目的 4
（二）功能性需求 4
（三）非功能性需求 5
四、详细设计 6
（一）网站的制作步骤 6
（二）创建站点 6
（三）图片素材处理 6
（四）网站首页制作 7
（五）子页制作 10
五、网站测试 22
六、总结 22
七、谢辞 23
参考文献 24
一、引言
（一）开发背景
时代的变迁，经济的飞速的发展，网上购物的巅峰时代来临。越来越多的网民选择在家里网上购物，既方便又快捷。这意味着一般的线下商店，传统企业也要跟着时代的步伐来改变他们的传统的营销方式。那最好的解决办法就是创建一个网上购物平台，让网民能够在网站上浏览到公司所要销售的产品，最好能够达到线上线下于一体的销售模式。架起一座买卖的桥梁。
创建网上购物平台首先就得必须要把整个网站的页面设计好，整个网站页面的排版和布局，整个页面的色彩搭配等等。本网站就是在这现在 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
网上购物流行的时代的背景下，设计这一购物网站。
（二）选题内容
1.课题的总体介绍
为网民提供一个网上购物平台。
网页大致有注册页面，购物页面、商品的详细页面、购物列表页面、关于公司介绍的页面等等。因为做的是静态页面，没有接入数据库等后台，大致的web前端页面都布局设置完成。
2.指导思想及技术路线
本购物商城主要采用div+css来布局整个网站页面；使用JavaScript和JQuery来增加网站页面的特效，增加网站美观度。使用photoshop来制作网站页面使用到图片素材。
3.能力要求及目标
利用大学三年所学到的知识，尽我所能，来设计出这一网站购物平台，使用户浏览这个页面能感觉到页面的整体搭配什么的都合理，使用起来方便快捷。
（三）应解决的主要问题
网站页面只能限定某个浏览器浏览，兼容性调试不成功。 二、开发工具、开发语言介绍
(一)Dreamweaver简介
Adobe Dreamweaver，简称“DW”，在中国称它为“梦想编织者”，它是制作网站和网站管理于一体的网页编辑器，由美国MACROMEDIA公司开发。特别是对专业的网页设计师来说，Dreamweaver是一个可视化的Web开发工具。你可以用它来轻松地创建跨平台、跨浏览器限制的动感网页。
对于大部份用户来说，Dreamweaver是一个在网页设计和制作方面使用最为广泛，功能最为强大的软件。随着Dreamweaver新版本的发布，尤其是Dreamweaver 8.0发布之后，为它在该领域奠定了基础。它的制作效率非常快，能够快速的将一些软件或档案移动到网页上。快捷键的使用，更加能够让工作事半功倍。Dreamweaver编写方式灵活，可视化的编辑界面，多功能的CSS支持等等。
（二）Photoshop简介
Adobe Photoshop，简称“PS”，它是由Adobe Systems开发和发行的一款专为图片设计的图像处理制作一体化软件。它大大地简化了图片设计的工作难度，可以有效地进行图片编辑工作。它有非常强大的功能，在图像、图形、文字等各个方面都有所涉及。不管对于专业设计者还是业余爱好者来说，它无疑是网页编辑的最佳伴侣。
同样，在使用photoshop时，便捷的快捷键大大的提高了图片处理速度。而且它可以将图片保存为你想要的任何一种格式，处理方式较多。而且photoshop不止在网页编辑这个范围所涉及，它的范围比你想象中还要多，它在平面设计、广告摄影、影像创意、视觉创意等方面都有立足之地。
（三）HTML简介
HyperText Markup Language超文本标记语言，简称“HTML”。制作网页最基本的语言就是HTML+CSS。这是每个想要学习网页制作的人最需要掌握的知识点。HTML通常是网页制作者用来编辑WEB的前端页面。一个好的网站最基本的就是有一个好看的页面，有了好看的页面之后浏览人数的增多，网站就能推广出去。HTML虽然制作文档简洁，但它有很强大的功能，它能够让页面变得更加的生动，我们能够在页面中插入音频、视频等各色各样的内容。它能够描述文本，包括图像、声音以及其他能够出现在网页中的各种元素。
HTML基本结构：
（四）CSS样式表概述
Cascading Style Sheets层叠样式表，简称“CSS”，是目前基于文本的显示的最佳性能的设计语言。可以根据不同用户的理解能力，为各类的人群简化或优化写法，有很强的可读性。事实上，CSS样式表是一组样式，它增加了更多的样式定义方法来协助HTML。样式是一组用一个特定的名称来识别和保存一组相关的字符和段落格式。它就像我们使用word，选中我们需要修改的文字，来改变文字的样式，大小 ，字形等。同样地，通过CSS我们可以将网页的元素来定义各种样式，例如文字的颜色，图片的大小，图片的位置等等。还有，我们可以使用样式表的三种方式用于网站页面中。
1.外联式样式表
使用外联式样式表是方便其他网页能够调用，比如在juli文件夹中新建一个样式表，名称为style，将外布的样式表链接到网页中：
2.内联式样式表
通常使用内联式样式表是只针对当前页面所要定义的样式，把样式表定义的语句放在标签中，把它放在网页标签内。
3.嵌入式样式表
嵌入式样式表是非常简单的，只要在网页html中的要应用样式的各个标签后面写入CSS属性就行了。比如想要调整某个标签内文字的样式：
（五）JavaScript简介
JavaScript是一种简单的、基于对象的、跨平台的直译式脚本语言。它是浏览器的一部分，是被广泛用于客户端的开发。JavaScript提供了先进的技术，能够帮助一个网页设计师在构建动态页面方面有着其他工具无法比拟的优势。它的组成部分是由ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。JavaScript的特点也较多，简单、安全、动态和跨平台等等。而且它能够在多个软件内编写应用。由此可见，JavaScript是网页设计的一大热门语言。
（六）JQuery概述
图4-2网站logo效果图
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1673.html
