淮扬食府网站的设计与实现
目 录
一、引言 1
（一）开发背景 1
（二）工具介绍 1
1.Photoshop 1
2.Dreamweaver 1
二、网站内容结构 1
三、页面的具体设计 2
（一）LOGO设计 2
（二）首页设计 2
（二）子页 5
（三）特色页面介绍 6
（四）历史页面介绍 6
（五）联系我们 7
四、页面的具体实现 7
（一）DIV+CSS布局 7
（二）首页的实现 7
（三）子页的实现 8
五、页面特效的实现 9
（一）图片切换效果 9
（二）网页背景切换效果 9
六、网站测试 10
总结 11
致谢 12
参考文献 13
附录 14
一、引言
（一）开发背景
本网站是通过收集各方面关于淮扬菜的代表菜品、历史渊源还有趣味典故而完成的，而其主要的目的也是为了让更多的网络用户能够更好的了解淮扬菜，了解中国的美食文化，本网站使用HTML+CSS设计页面，使用JavaScript制作了特效，实现了网站的制作。
（二）工具介绍
1.Photoshop
Adobe Photoshop，Adobe公司开发和发行的图像处理软件，简称“PS”。处理以像素所构成的数字图像是它的作用。使用Photoshop软件中的绘图，编辑工具，可以高效的处理图片，或者批量处理。
2.Dreamweaver
Dreamweaver是所见即所得网页编辑器 *好棒文|www.hbsrm.com +Q: ^351916072*
，该软件集管理网站和网页制作于一身，是针对于网页设计师而专门发展研究的视觉化网页开发工具，使用它可以简单的做出充满动感的网页画面。
二、网站内容结构
首页中主要使用了一个图片自动切换的效果，自动切换展示的淮扬菜代表菜品的大图浏览让人眼前为之一亮，能够吸引更多的游客进行下一步的浏览。下拉后则有一个淮扬菜的今日看点，里面所包含的是一些当下关于淮扬菜系的新闻。在自动切换的美食图片上方的导航条可以链接到美食子页和历史、特色、联系我们等子页，美食子页主要是挑选介绍了淮扬菜的一些代表性的美食及起源。特色页面介绍了淮扬菜系的独到之处，所谓中国的四大菜系之一，淮扬菜必然有其在历史的潮流中不被淘汰的特色，需要来细细挖掘。历史页面介绍了淮扬菜系的一些历史和起源，从其中也可以了解到究竟是什么对淮扬菜产生了巨大的影响，让其流传至今。联系我们页面则主要写了与网友们的一种互动方式，也是一种对网站做得更好的一种期待。网站内容结构图如图2-1所示。
图2-1 网站内容结构图
三、页面的具体设计
（一）LOGO设计
网站的LOGO设计使用了Photoshop软件，做得像一个招牌就是为了能将LOGO做得让看到的人眼前为之一亮，LOGO选用了木头图片做底色，然后再在上面镶插入了黑白双层“淮扬食府”的四个艺术字，间错开一点摆放让LOGO更具有立体感。
LOGO效果图如图3-1所示：
图3-1 首页LOGO效果图
（二）首页设计
首先，首页左上方是本网站的LOGO，“淮扬食府”，选用了木头图片做底色，然后再在上面镶嵌了“淮扬食府”的四个艺术字，同时受别人的启发，为了增强招牌的立体感，淮扬食府四个黑色艺术字的下面还铺有一层白色的淮扬食府四个字，只不过是在摆放的时候稍微的错位一点就可以了，这样一来很明显的就增强了LOGO的立体感，这一切都是利用的Photoshop软件完成的。不仅如此，为了更加方便用户的体验感受，也特地为淮扬食府的LOGO也做了主页的链接，所以如果想要回到首页的时候，不一定需要单击首页，只需要单击一下淮扬食府的LOGO得到的也是一样的效果，首页布局图如图3-2所示。
LOGO
搜索栏
搜索
导航条
图片
菜系看点
版权信息
图3-2 首页布局图
为了让网站的功能更加齐全，更加人性化，更加能让人方便快捷地找出所想要寻找的菜品，在LOGO的右侧添加了搜索的功能，如图3-3所示。具体如何搜索并且跳转到搜索结果的页面这种效果还没能实现，翻阅了书籍相关的功能的代码也没能看懂，所以暂时网站的搜索功能还无法使用，放在此处只是有这方面的打算，希望将来学到的更多的时候能够解决这一问题。
图3-3 首页搜索框效果图
搜索框的下方是导航条，在导航条中，可以让浏览网站的人大致看出来，这个网站主要介绍的是淮扬美食及他的一个特色和历史渊源，当然最后也还有一个联系我们的平台。此处使用的无序列表，无序列表使用
一、引言 1
（一）开发背景 1
（二）工具介绍 1
1.Photoshop 1
2.Dreamweaver 1
二、网站内容结构 1
三、页面的具体设计 2
（一）LOGO设计 2
（二）首页设计 2
（二）子页 5
（三）特色页面介绍 6
（四）历史页面介绍 6
（五）联系我们 7
四、页面的具体实现 7
（一）DIV+CSS布局 7
（二）首页的实现 7
（三）子页的实现 8
五、页面特效的实现 9
（一）图片切换效果 9
（二）网页背景切换效果 9
六、网站测试 10
总结 11
致谢 12
参考文献 13
附录 14
一、引言
（一）开发背景
本网站是通过收集各方面关于淮扬菜的代表菜品、历史渊源还有趣味典故而完成的，而其主要的目的也是为了让更多的网络用户能够更好的了解淮扬菜，了解中国的美食文化，本网站使用HTML+CSS设计页面，使用JavaScript制作了特效，实现了网站的制作。
（二）工具介绍
1.Photoshop
Adobe Photoshop，Adobe公司开发和发行的图像处理软件，简称“PS”。处理以像素所构成的数字图像是它的作用。使用Photoshop软件中的绘图，编辑工具，可以高效的处理图片，或者批量处理。
2.Dreamweaver
Dreamweaver是所见即所得网页编辑器 *好棒文|www.hbsrm.com +Q: ^351916072*
，该软件集管理网站和网页制作于一身，是针对于网页设计师而专门发展研究的视觉化网页开发工具，使用它可以简单的做出充满动感的网页画面。
二、网站内容结构
首页中主要使用了一个图片自动切换的效果，自动切换展示的淮扬菜代表菜品的大图浏览让人眼前为之一亮，能够吸引更多的游客进行下一步的浏览。下拉后则有一个淮扬菜的今日看点，里面所包含的是一些当下关于淮扬菜系的新闻。在自动切换的美食图片上方的导航条可以链接到美食子页和历史、特色、联系我们等子页，美食子页主要是挑选介绍了淮扬菜的一些代表性的美食及起源。特色页面介绍了淮扬菜系的独到之处，所谓中国的四大菜系之一，淮扬菜必然有其在历史的潮流中不被淘汰的特色，需要来细细挖掘。历史页面介绍了淮扬菜系的一些历史和起源，从其中也可以了解到究竟是什么对淮扬菜产生了巨大的影响，让其流传至今。联系我们页面则主要写了与网友们的一种互动方式，也是一种对网站做得更好的一种期待。网站内容结构图如图2-1所示。
图2-1 网站内容结构图
三、页面的具体设计
（一）LOGO设计
网站的LOGO设计使用了Photoshop软件，做得像一个招牌就是为了能将LOGO做得让看到的人眼前为之一亮，LOGO选用了木头图片做底色，然后再在上面镶插入了黑白双层“淮扬食府”的四个艺术字，间错开一点摆放让LOGO更具有立体感。
LOGO效果图如图3-1所示：
图3-1 首页LOGO效果图
（二）首页设计
首先，首页左上方是本网站的LOGO，“淮扬食府”，选用了木头图片做底色，然后再在上面镶嵌了“淮扬食府”的四个艺术字，同时受别人的启发，为了增强招牌的立体感，淮扬食府四个黑色艺术字的下面还铺有一层白色的淮扬食府四个字，只不过是在摆放的时候稍微的错位一点就可以了，这样一来很明显的就增强了LOGO的立体感，这一切都是利用的Photoshop软件完成的。不仅如此，为了更加方便用户的体验感受，也特地为淮扬食府的LOGO也做了主页的链接，所以如果想要回到首页的时候，不一定需要单击首页，只需要单击一下淮扬食府的LOGO得到的也是一样的效果，首页布局图如图3-2所示。
LOGO
搜索栏
搜索
导航条
图片
菜系看点
版权信息
图3-2 首页布局图
为了让网站的功能更加齐全，更加人性化，更加能让人方便快捷地找出所想要寻找的菜品，在LOGO的右侧添加了搜索的功能，如图3-3所示。具体如何搜索并且跳转到搜索结果的页面这种效果还没能实现，翻阅了书籍相关的功能的代码也没能看懂，所以暂时网站的搜索功能还无法使用，放在此处只是有这方面的打算，希望将来学到的更多的时候能够解决这一问题。
图3-3 首页搜索框效果图
搜索框的下方是导航条，在导航条中，可以让浏览网站的人大致看出来，这个网站主要介绍的是淮扬美食及他的一个特色和历史渊源，当然最后也还有一个联系我们的平台。此处使用的无序列表，无序列表使用
- 标签，每个列表项使用
- ，具体代码可见附录1。
导航条下方是一个使用JavaScript制作的一个图片切换效果。如图3-4所示。
图3-4 图片切换效果
在导航条的右侧，是一个使用JavaScript制作的一个网页背景切换效果，如图3-5,3-6所示，代码可见附录3：
图3-5 蓝白色的首页
图3-6 灰色的首页
再下方是一个淮扬菜的今日看点，使用了无序列表，每一条列表都有鼠标悬停文字变色的效果，并且加上下划线，这个效果则是使用了CSS中的伪类样式hover达到的效果，如图3-7所示，图中变色加下划线部分为鼠标悬停所显示。
图3-7 今日看点列表
（二）子页
该页面它收录了整个网站的所有页面的链接，就像一个菜谱一般想看那一道菜的介绍，直接点开图片即可进入，所有的图片也都是按照了同一个规格制订了图片的大小，图片与图片之间的距离也都是自动调整的。同时为了让网页更具观赏性，在菜品右侧附有四张风景图，分别为江苏著名景点瘦西湖的四季之景，用以衬托在此等美丽的地方，做出来的必然是美味佳肴。效果图如图3-8所示。
图3-8 美食页面效果图
接下来图片链接所要跳转的就大多是文字的页面了，这些文字大多都是通过查阅了很多资料的来了，但是这并不是简单的复制而已，这些都是做之前就已经准备好的资料，还有是看完资料，用靠记忆整理出来的，所以可以算得上是独家资料了。每一道菜品都有着单独的介绍，并且有它的制作工艺也包含在内了，有的还收录了不少菜品的典故，菜品由来或是发展都蕴含在了一些小小的典故中。美食介绍页面如图3-9所示。
图3-9 美食介绍页面
（三）特色页面介绍
特色页面与美食介绍页面的效果大致是一样的，不过这里介绍的是淮扬菜的特色，之所以单独介绍，是因为作为中国传承历史悠久的四大菜系之一的淮扬菜系当然是有着别具一格的特色，独列出来也是为了能然浏览的人能够仔细的品读其中的不同。该页面效果图如图3-10所示。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1764.html
