《美食天下》网站的建设.doc

1、毕业设计题目 美食天下网站的建设 学生姓名： xx 学 号： 专 业： 计算机应用技术 班 级： 指导教师： xx 完成日期： 20XX 年 10 月 23 日黄冈职业技术学院2摘要随着网络技术与信息技术的发展，因特网迅速成长，Internet 上发布信息主要是通过网站来实现的，获取信息也是要在 Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。本文以美食天下食谱大全网站的建设为例，介绍了网页设计制作的基本方法和相关经验。指出网页设计制作水平式对计算机操作知识中综合

2、知识水平的检验。要提高其设计，制作水平必须从栏目安排、整体布局、文本与图片编辑、网页链接技术到 Html 语言设置、网页效果测试，乃至软件应用选择方面都要从整体上把握，从环节上努力，观念上更新，在方法上创新，将换位思考模式引入网页设计制作中，从而形成一种以效果最佳为目标的综合性技能。并再实践中积累经验、完善规程、探索技巧、获得成功。关键字：制作、建设、解析黄冈职业技术学院3AbstractWith the development of network technology and information technology, the Internet growing rapidly, Int

3、ernet published information is mainly achieved through the website, access to information is to be Internet“ ocean“ according to certain retrieval way information needed to be downloaded from the web site. With the development of the times, the website construction is getting more and more close to

4、an art is not just a technology. Webpage art design, site builders are increasingly attention.In this paper the world -“ food recipes“ website construction as an example, introduces the webpage design basic methods and related experience. Pointed out that the webpage design level of knowledge in com

5、puter operation knowledge test. To improve the design, production levels must be from the column arrangement, the overall layout, text and picture editing, webpage link technology to the Html language settings, webpage test results, and the selected software applications have to grasp the overall, f

6、rom links to update, idea, method innovation, the transposition thinking mode into the webpage the production design, thus forming a kind of to best effect as the goal of comprehensive skills. And practice experience, perfect regulations, exploration, success skills.Keywords: manufacturing、construct

7、ion、 analysis黄冈职业技术学院4目录摘要 2目录 4第一章 绪论 61.1 研究背景 .61.2 研究的内容 .6第二章 网站建设前的调研与准备工作 82.1 明确什么是网站制作 82.2 确定网站的主题 .82.3 搜集网站的资料 82.4 规划网站 .92.5 本章小结 .9第三章 网站的制作过程 .103.1 网页布局的基本概念 103.2 网页布局的方法 113.2.1 纸上布局法 .113.2.2 软件布局法 123.3 网站首页设计 .133.3.1 首页页头和导航的设计 .133.3.2 网站正文的设计 14黄冈职业技术学院53.3.3 网站页尾的设计 223.4 本

8、章小结 24第四章 网站制作的常见问题 .254.1 常见问题的解析 .254.2 本章小结 .27第五章 结束语 285.1 全文总结 .285.2 展望 28致谢 .29参考文献 .30附录 .32黄冈职业技术学院6第一章 绪论1.1 研究背景在 Internet 飞速发展的今天，电子数字计算机是 20 世纪重大科技发明之一，而互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计是将网站策划案中的内容、网站的主题模式，结合网页设计师的认识，通过艺术设计的手法表现出来；而网页制作通常是根据网页设计师制作的设计稿，按照 W4C 规范语言

9、将其制作成网页格式。优秀的网页设计师对网页设计与网页制作两道工序都是十分了解的，这样才可以保证网页制作人员在充分掌握设计要素的前提下，制作规范化、符合用户使用习惯、带来良好用户体验的网站。因此网站建设与维护在 Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了让更多人更容易的搜索到更多的健康的美食食谱。所以，开发美食天下的网站是必须的。本次设计我计划通过 Dreamweaver cs4、Photoshop 图像处理软件、Flash等工具共同来制作完成信息学院网站的设计。当然，这次的制作过程中还需要绑定数据库，最终的完成需要众多软

10、件相互使用。为了方便人们对美食的搜索，由此我就设计了一个美食网。在本网站中主要介绍了一些有利于人们身心健康的食物，希望可以给忙碌的人们带来一点小小的帮助。1.2 研究的内容通过网站，全面宣传，展示健康美食、美食食谱，发布美食信息咨询和与广大爱好美食者建立良好互动的平台，使社会各界人士增加对美食有更深刻的认识，在 Internet 网上，让爱好美食者及时得到美食网发布的重要信息。提高了办事效率,给美食爱好者者与各种美食之间建立了一种美好的桥梁。希望给各位爱好美食的人带来方便。本论文主要以实践为基础，利用软件 Dreamweaver cs3 为工具，设计了一个美食网。论文以瑞丽美食网为参考开展了研

11、究，分析了系统建设过程中的相关技术，对所涉及的软件平台、软件系统、安全系统的进行理论分析，对系统规划实施黄冈职业技术学院7中的需求分析、系统结构设计、硬件集成、软件配置等各环节进行研究，并提出性能测试。其中此论文主要研究了以下内容：第一章，主要是对本论文的结构做了一个介绍。其中主要包括网站研究的背景和网站研究的内容。第二章，介绍了网站建设的前期准备工作。其中主要包括明确什么是网站制作、网站主题的选择、搜集网站的资料以及网站的规划。第三章，介绍美食网首页的具体设计步骤。其中主要包括设计网站的代码和网站的效果图。我的美食网主要介绍了一些基本的美食书普、美食书籍、甜点派对以及人们都感兴趣的健康食品等

12、等。第四章，解答了一些网站制作中常见的问题。如：为什么在 Dreamweaver中按 Enter 键换行时，与上一行的距离却很大？等等。第五章，对全文做了一个小小的总结，并对以后指出了进一步的研究方向。希望在以后可以更加的完善自己的网站，更希望自己的网站可以带给更多的人、更多的帮助。黄冈职业技术学院8第二章 网站建设前的调研与准备工作进入 21 世纪。互联网技术及其网络服务正越来越深入地影响着人们的思维方式和观念，加速了整个社会的现代进程，成为人类社会进步的强大原动力。一个网站的成功与否与建设前的网站规划有着极其重要的关系，只有进行详细的规划，才能避免在网站建设中出现的许多问题，使网站建设能顺

13、利进行。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。2.1 明确什么是网站制作想要设计一个好的网站，首先我们得明白什么事网站制作。那么什么是网站制作呢？通俗的来说就是网站通过页面结构定位，合理布局，图片文字处理，程序设计，数据库设计等一系列工作的总和。也是将网站设计师的图片用HTML 方式展示出来，属于前台工程师的一项任务，前台工程师任务包括： 网站设计、网站用户体验、网站 JAVA 效果、网站制作等工作。网站制作是网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托

14、管等服务的总称。2.2 确定网站的主题网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。网络上的网站题材千奇百怪、琳琅满目，只要你想的到的，就可以把它制作出来。但是一般来说自己选择的题材最好是自己擅长的或者喜爱的内容，因为这样在制作时才不会觉得力不从心。所以我选择的题材是和食物有关的“食谱大全” 。2.3 搜集网站的资料明确了网站的主题以后，就要围绕自己所选的主题开始搜集材料了。常言道：“巧妇难为无米之炊 ”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。黄冈职业技术学院9材料既可以从图书、报纸、光盘、多媒体上得来

15、，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。美食天下食谱大全网站中所用的资料主要是来自网络。2.4 规划网站网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。规 划 的 内 容 应 该 主 要 包 括 如 下 几 项 ： （ 1） 域 名 和 主 机 的 选 择 （ 域 名 需 要 依 靠 网 站 主 题 以 及

16、 用 户 范 围 来 选 择 ，主 机 则 根 据 网 站 在 大 小 、 安 全 、 稳 定 上 的 需 求 ） 知 名 的 如 中 国 网 络 服 务 （ 2） 网 站 一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划的 定 位 （ 如 定 位 于 赢 利 性 网 站 ， 还 是 企 业 网 站 ， 或 是 公 益 性的 ） （ 3） 网 站 的 用 途 （ 是 用 来 赢 利 的 ， 还 是 做 产 品 线 上 营 销 的 ， 或 是 做 品 牌推 广 和 整 合 的 ） （ 4） 网 站 的 发 展 目 标 （ 需 要 达 到 的 目 标 ， 需 要 为 这 个 目 标

17、而 努 力 的 ） （ 5） 网 站 的 拓 扑 图 构 画 （ 网 站 包 括 哪 些 栏 目 ， 采 用 什 么 样 的 制 作 结 构 ） （ 6） 网 站 制 作 技 术 的 采 用 （ 用 哪 种 语 言 开 发 ， 在 什 么 平 台 上 开 发 ） （ 7） 网 站 的 推 广 （ 需 要 做 具 体 什 么 样 的 工 作 去 推 广 网 站 ， 是 否 需 要 在 前期 开 发 的 时 候 就 考 虑 到 后 期 的 推 广 ， 如 SEO 专 家 的 建 议 ） （ 8） 网 站 的 维 护 （ 是 自 主 维 护 ， 还 是 外 包 维 护 ， 维 护 的 内 容 包 括

18、 哪 些 ，后 期 改 版 的 时 间 间 隔 安 排 等 ） （ 9） 网 站 安 全 (网 站 定 期 进 行 安 全 检 测 及 备 份 等 安 全 操 作 ) （ 10） 网 站 的 主 题 颜 色 （ 网 站 颜 色 可 以 直 接 反 应 出 企 业 的 行 业 所 属 ）2.5 本章小结本章主要介绍建设网站前期的调研与准备工作。其中主要包括明确什么是网站制作、网站主题的选择、网站资料的来源以及网站的规划。黄冈职业技术学院10第三章 网站的制作过程网站主页就好象是宣传栏或者店面对访问者产生第一印象，都希望尽量给人留下好的印象。一般来说，好的网站应该给人有这样的感觉：干净整洁；条理清

19、楚；专业水准；引人入胜。3.1 网页布局的基本概念最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。网页的基本布局包括一下几个方面：（1）页面尺寸由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在 800x600 的

20、情况下，页面的显示尺寸为：780x428个象素；分辨率在 640x480 的情况下，页面的显示尺寸为:620X311 个象素；分辨率在 1024X768 的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好

21、能在上面做上页面内部连接，方便访问者浏览。（2）整体造型什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器黄冈职业技术学院11和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。（3）页头页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。本网页页头部分使用的是一

22、个漂亮的 FISH 插件。（4）文本文本在页面中出现都数以行或者块(段落) 出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着 DHTML 的兴起，文本已经可以按照自己的要求放置到页面的任何位置。（5）页脚页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。（6）图片图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。一般网页里面如果图片使用过多，给人的感觉会是觉得该网站太过花哨，但是如果不使

23、用图片的话，给人的感觉会是觉得该网站太过枯燥，让人们根本就没有浏览的兴趣。所以在使用图片的时候要把握住分寸，不可以太多，但也不可以不用。并且所使用的图片要接近网页的主题，不可以以难用。（7）多媒体除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。在使用多媒体时最好在网页上设计一个使用该多媒体的开关，并且开关要设计在一个醒目的地方，这样有利于用户。3.2 网页布局的方法网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。3.2.1 纸上布局法纸上布局法就是让自己在纸上把自己想要设计的网站画一个草图，这样就黄冈

24、职业技术学院12有利于自己网站的建设。如我的网站的首页草图是：3.2.2 软件布局法如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是 Photoshop。Photoshop 所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用 Photoshop 可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。其实除了用 photshop 外，我们还可以使用系统自带的绘图功能。使用绘图软件既简单又方便。就如我的网页用绘图软件绘制为黄冈职业技术学院133.3 网站首页设计在此网站的首页我们可以看到许多美食的食谱，还

25、有许多美丽的图片。给人很好的视觉感。3.3.1 首页页头和导航的设计本网站的首页由一张简单的动画图组成，给人一种舒服的感觉。页头上几个大字，让人对本网站的功能一目了然。网站的导航包含有八个选项分别是首、秀色可餐、吃出美丽、家常菜谱、休闲食品等。标题新颖，主题突出。黄冈职业技术学院14效果图为：页头及导航的设计代码为：首页秀色可餐吃出美丽家常菜谱休闲食品我爱我家 甜品派对美食书坊3.3.2 网站正文的设计网站正文由两大部分组成及上部和下部。其中上部又由三部分组成（左、中、右） ，下部由一组流动的图片组成。网站的上部分网站的上部分由左、中、右三部分组成。其中左边用了的布局是在一个大的 DIV 盒子

26、里面装着四个小的盒子，在小的盒子中分别放了图片和文字。此外中间和右边同样是在一个大的盒子中安放小的 DIV，不同的是在在中间和右边的盒子中还安放了文字和图片。黄冈职业技术学院15其效果图展示为：正文的上部分代码为：秀色可餐豆瓣酱蒸翅根1、鸡翅根洗净，泡在清水里十分钟之后倒掉水，鸡翅根沥干水分，用刀在正反两面各划两道；放入葱姜丝、料酒、一大勺豆瓣酱，搅拌均匀，腌制一个小时。黄冈职业技术学院162、将香菇洗净切片，码在碗底，上面放入腌制好的翅根，大火蒸半个小时即可。 小虾炖萝卜1、新鲜的小虾拣去杂物备用；2、绿萝卜切条，焯水备用；3、起油锅，爆香葱姜；4、下入萝卜条大火翻炒至软；5、下入小虾，加入

27、没过的热水，大火煮开；6、调入适量的盐和味精，起锅前撒上葱花香菜即可手撕包菜1、包菜用手撕开成片状，洗净之后沥干水分，蒜切片，红辣椒切小断儿，姜切丝；2、五花肉切片，用黑胡椒粉腌制 5 分钟。3、炒锅内放少许油，下入五花肉煸出油，肉变得透明；4、放入蒜片、红辣椒断儿和姜丝炒香；5、放入包菜翻炒；6、最后放入盐、料酒、蒸鱼豉油、蚝油，翻炒均匀即可。吃出美丽低卡豆腐料理 让你瘦在起跑线上 2010-12-20 9 大低卡减肥食品 吃得健康更享瘦 2010-12-19春季减肥很简单 8 大饮食原则包你瘦 2010-12-10 艳阳春吃出苹果肌 将亮色衣美美穿 2010-12-08四个妙招教你如何品鉴

28、正宗酸梅汤 2010 年 7 月 30日春季饮食减肥 请牢记 3 宜 5 忌 2010-7-30四种抗衰老食品 学赵雅芝做不老美女 2010-12-03 久对电脑易上火 电脑族六个祛火保健方2010-12-02形式诱惑实则朴素！超人气 4 家素食馆 2010-11-27素食塑造美女 你要变身吗 2010-11-26 春季养肝正当时 这样来食补 2010-28黄冈职业技术学院18简单厨房杯仔蛋糕 轻松俘获你的心 脑力激荡的 6 则食品广告 卡哇伊饼干 让你怎么舍得吃？巧妙设计人脸餐盘 随时从老头变美女醉人浪漫 意大利奢华咖啡月历好吃又好玩 瓜果蔬菜的 SEX 大片创意无限 食物的美好生活精致日式

29、糕点走上你的餐桌超可爱洗碗棉 让你爱上做家事精美咖啡包装 展示另类创意比新娘还有看头！婚礼蛋糕也疯狂 老爸的温馨礼物薄煎饼 2 网站正文的下部分网站的下部分是一组流动的图片。此图片组由十一张图片组成，在一个页面里循环的流动。下部分效果图部分展示：黄冈职业技术学院19此部分的代码是：黄冈职业技术学院21var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee()if(demo2.offsetWidth-demo.scrollLeft 3.3.3 网站页尾的设计网站的页尾主要是由一些友情链接和一些联系方式组成。我的页尾为：网站页尾的代码

30、为：关于我们|联系方式|免责条款|我要开店|旅易通|美食总机|美食搜索|地 址：黄冈职黄冈职业技术学院23业技术学院联 系 人：杨小姐联系电话：15098016715油 箱：3.4 本章小结本章主要是介绍美食天下网站的制作过程。在介绍网站的制作过程中，我并没有详细的介绍网站制作的每一个小小的步骤。而是主要介绍了网站布局的基本概念、网站布局的方法、网站首页的设计。其中以图文结合的方法介绍了美食天下首页的制作，把首页的代码和效果图一同展示了出来。黄冈职业技术学院24黄冈职业技术学院25第四章 网站制作的常见问题4.1 常见问题的解析网站中常见的问题有：（1） 为什么网站的首页文件名一般命名为 in

31、dex.htm 或 index.asp？网站的首页文件名为 index.htm 或 index.asp，这是一种网站首页命名规范。在浏览器地址栏输入网址，即使不输入 index.htm 或 index.asp，浏览器也能正确找到该文件并正确显示出来，因为 Web 服务器默认的首页文件名是index.htm 或 index.asp。此外，通过设置，Web 服务器常用的默认首页文件名格式有 index.htm、default.htm、index.asp 、default.asp 等。（2）巧妙设置分辨率在制作网站时，有时会发现，制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时却发

32、现网页的布局乱套了，这是因为各个计算机的分辨率不同所致。在 Dreamweaver 文档窗口中的右下角，显示当前文档的分辨率大小。单击当前分辨率数字，在弹出的菜单中可以为当前的页面指定显示分辨率，通过修改可以使网页更具灵活性。（3） 打开文件及插入网页图像的快速方法在 Dreamweaver 里，进行网页编辑时，不必通过菜单栏里的【打开】命令来打开文件，一个更快的方法是利用【文件】面板，打开相关文件，直接用鼠标拖动文件到文档编辑窗口即可；同样，要在网页上插入图像等元素，也可直接通过【文件】面板将图像文件拖动到网页上。（4） 怎样仅仅复制文字而不想要其格式？当从 Dreamweaver 中复制文

33、字到另一个应用程序中时，HTML 代码和文字一起被复制过去了。此时一般都用快捷键【Ctrl C】来复制，如果在复制的时候多按一个【C 】键则只复制选中的文字。从外部文档中粘贴时，如果只要文字而不想要其格式，可以选择菜单中的【编辑】【粘贴文本】命令，不要直接用快捷键【Ctrl V】 。（5） 如何巧妙隐藏标签？如果在网页中插入了不可见的元素时，Dreamweaver 会自动在页面上添加一个与之相应的元素标签，以便于选择不可见元素。但如果不想显示时，也可以隐藏标签，方法是按【CtrlU】键打开【首选参数 】对话框，在【分类】中选中【不可见元素】 ，在面板的右边将会出现所有的元素标签。只要将不需要的

34、黄冈职业技术学院26元素标签前的勾去掉，以后它就不会再出现了。（6） Dreamweaver 自动创建样式功能文本属性面板可以设置当前所选文本的样式和格式。使用属性面板设置文本样式和格式时，Dreamweaver 将跟踪为每个文本元素指定的格式属性，并使用命名约定为每个元素指定一个标签：Style1、Style2、Style3、Stylen 。如果将同一格式属性指定给两个或更多文本元素，Dreamweaver 将使用相同的标题标记这些元素，消除冗余的样式名称。（7） 字体【格式】与【大小】有什么区别？在【文本】属性面板中， 【格式】与【大小】都可以设置字体大小，但二者有一定的区别，选择【格式】

35、 ，字体改变大小的同时变为粗体；如果只想改变文字大小，而不想让字体变为粗体，可以用【大小】属性。此外， 【大小】只对选中文本起作用，而【格式】对整段文字起作用。（8）为何我无法在文字中输入多个空格字符？在做网页的时候，有时需要输入空格，但在有些时候却无法输入，导致无法正确输入空格的原因可能是输入法的错误，只有正确使用输入法才能够解决这个问题。解决的方法有以下几种。切换到代码视图，在需要添加空格的位置，输入代码，就会出来空格，输入几次代码就会出来几个空格。如果使用智能 ABC 输入法，按 Shift+空格键，这时输入法的属性栏上的半月形就变成了圆形，然后再按空格键，空格就出来了。切换到【文本】插

36、入栏，在【字符】下拉列表选择【不换行空格】选项，就可直接输入空格。（9）为什么在 Dreamweaver 中按 Enter 键换行时，与上一行的距离却很大？在 Dreamweaver 中按 Enter 键换行时，与上一行的距离却很远这是因为按下 Enter 键时默认的是一个段落，而不是一般的单纯的换行所造成的。因此若要换行，则先按下 Shift 键不放，然后再按下 Enter 键，这样两行间的距离就不会差一大段了。（10） 怎样设置字体系列？什么叫字体系列呢？是指对文字设置几个字体，当遇到第一个不能显示的字体时会自动用系列中的第二个字体或后面的字体显示。Dreamweaver 内置了6 个系列

37、的英文字体，一般英文字体用“Verdana，Arial，Helvetica ，sans-serif”这个系列比较好看。如果不用这些字体系列，就需要自己编辑字体系列，可以通过下拉列表最下面的【编辑字体列表】来创建的字体系列，也可以直接在下拉列表中输入字体名，字体之间用逗号隔开，中文网页默认字体是宋体，黄冈职业技术学院27一般空着，不要选择任何字体。（11） 如何使用 3 种类型的 CSS 样式？CSS 样式表在网页制作中一般有 3 种方式的用法，那么具体在使用时该采用哪种用法呢？当有多个网页要用到 CSS，采用外联 CSS 文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页中使用

38、的 CSS，采用文档头部方式；只在一个网页一两个地方才用到的 CSS，采用行内插入方式。（12） 文档相对路径的表示方法对于文档相对路径省略对于当前文档和所链接的文档都相同的绝对 URL 部分。如果要链接的目标文件与当前文档位于同一文件夹中，输入文件名；如果位于子文件夹中，则提供子文件夹的名称，后跟正斜杠“/” ，然后输入文件名；如果位于父文件夹中，则在文件名前添加“/” （其中“ ”表示文件夹层次结构的上一级目录） 。（13）解决跳转菜单可能出现的问题选择跳转菜单项后，如果再次导航回到该页面，或者如果在【插入跳转菜单】对话框的【打开 URL 于】文本框中指定了一个框架，则无法重新选择此菜单项

39、。解决此问题有两个途径： 使用菜单选择提示（如类别）或用户说明（如“选择其中一项：” ） 。在选择每个菜单之后将自动重新选择菜单选择提示。 使用【前往】按钮，该按钮允许重新访问当前所选链接。需要注意的是：由于这些选项应用于整个跳转菜单，因此在【插入跳转菜单】对话框中，每个跳转菜单只能选择这些选项中的一项。（14）善用拖放在使用 Dreamweaver 编辑网页时，经常需要插入一些图像，如果要插入的图像很多，按照常规方法来操作就显得非常麻烦。可以利用拖动技巧来很好地解决这个问题。首先把 Dreamweaver 的操作窗口变成活动窗口，找到要插入的图像文件后，把它们一一用鼠标拖动到网页的适当部位，

40、Dreamweaver 将自动把这些图像的 URL 添加到文件的 HTML 代码中，这里要求被拖动的图像文件必须是 GIF、JPEG 等 Web 图像格式的文件。对于已经在网页中的图像也是一样，直接拖过来即可，但如果被拖动的图像上有超链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超链接地址。4.2 本章小结本章主要列举了一些网站设计中常见的问题，并一一都做了解答，主要是为了人们更好、更快的进行网页设计。黄冈职业技术学院28第五章 结束语5.1 全文总结此次论文主要介绍了制作一个网站的一个基本过程。其中主要介绍了网站的前期准备工作、网站的设计过程以及网站设计中常见问题的解答，并指出了进一

41、步的研究方向。其中在网站中主要包括秀色可餐、吃出美丽、家常菜谱、休闲食品、我爱我家、甜品派对以及美食书坊。主要是介绍一些健康的美食，希望能给忙碌的人们带来一些帮助。在论文即将完成之际，我的心情无法平静，从开始进入课题到论文的顺利完成，有多少师长、同学、朋友给了我无言的帮助，在这里请接受我诚挚的谢意。虽然专科学习只有三年，但它给我的影响却不能用时间来衡量。在这三年里，经历过的所有事，和我接触的所有人，都将是我以后生活回味的一部分，是我为人处事的指南针。我虽然我即将离开学校，走上工作岗位了，但这并不代表结束，相反的是，这是我人生历程的开始，在这里祝福大学里跟我风雨同舟的朋友们不要忘记初衷，努力去拼

42、搏吧！5.2 展望在大学的学习和生活中我学会了很多东西。在学校我进一步学习了专业的相关知识，在各位老师的教导下，自己对专业知识的不断充实和不断的在试验中遇到新的问题，解决问题，起到相当重要的作用。而正式在大学三年的学习生活，让我学习到的知识，更好的运用在生活中，也为自己在将来社会工作中更好的运用在学校中学会的专业知识和不断解决在社会中遇到的问题，再在社会工作中进一步的充实自己的不足。毕业设计，也许是我大学生涯交上的最后一个作业了。想籍次机会感谢三年以来给我帮助的所有老师、同学，你们的友谊是我人生的财富，是我生命中不可或缺的一部分。经过两个月的忙碌和工作，本次毕业设计已经接近尾声。点击运行，也基

43、本达到预期的效果，虚荣的成就感在没人的时候也总会冒上心头。但是作为一名学生，由于经验的匮乏，知识的有限性，所以在设计网站时难免有许多考虑不周全的地方，希望在以后的学习和工作中可以把自己的网站做的更好，更完黄冈职业技术学院29善，也希望自己的网站可以给人们带来一些帮助。致谢经过两个月的忙碌和工作，本次毕业设计已经接近尾声，作为一个专科生的毕业设计，由于经验的匮乏，难免有许多考虑不周全的地方，如果没有导师的督促指导，以及一起工作的同学们的支持，想要完成这个设计是难以想象的。在这里首先要感谢我的导师范老师。范老师平日里工作繁多，但在我做毕业设计的每个阶段，从外出实习到查阅资料，设计草案的确定和修改，

44、中期检查，后期详细设计，装配草图等整个过程中都给予了我悉心的指导。我的设计较为复杂烦琐，但是俞老师仍然细心地纠正图纸中的错误。除了敬佩范老师的专业水平外，他的治学严谨和科学研究的精神也是我永远学习的榜样，并将积极影响我今后的学习和工作。 感谢我的爸爸妈妈，言树之背，养育之恩，无以回报，你们永远健康快乐是我最大的心愿。在做这次毕业设计过程中使我学到了很多，我感到不论做什么事都要真正的用心去做，才能使自己更加的完善，没有学习就不可能有实践的能力，没有自己的实践就不会有所突破，希望这次的经历能让我们在以后的学习生活中不断成长与进步。然后还要感谢大学三年来所有的老师，为我们打下坚实的专业知识的基础；同

45、时还要感谢所有的同学们，正是因为有了你们的支持和鼓励。此次毕业设计才会顺利完成。 最后感谢学院对我的大力栽培。黄冈职业技术学院30参考文献1 王大远 著.Div+CSS 3.0 网页布局案例精粹.电子工业出版社.2011 年 03 月2 贾云龙，王士强 著.众妙之门：网站 UI 设计之道. 人民邮电出版社. 20103 李超 著 .CSS 网站布局实录：基于 Web 标准的网站设计指南（第 2 版）科学出版社 2007 年4 （美）麦克法兰 著，俞黎敏 译 .CSS 实战手册（第 2 版）.电子工业出版社 2010 年5 （美国）霍根（Brian P. Hogan） 著，吴珂 译. 写给程序员

46、的 Web 设计书. 人民邮电出版社 .2011 年 08 月6 成林 著 . CSS 3 实战. 机械工业出版社. 2011 年 05 月 7 杜月（Douglas K.Van Duyne） ，等 著 . 网站交互设计模式.电子工业出版社 . 2009 年 10 月8 温谦 著.CSS 设计彻底研究 .人民邮电出版社. 2008 年 02 月9 何丽 著 .精通 DIV+CSS 网页样式与布局. 清华大学出版社. 2011 年 04月10 蓝色经典，林小志 著.精彩网页设计CSS 那些事儿：掌握网页样式与CSS 布局核心技术. 电子工业出版社. 2009 年 10 月11 麦克尼尔 著，图灵

47、编辑部 译. 网页设计创意书. 人民邮电出版社. 2010年 11 月12 网页设计三剑客（CS4 中文版）标准教程. 清华大学出版社. 2010 年13 温谦，主觯程 著.别具光芒：CSS 网页布局案例剖析.人民邮电出版社2010 年 05 月14 袁润非 著 .DIV+CSS 网站布局案例精粹（配光盘 1 张）. 清华大学出版社 2011 年 04 月15 （美）奥尔森， （美）布赖恩 著，高伟，等 译 .CSS 终极参考手册. 中国水利水电出版社.2009 年 06 月16 王爽，等 著 . 网站设计网页配色. 科学出版社. 2011 年 01 月17 美Khoi Vinh 著，侯景艳 译秩序之美：网页中的网格设计.人民邮电出版社.2009 年