最近闲着没事，就寻思着把自己玩过的那个《地牢脱出1》也整个官网出来，纯粹是自己瞎折腾，记录一下过程，以后也好回顾。
当然是先找点素材。游戏截图、角色立绘啥的，一股脑儿全扒下来。然后就开始琢磨，这官网要做成啥样？我想着既然是地牢脱出，那就得有点神秘感，要有点黑暗风格，但又不能太吓人，毕竟是休闲游戏嘛
接着就是选工具了。我这种半吊子水平，肯定不能用啥高大上的框架，直接上Dreamweaver，简单粗暴。先搭个HTML框架，把首页的结构给弄出来。头部放个logo，导航栏放几个链接，比如“游戏介绍”、“角色图鉴”、“攻略心得”之类的。主体部分就放个大的游戏宣传图，再加点简单的文字介绍。
然后就是CSS了。颜色方面，我选了暗色调，背景是那种有点斑驳的石墙纹理，文字用亮一点的颜色，方便阅读。字体也得选个有点个性的，不能太普通。排版方面，我喜欢用Flexbox，方便控制元素的位置和大小。边边角角再加点阴影效果，增加立体感。
重点来了，图片处理！ 扒下来的图片大小不一，分辨率也参差不齐，直接放上去肯定不行。我用PS把图片都处理了一下，统一大小，压缩一下体积，免得网页加载太慢。还给一些图片加了点滤镜，让整体风格更统一。
- 游戏介绍页面，我详细介绍了游戏玩法、特色啥的。
- 角色图鉴页面，把所有角色都放上去，配上简单的介绍和立绘。
- 攻略心得页面，我从网上搜集了一些攻略，整理了一下放上去，方便新手玩家参考。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
接下来就是JavaScript了。也没啥复杂的，就写了几个简单的交互效果。比如，鼠标悬停在导航栏链接上时，链接会变色；点击角色图鉴中的角色，会弹出一个窗口，显示角色的详细信息。还加了个返回顶部的按钮，方便用户浏览。
调试！ 这是最痛苦的环节。各种浏览器兼容性问题，各种CSS样式错乱，搞得我头都大了。只能一点一点地排查，一点一点地修改。还最终都解决了。
把所有文件都上传到服务器上，测试一下，看看能不能正常访问。总算完工了。虽然做的很粗糙，但好歹也算是个像样的官网了。自己也挺有成就感的，哈哈。
总结一下
这回做《地牢脱出1》官网，主要就是熟悉了一下HTML、CSS和JavaScript的基本用法。也体会到了前端开发的艰辛，以后还是要多学习，才能做出更棒的网站。
