# 凤凰山旅游网 **Repository Path**: zwhwan/Phoenix ## Basic Information - **Project Name**: 凤凰山旅游网 - **Description**: 纯html+css+js - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-07-02 - **Last Updated**: 2023-12-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 基于HTML+CSS的《凤凰山旅游网》网站的设计与实现。 ---------------------- ## 一.需求分析 ### 1.1、课程设计题目 基于HTML的《凤凰山旅游网》网站的设计与实现。 ### 1.2、选题背景 近年来，我国综合国力不断加强，经济飞快发展，国民生活水平也得到日益提高。人们不再仅仅满足于 简单的衣食住行，部分人开始追求修心养性的生活方式，当然，现代化的发展仍需要我们脚踏实地一步 一步辛勤工作才行。所以，一方面现代化的生活节奏越来越快，人们所要承受的压力也越来越多，很多 人就会选择在节假日等空闲时间陪同家人或朋友去游山玩水享受自然乐趣来释放释放压力好以更好的状 态投入工作。另一方面为了推动家乡旅游业的发展和商业经济文化交流，提升新乡的知名度让更多人爱 上新乡这座古老的驿站，让新乡文化成为豫州腹地一颗璀璨的明珠。由此，我的网站应运而生。 ### 1.3、运行环境 硬件：装有windows操作系统的计算机。 软件：Photoshop、DreamWeaver或Sublime。 ### 1.4、开发工具 > Photoshop: Photoshop是美国Adobe公司开发的图像设计及处理软件，以其强大的功能倍受用户的青睐。它是 一个集图像扫描、编辑修改、图像制作、广告创意、图像合成、图像输入/输出、网页制作于一体 的专业图形处理软件。Adobe Photoshop为美术设计人员提供了无限的创意空间，可以从一个空白 的画面或从一幅现成的图像开始，通过各种绘图工具的配合使用及图像调整方式的组合，在图像中 任意调整颜色、明度、彩度、对比、甚至轮廓及图像；通过几十种特殊滤镜的处理，为作品增添变 幻无穷的魅力。Adobe Photoshop设计的所有结果均可以输出到彩色喷墨打印机、激光打印机打印 出来。当然也可以软拷贝至任何出版印刷系统。是从事平面设计人员的首选工具。 > Adobe Photoshop: 由最初的2.0版到今天的9.0(CS版)。随着版本的不断提高，其功能也越来越强大。就一般图形处 理业务而言，其功能大概用不到它所具有的三分之一。 > DreamWeaver: Dreamweaver网页制作是优秀的网页编辑和网站管理软件之一，本书采用最新的项目教学法与传统 教学法相结合的方式，循序渐进地介绍了网页基础知识、Dreamweaver CS3入门、输入与编辑网页 元素、应用超链接和行为、应用表格和框架构建网页布局、应用样式表、应用Div+CSS布局网页、 应用模板和库、应用表单和表单对象及动态网页制作入门等。 Dreamweaver本书具有如下特点：（1）以就业为目标，从传统偏重知识的传授转为培养学生的实 际操作技能，满足社会实际就业需要；（2）以任务为驱动，以练带学，让学生在实施项目任务的 过程中有兴趣学习，轻松掌握相关技能；（3）以软件的典型应用为主线、以软件的功能为副线， 让学生在实现相关案例的过程中，还能系统地学习软件的功能；（4）包含大量实用技巧和练习， 附赠教学课件、视频演示和素材。 > Sublime: Sublime Text 是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用），也是 HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出 来，它最初被设计为一个具有丰富扩展功能的Vim。 Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。 还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平 台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。 ## 二、网站总体设计 ### 2.1、网站功能分析 网站根据需求，整体由七大部分组成，如下： ![img](照片音频/%E6%B5%81%E7%A8%8B%E5%9B%BE.jpg) ### 2.2、网站采用的主要技术 > 流式布局（百分比布局）也称为非固定像素布局（只针对于宽度） 通过将盒子的宽度设置为百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内 容向两侧填充 > HTML5语言 超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。 HTML 5的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分 现代浏览器已经具备了某些 HTML5 支持。 支持的浏览器包括Firefox，IE9，Chrome，Safari等。HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已 经支持某些 HTML5 技术。 > CSS > CSS概述 （1）CSS是指层叠样式表，这些样式定义如何显示HTML元素。这是由于如果是一个大型的网 页，所有代码都写在一个HTML文件里面的话，会很不容易管理，同时代码的简洁度也不够，所 以讲HTML文件内相同的样式提取出来，写到专门的CSS文件内，在通过引用的方式得以展现， 大大提高了代码的复用率，提高了整体开发的效率。 （2）CSS语言的特点主要有这几个特点，丰富的样式定义，CSS提供了丰富的文档样式外观； 易于使用和修改，CSS可以将样式定义在HTML元素的style属性中，也可以定义在HTML文档的 header部分，还可以定义在专门的CSS文件中，供HTML文件引用。修改是只需要修改定义的那 部分代码，不需要修改所以使用这个样式的标签。易于管理，CSS可以将相同样式的元素进行 归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将 一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的 样式声明进行修改。多页面应用，CSS样式可以供任何页面文件都可以将其引用。页面压缩， 样式声明在CSS样式表中，可以大大的减少HTML页面的内容，减少页面加载的时间。 > CSS3 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了 CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字 特效、多栏布局等模块 。 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创 新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂 商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 > DIV+CSS的布局方法 简介：CSS布局是目前最流行的网页制作技术。 《CSS+DIV网页布局技术详解》 [1] 通过实例讲解了CSS各个属性的使用方法和怎样使用 CSS进行页面的制作。全书内容包 括Web标准布 局的本质、XHTML书写规范、CSS基础与书写规范、网页头部元素的详细定义、CSS基本布局属 性、CSS容器属性、CSS定义文本属性、元素的修饰和CSS常见应用、DIV+CSS布局基础、关于 整站样式表的分析、关于标准的校验以及各种制作实例等内容。 表单处理 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的 元素。表单使用表单标签（
)定义。HTML5拥有多个新的表单输入类型。这些新特性提 供了更好的输入控制和验证。 轮播图 轮播图的技术实现了多张图片在网站的同一区域的滚动，消除了单个图片的单调性，减少了图 片空间的使用，提高了网站的可读性。 弹性盒布局 弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空 间, 收缩以适应更小的空间。 ## 三、网站详细设计与制作 ### 3.1、实施过程 1.先想好网站的主题和内容。 2.布局首页的排版，首页用的响应式布局，分为左栏，中间部分和右栏，推荐导航菜单、中间部分和尾 部。中间部分又分为上中下，中间部分的宽度随窗口的大小而变化。推荐部分又分为上，上中，中，和 下。左栏和右栏都是固定宽度的。最后写首页的内容。 3.布局首页面，用响应式布局设置页面。 4.布局子页面的排版，子页面都是分为头部，中间部分。中间部分分为左侧和右侧。然后写子页面的内 容。 5.最后实现首页到子页面的跳转，子页面到主页面的跳转。 ### 3.2、具体模块展示 - 首页导航菜单 ![img](照片音频/%E9%A6%96%E9%A1%B5_proc.jpg) - 顶部导航菜单 ![img](照片音频/%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95.jpg) - 登录页面 ![img](照片音频/%E7%99%BB%E5%BD%95.jpg) - 奇景一览 ![img](照片音频/%E5%A5%87%E6%99%AF%E4%B8%80%E8%A7%88.jpg) - 游客说 ![img](照片音频/%E6%B8%B8%E5%AE%A2%E8%AF%B41.jpg) - 新闻资讯 ![img](照片音频/%E6%96%B0%E9%97%BB%E8%B5%84%E8%AE%AF.jpg) -联系我们 ![img](照片音频/%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC.jpg) ### 3、网站内容展示 1. 子页顶部导航栏 代码实现：使用flew弹性布局，使其元素列表按一定比例撑满父元素。 2. 奇景一览页面栅栏图 代码实现: 将所有图片放入一个盒子，设置相关参数来使用css样式 3. 首页视频自动播放 代码实现: 使用video标签并且使用muted使得视频能够在谷歌等浏览器正常自动播放 4. 登录页面三角切换轮播 代码实现: 通过css设置transition等一系列参数 5. 新闻资讯页面24面体 代码实现: css+html 6. 游客说页面桃花飘特效 代码实现: 设置背景样式 7. 输入框自动旋转 代码实现：css 8. 联系我们页面二维码点击旋转 代码实现:css 9. 联系我们左右来回实现轮播图 代码实现:marquee标签 ## 四、总结与体会 ### 1、总结 通过这次网页设计，让我对学过的知识得以巩固，并对平常疏漏的知识点进行补充了解，搭建网站过程 中也会遇到很多bug，通过多种尝试才修复，也会有很多小细节的展示，让我明白设计是前端工程师的 必备。同时，从这次课设中也让我认知了自己的水平，打下了一定的基础，为日后其他课程设计及工作 做下铺垫。 虽然这次设计过程非常短暂，但颇有收获，这次任务原则上是设计，其实是一次对自己应对应对项目的 考验，是让我对知识点的巩固。运用本专业所学的理论知识和专业知识来分析解决实际问题的重要工作 场景适应环节，是对所学知识的巩固。因此，我们必须认真、踏实的完成设计。 ### 2、体会 通过对前端知识的了解 ，对网站设计也有了更深的了解，通过本次网页设计，我也基于HTML、CSS及JS 做出了一个网站雏形，同时也认知到前端技术的重要。通过本次课程设计，自我感觉收获颇多，既锻练 了自己项目开发的能力，同时锻炼了我应对一个空前庞大的项目面前如何应对、解决问题的能力。总 之，对于本次的网页设计必不可少的，对于往后的其他的课程设计和以后工作多有很大帮助。