主题咖啡馆网站的设计与实现
目 录
一、引言 1
二、开发工具及技术的介绍 1
（一）Dreamweaver 1
（二）PhotoShop 1
（三）JavaScript、JQuery 1
（四）DIV+CSS 2
三、主体规划 2
（一）网站内容规划 2
（二）网页框架结构 2
1.首页框架结构 2
2.子页框架结构 4
四、网站设计与实现 5
（一）首页设计与实现 5
1.首页界面设计 5
2.首页核心代码 6
（二） 子页设计与实现 10
1.子页界面设计 10
2.子页核心代码 11
（三） 留言板页面设计与实现 12
1.留言板界面设计 12
2.留言板核心代码 12
五、特效 13
（一）JavaScript特效 13
（二）JQuery特效 15
1.实现效果 15
2.核心代码 15
六、总结 18
致谢 20
参考文献 21
一、引言
现如今沉迷在网络上的人越来越多，他们习惯于面对冰冷的机器进行交流，即便在同一个饭桌上，也会不自觉的用手机进行沟通。伴随着计算机网络的发展，各种网络沟通工具层出不穷，也使得人与人之间面对面交流的频率越来越少。久而久之，人与人之间文字、声音上的交流越来越多，而表情、肢体语言的交流越来越少。随着生活水平的提高，人们对生活品质的要求也在不断提高，咖啡也逐渐融入到人们的生活中。咖啡馆也逐渐成为人们进行面对面交流的一个必去场所之一。 *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
通过建设一个以结交朋友为主题的咖啡馆网站，可以在线下面对面的交流，这就是“遇见爱”主题咖啡馆。
本主题咖啡馆网站的整体布局是采用的DIV+CSS，开发工具选用Dreamweaver8.0，并运用了部分JavaScript 、JQuery特效，如大屏广告的轮播和页面内图片切换等。网站通过图片文字的方式呈现，并结合实体咖啡馆推出的线上线下相结合的活动，让人们无论是在虚拟世界还是现实生活中都可以结交到志趣相投的朋友，从而摆脱低头族的帽子，重新回归到面对面的交流方式。此外通过“遇见爱”主题咖啡馆网站的设计，还可以加强人们对“遇见爱”的品牌、咖啡新闻资讯以及咖啡店的相关美食等的了解。
二、开发工具及技术的介绍
（一）Dreamweaver
现阶段最适合初学网页设计的人使用的工具软件是Dreamweaver。Dreamweaver使用的接口是所见即所得的，有超文本标记语言编辑的功能。它提供了超文本标记语言HTML编辑器快速建立，可以方便地在可视化编辑状态和源代码编辑状态切换。Dreamweaver在使用上十分方便，使用者不需要输入相同内容、格式，也可以直接往页面中插入Flash等插件。并且在定义的本地站点中，改变文件的位置、名称，它也会自动更新相应的超级链接。使用者还可以给Dreamweaver安装各种插件，使它的功能更加强大。在此次网站开发中，使用的是Dreamweaver8.0版本。
（二）PhotoShop
PS，全称“Adobe Photoshop”，可以用于图像编辑是有效的，它的功能很多，涉及每一个图像，图形，文字，视频，出版等。在本次网站设计过程中用到了魔棒工具、仿制图章工具、画笔等来处理图片。
（三）JavaScript、JQuery
JS，就是JavaScript编写的脚本文件的代码。用单独文件保存，扩展名为.JS。在首页中运用的是JS来实现大屏广告的切换。JQuery是一个兼容多浏览器的JavaScript库，write less,do more(写得更少,做得更多)是JQuery的核心理念。JQuery同时也是免费的、开源的。JQuery的语法设计能够使开发者更加便捷，JQuery模块化的使用方法能够让开发者更轻松的开发出功能更为强大的静态或动态的网页。在网站的咖啡与美食页面中用JQuery来实现图片的特效。
（四）DIV+CSS
在网站的制作阶段，整体的布局将显得格外重要，而在使用DIV＋CSS方法来布局，可以实现内容与形式的分离，网站的前台只需要显示内容即可，格式上的美观可以通过CSS来实现。由于CSS拥有非常丰富的样式，运用CSS的样式可以使页面显得更加生动。其生成的HTML代码十分的精简，打开也比较快。而且样式可以重复使用，这样就使得代码简单、不繁杂。
DIV + CSS布局表格布局相比，DIV + CSS布局采用“块”为定位的形式结构，准确的定位是通过最简洁的代码实现，也方便人们对此网站进行修改和维护。在修改页面的时候省时省力。按照区域内容的标识，到CSS内部找到相应的ID进行修正，从而使得修改页面期间更为容易、快速，同时也不会破坏页面其余部分的结构样式。
三、主体规划
（一）网站内容规划
通过对目前主流的企业网站尤其是美食类的网站的访问，发现大部分这类网站主要内容包括企业的简介、企业文化、市场活动、公司新闻、美味餐饮、特许加盟等，很少有网站会设计交友平台，更少有将线上线下活动相结合的。而“遇见爱”主题咖啡馆网站增加了此功能，使人们可以在线上了解咖啡信息以及认识咖啡爱好者，线下进行面对面交流。在留言墙页面中，网友可以查看到其他人的留言，从而找到与自己志趣相合的朋友，本网站内容的规划如图3-1所示。
（二）网页框架结构
1.首页框架结构
首页的整体布局以简洁为主，采用“三”字型，可以让浏览者很直观的看到里面的内容，给浏览者很简单明了的感受。“遇见爱”主题咖啡馆网站的首页以图片为主，自动切换的大屏广告更能增加将网站首页的吸引力和对最新活动等的宣传，其下方是四张小图，可以链接到对应的网页。紧接着下面的企业新闻与企业活动以文字的形式展现，丰富了首页。首页框架结构如图3-2，DOM结构如图3-3所示：
图3-1 组织结构图
图3-2首页框架结构
图3-3 DOM结构
2.子页框架结构
子页采用的是匡字型布局，子页的页眉设计与首页是一样的，这样可以达到网站风格统一的效果。top部分包括logo、导航条。左侧是二级导航，二级导航包括品牌介绍、公司简介、遇见爱的历史、遇见爱的品质、遇见爱的团队。右侧是页面的主体内容。子页框架结构如图3-4所示，DOM结构如图3-5所示。
导航包含“首页、关于遇见爱、遇见爱资讯、遇见爱图片墙、联系方式、特许加盟、加盟手册”，引导浏览者访问网站，如图4-2所示。
图4-2 导航栏
（3）首页设计
首页页面采用“三”字型，上半部分是一个JavaScript特效，是一些咖啡图片的展示，可自动切换，也可手动切换。中间的四张图片分别链接了咖啡与美食、人才招聘、遇见爱图片墙、选择理由这几个页面。下半部分的左侧是企业新闻和企业活动的相关链接。下半部分的右侧有两处运用了热点链接。具体效果如图4-3所示。
一、引言 1
二、开发工具及技术的介绍 1
（一）Dreamweaver 1
（二）PhotoShop 1
（三）JavaScript、JQuery 1
（四）DIV+CSS 2
三、主体规划 2
（一）网站内容规划 2
（二）网页框架结构 2
1.首页框架结构 2
2.子页框架结构 4
四、网站设计与实现 5
（一）首页设计与实现 5
1.首页界面设计 5
2.首页核心代码 6
（二） 子页设计与实现 10
1.子页界面设计 10
2.子页核心代码 11
（三） 留言板页面设计与实现 12
1.留言板界面设计 12
2.留言板核心代码 12
五、特效 13
（一）JavaScript特效 13
（二）JQuery特效 15
1.实现效果 15
2.核心代码 15
六、总结 18
致谢 20
参考文献 21
一、引言
现如今沉迷在网络上的人越来越多，他们习惯于面对冰冷的机器进行交流，即便在同一个饭桌上，也会不自觉的用手机进行沟通。伴随着计算机网络的发展，各种网络沟通工具层出不穷，也使得人与人之间面对面交流的频率越来越少。久而久之，人与人之间文字、声音上的交流越来越多，而表情、肢体语言的交流越来越少。随着生活水平的提高，人们对生活品质的要求也在不断提高，咖啡也逐渐融入到人们的生活中。咖啡馆也逐渐成为人们进行面对面交流的一个必去场所之一。 *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
通过建设一个以结交朋友为主题的咖啡馆网站，可以在线下面对面的交流，这就是“遇见爱”主题咖啡馆。
本主题咖啡馆网站的整体布局是采用的DIV+CSS，开发工具选用Dreamweaver8.0，并运用了部分JavaScript 、JQuery特效，如大屏广告的轮播和页面内图片切换等。网站通过图片文字的方式呈现，并结合实体咖啡馆推出的线上线下相结合的活动，让人们无论是在虚拟世界还是现实生活中都可以结交到志趣相投的朋友，从而摆脱低头族的帽子，重新回归到面对面的交流方式。此外通过“遇见爱”主题咖啡馆网站的设计，还可以加强人们对“遇见爱”的品牌、咖啡新闻资讯以及咖啡店的相关美食等的了解。
二、开发工具及技术的介绍
（一）Dreamweaver
现阶段最适合初学网页设计的人使用的工具软件是Dreamweaver。Dreamweaver使用的接口是所见即所得的，有超文本标记语言编辑的功能。它提供了超文本标记语言HTML编辑器快速建立，可以方便地在可视化编辑状态和源代码编辑状态切换。Dreamweaver在使用上十分方便，使用者不需要输入相同内容、格式，也可以直接往页面中插入Flash等插件。并且在定义的本地站点中，改变文件的位置、名称，它也会自动更新相应的超级链接。使用者还可以给Dreamweaver安装各种插件，使它的功能更加强大。在此次网站开发中，使用的是Dreamweaver8.0版本。
（二）PhotoShop
PS，全称“Adobe Photoshop”，可以用于图像编辑是有效的，它的功能很多，涉及每一个图像，图形，文字，视频，出版等。在本次网站设计过程中用到了魔棒工具、仿制图章工具、画笔等来处理图片。
（三）JavaScript、JQuery
JS，就是JavaScript编写的脚本文件的代码。用单独文件保存，扩展名为.JS。在首页中运用的是JS来实现大屏广告的切换。JQuery是一个兼容多浏览器的JavaScript库，write less,do more(写得更少,做得更多)是JQuery的核心理念。JQuery同时也是免费的、开源的。JQuery的语法设计能够使开发者更加便捷，JQuery模块化的使用方法能够让开发者更轻松的开发出功能更为强大的静态或动态的网页。在网站的咖啡与美食页面中用JQuery来实现图片的特效。
（四）DIV+CSS
在网站的制作阶段，整体的布局将显得格外重要，而在使用DIV＋CSS方法来布局，可以实现内容与形式的分离，网站的前台只需要显示内容即可，格式上的美观可以通过CSS来实现。由于CSS拥有非常丰富的样式，运用CSS的样式可以使页面显得更加生动。其生成的HTML代码十分的精简，打开也比较快。而且样式可以重复使用，这样就使得代码简单、不繁杂。
DIV + CSS布局表格布局相比，DIV + CSS布局采用“块”为定位的形式结构，准确的定位是通过最简洁的代码实现，也方便人们对此网站进行修改和维护。在修改页面的时候省时省力。按照区域内容的标识，到CSS内部找到相应的ID进行修正，从而使得修改页面期间更为容易、快速，同时也不会破坏页面其余部分的结构样式。
三、主体规划
（一）网站内容规划
通过对目前主流的企业网站尤其是美食类的网站的访问，发现大部分这类网站主要内容包括企业的简介、企业文化、市场活动、公司新闻、美味餐饮、特许加盟等，很少有网站会设计交友平台，更少有将线上线下活动相结合的。而“遇见爱”主题咖啡馆网站增加了此功能，使人们可以在线上了解咖啡信息以及认识咖啡爱好者，线下进行面对面交流。在留言墙页面中，网友可以查看到其他人的留言，从而找到与自己志趣相合的朋友，本网站内容的规划如图3-1所示。
（二）网页框架结构
1.首页框架结构
首页的整体布局以简洁为主，采用“三”字型，可以让浏览者很直观的看到里面的内容，给浏览者很简单明了的感受。“遇见爱”主题咖啡馆网站的首页以图片为主，自动切换的大屏广告更能增加将网站首页的吸引力和对最新活动等的宣传，其下方是四张小图，可以链接到对应的网页。紧接着下面的企业新闻与企业活动以文字的形式展现，丰富了首页。首页框架结构如图3-2，DOM结构如图3-3所示：
图3-1 组织结构图
图3-2首页框架结构
图3-3 DOM结构
2.子页框架结构
子页采用的是匡字型布局，子页的页眉设计与首页是一样的，这样可以达到网站风格统一的效果。top部分包括logo、导航条。左侧是二级导航，二级导航包括品牌介绍、公司简介、遇见爱的历史、遇见爱的品质、遇见爱的团队。右侧是页面的主体内容。子页框架结构如图3-4所示，DOM结构如图3-5所示。
导航包含“首页、关于遇见爱、遇见爱资讯、遇见爱图片墙、联系方式、特许加盟、加盟手册”，引导浏览者访问网站，如图4-2所示。
图4-2 导航栏
（3）首页设计
首页页面采用“三”字型，上半部分是一个JavaScript特效，是一些咖啡图片的展示，可自动切换，也可手动切换。中间的四张图片分别链接了咖啡与美食、人才招聘、遇见爱图片墙、选择理由这几个页面。下半部分的左侧是企业新闻和企业活动的相关链接。下半部分的右侧有两处运用了热点链接。具体效果如图4-3所示。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1743.html
