第一章概述1.1 网站建设的意义Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。
作为Internet上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。
据估计，目前Internet上已有上百万个Web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。
近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛应用，Web站点向用户提供的服务将越来越丰富，越来越人性化。
Internet的迅猛发展正在彻底地改变我们的生活、工作方式，网络已经成为我们生活中不可缺少的一部分。
信息时代的来临拓宽了大家进行自我提升的途径，同时也对大家的素质提出了更高的要求。
被称为当今社会的“天之骄子”的电脑主宰着世界的前进，而主宰电脑的我们则更应该多思考，多研究，多学习。
只读书的学习方式一去不复返，科技的日新月异，使我们不得不学习一种新的知识--计算机技术。
怪不得有人说“不会电脑的人，将是新世纪的文盲”，足见网上学习的重要性。
因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
1.2 网站的定位为了弘扬中华传统文化，提高大家的生活质量，使大家的烹调技术有进一步的提高，本网站的定位为：为用户提供最方便最详尽的美食菜谱，按照菜系对菜谱进行分类，使用户找到自己想要的菜式做法将更加简单。
网站的名称为《美食网》，为生活类网站。
设置：川菜、鲁菜、粤菜、江淮菜四个大类。
每个大类下都有：热菜、凉菜、主食三个方面。
通过不同角度，向用户展示四大菜系的代表美食。
致力于为中国家庭和个人提供完美的美食解决方案。
第二章网站的总体设计2.1 网站的规划网站采用清新简洁的风格，避免繁杂纷乱的现象。
使用户方便快速的找到自己想要的信息。
川菜采用红色为主色调；鲁菜采用橙色为主色调；粤菜采用蓝色为主色调；江淮菜采用绿色为主色调，体现各大菜系不同的特点。
并配以与主题相符合的图片，以突出主题。
网站设置一个首页，四个一级导航，每个一级导航下设置三个二级导航。
每个二级导航下添加十篇文章。
网站结构及栏目如下：2.2 素材的搜集做网站之前，我们要事先根据网站设计的方案，定位网站的方向，然后搜集一些符合网站主题的素材供制作。
这些素材包括有：色彩搭配、文字、图片、多媒体等。
1.文本内容素材的收集具体的文本内容，可以让访问者清楚地知道作者的Wpb页中想要说明的东西。
我们可以从网络、书本、报刊上找到需要的文字材料，也可以使用平时的试卷和复习资料，还可以自己编写有关的文字材料，将这些素材制作成Word文档保存在“文字资料飞子目录下。
收集的文本素材既要丰富，又要便于有机地组织，这样才能做出内容丰富、整体感强的网站。
2.艺术内容素材的收集只有文本内容的网站对于访问者来讲，是枯燥乏味、缺乏生机的。
如果加上艺术内容素材，如静态图片、动态图像、音像等.将使网页充满动感与生机，也将吸引更多的访问者。
上海网站设计时候这些素材主要来自于以下4个方面。
从Internet上获取。
可以充分利用网上的共享资源，如使用百度、Sohu等引笨收集图片素材。
从CD-ROM中获取。
在市面上，有许多关于图片素材库的光盘.也有许多教学软件，可以选取其中的图片资料。
利用现成图片或自己拍摄。
既可以从各种图书出版物(如科普读物、教科书、杂志封面、摄影集、摄影杂志等)获取图片。
也可以使用自己拍摄和积累的照片资料。
将杂志的封面彩图用彩色扫描仪扫描下来，经过加工后。
整合制作到网页中。
自己动手制作一些特殊效果的图片，特别是动态图像，自己动手制作往往效果更好。
可采用Flash进行制作。
鉴于网上只能支持几种图片格式，所以可先将以上途径收集的图片用Phot oshop等图像处理工具转换成JPG. GIF形式，再保存到“图片资料”目录下。
另外，图片应尽量精美而小巧，不要盲目追求大而全，要以在网页的美观与网络的速度两者之间取得良好的平衡为宜。
搜集素材是网站设计关健性一步，要学会搜集素材的方法与方式，并且能分类保存、整理需要的素材，切不可引用一些不健康或是过于花哨的动画图片素材。
第三章网站各页面的详细设计3.1 主页的设计及制作首页一个网站最先展示给用户的页面，因此，首页的设计显得尤为重要。
网站整体采用橙色背景，顶部左侧为网站的logo“美食网”，右侧为美食网的宣传广告条。
下面为导航条，导航内容分别为：川菜菜系、鲁菜菜系、粤菜菜系、江淮菜系四个分类。
以上为网页头部分，后面所有网页都会使用同样的网页头，所以将页面先另存为模板，以供后续使用。
下面添加宣传图片，在云纹背景下，以书法艺术字体制作四大菜系的名称并制作一个美食网的印章。
使主页看起来简洁大方。
网页最下面加入关于本站的版权信息。
3.2 专题网页的设计及制作载入前面保存的模板，在导航条下面表格中插入一行三列表格。
每个表格中输入二级导航的文字，制作出二级导航链接。
下面左侧为本类菜系的介绍，右侧为本类菜系代表性图片。
二级网页共四个网页：川菜：调味多变，菜式多样，口味清鲜醇浓并重，以善用麻辣著称，具有别具一格的烹调方法和浓郁的地方风味。
根据川菜的特点，背景色采用红色，选用图片也以红色调为主以突出主题。
鲁菜：原料多选禽畜、海产、蔬菜，善用爆、熘、扒、烤、锅、拔丝、蜜汁等烹调方法，偏重于酱、葱、蒜调味，善用清汤、奶汤增鲜，口味咸鲜。
根据鲁菜特点，背景采用橙色，图片也要贴近鲁菜主题。
粤菜：粤菜注意吸取各菜系之长，烹调技艺多样善变，用料奇异广博，在烹调上一炒、爆为主，兼有烩、煎、烤，讲究清而不淡，鲜而不俗，嫩而不生，油而不腻，有“五滋”、“六味”之说。
根据粤菜特点，背景选用蓝色，考虑到粤菜系煲汤闻名，图片选用汤类，以贴近主题。
江淮菜：江淮菜是江浙菜和淮扬菜的合称。
原料多以水产为主，注重鲜活，刀工比较精细，尤以瓜雕享誉四方。
善用炖、焖、烤、煨等烹调方法，口味平和，清鲜而略带甜味。
根据此特点，背景选用清新的绿色，图片也要选择江淮菜的水产菜肴，以贴近主题。
依次制作网页的内容，设置好文字和图片的链接，及文章列表的链接。
将网页存为模板，以供后续使用。
3.3 分类网页的设计及制作载入保存的模板文件，左侧采用相应的图片制作本类的logo。
中间添加本类的文章列表。
列表四周制作细边框效果，使页面看起来更加整齐、美观。
细边框制作方法如下：插入一个一行一列的表格，设置“填充”为0，“边框”为0，“间距”为1，背景颜色为要显示的边框的颜色。
之后将光标置入表格内，设置单元格的背景颜色与网页的底色相同就可以了。
右侧放置图片轮播模块，使用JavaScript语言实现图片轮播的效果。
将编辑好的JavaScript代码另存为SlideTrans.js文件。
在主页选择代码模式，在<:top;}<style><style type="textcss">.container ul, .container li{list-style:none;margin:0;padding:0;} .num{ position:absolute; right:5px; bottom:5px; font:12px1.5 tahoma, arial; : center;line--left: 3px;border: 1px solid #f47500;background-color: #fcf2cf;}.num li.on{line--top:-2px;background-color: #ff9415;font-weight: bold;color:#FFF;}<style>在最后添加代码：<script>var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length,st = new SlideTrans("idContainer2", "idSlider2", n, {onStart: function(){设置按钮样式forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })}});for(var i = 1; i <= n; AddNum(i++)){};function AddNum(i){var num =$$("idNum").appendChild(document.createElement("li"));num.innerHTML = i--;num.onmouseover = function(){timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200);}num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); }nums[i] = num;}st.Run();$$("idAuto").onclick = function(){if(st.Auto){st.Auto = false; st.Stop(); this.value = "自动";}else{st.Auto = true; st.Run(); this.value = "停止";}}$$("idNext").onclick = function(){ st.Next(); }$$("idPre").onclick = function(){ st.Previous(); }$$("idTween").onchange = function(){switch (parseInt(this.value)){case 2 :st.Tween = Tween.Bounce.easeOut; break;case 1 :st.Tween = Tween.Back.easeOut; break;default :st.Tween = Tween.Quart.easeOut;}}<script>设置好文章标题的链接。