美食分享交流网站的建设
本网站主要运用Dreamweaver和Photoshop完成一个美食网站的制作。民以食为天，在当今的社会，美食可以带来生活幸福感，提高生活品质，现在人们越来关注自己的饮食状况，所以美食文化也就受到人们的更多的注意，本网站是创建一个可以给镇江人带来选择的美食交流分享网站。镇江还是个具有古色古香特色的城市，每年会吸引很多游客趋之若鹜，美丽的景色会给人留下深刻的印象，但是当地的特色美食会更加让人回味，本网站不仅仅给镇江本地人带来方便也给外来游客带来选择。网站使用Dreamweaver软件，通过HTML、CSS实现网页具体对象，并运用JavaScript实现网页特效。最终完成的网站达到了预期成效，并在主流浏览器上进行了兼容性测试。
目 录
一、引言 2
二、开发工具和技术 2
（一）Photoshop 2
（二）Dreamweaver 2
（三）HTML语言 2
（四）JavaScript脚本语言 2
三、网站栏目和结构设计 2
（一）网站栏目设计 2
1.首页 2
2.镇江介绍 3
3.镇江特产 3
4.镇江美食 3
5.美食新闻 3
6.美食图集 3
7.联系我们 3
（二）网站结构 3
（三）网站Logo的设计 3
四、网站具体实现 4
（一）网站首页的实现 4
（二）网站子页面实现 6
1.镇江介绍的页面实现 6
2.镇江特产的页面实现 7
3.美食新闻的页面实现 7
4.美食图集的页面实现 8
5.联系我们 9
（三） 网页三级页面实现 9
1.延陵鸭饺栏目 9
2.美食列表 10
3.美食新闻详情 10
五、网页特效的实现 11
（一）轮播图的切换实现 11
（二）滚动图的切换实现 12
六、网站整体测试 13
七、总结 14
附录 17
一、引言
*好棒文|www.hbsrm.com +Q: #351916072#
伴随着网络技术的快速的发展，互联网络的快速的发展使越来越多的人们选择从互联网络上获得信息，正因为如此，互联网络渐渐成为一个庞大的信息发布平台和信息获得的平台。本网站的研究目的就是通过网站全面的镇江美食的宣传，展示网站的布局、优点与食品的介绍，随时向管理人员发布网站的重要信息，使浏览者增加对网站内容的了解，增强浏览者与网站之间的联系。通过计算机网络让浏览者及时得到网站最新更换的美食信息，同时也帮助浏览者更快一步的了解到镇江美食的信息。在这里浏览者也可以提出对本网站的意见及想法，也可以在本网站留下自己对美食的见解与推荐。我实现出这个网站就是在展示自己的作品的同时也希望得到浏览者的认可，给浏览者留下深刻印象。
二、开发工具和技术
（一）Photoshop
Photoshop主要是对图像进行处理，图像处理是对已有的图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。而图形创作软件是按照自己的构思创意，使用矢量图形等来实现图形。
（二）Dreamweaver
Dreamweaver是一款集网页制作和管理网站于一身的所见即所得网页编辑器，DreamweaverCS5是第一套针对专业网页实现的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。不过本网站的代码是纯手写的，Dreamweaver这个工具暂时就起到了检验代码的功能。
（三）HTML语言
HTML是超文本标记语言，可以用来做静态网站。HTML里的DIV+CSS技术是WEB实现标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。而且网站运行加载速度也会逐渐加载，不会和表格一样，加载不完整就一直不出来，用户体验的感觉更好。
（四）JavaScript脚本语言
JavaScript是一种网络脚本语言，可以在HTML页面里写各种各样的动态效果，如图片的切换，和淘宝产品里的产品详情放大，以及瀑布流的布局和12306的抢票插件应用和本网站里面的轮播图切换等效果，这些都是用JavaScript来写的，它可以在浏览器里可以直接解析运行，如今已经被程序员广范的应用于各大网站上。
三、网站栏目和结构设计
（一）网站栏目设计
1.首页
介绍了镇江的一些特色美食，也放了个镇江肴肉的做法视频，让不了解镇江美食的人更加直观的了解到了这道美食的特色。
2.镇江介绍
从镇江的历史、交通运输、行政规划、经济情况、社会事业、风俗民情等各个方面，全面的向不了解镇江的人介绍了这个美丽的地方。
3.镇江特产
挑选了镇江几个著名的特产来进行详细的介绍，如延陵鸭饺、镇江香醋、扬中河豚、扬中刀鱼、扬中秧草、金山翠芽、镇江江蟹这些特产等。
4.镇江美食
这个栏目主要介绍镇江的美食，也是挑了几个比较出名的美食来进行侧重介绍，如锅盖面、镇江蟹黄汤包、白汁鮰鱼、清炖蟹肉狮子头、水晶肴肉、拆烩鲢鱼头这些美食等。
5.美食新闻
这个栏目介绍了镇江当地的一些关于美食的最新新闻，让游客可以了解到最新的镇江的一些动态信息。
6.美食图集
这个栏目放了自己喜欢的一些美食图，给浏览网站的人欣赏。
7.联系我们
这个页面主要介绍了制作人的信息，和用表格加表单写了个简单的留言板，由于技术有限，暂时没实现真的留言功能，暂时还是个留言的静态页面。
（二）网站结构
结构如下31所示:
图31 网站结构示意图
（三）网站Logo的设计
镇江是座美丽的古镇，所以设计logo时，图标选取的古典点，之后在PS软件里调色和写上网页的主题，这样logo就做完了。如图32所示：
图32 网站Logo
四、网站具体实现
（一）网站首页的实现
网站的首页设计还是很重要的，它能够让访问进来的人，选择在你的网页上停留多长时间，要是颜色搭配很糟糕的话，网页还没加载完，人家都已经走了。本网站的实现色调主打颜色是甜品的暖色调，让游客一打开网页就有那种食欲，网站的主要内容是介绍镇江的特地美食和介绍镇江这个地方。内容板块分得很清楚，菜单的部分主要有首页、镇江介绍、镇江特产、镇江美食、美食新闻、美食图集、联系我们等，可以让浏览的人一进来就知道网站里主要介绍的内容是什么了。
网页的具体制作是先新建一个HTML页面和对应的css文件，首先在css里面设置好网页背景，然后让其网页背景固定好，移动内容的时候，只移动内容部分，背景不跟着鼠标的滚动而滚动，这部分的关键部分代码如下:
body {
background:url(/images/bg.jpg) top center fixed norepeat;
目 录
一、引言 2
二、开发工具和技术 2
（一）Photoshop 2
（二）Dreamweaver 2
（三）HTML语言 2
（四）JavaScript脚本语言 2
三、网站栏目和结构设计 2
（一）网站栏目设计 2
1.首页 2
2.镇江介绍 3
3.镇江特产 3
4.镇江美食 3
5.美食新闻 3
6.美食图集 3
7.联系我们 3
（二）网站结构 3
（三）网站Logo的设计 3
四、网站具体实现 4
（一）网站首页的实现 4
（二）网站子页面实现 6
1.镇江介绍的页面实现 6
2.镇江特产的页面实现 7
3.美食新闻的页面实现 7
4.美食图集的页面实现 8
5.联系我们 9
（三） 网页三级页面实现 9
1.延陵鸭饺栏目 9
2.美食列表 10
3.美食新闻详情 10
五、网页特效的实现 11
（一）轮播图的切换实现 11
（二）滚动图的切换实现 12
六、网站整体测试 13
七、总结 14
附录 17
一、引言
*好棒文|www.hbsrm.com +Q: #351916072#
伴随着网络技术的快速的发展，互联网络的快速的发展使越来越多的人们选择从互联网络上获得信息，正因为如此，互联网络渐渐成为一个庞大的信息发布平台和信息获得的平台。本网站的研究目的就是通过网站全面的镇江美食的宣传，展示网站的布局、优点与食品的介绍，随时向管理人员发布网站的重要信息，使浏览者增加对网站内容的了解，增强浏览者与网站之间的联系。通过计算机网络让浏览者及时得到网站最新更换的美食信息，同时也帮助浏览者更快一步的了解到镇江美食的信息。在这里浏览者也可以提出对本网站的意见及想法，也可以在本网站留下自己对美食的见解与推荐。我实现出这个网站就是在展示自己的作品的同时也希望得到浏览者的认可，给浏览者留下深刻印象。
二、开发工具和技术
（一）Photoshop
Photoshop主要是对图像进行处理，图像处理是对已有的图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。而图形创作软件是按照自己的构思创意，使用矢量图形等来实现图形。
（二）Dreamweaver
Dreamweaver是一款集网页制作和管理网站于一身的所见即所得网页编辑器，DreamweaverCS5是第一套针对专业网页实现的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。不过本网站的代码是纯手写的，Dreamweaver这个工具暂时就起到了检验代码的功能。
（三）HTML语言
HTML是超文本标记语言，可以用来做静态网站。HTML里的DIV+CSS技术是WEB实现标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。而且网站运行加载速度也会逐渐加载，不会和表格一样，加载不完整就一直不出来，用户体验的感觉更好。
（四）JavaScript脚本语言
JavaScript是一种网络脚本语言，可以在HTML页面里写各种各样的动态效果，如图片的切换，和淘宝产品里的产品详情放大，以及瀑布流的布局和12306的抢票插件应用和本网站里面的轮播图切换等效果，这些都是用JavaScript来写的，它可以在浏览器里可以直接解析运行，如今已经被程序员广范的应用于各大网站上。
三、网站栏目和结构设计
（一）网站栏目设计
1.首页
介绍了镇江的一些特色美食，也放了个镇江肴肉的做法视频，让不了解镇江美食的人更加直观的了解到了这道美食的特色。
2.镇江介绍
从镇江的历史、交通运输、行政规划、经济情况、社会事业、风俗民情等各个方面，全面的向不了解镇江的人介绍了这个美丽的地方。
3.镇江特产
挑选了镇江几个著名的特产来进行详细的介绍，如延陵鸭饺、镇江香醋、扬中河豚、扬中刀鱼、扬中秧草、金山翠芽、镇江江蟹这些特产等。
4.镇江美食
这个栏目主要介绍镇江的美食，也是挑了几个比较出名的美食来进行侧重介绍，如锅盖面、镇江蟹黄汤包、白汁鮰鱼、清炖蟹肉狮子头、水晶肴肉、拆烩鲢鱼头这些美食等。
5.美食新闻
这个栏目介绍了镇江当地的一些关于美食的最新新闻，让游客可以了解到最新的镇江的一些动态信息。
6.美食图集
这个栏目放了自己喜欢的一些美食图，给浏览网站的人欣赏。
7.联系我们
这个页面主要介绍了制作人的信息，和用表格加表单写了个简单的留言板，由于技术有限，暂时没实现真的留言功能，暂时还是个留言的静态页面。
（二）网站结构
结构如下31所示:
图31 网站结构示意图
（三）网站Logo的设计
镇江是座美丽的古镇，所以设计logo时，图标选取的古典点，之后在PS软件里调色和写上网页的主题，这样logo就做完了。如图32所示：
图32 网站Logo
四、网站具体实现
（一）网站首页的实现
网站的首页设计还是很重要的，它能够让访问进来的人，选择在你的网页上停留多长时间，要是颜色搭配很糟糕的话，网页还没加载完，人家都已经走了。本网站的实现色调主打颜色是甜品的暖色调，让游客一打开网页就有那种食欲，网站的主要内容是介绍镇江的特地美食和介绍镇江这个地方。内容板块分得很清楚，菜单的部分主要有首页、镇江介绍、镇江特产、镇江美食、美食新闻、美食图集、联系我们等，可以让浏览的人一进来就知道网站里主要介绍的内容是什么了。
网页的具体制作是先新建一个HTML页面和对应的css文件，首先在css里面设置好网页背景，然后让其网页背景固定好，移动内容的时候，只移动内容部分，背景不跟着鼠标的滚动而滚动，这部分的关键部分代码如下:
body {
background:url(/images/bg.jpg) top center fixed norepeat;
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/648.html
