2024年4月21日发(作者：)

Bootstrap实训

二〇一七年

题 目 ：

专 业 ：

班 级 ：

姓 名 ：

学 号 :

指导教师 ：

1

目录

学习设计与制作动态网页 ................................................................................................................. 3

一、 实训意义 .................................................................................................................................. 3

二、实训目的： ................................................................................................................................ 3

三、实训项目——高等数学 ............................................................................................................. 4

3.1 网站主题 .................................................................................................................................. 4

3.2 网站材料 .................................................................................................................................. 5

3.3 网站规划 .................................................................................................................................. 5

3.4 网站的制作工具....................................................................................................................... 5

3.5 制作网站的网页....................................................................................................................... 5

四、 主页框架 .................................................................................................................................. 7

4.1 代码实现： .............................................................................................................................. 7

4.2 留言界面效果 ........................................................................................................................ 15

4.3 学生作业登录系统................................................................................................................. 15

五、网站测试 .................................................................................................................................. 16

六、心得体会 .................................................................................................................................. 17

三、 善用图片，增强艺术效果 ............................................................................................ 17

学习设计与制作在线学习网站

一、 实训意义

网页设计与制作综合实训是教学过程中重要的实践性教学环节.

它是根据专业教学计划的要求,在教师的指导下对学生进行网页制作

专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的

能力,实现由理论知识向操作技能的转化,是对理论与实践教学效果

2

的检验,也是对学生综合分析能力与独立工作能力的培养过程.因此

加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学

生的综合素质有着重要的作用。

二、实训目的：

（1）进一步熟悉和掌握网站建设的基本流程和技术规范；

（2）巩固运用Dreamweaver网页制作软件制作网页、特别是制

作复杂网页的知识；

（3）巩固综合运用Dreamweaver、PS、Bootstrap三个软件完成

网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运

用得当的网站；

（4）具备独立撰写实训报告基本能力；

（5）在网页设计的实践中培养分析问题、解决问题的能力，培

养协作、交流的能力，培养创新能力和团队意识；

（6）紧紧围绕网页制作的流程：规划、设计、开发、发布、维

护来进行网站的开发，制作出具有较高水准的静态网页。以此作为学

生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并

予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理

数据、发现与分析问题、寻求解决问题的方案等），为今后从事网站

开发、维护和管理奠定基础。

3

三、实训项目——高等数学

3.1 网站主题

我的网站的主旨在于从各个方面展示高等数学的魅力，包括它

的团队、环境和课程。另外，网站里还包括老师的资料，建立了一个

展示老师的平台。同时，网站里的每一个网页都有统一的风格，每一

个网页的主题色彩都是橙色和蓝色搭配。实最重要的是要做出自己的

风格，给浏览者好的欣赏感受。

3.2 网站材料

主要在网站上搜集所要的网页信息，包括图片、文字。同时，查

询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动

画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的

网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料

越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作

网页的素材，这样就可以做好一个好的网站。

3.3 网站规划

我的网站共有7个主页面：首页、学术研究、学习资源、学生互

动、会员登录。每一个页面用统一的模块，以保证网站统一的页面风

格。网页布局主要用框架和表格，用框架定位内容的大体结构，再用

表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定

4

字体风格，相同的风格多次调用是用CSS设计一个样式，以保证随时、

准确的调用。

3.4 网站的制作工具

做网页时主要使用的是Deamweaver。另外，为了处理网页中的其

他元素，还使用了Bootstrap等软件。

3.5 制作网站的网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。

在制作网页前先建立统一的文件夹放同一类型的文件，我在制作时建

立了“image”文件夹来存放图片。网页中的CSS 样式文件也应统一

管理，做到有条不紊，我设计的网站的首页如下图：

5

6

四、主页框架

4.1 代码实现：

11

12

编号	寒假冲刺班	报名截止时间	状态
李林老师	数学1	01/07/2018	20/30
2	张伟老师	01/07/2018	19/30
3	涵涵老师	01/07/2018	29/30
4	石乐志老师	01/07/2018	20/30
...	...	...	...