《《美食天下》网站的建设毕业设计论文.doc》由会员分享，可在线阅读，更多相关《《美食天下》网站的建设毕业设计论文.doc（40页珍藏版）》请在三一文库上搜索。
1、毕业设计毕业设计 题目 美食天下网站的建设 黄冈职业技术学院 2 毕业设计（论文）原创性声明和使用授权说明毕业设计（论文）原创性声明和使用授权说明 原创性声明原创性声明 本人郑重承诺：所呈交的毕业设计（论文），是我个人在指导教师 的指导下进行的研究工作及取得的成果。尽我所知，除文中特别加以 标注和致谢的地方外，不包含其他人或组织已经发表或公布过的研究 成果，也不包含我为获得 及其它教育机构的学位或学历而 使用过的材料。对本研究提供过帮助和做出过贡献的个人或集体，均 已在文中作了明确的说明并表示了谢意。 作 者 签 名： 日 期： 指导教师签名： 日 期： 使用授权说明使用授权说明 本人完全了解
2、 大学关于收集、保存、使用毕业设计（论文） 的规定，即：按照学校要求提交毕业设计（论文）的印刷本和电子版本； 学校有权保存毕业设计（论文）的印刷本和电子版，并提供目录检索与 阅览服务；学校可以采用影印、缩印、数字化或其它复制手段保存论 文；在不以赢利为目的前提下，学校可以公布论文的部分或全部内容。 作者签名： 日 期： 黄冈职业技术学院 3 学位学位论论文原文原创创性声明性声明 本人郑重声明：所呈交的论文是本人在导师的指导下独立进行研 究所取得的研究成果。除了文中特别加以标注引用的内容外，本论文 不包含任何其他个人或集体已经发表或撰写的成果作品。对本文的研 究做出重要贡献的个人和集体，均已在文
3、中以明确方式标明。本人完 全意识到本声明的法律后果由本人承担。 作者签名： 日期： 年 月 日 学位学位论论文版文版权权使用授使用授权书权书 本学位论文作者完全了解学校有关保留、使用学位论文的规定， 同意学校保留并向国家有关部门或机构送交论文的复印件和电子版， 允许论文被查阅和借阅。本人授权 大学可以将本学位 论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩 印或扫描等复制手段保存和汇编本学位论文。 涉密论文按学校规定处理。 作者签名：日期： 年 月 日 导师签名： 日期： 年 月 日 黄冈职业技术学院 4 摘要摘要 随着网络技术与信息技术的发展，因特网迅速成长，Internet
4、上发布 信息主要是通过网站来实现的，获取信息也是要在 Internet“海洋”中按照 一定的检索方式将所需要的信息从网站上下载下来。随着时代的发展，网 站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日 益被网站建设者所注重。 本文以美食天下食谱大全网站的建设为例，介绍了网页设计制 作的基本方法和相关经验。指出网页设计制作水平式对计算机操作知识中 综合知识水平的检验。要提高其设计，制作水平必须从栏目安排、整体布 局、文本与图片编辑、网页链接技术到 Html 语言设置、网页效果测试，乃 至软件应用选择方面都要从整体上把握，从环节上努力，观念上更新，在 方法上创新，将换位思考模式引入
5、网页设计制作中，从而形成一种以效果 最佳为目标的综合性技能。并再实践中积累经验、完善规程、探索技巧、 获得成功。 关键字：关键字：制作、建设、解析 黄冈职业技术学院 5 Abstract With the development of network technology and information technology, the Internet growing rapidly, Internet published information is mainly achieved through the website, access to information is to be Int
6、ernet“ 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 an art is not just a technology. Webpage art design, site builders are increasingly attention. In this
7、 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 computer operation knowledge test. To improve the design, production levels must be from the column arra
8、ngement, 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, from links to update, idea, method innovation, the transposition thinking mode into the webpage the pr
9、oduction 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、construction、 analysis 黄冈职业技术学院 6 目录目录 摘要2 目录4 第一章 绪论6 1.1 研究背景.6 1.2 研究的内容.6 第二章 网站建设前的调研与准备工作8 2.1 明确什么是网站制
10、作8 2.2 确定网站的主题.8 2.3 搜集网站的资料8 2.4 规划网站.9 2.5 本章小结.9 第三章 网站的制作过程.10 3.1 网页布局的基本概念10 3.2 网页布局的方法11 3.2.1 纸上布局法.11 3.2.2 软件布局法12 3.3 网站首页设计.13 3.3.1 首页页头和导航的设计 .13 3.3.2 网站正文的设计 14 黄冈职业技术学院 7 3.3.3 网站页尾的设计 22 3.4 本章小结24 第四章 网站制作的常见问题.25 4.1 常见问题的解析.25 4.2 本章小结.27 第五章 结束语28 5.1 全文总结.28 5.2 展望28 致谢.29 参考
11、文献.30 附录.32 黄冈职业技术学院 8 第一章第一章 绪论绪论 1.1 研究背景研究背景 在 Internet 飞速发展的今天，电子数字计算机是 20 世纪重大科技发明之一， 而互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经 济、生活等各个方面发挥着重要的作用。网页设计是将网站策划案中的内容、 网站的主题模式，结合网页设计师的认识，通过艺术设计的手法表现出来；而 网页制作通常是根据网页设计师制作的设计稿，按照 W4C 规范语言将其制作成 网页格式。优秀的网页设计师对网页设计与网页制作两道工序都是十分了解的， 这样才可以保证网页制作人员在充分掌握设计要素的前提下，制作规
12、范化、符 合用户使用习惯、带来良好用户体验的网站。 因此网站建设与维护在 Internet 应用上的地位显而易见，它已成为政府、 企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了让更多 人更容易的搜索到更多的健康的美食食谱。所以，开发美食天下的网站是必须 的。 本次设计我计划通过 Dreamweaver cs4、Photoshop 图像处理软件、Flash 等工具共同来制作完成信息学院网站的设计。当然，这次的制作过程中还需要 绑定数据库，最终的完成需要众多软件相互使用。 为了方便人们对美食的搜索，由此我就设计了一个美食网。在本网站中主 要介绍了一些有利于人们身心健康的食物，希望可
13、以给忙碌的人们带来一点小 小的帮助。 1.2 研究的内容研究的内容 通过网站，全面宣传，展示健康美食、美食食谱，发布美食信息咨询和与 广大爱好美食者建立良好互动的平台，使社会各界人士增加对美食有更深刻的 认识，在 Internet 网上，让爱好美食者及时得到美食网发布的重要信息。提高 了办事效率,给美食爱好者者与各种美食之间建立了一种美好的桥梁。希望给各 位爱好美食的人带来方便。 本论文主要以实践为基础，利用软件 Dreamweaver cs3 为工具，设计了一 个美食网。 论文以瑞丽美食网为参考开展了研究，分析了系统建设过程中的相关技术， 对所涉及的软件平台、软件系统、安全系统的进行理论分析
14、，对系统规划实施 黄冈职业技术学院 9 中的需求分析、系统结构设计、硬件集成、软件配置等各环节进行研究，并提 出性能测试。其中此论文主要研究了以下内容： 第一章，主要是对本论文的结构做了一个介绍。其中主要包括网站研究的 背景和网站研究的内容。 第二章，介绍了网站建设的前期准备工作。其中主要包括明确什么是网站 制作、网站主题的选择、搜集网站的资料以及网站的规划。 第三章，介绍美食网首页的具体设计步骤。其中主要包括设计网站的代码 和网站的效果图。我的美食网主要介绍了一些基本的美食书普、美食书籍、甜 点派对以及人们都感兴趣的健康食品等等。 第四章，解答了一些网站制作中常见的问题。如：为什么在 Dre
15、amweaver 中按 Enter 键换行时，与上一行的距离却很大？等等。 第五章，对全文做了一个小小的总结，并对以后指出了进一步的研究方向。 希望在以后可以更加的完善自己的网站，更希望自己的网站可以带给更多的人、 更多的帮助。 黄冈职业技术学院 10 第二章第二章 网站建设前的调研与准备工作网站建设前的调研与准备工作 进入 21 世纪。互联网技术及其网络服务正越来越深入地影响着人们的思维 方式和观念，加速了整个社会的现代进程，成为人类社会进步的强大原动力。 一个网站的成功与否与建设前的网站规划有着极其重要的关系，只有进行 详细的规划，才能避免在网站建设中出现的许多问题，使网站建设能顺利进行。
16、 网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作 用。 2.1 明确什么是网站制作明确什么是网站制作 想要设计一个好的网站，首先我们得明白什么事网站制作。那么什么是网 站制作呢？通俗的来说就是网站通过页面结构定位，合理布局，图片文字处理， 程序设计，数据库设计等一系列工作的总和。也是将网站设计师的图片用 HTML 方式展示出来，属于前台工程师的一项任务，前台工程师任务包括： 网 站设计、网站用户体验、网站 JAVA 效果、网站制作等工作。 网站制作是网站策划师、网络程序员、网页设计师等岗位，应用各种网络 程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建
17、 设站点，并包含域名注册和主机托管等服务的总称。 2.2 确定网站的主题确定网站的主题 网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个 明确的主题。网络上的网站题材千奇百怪、琳琅满目，只要你想的到的，就可 以把它制作出来。但是一般来说自己选择的题材最好是自己擅长的或者喜爱的 内容，因为这样在制作时才不会觉得力不从心。所以我选择的题材是和食物有 关的“食谱大全” 。 2.3 搜集网站的资料搜集网站的资料 明确了网站的主题以后，就要围绕自己所选的主题开始搜集材料了。常言 道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你 就要尽量搜集材料，搜集得材料越多，以后
18、制作网站就越容易。 黄冈职业技术学院 11 材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集， 然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。 美食天下食谱大全网站中所用的资料主要是来自网络。 2.4 规划网站规划网站 网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。 网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭 配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑 到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有 个性、有特色，具有吸引力。 规划的内容应该主要包括如下几项： （1）域名
19、和主机的选择（域名需要依靠网站主题以及用户范围来选择， 主机则根据网站在大小、安全、稳定上的需求）知名的如 中国网络服务 （2）网站一个网站设计得成功与否，很大程度上决定于设计者的规划水 平，规划的定位（如定位于赢利 性 网站，还是企业网站，或是公益性 的） （3）网站的用途（是用来赢利的，还是做产品线上营销的，或是做品牌 推广和整合的） （4）网站的发展目标 （需要达到的目标，需要为这个目标而努力的） （5）网站的拓扑图构画（网站包括哪些栏目，采用什么样的制作结构） （6）网站制作技术的采用（用哪种语言开发，在什么平台上开发） （7）网站的推广（需要做具体什么样的工作去推广网站，是否需要在前
20、 期开发的时候就考虑到后期的推广，如 SEO 专家的建议） （8）网站的维护（是自主维护，还是外包维护，维护的内容包括哪些， 后期改版的时间间隔安排等） （9）网站安全 (网站定期进行安全检测及备份等安全操作 ) （10）网站的主题颜色（网站颜色可以直接反应出企业的行业所属） 2.5 本章小结本章小结 本章主要介绍建设网站前期的调研与准备工作。其中主要包括明确什么是 网站制作、网站主题的选择、网站资料的来源以及网站的规划。 黄冈职业技术学院 12 第三章第三章 网站的制作过程网站的制作过程 网站主页就好象是宣传栏或者店面对访问者产生第一印象，都希望尽 量给人留下好的印象。 一般来说，好的网站应
21、该给人有这样的感觉： 干净整洁；条理清楚； 专业水准；引人入胜。 3.1 网页布局的基本概念网页布局的基本概念 最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥 洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制 的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览 习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设 计方案，但如果你是初学者，那么最好明白网页布局的基本概念。 网页的基本布局包括一下几个方面： （1）页面尺寸 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法 突破显示器的范围，而且因为浏览器也将
22、占去不少空间，留下给你的页面范围 变得越来越小。一般分辨率在 800x600 的情况下，页面的显示尺寸为：780x428 个象素；分辨率在 640x480 的情况下，页面的显示尺寸为:620X311 个象素；分 辨率在 1024X768 的情况下，页面的显示尺寸为：1007x600。从以上数据可以看 出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都 可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页 面的尺寸是不一样的。 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。 但我想提醒大家除非你能肯定站点的内容能
23、吸引大家拖动，否则不要让访问者 拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能 在上面做上页面内部连接，方便访问者浏览。 （2）整体造型 什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象， 这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器 黄冈职业技术学院 13 和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状 以及它们的组合：矩形，圆形，三角形，菱形等。 （3）页头 页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名 字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头 是整个页面设计的
24、关键，它将牵涉到下面的更多设计和整个页面的协调性。页 头常放置站点名字的图片和公司标志以及旗帜广告。本网页页头部分使用的是 一个漂亮的 FISH 插件。 （4）文本 文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个 页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活 性非常小，而随着 DHTML 的兴起，文本已经可以按照自己的要求放置到页面的 任何位置。 （5）页脚 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或 者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。 （6）图片 图片和文本是网页的两大构成元素，却一不可。如何处理好图
25、片和文本的 位置成了整个页面布局的关键。而你的布局思维也将体现在这里。 一般网页里面如果图片使用过多，给人的感觉会是觉得该网站太过花哨， 但是如果不使用图片的话，给人的感觉会是觉得该网站太过枯燥，让人们根本 就没有浏览的兴趣。所以在使用图片的时候要把握住分寸，不可以太多，但也 不可以不用。并且所使用的图片要接近网页的主题，不可以以难用。 （7）多媒体 除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经 常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。 在使用多媒体时最好在网页上设计一个使用该多媒体的开关，并且开关要设计 在一个醒目的地方，这样有利于用户。 3.
26、2 网页布局的方法网页布局的方法 网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。 3.2.1 纸上布局法纸上布局法 纸上布局法就是让自己在纸上把自己想要设计的网站画一个草图，这样就 黄冈职业技术学院 14 有利于自己网站的建设。 如我的网站的首页草图是： 3.2.2 软件布局法软件布局法 如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这 些工作。这个软件就是 Photoshop。Photoshop 所具有的对图像的编辑功能用到 设计网页布局上更显得心应手。不像用纸来设计布局，利用 Photoshop 可以方 便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无
27、法实现的布 局意念。 其实除了用 photshop 外，我们还可以使用系统自带的绘图功能。使用绘图 软件既简单又方便。就如我的网页用绘图软件绘制为 黄冈职业技术学院 15 3.3 网站首页设计网站首页设计 在此网站的首页我们可以看到许多美食的食谱，还有许多美丽的图片。给 人很好的视觉感。 3.3.1 首页页头和导航的设计首页页头和导航的设计 本网站的首页由一张简单的动画图组成，给人一种舒服的感觉。页头上几 个大字，让人对本网站的功能一目了然。 网站的导航包含有八个选项分别是首、秀色可餐、吃出美丽、家常菜谱、 休闲食品等。标题新颖，主题突出。 黄冈职业技术学院 16 效果图为： 页头及导航的设计
28、代码为： 首页 秀色可餐 吃出美丽 家常菜谱 休闲食品 我爱我家 甜品派对 美食书坊 3.3.2 网站正文的设计网站正文的设计 网站正文由两大部分组成及上部和下部。其中上部又由三部分组成（左、 中、右） ，下部由一组流动的图片组成。 网站的上部分 网站的上部分由左、中、右三部分组成。其中左边用了的布局是在一个大 的 DIV 盒子里面装着四个小的盒子，在小的盒子中分别放了图片和文字。此外 中间和右边同样是在一个大的盒子中安放小的 DIV，不同的是在在中间和右边 的盒子中还安放了文字和图片。 黄冈职业技术学院 17 其效果图展示为： 正文的上部分代码为： 秀色可餐 豆瓣酱蒸翅根 1、鸡翅根洗净，泡
29、在清水里十分钟之后倒掉水，鸡翅根 沥干水分，用刀在正反两面各划两道；放入葱姜丝、料酒、一大勺豆瓣酱，搅 拌均匀，腌制一个小时。 黄冈职业技术学院 18 2、将香菇洗净切片，码在碗底，上面放 入腌制好的翅根，大火蒸半个小时即可。 小虾炖萝卜 1、新鲜的小虾拣去杂物备用； 2、绿萝卜切条，焯水备用； 3、起油锅，爆香葱姜； 4、下入萝卜条大火翻炒至软； 5、下入小虾，加入没过的热水，大火煮开； 6、调入适量的盐和味精，起锅前撒上葱花香菜即可 手撕包菜 1、包菜用手撕开成片状，洗净之后沥干水分，蒜切片，红辣椒 切小断儿，姜切丝； 2、五花肉切片，用黑胡椒粉腌制 5 分钟。 3、炒锅内放少许油，下入五
30、花肉煸出油，肉变得透明； 4、放入蒜片、红辣椒断儿和姜丝炒香； 5、放入包菜翻炒； 6、最后放入盐、料酒、蒸鱼豉油、蚝油，翻炒均匀即可。 吃出美丽 低卡豆腐料理 让你瘦在起跑线上 2010-12-20 9 大低卡减肥食品 吃得健康更享瘦 2010-12-19 春季减肥很简单 8 大饮食原则包你瘦 2010-12-10 艳阳春吃出苹果肌 将亮色衣美美穿 2010-12-08 四个妙招教你如何品鉴正宗酸梅汤 2010 年 7 月 30 日 春季饮食减肥 请牢记 3 宜 5 忌 2010-7-30 四种抗衰老食品 学赵雅芝做不老美女 2010-12-03 久对电脑易上火 电脑族六个祛火保健方2010
31、-12-02 形式诱惑实则朴素！超人气 4 家素食馆 2010-11- 27 素食塑造美女 你要变身吗 2010-11-26 春季养肝正当时 这样来食补 2010-28 黄冈职业技术学院 20 简单厨房杯仔蛋糕 轻松俘获你的心 脑力激荡的 6 则食品广告 卡哇伊饼干 让你怎么舍得吃？ 巧妙设计人脸餐盘 随时从老头变美女 醉人浪漫 意大利奢华咖啡月历 好吃又好玩 瓜果蔬菜的 SEX 大片 创意无限 食物的美好生活 精致日式糕点走上你的餐桌 超可爱洗碗棉 让你爱上做家事 精美咖啡包装 展示另类创意 比新娘还有看头！婚礼蛋糕也疯狂 老爸的温馨礼物薄煎饼 2 网站正文的下部分 网站的下部分是一组流动的
32、图片。此图片组由十一张图片组成，在一个页 面里循环的流动。 下部分效果图部分展示： 黄冈职业技术学院 21 此部分的代码是： 黄冈职业技术学院 23 var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee() if(demo2.offsetWidth-demo.scrollLeft 3.3.3 网站页尾的设计网站页尾的设计 网站的页尾主要是由一些友情链接和一些联系方式组成。 我的页尾为： 网站页尾的代码为： 关于我们| 联系方式| 免责条款| 我要开店| 旅易通| 美食总机| 美食搜索| 地 址：黄冈职 黄冈职业技术学院 25
33、 业技术学院 联 系 人：杨小姐 联系电话：15098016715 油 箱： 3.4 本章小结本章小结 本章主要是介绍美食天下网站的制作过程。在介绍网站的制作过程中， 我并没有详细的介绍网站制作的每一个小小的步骤。而是主要介绍了网站布局 的基本概念、网站布局的方法、网站首页的设计。其中以图文结合的方法介绍 了美食天下首页的制作，把首页的代码和效果图一同展示了出来。 黄冈职业技术学院 26 黄冈职业技术学院 27 第四章第四章 网站制作的常见问题网站制作的常见问题 4.1 常见问题的解析常见问题的解析 网站中常见的问题有： （1） 为什么网站的首页文件名一般命名为 index.htm 或 in
34、dex.asp？ 网站的首页文件名为 index.htm 或 index.asp，这是一种网站首页命名规范。 在浏览器地址栏输入网址，即使不输入 index.htm 或 index.asp，浏览器也能正 确找到该文件并正确显示出来，因为 Web 服务器默认的首页文件名是 index.htm 或 index.asp。此外，通过设置，Web 服务器常用的默认首页文件名 格式有 index.htm、default.htm、index.asp、default.asp 等。 （2）巧妙设置分辨率 在制作网站时，有时会发现，制作好的网页在本地计算机上浏览时很正常， 但在另外一台计算机上浏览时却发现网页的布
35、局乱套了，这是因为各个计算机 的分辨率不同所致。在 Dreamweaver 文档窗口中的右下角，显示当前文档的分 辨率大小。单击当前分辨率数字，在弹出的菜单中可以为当前的页面指定显示 分辨率，通过修改可以使网页更具灵活性。 （3） 打开文件及插入网页图像的快速方法 在 Dreamweaver 里，进行网页编辑时，不必通过菜单栏里的【打开】命令 来打开文件，一个更快的方法是利用【文件】面板，打开相关文件，直接用鼠 标拖动文件到文档编辑窗口即可；同样，要在网页上插入图像等元素，也可直 接通过【文件】面板将图像文件拖动到网页上。 （4） 怎样仅仅复制文字而不想要其格式？ 当从 Dreamweaver
36、 中复制文字到另一个应用程序中时，HTML 代码和文字 一起被复制过去了。此时一般都用快捷键【CtrlC】来复制，如果在复制的时 候多按一个【C】键则只复制选中的文字。从外部文档中粘贴时，如果只要文字 而不想要其格式，可以选择菜单中的【编辑】【粘贴文本】命令，不要直接 用快捷键【CtrlV】 。 （5） 如何巧妙隐藏标签？ 如果在网页中插入了不可见的元素时，Dreamweaver 会自动在页面上添加 一个与之相应的元素标签，以便于选择不可见元素。但如果不想显示时，也可 以隐藏标签，方法是按【CtrlU】键打开【首选参数】对话框，在【分类】中 选中【不可见元素】 ，在面板的右边将会出现所有的元素
37、标签。只要将不需要的 黄冈职业技术学院 28 元素标签前的勾去掉，以后它就不会再出现了。 （6） Dreamweaver 自动创建样式功能 文本属性面板可以设置当前所选文本的样式和格式。使用属性面板设置文 本样式和格式时，Dreamweaver 将跟踪为每个文本元素指定的格式属性，并使 用命名约定为每个元素指定一个标签：Style1、Style2、Style3、Stylen。 如果将同一格式属性指定给两个或更多文本元素，Dreamweaver 将使用相同的 标题标记这些元素，消除冗余的样式名称。 （7） 字体【格式】与【大小】有什么区别？ 在【文本】属性面板中， 【格式】与【大小】都可以设置字
38、体大小，但二者 有一定的区别，选择【格式】 ，字体改变大小的同时变为粗体；如果只想改变文 字大小，而不想让字体变为粗体，可以用【大小】属性。此外， 【大小】只对选 中文本起作用，而【格式】对整段文字起作用。 （8）为何我无法在文字中输入多个空格字符？ 在做网页的时候，有时需要输入空格，但在有些时候却无法输入，导致无 法正确输入空格的原因可能是输入法的错误，只有正确使用输入法才能够解决 这个问题。解决的方法有以下几种。 切换到代码视图，在需要添加空格的位置，输入代码 ，就会出来 空格，输入几次代码就会出来几个空格。 如果使用智能 ABC 输入法，按 Shift+空格键，这时输入法的属性栏上的 半
39、月形就变成了圆形，然后再按空格键，空格就出来了。 切换到【文本】插入栏，在【字符】下拉列表选择【不换行空格】选项， 就可直接输入空格。 （9）为什么在 Dreamweaver 中按 Enter 键换行时，与上一行的距离却很大？ 在 Dreamweaver 中按 Enter 键换行时，与上一行的距离却很远这是因为按 下 Enter 键时默认的是一个段落，而不是一般的单纯的换行所造成的。因此若 要换行，则先按下 Shift 键不放，然后再按下 Enter 键，这样两行间的距离就不 会差一大段了。 （10） 怎样设置字体系列？ 什么叫字体系列呢？是指对文字设置几个字体，当遇到第一个不能显示的 字体时
40、会自动用系列中的第二个字体或后面的字体显示。Dreamweaver 内置了 6 个系列的英文字体，一般英文字体用“Verdana，Arial，Helvetica，sans- serif”这个系列比较好看。如果不用这些字体系列，就需要自己编辑字体系列， 可以通过下拉列表最下面的【编辑字体列表】来创建的字体系列，也可以直接 在下拉列表中输入字体名，字体之间用逗号隔开，中文网页默认字体是宋体， 黄冈职业技术学院 29 一般空着，不要选择任何字体。 （11） 如何使用 3 种类型的 CSS 样式？ CSS 样式表在网页制作中一般有 3 种方式的用法，那么具体在使用时该采 用哪种用法呢？当有多个网页要用
41、到 CSS，采用外联 CSS 文件的方式，这样网 页的代码大大减少，修改起来非常方便；只在单个网页中使用的 CSS，采用文 档头部方式；只在一个网页一两个地方才用到的 CSS，采用行内插入方式。 （12） 文档相对路径的表示方法 对于文档相对路径省略对于当前文档和所链接的文档都相同的绝对 URL 部 分。如果要链接的目标文件与当前文档位于同一文件夹中，输入文件名；如果 位于子文件夹中，则提供子文件夹的名称，后跟正斜杠“/” ，然后输入文件名； 如果位于父文件夹中，则在文件名前添加“/” （其中“”表示文件夹层次结 构的上一级目录） 。 （13）解决跳转菜单可能出现的问题 选择跳转菜单项后，如果
42、再次导航回到该页面，或者如果在【插入跳转菜 单】对话框的【打开 URL 于】文本框中指定了一个框架，则无法重新选择此菜 单项。解决此问题有两个途径： 使用菜单选择提示（如类别）或用户说明（如“选择其中一项：” ） 。在 选择每个菜单之后将自动重新选择菜单选择提示。 使用【前往】按钮，该按钮允许重新访问当前所选链接。 需要注意的是：由于这些选项应用于整个跳转菜单，因此在【插入跳转菜 单】对话框中，每个跳转菜单只能选择这些选项中的一项。 （14）善用拖放 在使用 Dreamweaver 编辑网页时，经常需要插入一些图像，如果要插入的 图像很多，按照常规方法来操作就显得非常麻烦。可以利用拖动技巧来很
43、好地 解决这个问题。首先把 Dreamweaver 的操作窗口变成活动窗口，找到要插入的 图像文件后，把它们一一用鼠标拖动到网页的适当部位，Dreamweaver 将自动 把这些图像的 URL 添加到文件的 HTML 代码中，这里要求被拖动的图像文件必 须是 GIF、JPEG 等 Web 图像格式的文件。对于已经在网页中的图像也是一样， 直接拖过来即可，但如果被拖动的图像上有超链接，就不可以再使用拖动技术 了，因为那时拖过来的仅仅是超链接地址。 4.2 本章小结本章小结 本章主要列举了一些网站设计中常见的问题，并一一都做了解答，主要是 为了人们更好、更快的进行网页设计。 黄冈职业技术学院 30
44、 第五章第五章 结束语结束语 5.1 全文总结全文总结 此次论文主要介绍了制作一个网站的一个基本过程。其中主要介绍了网站 的前期准备工作、网站的设计过程以及网站设计中常见问题的解答，并指出了 进一步的研究方向。 其中在网站中主要包括秀色可餐、吃出美丽、家常菜谱、休闲食品、我爱 我家、甜品派对以及美食书坊。主要是介绍一些健康的美食，希望能给忙碌的 人们带来一些帮助。 在论文即将完成之际，我的心情无法平静，从开始进入课题到论文的顺利 完成，有多少师长、同学、朋友给了我无言的帮助，在这里请接受我诚挚的谢 意。虽然专科学习只有三年，但它给我的影响却不能用时间来衡量。在这三年 里，经历过的所有事，和我接
45、触的所有人，都将是我以后生活回味的一部分， 是我为人处事的指南针。我虽然我即将离开学校，走上工作岗位了，但这并不 代表结束，相反的是，这是我人生历程的开始，在这里祝福大学里跟我风雨同 舟的朋友们不要忘记初衷，努力去拼搏吧！ 5.2 展望展望 在大学的学习和生活中我学会了很多东西。在学校我进一步学习了专业的 相关知识，在各位老师的教导下，自己对专业知识的不断充实和不断的在试验 中遇到新的问题，解决问题，起到相当重要的作用。而正式在大学三年的学习 生活，让我学习到的知识，更好的运用在生活中，也为自己在将来社会工作中 更好的运用在学校中学会的专业知识和不断解决在社会中遇到的问题，再在社 会工作中进一
46、步的充实自己的不足。 毕业设计，也许是我大学生涯交上的最后一个作业了。想籍次机会感谢三 年以来给我帮助的所有老师、同学，你们的友谊是我人生的财富，是我生命中 不可或缺的一部分。 经过两个月的忙碌和工作，本次毕业设计已经接近尾声。点击运行，也基 本达到预期的效果，虚荣的成就感在没人的时候也总会冒上心头。但是作为一 名学生，由于经验的匮乏，知识的有限性，所以在设计网站时难免有许多考虑 不周全的地方，希望在以后的学习和工作中可以把自己的网站做的更好，更完 黄冈职业技术学院 31 善，也希望自己的网站可以给人们带来一些帮助。 致谢致谢 经过两个月的忙碌和工作，本次毕业设计已经接近尾声，作为一个专科生
47、的毕业设计，由于经验的匮乏，难免有许多考虑不周全的地方，如果没有导师 的督促指导，以及一起工作的同学们的支持，想要完成这个设计是难以想象的。 在这里首先要感谢我的导师范老师。范老师平日里工作繁多，但在我做毕 业设计的每个阶段，从外出实习到查阅资料，设计草案的确定和修改，中期检 查，后期详细设计，装配草图等整个过程中都给予了我悉心的指导。我的设计 较为复杂烦琐，但是俞老师仍然细心地纠正图纸中的错误。除了敬佩范老师的 专业水平外，他的治学严谨和科学研究的精神也是我永远学习的榜样，并将积 极影响我今后的学习和工作。 感谢我的爸爸妈妈，言树之背，养育之恩，无以回报，你们永远健康快乐 是我最大的心愿。在
48、做这次毕业设计过程中使我学到了很多，我感到不论做什 么事都要真正的用心去做，才能使自己更加的完善，没有学习就不可能有实践 的能力，没有自己的实践就不会有所突破，希望这次的经历能让我们在以后的 学习生活中不断成长与进步。 然后还要感谢大学三年来所有的老师，为我们打下坚实的专业知识的基础； 同时还要感谢所有的同学们，正是因为有了你们的支持和鼓励。此次毕业设计 才会顺利完成。 最后感谢学院对我的大力栽培。 黄冈职业技术学院 32 参考文献参考文献 1 王大远 著.Div+CSS 3.0 网页布局案例精粹.电子工业出版社.2011 年 03 月 2 贾云龙，王士强 著.众妙之门：网站 UI 设计之道.
49、 人民邮电出版社. 2010 3 李超 著 .CSS 网站布局实录：基于 Web 标准的网站设计指南（第 2 版） 科学出版社 2007 年 4 （美）麦克法兰 著，俞黎敏 译 .CSS 实战手册（第 2 版）.电子工业出 版社 2010 年 5 （美国）霍根（Brian P. Hogan） 著，吴珂 译. 写给程序员的 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 月