毕业论文——洛阳牡丹网页设计

洛阳牡丹网页设计 I 摘摘 要要 在 Internet 飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重 要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网站建设在 Internet 应用上的地位显而易见，当代企业纷纷建立自己的网站,借助于互联网扩 大自己的影响、推广自己的产品,同时通过互联网快速的信息传递加速自身的发展。 因此我选择将宣传洛阳牡丹的前台网页的设计制作作为我的项目。 本论文所研究的是如何建设一个符合大众化要求的洛阳牡丹文化网站，本论 文所提出的方案是采用 Dreamweaver、Photoshop、html 等制作工具来设计和建设 一个洛阳牡丹文化网站。该系统的基本功能有牡丹简介、牡丹文化、牡丹资讯、牡 丹花城、牡丹花会、牡丹欣赏、联系我们等方面介绍牡丹，让人们对牡丹有更深的 了解。 关键词关键词：洛阳牡丹；Dreamweaver；网页设计 II Abstract Today in the rapid development of internet. The internet has become an important channel for people to obtain ,release and transfer information. It plays an important role in peoples all kinds of life , such as political, economic, and so on . It is obviously that the website construction plays an important role in the internet. With the help of the internet, mang enterprises have set up their own websites to expand their influence, to promote their products. And at the same time, they transfer to accelerate the development of their own through the fast information of the internet. So I chose to design the Luoyang peony website to make more people to know about Luoyang peony. This thesis is the study of how to build a line with the popular request of Luoyang peony sites. The proposed scheme of this website is to use Dreamweaver, Photoshop, Html and other tools to design and build a Luoyang peony cultural sites. The basis functions of this website is that the basis information of peony, the cultural of peony, the news of peony, the city of peony, the peony flower show, watching peony any other sides to introduce peony. And then to make a deeper understanding of peony. Keywords: The peony of Luoyang ; Dreamweaver; website design 洛阳牡丹网页设计 III 目 录 第 1 章 绪论1 1.1 系统开发背景 .1 1.2 系统研究目的和意义 .2 1.3 可行性分析 .2 第 2 章 系统需求分析3 2.1 用户功能需求分析 .3 2.2 系统性能要求 .3 2.3 业务流程分析 .4 第 3 章 网页总体设计5 3.1 系统功能模块分析 .5 3.1.1 首页 .5 3.1.2 牡丹简介 .5 3.1.3 牡丹文化 .5 3.1.4 牡丹花城 .6 3.1.5 牡丹欣赏 .8 3.1.6 牡丹花会 .8 3.1.7 联系我们 .8 3.2 具体框架图 .8 第 4 章 网页详细设计.11 4.1 开发工具简介 11 4.11 Dreamweaver 8.0 简介11 4.12 HTML 简介.11 4.13 HTML 技术介绍.13 4.2 网页界面设计13 4.2.1 网页设计原则.13 4.2.2 网页设计风格： 14 4.2.3 界面构成要素：.14 4.3 网页素材的搜集 15 4.3.1 文字 15 4.3.2 图片 15 4.3.3 视频、动画 16 4.4 网页功能模块的实现 16 IV 4.4.1 首页展示 16 4.4.2 牡丹简介界面 19 4.4.3 牡丹文化界面 21 4.4.4 牡丹花都界面 24 4.4.5 牡丹资讯界面 26 4.4.6 牡丹花会界面 28 4.4.7 牡丹欣赏界面 30 4.4.8 联系我们界面 31 第 5 章 兼容性测试和维护.33 5.1 网站的兼容性测试 33 5.2 网站的发布 33 5.3 网站的维护 33 第 6 章 工作总结和展望.35 参考文献36 致 谢37 洛阳牡丹网页设计 1 第 1 章 绪论 1.1 系统开发背景 旅游网站作为宣传旅游的一种方式在国内外都有很大的发展，同时国内外各种 旅游网站也各有差异，国内要求网页一定要吸引人，要让没来过的人点击，要让点 击的人留下继续浏览；总之，想尽一切办法抢眼球粗浅的理解，网站就是平面广告 向网络延伸；深入的理解，电子商务平台或网络营销工具奇思妙想，与众不同，狼 入羊圈，鹤立鸡群。国外则要求一定要方便，节约浏览者的时间；总之，把事儿说 明白就好，它是一种传播和沟通的工具，和传统的邮递、报纸杂志、电报电话一样 ，只是更便捷、更便宜，更聪明、更有效。 洛阳是十三朝古都，有“千年帝都，牡丹花城”的美誉。 “洛阳地脉花最宜， 牡丹尤为天下奇。 ”其栽培始于隋，鼎盛于唐，宋时甲于天下。它雍容华贵、国色 天香、富丽堂皇，寓意吉祥富贵、繁荣昌盛，是华夏民族兴旺发达、美好幸福的象 征。 “洛阳牡丹甲天下” ，洛阳因牡丹而变的更美丽，牡丹因洛阳而跟绚烂。当今的 洛阳正在迅速的发展，在旅游、工业农业等都有显著的成就，同时洛阳也是全国闻 名的旅游城市，全国十佳文明城市，洛阳牡丹早就闻名于世，每年洛阳的牡丹花会 都会吸引成千上万的游客前来参观，这个时期的牡丹尽显其诱人的姿色，也展示出 他作为国民之花的魅力。 迅猛发展并日益成熟的互联网已经影响到我们生活的方方面面。人们真真切切 的体会到了网络带给大家的便捷，互联网也以其独有的优势快速地渗透到越来越多 的传统领域。通过互联网，人们可以了解到各种有用信息，方便了人们生活的方方 面面，面对强大的互联网时代，各大企业公司也不失时机的借助这个渠道可以宣传 自己，也是人们的生活更加丰富多彩。企业网站是一个企业不可缺少的部分，它能 介绍企业文化、经营理念、特色服务及企业在全国的网点分布。拓宽顾客市场，增 加企业与客户之间的联系，缩短二者之间的距离。提高企业知名度，为企业今后的 业务发展开辟一个良好的社会环境。企业网站做成检索迅速、查找方便、可靠性高、 存储量大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大 型企业网站。这些优点能够极大地提高了企业网站的效率,也是企业走向科学化、 信息化与世界接轨的重要条件。 洛阳作为发展中城市洛阳牡丹文化 、河洛历史文化、在网上可以充分展示出 洛阳的魅力。牡丹号称国民之花，在中国人心目中有举足轻重的作用，每年的牡丹 文化节都会吸引成千上百的游客前来参观，这个时候是洛阳每年最繁华的时候，也 是牡丹最夺目的时刻，牡丹花开，开的不仅是一种花更是一种文化，一种情怀，反 映的是当代中国的生活水平，审美角度。在网上推广洛阳牡丹文化，详述各种牡丹 2 的不同特色，让游客更加深入了解洛阳、了解牡丹。近年来，已出现不少网站对洛 阳牡丹进行普及宣传，提供大量牡丹信息，介绍牡丹的生长习性、牡丹品种、牡丹 花会状况等，具有一定的可读性和趣味性。设计此网页，目的在于尽可能详细地展 示、介绍各种牡丹信息，使更多人了解牡丹的特性,知道洛阳这个全国文明城市， 了解牡丹文化节的内涵，更加深刻的体会牡丹的悠久历史文化以及在中国人心中牡 丹作为国民之花的牡丹情怀。 1.2 系统研究目的和意义 正值第 32 届洛阳牡丹花会，参考一些网站如中国牡丹网、菏泽牡丹网等，设 计此网页，其主要目的是为了让更多人了解牡丹、同时可以给来洛阳旅游的游客们 一个详细的旅游指南。 这个网页主要从牡丹简介、牡丹文化、牡丹资讯、牡丹花城、牡丹欣赏、牡 丹花会、等方面详尽介绍牡丹、牡丹文化、洛阳等。又分开介绍牡丹花种、生长环 境、历史传统、诗词文化、花会最新动态。同时也介绍了洛阳的景点如白马寺、龙 门石窟、洛阳有名的小吃等。用户通过这个网页可以得到他们需要资料信息。同时 该网页还可以让用户联系服务台，以便更好的改进维护网站。这样一方面提高了服 务质量，为游客提供了更加人性化的服务，另一方面也丰富了洛阳旅游业方面的服 务内容，同时优化了客流，使各景区更加具有吸引力。 1.3 可行性分析 1社会可行性 本网页的设计简洁明了，能健康独立的运行，操作使用方便，能免费提供大量 洛阳牡丹信息，用户通过本平台不仅可以查阅到自己需要的信息资源，还能及时联 系服务人员，以满足不同地方的牡丹爱好者的需求。 2技术可行性 及技术而言，该网站采用 Dreamweaver8.0 软件作为网页开发工具进行系统开 发。Dreamweaver8.0 工具软件以其功能强大、使用灵活的编辑窗口，其代码和设 计窗口同时并用，以及站点管理和页面设计这些特点为开发功能全面的网页创造了 良好的条件。因此利用它作为开发洛阳牡丹甲天下网站的工具是完全可行的。 同时，大学四年所学习的专业知识如 Photoshop、flash 等的应用，使我在一 定程度上具备了设计网页的能力，现有的计算机设备也完全可满足此次开发的需要。 3经济可行性 本洛阳牡丹网站设计与开发所要求的硬件（计算机及相关硬件）和软件均在市 洛阳牡丹网页设计 3 面上易于购买或可直接从网上下载并免费使用，不需要再花费大量的资金去购买高 成本的设备，大大提高了在设计过程中的工作效率。网页的主要成本主要集中在开 发过程及后期维护上，开发周期短，人员经济支出不大，对用户不会造成过重经济 负担。且投入使用后，可通过招商广告版面等方式收取费用，以应付日常必要开支 甚至盈利，因此，本系统在经济上是可行的。 4 第 2 章 系统需求分析 2.1 用户功能需求分析 随着洛阳牡丹文化节历届的发展，洛阳牡丹越来越得到大众的认可和关注，建 立洛阳牡丹网站的好处： 1. 可以方便游客直接查询各种牡丹资料。 作为一般的静态网页主要作用是展示用户信息量，让用户对自己想要的东西一 目了然，本网页里面涉及各种牡丹资料，例如牡丹的品种，牡丹的生长、环境栽培 技术，牡丹文化的起源、历史发展、牡丹诗词书画等等，全都从游客的角度出发， 方便游客查询。 2. 更加直观的提供一个欣赏牡丹的平台。 不是每个人都可以亲眼看到牡丹的姿色，介于这个原因，本网站最大的特点是 给用户一个充分欣赏牡丹的平台，通过视频，动画，图片等各种图片选择各种不同 类型的牡丹供用户欣赏。 3. 让人们更加深入了解牡丹文化，了解中国人的牡丹情怀。 一个物品只有经历了一定的历史沉淀才能更加有内涵，牡丹从千年前都已经进 入人们的生活，随之也有更多的是牡丹文化的积累，不同年代的牡丹文化反应了不 同时代人们对牡丹的欣赏水平，更体现了人们的牡丹情怀，牡丹文化这一栏的设置 可以让人们更加深入的了解牡丹文化。 2.2 系统性能要求 洛阳牡丹网页主要实现以下目标： 1. 系统架构清晰、界面友好美观。 清晰地条理是一个网页成功的重要条件之一，只有清楚的展示出自己网页的线 索，才能让用户在使用时准确快速地得到想要的信息。当然，界面是给人的第一感 觉，界面美观与否直接影响到网页的质量，所以网页一定要实现界面友好美观。 2. 文字图片介绍详细。 这个网页重要的作用是展示介绍，所以只有详细的介绍才能尽可能地完善信息。 文字图片是网页必不可少的两部分，这两部分至关重要，图片文字的混搭更具有一 定的效果。 3. 提供多种信息搜索方式，用户可根据需要方便、快捷地查找到所需信息。 在互联网发达的今天，信息量复杂繁多，想要得到更多信息，不仅局限于一个 网页，还可以选择访问其他网页，友情链接到其他相关网站，给用户更多渠道来了 洛阳牡丹网页设计 5 解洛阳牡丹，方便用户。 2.3 业务流程分析 网页主要分为 8 个大块，分别是：首页、牡丹简介、牡丹文化、牡丹资讯、牡 丹花都、牡丹花会、牡丹欣赏、联系我们。 网页结构图如 2-1 所示： 洛阳牡丹 甲天下 首页牡丹简介牡丹文化牡丹资讯牡丹花都牡丹花会牡丹欣赏联系我们 图图 2-12-1 网页结构图网页结构图 6 第 3 章 网页总体设计 主页由标准模式构建，其主色调为橙色，通过导航条的引导可以一步一步了解 网站的全部内容。用户能通过导航获取自己感兴趣的信息以及图文说明。 3.1 系统功能模块分析 本网页主要分为首页、牡丹简介、牡丹文化、牡丹资讯、牡丹花都、牡丹欣赏、 牡丹花会、联系我们等八个功能模块。 3.1.1 首页 首页可以链接到本网站的各个主要部分，视频欣赏让人们大体了解牡丹成长 过程、牡丹文化等。名花介绍链接到牡丹简介，牡丹的各个品种。首页展示的四种 牡丹号称“牡丹四大名品”分别是姚黄、豆绿、魏紫、赵粉。魅力洛阳链接到牡丹 花都部分；首页展示的是洛阳著名的景点龙门石窟、白马寺、丽景门、关林庙。牡 丹名园连接到牡丹花会部分；洛阳小吃同样链接牡丹花都部分。充分体现出洛阳特 色，通过首页用户可以大体了解洛阳。 3.1.2 牡丹简介 包括常见品种的介绍，以及生长环境的介绍。品种主要介绍了 12 种花种，姚 黄、豆绿、魏紫、赵粉、洛阳红、荷苞牡丹、绿幕隐玉、粉二乔、乌金耀辉、雪塔、 玉楼点翠、醉西施等以图片和文字搭配介绍。姚黄、豆绿、魏紫、赵粉号称“牡丹 四大名品”是牡丹最具代表性的的几种，具有很高的观赏价值。姚黄，光彩照人， 婷婷玉立，古人以“花王“誉之。魏紫，原名洛阳魏紫，被称为花后。豆绿。颜色浅 绿色成花率高，萌蘖枝多，开花期处于后期，此花为世间稀有名贵品种。赵粉，生 长势强，成花率高。花形丰满，根产量高。洛阳红、乌金耀辉是很具有洛阳特色的 牡丹品种。粉二乔是牡丹花里面唯一一种复色花。雪塔又名“观音白”，传统牡丹 花名种，完全重瓣型；洁白色。玉楼点翠，花梗长，多紫晕较软，花朵下垂。晚开 花品种。醉西施，皇冠型，红色，株形高，开展，中花品种。 生长环境包括生长条件和栽培技术等方面。牡丹性喜温暖、凉爽、干燥、阳光 充足的环境。喜阳光，也耐半阴，耐寒，耐干旱，耐弱碱，忌积水，怕热，怕烈日 直射。适宜在疏松、深厚、肥沃、地势高燥、排水良好的中性沙壤土中生长。 3.1.3 牡丹文化 牡丹文化包括： 1. 起源 洛阳牡丹网页设计 7 牡丹文化的起源，若从诗经牡丹进入诗歌，算起距今约 3000 年历史。秦 汉时代以药用植物将牡丹记入神农本草经，牡丹已进入药物学。南北朝时，北 齐杨子华画牡丹，牡丹已进入艺术领域。 2. 牡丹文化简介 牡丹文化自秦汉时以药植物载人神农本草经始，散于历代各种古籍者，不 乏其文。形成了色括植物学、园艺学、药物学、地理学、文学、艺术、民俗学等多 学科在内的牡丹文化学，它是中华民族文化和民俗学的一组成部分，是中华民族文 化完整机体的一个细胞，透过它，可以洞察中华民族文化的一般特征，这就是“文 化全息”现象。 3. 历史发展 牡丹文化的发展经历了一个很长远的历史，若从诗经帝国牡丹进入诗歌， 算起距今约 3000 年历史。秦汉时代以药用植物将牡丹记入神农本草经 ，南北朝 时，北齐杨子华画牡丹，牡丹已进入艺术领域。隋炀帝在洛阳建西苑，诏天下进奇 石花卉，易州进牡丹二十箱，植于西苑，自此，牡丹进入皇家园林，涉足园艺学。 唐代，帝国牡丹诗大量涌现，千古绝唱。宋代开始，除牡丹诗词大量问世外，又出 现了牡丹专著，元姚遂有序帝国牡丹 ，明人高濂有牡丹花谱等。解放后， 帝国牡丹种植有长足地发展，牡丹文化被人逐渐重视，出现了大批牡丹研究工作者 和专家。一直流传到今天。 “洛阳牡丹天下无” ，牡丹已被洛阳市定为市花，并确定 每年 4 月 15 日25 日为“洛阳牡丹花会” 。每当花会期间，中外游人群集，共 赏花王。除此之外，牡丹在中国称为花之富贵者也。 4. 牡丹诗词； 唐代，帝国牡丹诗大量涌现，刘禹锡的“唯有牡丹真国色，花开时节动京城” ， 脍炙人口；李白的“云想衣裳花想容，春风拂槛露化浓” ，千古绝唱。宋代开始， 除牡丹诗词大量问世外，又出现了牡丹专著，诸如欧阳修的帝国洛阳牡丹记 、 陆游的天彭牡丹谱 、丘浚的牡丹荣辱志 、张邦基的陈州帝国牡丹记等。 元姚遂有序帝国牡丹 ，明人高濂有牡丹花谱 、王象晋有群芳谱 ，薛凤翔 有亳州帝国牡丹史 ，清人汪灏有广群芳谱 、苏毓眉有曹南牡丹谱 、余鹏 的有曹州牡丹谱等。 5. 牡丹画。 牡丹是国画花卉中经常描绘的题材，历代诗人画家有着无数赞美牡丹的诗句和 画作，意义不仅在于牡丹美丽的外表还在于寄托诗人、画家的美好情感。 3.1.4 牡丹花城 洛阳景点介绍包括： 1.市区景点：龙门石窟、白马寺、丽景门、关林庙 8 龙门石窟是中国三大石窟之一，1961 年被国务院公布为全国第一批重点文物 保护单位；1982 年公布为全国重点风景名胜区；2000 年 11 月联合国教科文组织将 其列入世界遗产名录 ；2006 年 1 月，中央文明办、国家建设部、国家旅游局联 合授予“全国文明风景旅游区” ；2007 年 5 月，国家旅游局将其评为全国首批 AAAAA 级旅游景区。白马寺被称做“千年第一古刹” 据说是因当时驮载经书佛像 的白马而得名，而白马寺也因而成为中国佛教的“祖庭”和发源地。白马寺属于中 国全国重点文物保护单位。丽景门，中原第一楼，古都第一门丽景门是古都洛阳唯 一一家吃、住、行、游、购、娱为一体的大型综合性旅游景区，有诗人用“洛阳牡 丹甲天下，丽京城楼世无双 ”来赞美它无限的魅力。洛阳关林是我国唯一一处 “林、庙”合祀关圣帝君的圣域，也是海内外唯一一处可以称“林”之庙宇。是国 家级重点文物保护单位，AAAA 级旅游景区。 2.周边景点：龙潭峡、鸡冠洞、天池山、神灵寨。 龙潭大峡谷是黛眉山世界地质公园的核心景区，先后获得“国家地质公园” 、 “中国最具发展潜力景区” 、 “中国优秀旅游目的地” 、 “世界地质公园” 、 “国家 AAAA 级景区”等称号，享有“中国嶂谷第一峡” 、 “古海洋天然博物馆” 、 “神州奇 峡”和“黄河山水画廊”等美名。鸡冠洞，洞内石笋、石柱、石盾、石花、石幔、 石瀑、石旗密布，景观壮丽，其观赏及科研价值国内罕见，被誉为“北国第一洞” 。 先后被授予“省级风景名胜区” ， “河南省十佳旅游景区” ， “国家 AAAA 级旅游景区” 。 天池山为嵩县旅游的奇葩瑰宝。荣获了“国家级森林公园” 、 “国家 4A 级景区” 、 “省级文明景区” 、 “河南最美景区” 、 “洛阳新八大景”等众多荣誉称号。神灵寨景 区位于洛阳西南 90 公里的洛宁县熊平山北坡三官庙林场境内，在县城东南 17 公里 处。景区总面积 53 平方公里，有 2200 多种植物，300 多种动物。 2002 年以来， 景区先后被评定为“国家森林公园” 、 “国家地质公园” 、 “中国美术家协会写生基地” 、 “中国林业科研基地”等。 洛阳小吃包括： 1.洛阳锅贴 锅贴是一种煎烙类食品，是精粉面皮裹瘦肉、韭黄及各种作料制作，放进平底 锅内煮前即成。呈柿黄色，吃着黄焦酥脆，皮薄馅香，灌汤流油。洛阳锅贴更是以 其特色使来洛阳的人对此赞不绝口。 2.不翻汤 洛阳人亦称其为“九府门不翻汤” ， 此款小吃酸辣咸香，醒酒开胃，是一款颇 具洛阳地方特色的民间小吃。 3.洛阳水席 “水席”起源于洛阳，闻名于洛阳，洛阳水席，有三大特点：一是有荤有素， 有冷有执；二是有汤有水，北方南方均为可口；三是上菜顺序有严格规定，搭配合 洛阳牡丹网页设计 9 理、选料认真、火候恰当。洛阳水席其上菜程序如行云流水，主要菜肴又均有汤水， 故名“水席” 。其特点是以酸辣见长，清爽利口。 4.牡丹燕菜 洛阳燕菜又称牡丹燕菜，属河南菜、豫菜。主料有白萝卜、海参、 鱿鱼、鸡 肉。成品洛阳燕菜只见一朵洁白如玉、色泽夺目的牡丹花，浮于汤面之上，菜香花 鲜，赢得贵宾们的拍手叫绝。是一道具有豫西地方特色的佳肴，历来被列为洛阳水 席中的首菜。 3.1.5 牡丹欣赏 主要是点击小图浏览。一共 16 张照片，分为 4 个网页。每一张图片都具有一 定的代表性，有牡丹的近景、远景、花苞、花开、花落以及常见牡丹品种的不同形 态。 3.1.6 牡丹花会 包括历届牡丹花会简介、各个牡丹园景点介绍。包括牡丹名园如：中国国花园、 隋唐植物园、王城公园、洛阳国际牡丹园。以及历届牡丹花会例如第 29、30、31、32 届牡丹花会介绍。 中国国花园是目前国内面积最大、牡丹开花质量最高、观赏效果最好、珍稀牡 丹品种最多、景色最优美的牡丹专类观赏园，种植牡丹 1000 多个品种 700 多亩 60 余万株，形成了独特的牡丹风景园林。王城公园，占地一千零八十亩，是全国第一 座遗址公园，也是河南省最大的综合性公园，为中部地区最大的综合性公园之一。 始建于 1955 年，因修建在东周王城遗址上而得名。公园占地约 3977 公顷，集牡 丹文化与历史文化、人文园林与自然园林为一体，堪称“城市氧吧”，这里的牡丹 种植年代长久，牡丹株高。形成了独特的“牡丹精品、周鼎雄踞、河图洛书、靓思 飞瀑、凤阙迎毂”等王城景观。洛阳隋唐城遗址植物园是以洛阳的山、水、植物和 隋唐城遗址文化为基础，坚持科学保护与合理利用相结合，集科研、科普、文化娱 乐为一体的综合性植物园，这里更多侧重的是各种不同类型的植物，当然牡丹也是 少不了的。 3.1.7 联系我们 文字说明联系方式。文字图片滚动展示。 3.2 具体框架图 1. 首页框架图 首页主要有视频展示牡丹的生长，右边链接到牡丹常见品种，下面有介绍洛阳 10 周边风景、洛阳小吃、牡丹名园、下面连续播放图片魅力洛阳。 导航栏框架图如图 3-1 所示： 图图 3-13-1 导航栏框架图导航栏框架图 2牡丹简介框架图 牡丹简介主要有常见品种介绍，以及生长环境介绍。常见品种包括姚黄、豆绿、 魏紫、赵粉、洛阳红、荷包牡丹、绿幕隐玉、粉二乔、乌金耀辉、雪塔、玉楼点翠、 醉西施。生长环境包括生长条件和栽培技术。 牡丹简介框架图如图 3-2 所示： 牡丹 简介 常见 品种 生长 环境 醉西 施 玉楼 点翠 雪塔 乌金 耀辉 粉二 乔 绿幕 隐玉 荷包 牡丹 洛阳 红 魏紫 赵粉 豆绿 姚黄 生长 条件 栽培 技术 图图3-2 牡丹简介框架图牡丹简介框架图 3.牡丹资讯框架图 牡丹资讯主要选取牡丹文化节期间比较重要的 10 条新闻信息。 牡丹资讯框架图如图 3-3 所示： 牡丹资 讯 新闻 1 新闻2 新闻 3新闻 4新闻 5新闻 6新闻 7新闻 8新闻 9新闻 10 图图3-3 牡丹资讯框架图牡丹资讯框架图 4.牡丹花都框架图 牡丹花都主要包括景点介绍和洛阳小吃两部分，其中景点介绍有市区景点介绍 导航栏 首页牡丹简介牡丹文化牡丹资讯牡丹花会牡丹花都牡丹欣赏联系我们 洛阳牡丹网页设计 11 如：龙门石窟、白马寺、丽景门、关林庙。周边景点介绍有：龙潭峡、鸡冠洞、天 池山、神灵寨。洛阳小吃包括牡丹燕菜、洛阳水席、不翻汤、洛阳锅贴。 牡丹花都框架图如图 3-4 所示： 牡丹 花都 景点 介绍 洛阳 小吃 龙门 石窟 白马 寺 丽景 门 关林 庙 龙潭 峡 鸡冠 洞 天池 山 神灵 寨 牡丹 燕菜 洛阳 水席 不翻 汤 洛阳 锅贴 图图3-4 牡丹花都框架图牡丹花都框架图 5.牡丹花会框架图 牡丹花会包括历届牡丹花会和牡丹名园两部分，历届牡丹花会主要介绍最近四 年的牡丹花会，牡丹名园主要介绍中国国花园、隋唐植物园、王城公园、国际牡丹 园。 牡丹花会框架图如图 3-6 所示： 牡丹花会 历届牡丹 花会 牡丹名园 29 届30 届31 届32 届 中国国花 园 隋唐植物 园 王城公园 国际牡丹 园 图图 3-63-6 牡丹花会框架图牡丹花会框架图 12 第 4 章 网页详细设计 4.1 开发工具简介 4.11 Dreamweaver 8.0 简介 Dreamweaver 是在网页设计与制作领域中用户最多、应用最广、功能最强大的 软件，随着 Dreamweaver 8.0 的发布，更坚定 Dreamweaver 在该领域的地位。它集 网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器 的特性，是目前网站设计、开发、制作的首选工具。突出的特点主要有灵活的编写 方式；可视化编辑界面；功能更多的 CSS 支持CSS 可视化设计、CSS 检查工具； 动态跨浏览器验证；强大的 WEB 站点管理功能；内建的图形编辑引擎；丰富的媒体 支持能力等。 它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强 大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的 网站和应用程序。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建 功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系 统。开发环境支持 HTML、ASP、ASP.NET、JSP 等，提供众多功能强大的可视化设计 工具、应用开发环境以及代码编辑支持。主要用于素材整理、排版以及后台程序的 交互。 4.12 HTML 简介 全称全称：HyperText Mark-up Language 译称译称：超文本标记语言。 简意简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记 （tag）合文件 达到预期的效果。 主要特点：主要特点： 设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电 脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是 在当前电脑上还是在网络的其它电脑上。只需使用鼠标在某一文档中点取一个图标， Internet 就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的 另一台电脑中。 HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明 文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部（Head） 、主体 （Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具 体内容。 另外，HTML 是网络的通用语言，一种简单、通用的全置标记语言。它允许网 洛阳牡丹网页设计 13 页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览 到，无论使用的是什么类型的电脑或浏览器。 。 基本结构：基本结构： 一个 HTML 文档是由一系列的元素和标签组成.元素名不区分大小写.HTML 用标 签来规定元素的属性和它在文件中的位置。 HTML 超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了 一些必要的定义，文档体中才是要显示的各种文档信息。 下面是一个最基本的 html 文档的代码:11.html - 开始标签 - 一个简单的 HTML 示例 | 头部标签 - - | 欢迎光临我的主页 | | | 文件主体 | 这是我第一次做主页 | | | - - 结尾标签 在文档的最外层， 文档中的所有文本和 html 标签都包含在其 中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的 Web 浏览器都可以自动识别 HTML 文档，并不要求有 标签，也不对该标签进行任 何操作，但是为了使 HTML 文档能够适应不断变化的 Web 浏览器，还是应该养成不 省略这对标签的良好习惯。 是 HTML 文档的头部标签, 在浏览器窗口中，头部信息是不被显 示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的 一些公共属性。若不需头部信息则可省略此标记，良好的习惯是不省略。 和是嵌套在头部标签中的，标签之间的文本是文档标 题，它被显示在浏览器窗口的标题栏。 标记一般不省略，标签之间的文本是正文，是在浏览器要显示 的页面内容。 14 上面的这几对标签在文档中都是唯一的，HEAD 标签和 BODY 标签是嵌套在 HTML 标签中的。 4.13 HTML 技术介绍 Macromedia 公司的 Roundtrip HTML 技术让用户可以随意导入 HTML 文件而无 需重新设置代码格式，用户还可以利用 Dreamweaver 清除或重新格式化 HTML 代码， 实现代码的优化。 利用 Dreamweaver，可以方便地使用动态 HTML 功能，却不需要写一行行的代 码；利用它还可以检查作品在所有流行的平台和浏览器中可能发生的错误。 当然,如果不用 DW 的话,同样可以制作出很好的网站来,其实什么样的程序或者 HTML 代码都可以直接用记事本来写,只不过 Dreamweaver 实现起来确实方便一些。 4.2网页界面设计 4.2.1 网页设计原则 1.目的性 任何一个网站，必须首先具有明确的目的和目标群体。该网站的对象向面象游 客以及广大的牡丹爱好者，主要目的是为了宣传洛阳牡丹，网页的建设采用的是静 态网页的展示，建站包括类型的选择、内容功能的筹备、界面设计等各个方面都受 到目的性的直接影响，目的明确。 2.实用性 网站提供的功能服务应该是切合浏览者实际需求的且符合企业特点的。例如网 上银行提供免费电子邮件和个人主页空间就既不符合浏览者对网上银行网站的需求 也不是银行的优势，这样的功能服务提供不但会削弱浏览者对网站的整体印象，还 浪费了企业的资源投入，有弊无利。而这个网页主要是介绍洛阳牡丹，正值牡丹文 化节时期，人们对牡丹的热情比以往更加激烈，所以这个网页可以很好地提供一个 牡丹的展示平台。 3.层次性 条理清晰的结构，表现为网站的板块划分的合理性，信息内容的获取和功能服 务的过程都应该尽量将所需要进行的步骤控制在 3-5 步以内，不得不需要更多的步 骤的时应该有明确的提示。所以导航条起到了至关重要的作用，本网页的有点也就 是条理清晰，但同时也是一处缺点，因为做的时间匆忙，导航的有些是图片跟踪链 接，但不影响整体效果。 4.一致性 设计一个网页时，规划一个统一的主题与风格可以使所有的页面紧紧联系在 洛阳牡丹网页设计 15 一起，保持页面的一致性，既能强化风格定位所带来的作用，又能在浏览体验上给 浏览者带来方便和顺畅。 （1）页面整体设计风格的一致性 我采用的网页整个针对一个模板，在模板的基础上进行修改，而且每个分页面 里面各个小组也用同样的技术，具有很好的一致性。 （2）界面元素的命名的一致性 比如导航栏里元素命名简单明了一致，在各个分页面，例如牡丹品种里面各种 花名的一致性等，每个网页的界面元素大都是导航、图片、文字。 （3）功能一致性 完成同样的功能应该尽量使用同样的元素，本网页主要以介绍为主，所以其功 能就是给用户文字图片等浏览信息，唯一的不同就是各种文字图片展现的方式不同 有动有静。 （4）元素风格一致性 界面元素的美观风格、摆放位置在同一个界面和不同界面之间都应该是一致的， 整个网页的风格都有着古典中国文化的的风格，这个应该是背景图片给人的感觉。 4.2.2 网页设计风格： 洛阳牡丹网页主要是用的红棕色和黄色为主题色，背景的花纹是代表中国传统 审美的牡丹花图案，还有祥云的文化概念在中国具有上千年的时间跨度，是具有代 表性的中国文化符号 传达热情喜庆、祥和内在的文化内涵。整个设计简单大方， 让人赏心悦目。 4.2.3 界面构成要素： 与传统媒体不同，网页除了文字和图像以外，还包含声音、视频和动画等新兴 多媒体元素，更借助由代码语言编程所实现的各种交互式效果，增加了网页界面的 生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排布、优化。我设计 的网页的界面主要由下面几个因素构成： 1.文字 文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链 接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说 明一般比较醒目、优先编排。介绍牡丹的信息用普通字体简单大方，传统的黑色作 为百搭颜色，是整个页面自然和谐美观。 2.图形 本网页主要构成部分是是文字和图形，图形的选择，颜色的搭配，都影响到整 个网页的效果，图形在网页界面中具有重要作用。合理的运用图形。可以生动直观、 16 形象地表现设计主题。网页中很多图形是关于牡丹花的不同形态，牡丹花本身就漂 亮，所以图片处理方面不是很多，在大小上调节有，里外还有图片的亮度，不同的 图片的搭配等。我的网页中常用的图形格式包括 jpg 和 gif，这样使图片加载起来 速度变快，也不影响图片的真实程度，更好的展示出牡丹的风姿，图形元素包括标 题、背景、主图、链接图标四种。 3.页面版式 版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配 置，使页面整体视觉效果美观和谐，便于阅读，实现信息传达的最佳效果。 我的 页面版式主要是左右方向，一栏导航条，剩下的介绍主题，直观方面。 4.色彩 主要是红棕色和淡黄色的暖色调，更具吸引力；也更好的展示出牡丹在中国人 心中雍容华贵的地位，具有一定的象征作用。 5.多媒体 网页构成中的多媒体元素主要包括视频和动画。视频更好的展示了牡丹的生长 状态，动画运用简单的 flash 滚动图像效果，这些是界面构成中比较吸引人的元素 。 6.技术 网页的技术要素并非任何情况下在网页中都能直观体现，但是却代表了设计的 整体水平，也是衡量设计成功的重要标准。网页界面设计最基本的技术要求包括： 浏览器、传输速度、屏幕分辨率、颜色显示。 4.3 网页素材的搜集 4.3.1 文字 文字元素是信息传达的主体部分。本网页里包含很多文字信息。 牡丹品种的介绍，12 种不同的牡丹生长习性，花开状况，牡丹的生长习惯栽 培技术，这些主要在中国牡丹网上搜集相关资料并自行整理，放在每个文档里，使 用时插入。牡丹文化的介绍里关于牡丹文化，牡丹历史，在百度上整理搜索整理， 牡丹的著名历史诗词，则是通过以前在国花园游玩时所见记录的，当然主要的途径 也是通过网络。牡丹名园、洛阳著名旅游景点介绍信息大多在洛阳旅游网上搜集整 理。牡丹资讯则是搜集比较有重要影响的洛阳新闻，展示给游客。 文字素材的准备虽然简单，但是工作量很大，所以每个相关文字信息都各自建 立了文本文档命名保存以备后用。 洛阳牡丹网页设计 17 4.3.2 图片 图片主要有牡丹图片、洛阳景点、洛阳小吃、牡丹花会 Logo、场景，以及背 景图片，在图片搜集过程中原图片关于牡丹图片大多是用的自己亲手拍摄的图片， 部分是网上下载，其他的图片大多原材料是从网上下载的。 但是由于网上的很多不合要求，所以很多图片经过 PS 处理，重新设置图片大 小，对图片进行处理去掉不必要的信息，背景图片是自己处理的，先从网上下载相 关的图片，抠图，从新组合添加图层，插入文字，设置颜色字体格式。 4.3.3 视频、动画 视频动画的插入使网页不再变得呆板静止不动，而且能更加生动展示出想要表 现的内容，让网页活动起来。 网页中插入了一段视频，视频截取自中央台纪录片牡丹宣传片，充分反映 了牡丹生长历程、花开花落、历史变迁、文化影响等具有一定的代表性。 动画有几个滚动图片的 flash ，这个是简单的动画，自己通过 Flash8.0 制作 然后插入，中间网页里有 web 相册，则是通过 Dreamweaver8.0 自带的图像查看其 功能实现。 4.4 网页功能模块的实现 4.4.1 首页展示 模板的设置，插入背景图片，洛阳牡丹甲天下，该图片是之前在网上下载又经 过 PS 处理，插入四行一列表格，表格宽度为 1000，第一行插入导航条，设置字体 为 18 颜色白色，宋体，链接鼠标经过时为红色下划线，导航条的背景颜色为红棕 色，在第二行表单中设置背景图片为导航 1，插入文字洛阳牡丹甲天下，设置字体 大小为 36，颜色橙色，另插入编辑区域。第三行留做编辑区域，第四行，同样插 入背景图片导航 2，插入文字显示联系方式，设置字体大小 14，颜色粉红。背景颜 18 色白色。 图图 4-14-1 模板模板 首页可以链接到本网站的各个主要部分，视频源自中央台记录片牡丹片头， 视频欣赏让人们大体了解牡丹成长过程、牡丹文化等。名花介绍链接到牡丹简介， 牡丹的各个品种。魅力洛阳链接到牡丹花都部分；牡丹名园连接到牡丹花会部分； 洛阳小吃同样链接牡丹花都部分。插入视频的代码如下： 首页主界面如图 4-3。 插入模板，布局表格，将之前准备好的 flv 格式的视频，插入左上方，视频大 小为 700*300，插入图片，设置图片大小为 100*100，右边插入四行一列的表格， 表格高 100px,介绍牡丹品种，设置超链接，设置连接属性，连接颜色为黑色，鼠 标经过时为红色，并插入 html 水平线，表格边框为 0。 在其下面部分，布局表格，并将表格拆分为五行三列，插入 flash 按钮，图片、 文字，图片大小为 125*125，文字 CSS 样式是 hua-hua,每一列分别介绍，洛阳景点、 牡丹名园、洛阳小吃并分别把图片文字添加超链接。 洛阳牡丹网页设计 19 最后插入 web 相册，相册照片在使用之前用 PS 处理好为 1000*400 大小，相 册照片是洛阳的风景照片一共 7 张，包括龙门石窟、瀛洲桥、老集灯笼街、西工体 育塔、音乐喷泉等，设置相册属性，相册以介绍洛阳风光。 洛阳景点 web 相册属性如图 4-2。 图图 4-24-2 洛阳景点洛阳景点 webweb 相册属性相册属性 20 图图 4-34-3 首页主界面首页主界面 4.4.2 牡丹简介界面 设置导航栏，以便用户查找内容，导航栏背景颜色为深绿色，鼠标经过颜色为 鲜绿色，字体设置 CSS 样式，设置超链接，并在右侧插入四行三列的表格，设置表 格边框为 0，分别在每个单元格中插入图片文字，图片大小为 190*176，设置超链 接。图片分别为姚黄、魏紫、赵粉、粉二乔、豆绿、荷包牡丹、洛阳红、雪塔、绿 幕隐玉、玉楼点翠、乌金耀辉、醉西施等。介绍牡丹品种的文字大都从网上搜索， 大概介绍每种品种的生长习性，花开状态、历史传说等。牡丹简介导航页界面如图 4-4 所示。 洛阳牡丹网页设计 21 图图 4-44-4 牡丹简介导航页界面牡丹简介导航页界面 之后每个分页面都以左边部分为框架，右边插入图片设置图片大小为 600*500，文字样式 hua-hua，并把段落文字设置 CSS 样式，是文字排版整齐，文 字格式设置居中对齐，行间距 20 磅，一共 14 个分页，分别介绍牡丹品种，生长习 性、栽培技术。生长习性和栽培技术的介绍会让牡丹种植爱好者更加深入了解牡丹 的各种习性。在技术上是文字的编排。文字的样式 hua-hua。Hua-hua 的 CSS 代码 如下： hua_hua font-size: 16px; color: #000; text-indent: 2em; margin: 0px; line-height: 25px; text-align: justify; vertical-align: top; 牡丹简介中其中一个分页“姚黄”如图 4-5 所示： 22 图图 4-54-5 牡丹简介姚黄界面牡丹简介姚黄界面 4.4.3 牡丹文化界面 插入一行两列表格，将右侧表格拆分为 7 行，在第一行，插入文字，设置文字 CSS 样式，并插入 html 水平线，第二行设置字体大小为 18 加粗，第三行插入文字 介绍，同理设置“简介” “历史发展”部分，将黑色“起源” “简介” “历史发展” 设置锚点，分别为 qy、jj、lsfz，在目录部分设置链接属性#qy、#jj、#lsfz。 右侧分别插入图片链接相关的网站，如中国牡丹网、洛阳旅游网、洛阳网等。 以方便用户更加全面深入的了解牡丹。其中中国牡丹网，是一个在牡丹介绍方面很 全面的一个网站；洛阳网可以随时让用户了解洛阳最新动态；洛阳旅游网提供用户 最快捷的旅游方式。可供用户参看。设置链接属性。字体大小为 18。鼠标经过时 为红色，没经过时为紫色。 洛阳牡丹网页设计 23 第一个牡丹文化网页的界面如图 4-6 所示： 图图 4-64-6 牡丹文化界面牡丹文化界面 1 1 在文化介绍第二张网页里，页面整体设计，同上，介绍牡丹画，插入图像查看 器，主要以介绍给国内知名的牡丹画为主，一共 4 张代表性的画，并设置其属性， 图像查看器属性如图 4-7 所示: 图图 4-74-7 牡丹文化牡丹文化 webweb 相册属性相册属性 在介绍诗词部分，采用添加行为，弹出信息，改变信息的文字内容。共 12 首 诗歌，点击时，会弹出页面信息。弹出对应的诗词。诗词多为古代典型的代表作， 24 让人们深入的了解牡丹文化。并分别在“牡丹诗词” “牡丹画”设置锚点。诗词标 题字号为 18，颜色为黑色，前面插入 gif 图片。插入弹出页面信息行为的代码如 下： 红牡丹 （唐. 王维） 牡丹文化第二个网页界面如图 4-8 所示： 图图 4-84-8 牡丹文化界面牡丹文化界面 2 2 洛阳牡丹网页设计 25 4.4.4 牡丹花都界面 界面框架和牡丹简介设计差不多，但在洛阳景点介绍时，介绍龙门石窟、白马 寺、丽景门、关林庙、用的是图像查看器展示图片,图片变化为随机变化，大小为 600*500，龙门石窟是洛阳最有名的景点，白马寺历史悠久千年古刹，丽景门好称 中原第一门，后面的老集小吃更是吸引的很多人前往。在介绍龙潭峡、鸡冠洞、天 池山、神灵寨、用的是添加行为，鼠标经过图像，大小为 600*500，这些洛阳周边 景色也特别值得一提。插入图像查看器代码如下： 牡丹花都景点介绍界面图如图 4-9 所示： 图图 4-94-9 牡丹花都景点介绍界面牡丹花都景点介绍界面 介绍洛