HTML网页课程设计报告（我的家乡）
时间：2022-07-24 18:06:01 | 来源：网站运营
时间：2022-07-24 18:06:01 来源：网站运营
课程设计摘 要菏泽（Heze），是山东省地级市，中国牡丹之都 [1-14] ，古称曹州，位于山东省西南部，鲁苏豫皖四省交界地带，东与济宁市相邻，东南与江苏省徐州市、安徽省宿州市接壤，南与河南省商丘市相连，西与河南省开封市、新乡市毗邻，北接河南省濮阳市。介于北纬34°39′—35°52′，东经114°45′—116°25′之间，南北长157千米，东西宽140千米 [89] 。面积12239平方公里 [93] 。根据第七次人口普查数据，截至2020年11月1日零时，菏泽市常住人口为8795939人。
菏泽原系天然古泽，济水所汇，菏水所出，连通古济水、泗水两大水系，唐更名龙池，清称夏月湖。清雍正十三年（1735年）升曹州为府，附郭设县，因南有“菏山”，北有“雷泽”，赐名菏泽。菏泽历史悠久，享有“天下之中”之誉，《禹贡》九泽之菏泽、雷泽、大野泽、孟渚泽皆在境内。人文始祖伏羲、东夷之帝少昊、贤明君主帝舜、兵主战神蚩尤、改革家吴起、军事家孙膑、农学家氾胜之、经济学家刘晏、文学家温子升等都出生在这里，刘邦登基称帝、曹操成就霸业、黄巢起义、宋江聚义等都发生在菏泽。
目录
一、作品简介 1
二、设计方案 1
1. 软硬件环境 1
2. 色彩方案 1
1 首页 1
2. “景点地图”页面 3
3. “景点介绍”页面 4
4. “数码剪影”页面 5
5. “分享交流”页面 5
四、结论与心得 6
五、参考文献 7
一、作品简介
- 网站的设计：DIV和表格的完美结合，使得整个网站结构清晰明了。多个也页面的相互链接，更使得整个网站生动活泼，趣味盎然。
- 网站的主题：我的家乡菏泽。
- 网站的风格：网站使用鲜艳的背景，鲜艳亮眼，在炎炎夏日让人顿觉清爽，加上“我的家乡菏泽”的网站名称，让人更感舒缓放松。同时网站利用文字加图片的解析，让人更容易了结整个网站的布局。合适的布局更吸引观众的眼球，让人更加爱上这个网站，不愿离去。
- 功能分析：各个链接均在同一窗口打开，大大节约浏览者时间，同时也方便使用。
二、设计方案
1. 软硬件环境
1）硬件环境：
CPU型号：Inter酷睿i3
CPU主频：1.8GHz
内存容量：2GB
硬盘容量：500GB
显卡芯片：AMD Radeon HD 7450M+Inter GMA HD 4000
2）软件环境：
操作系统：预装Windows10
2. 色彩方案
本网站所有网页主要以暖色调的颜色为主。利用最少的颜色，达到最丰富的效果，其实并不难实现。看看这个组合，只用了一种颜色，调整了不同的色调。网站的效果纯净、优雅，且不失有趣。
三、 实现过程
1 首页
1)首页效果图
首页效果图如图3.2所示，分为四部分，分别是头部、主体，其中头部有设计的网站背景；主体部分分为导航和网页内容，其中导航菜单体现了整个网站的栏目结构，包括：首页、景点地图、景点介绍、数码剪影，分享交流本网站就是围绕这几个模块展开的。
图3.2 首页效果图
2) 首页结构框图
首页结构框图如图3-3所示，是通过盒子与盒子的嵌套关系实现的。
图3.3 首页结构框图
div代码如下：
<div id="container">
<div id="header">
<div id="logo">logo</div>
<div id="right">图片</div></div>
<div id="nav">导航</div>
<div id="content">
<div id="menu">
<div id="menu_top">图片</div>
<div id="menu_cd">菜单</div></div>
<div id="main">主体</div></div>
<div id="footer">版权说明</div></div>
#frame布局设置将网页整体化了，其他所有布局均包含在里面。
图2-4 #frame布局代码
2. “景点地图”页面
图3.5 “家乡美景”页面
界面如上所示，采用的是和首页相同的模板，Header、Nav以及Footer部分都是一样的样式，只是网页中间的Content部分不一样，在本页中，我将六张美食的图片以三行两列显示，图片下方用灰色字体表明美食的名称，图片和文字均建立了超链接，单击任意图片，可以进入相应美食的介绍页面。
在设计时，我遇到的问题是，每张图片都有边框，后来我在css文件中写上：
img{ border:0px;}
就去掉了图片的边框，使页面更美观。
3. “景点介绍”页面
仿照“景点地图”页面，内容包括：界面、文字描述界面内容和特效、遇到的问题、如何解决的、本网页的特色。
4. “数码剪影”页面
5. “分享交流”页面
遇到的问题写法：问题1：写了但是没效果
答：1清空缓存 2换个浏览器试一下 3对照文档检查 5替代法，换一种最简单的写法，看是否执行
问题2：宽度，高度没效果
答：1检查是否被其他布局元素影响 2宽度% ，高度用px才有效果 3实在不行，换一种布局法
问题3：一个没见过东西，不知如何下手
答：1静下心来拆分，拆分成自己熟悉的东西 2现在很多东西网上拼拼凑凑有现成的 3平常多实践
四、结论与心得
1.总结本网站特色
网页分七个主题来介绍。层次明了，结构清晰，首页里垂直排列的菜单就给人以舒畅的感觉。
2.个人总结
在开始学习网页设计这门课之前心里就无比期待，对这门课有着浓厚的兴趣。在经过一学期的学习之后，才发现原来制作一个网页是如此的复杂，如此的需要耐心和时间。学习之后不仅比较全面的了结了网页制作也设计基本原则，而且还可以自己动手做网页了，这对我来说是最值得高兴的事，因为可能会对我以后的工作有用。
其中的每个字都是自己一个个打上去的，网页里面的分界线也是自己在photoshop里面做好然后插图插进去的。因为字比较多，所以表格做的也很多，而且有些效果因为没学过javascript，所以做不出来，花了很多时间，所以才导致于我到这么晚才完成。通过这次实训，我明白了，做网站不仅仅是追求好，更要有选择在合适的时间内可以完成的网页制作，也明白了照搬照抄有时候并不是那么简单，或许，自己原创会更好。
虽然实训完了就不用学网页设计了，但是出于兴趣，我会好好的自学它，争取能够做出很完美的网页。
五、参考文献
[1] 席金菊,何碧英 编著.网页设计与制作[M].北京:科学出版社,2015
[2] 孙冬梅著 Dreamweaver CS5 完全学习手册 北京：电子工业出版社，2011．
[3] Dreamweaver CS3网站建设与网页制作案例指导 北京： 电子工业出版社，2009.
参考网站：
在线咨询
