web前端网页设计期末课程大作业:HTML旅游网页主题网站设计——酒店主题网站设计—酒店阳光温馨网站(5页)HTML+CSS+JavaScript

简介: 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓,页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码,这是一个不错的旅游网页制作,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用, 这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。


# 二、网站描述✍️ 旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情,并通过访客留言,增加游客的互动体验。同时,地方旅游网站里的每一个网页都采用了统一的设计风格,以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格,更能吸引浏览者的眼球。
# 三、网站介绍📖 **网站布局方面**:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。 **网站程序方面**:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。 **网站素材方面**:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。 **网站文件方面**:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件; **网页编辑方面**:网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作)。 其中: (1)html文件包含:其中index.html是首页、其他html为二级页面; (2)css文件包含:css全部页面样式,文字滚动, 图片放大等; (3)js文件包含:js实现动态轮播特效, 点击事件等等(个别网页中运用到js代码)。 --- # 四、网站效果🌐 网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。 **网站设计方面**:计划实现简洁大气的网页设计效果。 **网站功能方面**:计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。 ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/b96ca048f92e491c82832d82ca5f5bf7.png#pic_center) ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/0da9164e240e43a68e448fdca600a974.png#pic_center) ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/e03c58f0998844e08cace11df7b121c7.png#pic_center) ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/653bd50fde2c41dda7f2d6db6531f692.png#pic_center) ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/703b5042774d47229ea752e328a8b9e7.png#pic_center)
# 五、网站代码制作部分 📕 (1)网站首页布局确定好各个板块的内容,并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 (2)页面使用了DIV+CSS布局,使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 (3)表单部分页面使用了DIV+CSS布局,使用到的知识主要有运用了form表单、input文本框和input提交按钮,完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。 ## HTML结构代码🧱 ```html Happy酒店展示网站模板,Happy酒店展示响应式网站模板,html5网页模板下载-建站宝盒模板H1041 hbox" class="view_contents">
先进的设备,贴心的服务
打造您需要的每一款产品及需求,让 您用的放心健康。
与国外知名品牌合作,不断提高我们的产品质量。
真诚为您服务
我们的强大离不开你们的监督,让我 们一起把服务做的更好。
热门 酒店
HOT HOTEL
从公寓、度假屋、家庭经营的住宿加早餐旅馆,到五星级豪华度假酒店、树屋和冰屋,我们一直致力于为旅行者提供遍及世界各地的住宿体验。
0003ncz0.jpg
手机版
微信版公众号
获取资讯
Copyright ? 2020 . Trazos All rights reserved. 技术支持
``` ## CSS样式代码🏡 ```css #popup_container{font-family:Arial,sans-serif;font-size:12px; color:#000; background:#FFF;border-radius:6px;box-shadow: 0 0 20px rgba(0,0,0,0.2); position: fixed; z-index: 99999; padding: 0; margin:0; width: 290px; top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} #popup_title{font-family: 'Microsoft YaHei';font-size:14px;font-weight:normal;text-align:center;line-height:40px;color:#666;cursor:default;padding:0em;margin:0em; display: none;} #popup_content{/*background: 10px 14px no-repeat url(../images/i.gif);height: 90px*/; padding: 0 20px 20px; margin:0em; padding-top: 90px; background: url(../images/warning.png) no-repeat 50% 20px; background-size: 60px;} #popup_message{color: #666; line-height: 180%; width: 100%; text-align: center;} #popup_panel{text-align:center;margin: 20px 0 5px 0;} #popup_prompt{margin:.5em 0em;} #popup_panel #popup_ok{ display: inline-block;background: #fff; border: 1px solid #ddd;padding: 8px 12px;color: #666;border-radius: 2px; cursor: pointer; outline: none;} #popup_panel #popup_cancel{ display: inline-block;background: #eee;border: 1px solid #ddd;padding: 8px 12px;color: #333;border-radius: 2px; cursor: pointer; outline: none;} #popup_panel input:hover{opacity: .7;} #popup_panel input:nth-child(2){margin-left: 10px;} ```
# 六、遇到问题及如何解决🔍 实训中遇到得困难不少,比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等,最后,通过上网查询和请教别人得到了很好的解决。
# 七、实训总结😊 通过这次网页设计制作实训,能够灵活的运用到所学的知识和技巧制作简单的网页,掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识,对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料,学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题,通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大,学有所用,在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科,值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了,以至于很多想法都没能实现,在以后的学习过程中我要对网页制作有更深的了解,做出更为成熟的网页。
# 八、更多干货🎁 1.如果我的博客对你有帮助、如果你喜欢我的博客内容,`请 “👍点赞” “✍️评论” “💙收藏” `一键三连哦! 2.`❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 `带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」! 3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥!
# 💂【获取方式】 [gitee码云源码仓库-欢迎Star](https://gitee.com/zhanyuqiu2022/my-app): https://gitee.com/zhanyuqiu2022/my-app
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
3天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
10天前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
利用 html_table 函数轻松获取网页中的表格数据
|
1月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
59 7
|
1月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
37 6
|
1月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
45 5
|
1月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
38 5
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
49 5
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
75 1