湖南文理学院芙蓉学院个人主页课程设计报告课题: 个人主页课程设计*名：**学号： ********同组姓名：李芳专业班级：计算机科学与技术0901班指导教师：**设计时间： 2012年6月13日目录1、实验目的与要求 (3)2、主题介绍 (3)3、工具的选择与介绍 (4)3．1主要使用工具：Dreamweaver (4)3．2图片处理软件：Photoshop (5)4、网页设计实现的过程 (5)4．1实验的分工 (5)4．2主页的制作 (6)4．3分页2制作（新疆美食）： (7)5、个人网站截图 (9)6、实验总结 (11)7、参考文献 (11)附录： (12)附录一（主页部分代码，有删减）： (12)附录二（分页2新疆美食部分代码，有删减）:------------------- 141、实验目的与要求（1）自主选择主题实现一个关于主题的个人网站（2）使用PS、Dreamweaver等软件对界面进行设置（3）实现网页界面的美观、内容详尽丰富。
2、主题介绍国家的历史有长有短，疆域有大有小，实力有强有弱，人口有多有少，民族构成、宗教信仰、政权性质和经济结构也有差异，故而各国的饮食文化是不一样的。
中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化；是中华各族人民在100多万年的生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。
民以食为天，中华上下五千年美食文化更是源远流长。
所以这次我们选择了“美食”作为主题。
美食，顾名思义就是美味的食物，贵的有山珍海味，便宜的有街边小吃。
但是不是所有人对美食的标准都是一样的，其实美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。
吃前有期待、吃后有回味的东西。
美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。
中国美食体现了中华民族的饮食文化传统，有许多独特之处。
由于风味多样，四季有别。
导致各地的美食各有千秋。
系因地理、气候、习俗、特产的不同形成了不同的地方风味,美食菜系的划分单就汉族的饮食特点而言，目前有四大菜系、八大菜系、十大菜系之说，而且划分系类仍有继续增加的趋势。
如果按四大菜系分：有川菜、粤菜、苏菜和鲁菜。
也有分八大菜系的。
其中各大菜系交相辉映，各有千秋，成为了中华民族珍贵的文化瑰宝！本次的主题分为两大部分，新疆美食、湖南美食两个主要部分。
通过这两个板块来介绍两个地方的美食，以突显南北两方的美食差异与特点。
让大家通过我们这个网页，以我们的网页为窗口了解湖南美食，了解新疆美食，从而增强对我国的美食文化的了解。
湖南美食-----湖南菜特别讲究原料的入味，技法多样，有烧、炒、蒸、熏等方法，尤以“蒸”菜见长。
最为精湛的是煨，原汁原味。
且刀功精妙，形味兼美，菜肴千姿百态，变化无穷。
新疆美食-----新疆的主食是面条、馕和牛羊肉，菜以酸辣口味为主，洋葱、番茄、辣椒、土豆用大蒜头等是常用的蔬菜配料，当然也少不了孜然、辣椒粉、醋等调味料，所以新疆菜总是香喷喷、又酸又辣，特别开胃。
总地来说，新疆各民族的人们都偏爱吃面食、奶制品、牛羊肉及各种瓜果.3、工具的选择与介绍3．1主要使用工具：DreamweaverDreamweaver是个原本由Macromedia公司所开发的著名网站开发工具。
它使用所见即所得的接口，亦有HTML编辑的功能。
它现在有Mac和Windows系统的版本。
随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。
Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto" 作为网页预览。
（1）制作效果Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop 等档案移至网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。
Dreamweaver 能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。
除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
（2）网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。
改变网页位置或档案名称，Dreamweaver 会自动更新所有链接。
使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
（3）控制能力Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧(frames)和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT，Tango与自行发展的应用软体。
当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。
梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。
您也可以使用样版正确地输入或输出XML内容。
全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。
对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。
使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。
当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。
3．2图片处理软件：PhotoshopPhotoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件.它功能强大,操作界面友好,得到了广大第三方开发厂家的支持,从而也赢得了众多的用户的青睐.ADOBE PHOTOSHOP最初的程序是由Mchigan大学的研究生Thomas创建，后经Knoll兄弟以及ADOBE公司程序员的努力ADOBE PHOTOSHOP产生巨大的转变，一举成为优秀的平面设计编辑软件。
它的诞生可以说掀起了图象出版业的革命，目前ADOBE PHOTOSHOP最新版本为6.0，它的每一个版本都增添新的功能这使它获得越来越多的支持者也使它在这诸多的图形图象处理软件中立于不败之地。
Adobe产品的升级更新速度并不快,但每一次推出新版总会有令人惊喜的重大革新.Photoshop从当年名噪一时的图形处理新秀.经过3.0,4.0,5.0,5.5的不断升级,直到目前最新的 6.0版,功能越来越强大,处理领域也越来越宽广,逐渐建立了图像处理的霸主地位.Photoshop支持众多的图像格式,对图像的常见操作和变换做到了非常精细的程度,使得任何一款同类软件都无法望其颈背;它拥有异常丰富的插件(在Photoshop中叫滤镜),熟练后您自然能体会到"只有想不到,没有做不到"的境界.而这一切,Photoshop都为我们提供了相当简捷和自由的操作环境,从而使我们的工作游刃有余.从某种程度上来讲,Photoshop本身就是一件经过精心雕琢的艺术品,更像为您度身定做的衣服,刚开始使用不久就会觉得的倍感亲切. 当然,简捷并不意味着傻瓜化,自由也并非随心所欲,Photoshop仍然是一款大型处理软件,想要用好它更不会在朝夕之间,只有长时间的学习和实际操作我们才能充分贴近它.4、网页设计实现的过程4．1实验的分工收集素材：吴珊李芳制作主页：李芳吴珊制作分页1(湖南美食)：李芳制作分页2（新疆美食）：吴珊4．2主页的制作中国的饮食在世界上享有盛誉，一谈到中国饮食，许多人会对中国食谱以及中国菜的色、香、味、形赞不绝口。
中国饮食文化是中国传统文化重要的组成部分。
中国是个多民族国家，吃的艺术也更是花样繁多了。
随着中国经济的高速腾飞，人们已不再仅仅注重解决温饱的的问题了，中国把无污染的、安全的、优质的、营养类食品称为绿色食品，而本网页旨在提倡绿色食品。
4．2．1设置网页背景及背景音乐因此主页的整体颜色为绿色，给人以绿色食品的理念。
首先，打开Adobe_Dreamweaver_CS5工具，新建一个HTML。
然后点击“插入”图像，选取自己作为背景的图片，并调节其合适大小，可通过浏览器预览来调节一符合网页要求。
为呼应最近热门话题“舌尖上的中国”，以“舌尖上的中国”的音乐作为背景音乐，代码如下：<bgsound src="何真真-彩蝶舞夏(《舌尖上的中国》配乐).wma" loop="-1" />4．2．2设置相关链接首页中设置了多个链接，点击插入“布局对象”，插入多个“Ap div”对象，并添加相应的链接文字，例如，湖南美食、新疆美食、中华美食、美食菜谱。
可链接到其他两个子网页，同时为了方便浏览者拥有更大的信息量，主页还可以链接到中华美食网和美食菜谱，让浏览网页者可以查看其他相关信息。
相关链接代码如下所示：<a href="Untitled-1.html"><div id="apDiv2"><strong>新疆美食</strong></div></a><a href="/"><div id="apDiv5"><strong>中华美食网</strong></div>4．2．3添加滚动文字除了以上主页的基本元素之外，还添加了让浏览者感兴趣的相关东西，“中国人的十大饮食标准”栏配合背景的颜色，在其属性设置其颜色为淡绿色并以上下滚动的形式出现。
实现文字滚动效果只需在“代码”部分添加:<marquee> 文字 </marquee>，实现上下滚动只需设置其相关的属性值。