《Web前端框架应用》课程设计模板

1、一、 网站策划本部分主要对网站各页面的布局进行规划，并进行简单的文字说明。网页以MDN Web文档（/zh-CN/）和前端网（1、主页页首页首采用栅格系统，分成三个部分。第一部分是网站导航栏，由网站logo和网站导航组成，网站导航采用响应式导航栏和下拉菜单组件。第二部分是搜索框，由字体图标和一个输入框组成，将使用bootstrap中表单的默认形式。第三部分是登陆和注册按钮，将设计两个弹出框分别对应。主体内容主体内容计划分为四个部分。第一部分是一个图片。第二部分简述网站的内容。第三部分介绍一些有关网站开发的文章和教程。第四部分展示一些网站实

2、例。页脚页脚主要写一些网站的介绍和一些超链接。 2、第一个子页 T字形页面 页首 用和首页一样的页首，相同的导航栏方便各个页面之间进行跳转。主体内容 采用附加导航的样式来介绍前端的基础组成。主要由HTML/HTML5、CSS/CSS3、JavaScript和一些前端的框架的介绍组成。3、第二个子页页首用和首页一样的页首，相同的导航栏方便各个页面之间进行跳转。 主体内容主体内容用栅格系统分为左右两个部分，左侧介绍一些前端的文章，右侧写一个侧边导航栏。4、第三个子页页首用和首页一样的页首，相同的导航栏方便各个页面之间进行跳转。主体内容主体内容主要用来介绍Bootstrap教程的相关内容，右侧是指一

3、个导航栏。5、 第四个子页面这个子页面的内容主要是一个有表单构成的留言板6、页面的样式 四个页面的页首和页脚计划用相同的样式，对于几个页面中相同的样式，计划采用外部样式表来制作，可以减少内部样式表中代码的数量。7、页面中所需的材料 页面制作中所需的文字及图片计划主要在MDN和前端网上寻找，部分图片将在网上搜索并下载以使用。8、制作中的问题 页面制作中遇到不能解决的问题，自己先查阅书本中的相关知识，如果还不懂，可以请教老师，或者从互联网（主要是菜鸟教程和bootstrap中文网）上查找相关解答及实例。9、备注 暂定一个主网页和四个子网页，后期可以添加子网页，网页的内容暂定以上内容，后期制作过程中

4、可以进行适当改动。二、 效果图本部分主要是对各页面进行截图，并对每页所用技术进行说明，必要时，可以添加简单的代码说明。1、 主页面页首采用了栅格系统、响应式导航栏、响应式导航栏中嵌套下拉菜单组件，页首的右侧是两个按钮，设置了两个弹出框，中间设置了一个搜索框表单。页首导航栏设置了三个链接，分别跳转到三个子页面，分别是前端入门、Bootstrap、前端文章主题内容分成了三个部分，分别使用了标签页、表格、轮播、面板、缩略图以及字体图标设置的按钮。页脚也使用了字体图标用来做超链接方便跳转到第四个子页面message.html。2、 第一个子页面主要采用了巨幕和附加导航的样式3、 第二个字页面这个页面主要采用轮播、巨幕、标签页、媒体对象、表格、分页这几个样式4、 第三个子页面这个子页面主要采用表格、分页、栅格、轮播样式5、 第四个子页面这个页面主要是一个留言板采用了栅格系统的嵌套和输入框组以及水平表单来设计表单、右侧设计一个表格三、 设计小结在本次设计中主要采用了栅格系统、表格、响应式导航栏、下拉菜单组件、标签页、轮播、字体图标、缩略图、巨幕、媒体对象