2020-2021 第 1 学期《Web 编程基础》期末作品
《我的故乡》网站 设计说明
年 级：2019 专业班级：软件工程
学 号：20190148037 姓 名： 卢仕散
评分表
网站结构内容 20 分
制作规范与制作技术 70 分
设计与创意 10 分
不符合要求减分
总分
设计说明体现工作思路、工作过程、工作方法和工作量，是评分重要依据，请认真填写。
网站主题与主要栏目简介
（1） 网站主题《我的故乡》，主要展示本人学生的故乡六盘水的一些信息和文化介绍。
（2） 主要栏目有：故乡简介、民族文化、故乡风景、家乡特产。1.故乡简介文字概述了六盘水的
地理位置和成就。2.民族文化使用了 4 分钟的视频，详细介绍了六盘水的地理位置和民族的
传统习俗、传统文化、各种民族的文化节目演出。3.故乡风景放置了 16 张城市照片、山区
风景照片，非常的漂亮和精美。4.家乡特产介绍了 3 种特色特产，盘县刺梨果脯、水城红心
猕猴桃、六盘水马铃薯，可色可香。
页面板块简介（分别介绍首页和二级页面的板块）
（1） 首页：1.最顶端有一个导航 div 盒子 header，在导航部分根据需求可点击加载想了解的二级
网页，鼠标放置导航栏，可体验到不同的样式浮动感受，二级页面设计在注册登录的按钮，
在导航最右端，点击后可跳转网页。Top 部分使用了一个背景图，六盘水北盘江大桥的图片，
宏伟美观，风景极为震撼，北盘江大桥清晰可见，云雾缭绕与山腰间，top 部分的左上角设
置了浮动变化的欢迎字体，使用了 css 样式，自定义的 id text，“欢迎来到我的故乡：凉都
-六盘水”；标题下部写了一个 table 表格，介绍网页主人学生的身份信息。
2.top 部分之后用了一个 div，一个小导航，有“故乡简介”“民族文化”“故乡风景”“家乡特产”四个
红色栏，分别设置了锚点 a 标签，点击可快速跳转到下面部分的相应位置，查看相应信息。3.小导航之
后使用了一个大的 div 盒子，包含了四个导航信息，在其中插入了文字信息、照片信息、视屏信息。故
乡风景部分的照片使用了 CSS 样式，鼠标放置照片上也感受到不同感受和视觉体验，其中引入了 JS，对
于照片的处理。在最底部的上端中间放置了一个小的 div 盒子，点击可快速回到顶部 top 部分。
4.最底部用了一个高 180px，宽 100%的 div 盒子 footer。用于结束网页信息部分，里面写了本人名字。
（2） 二级页面：1.该页面是一个用户登录主页的登录页面，网页背景使用了一个文字图重复四次，文字信息
是一句诗句，“举头望明月，低头思故乡”。2.中间部分设置一个 div 盒子用于用户输入登录信息，其中的
信息使用了不同的 CSS 样式设置字体，设置盒子内的输入框的大小，输入信息的定位，提示用户在“用户
名”部分可输入邮箱或手机号，密码部分要输入密码，输入后可以选择勾选“记录登录状态”，忘记密码
可点击右边的“忘记密码？”，如果没有账号，可点击“新用户注册”。3.登录按钮设置了 css 样式 id loginBtn，
当用户没有输入用户登录信息是提示用户没有输入登录信息。
