1、htmljavascriptcss技术综合网页设计报告通信信息网课程结业报告课题名称 网页制作 专业班级： 通信工程 姓 名： 学 号： 起止时间： 2014.12.29-2015.01.10 重庆交通大学信息科学与工程学院一.实验原理（一）整体结构文件Assets中放着两个文件夹:文件夹av和文件夹img。文件夹av在编码过程中所引用的音频文件和视频文件文件夹img存放着编码所调取的图片文件Component用于存放AngularJs和BootStrap的必需文件：angular.js, bootstrap.css, bootstrap-theme.cssControllers中存放着运动商
2、品店控制器Css文件中存放着bootstrap的必需文件和编码过程中用来装饰html的css文件：tidy1用来装饰index.html、tidy2用来装饰酷我世界.html、tidy3用来装饰运动商店.html、tidy4用来装饰修炼空间.htmlFilters用来存放过滤器customFilters.jsWeb中存放的是编写的网页文件：index.html，music.html，修炼空间.html,影视.html，运动商店.html，酷我视界,html运行图标，点击谷歌浏览器运行调试。 （二）HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创
3、建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 通常我们需要掌握的标记/标签不多，如常见的body、head、title、p、img、a、div、span、ol、table等。请注意如font、big、center等标签是不推荐使用的。标签描述定义注释。定义文档类型。定义锚。定义缩写。定义只取首字母的缩写。定义文档作者或拥有者的联系信息。不赞成使用。定义嵌入的 applet。定义图像映射内部的区域。定义文章。定义页面内容之外的内容。定义声音内容。定义粗体字。定义页面中所有链接的默认地址或默认目标。不赞成使用。定义页面中文本的默认字体、颜色或尺寸。定义文本的文本方向，使其脱离其周围文本
4、的方向设置。定义文字方向。定义大号文本。定义长的引用。定义文档的主体。定义简单的折行。定义按钮 (push button)。定义图形。定义表格标题。不赞成使用。定义居中文本。定义引用(citation)。定义计算机代码文本。定义表格中一个或多个列的属性值。定义表格中供格式化的列组。定义命令按钮。定义下拉列表。定义定义列表中项目的描述。定义被删除文本。定义元素的细节。不赞成使用。定义目录列表。定义文档中的节。定义定义项目。定义对话框或窗口。定义定义列表。定义定义列表中的项目。定义强调文本。定义外部交互内容或插件。定义围绕表单中元素的边框。定义 figure 元素的标题。定义媒介内容的分组，以及它
5、们的标题。不赞成使用。定义文字的字体、尺寸和颜色。定义 section 或 page 的页脚。定义供用户输入的 HTML 表单。定义框架集的窗口或框架。定义框架集。 to 定义 HTML 标题。定义关于文档的信息。定义 section 或 page 的页眉。定义水平线。定义 HTML 文档。定义斜体字。定义内联框架。定义图像。定义输入控件。定义被插入文本。不赞成使用。定义与文档相关的可搜索索引。定义键盘文本。定义生成密钥。定义 input 元素的标注。定义 fieldset 元素的标题。定义列表的项目。定义文档与外部资源的关系。定义图像映射。定义有记号的文本。定义命令的列表或菜单。定义用户可以
6、从弹出菜单调用的命令/菜单项目。定义关于 HTML 文档的元信息。定义预定义范围内的度量。定义导航链接。定义针对不支持框架的用户的替代内容。定义针对不支持客户端脚本的用户的替代内容。定义内嵌对象。定义有序列表。定义选择列表中相关选项的组合。定义选择列表中的选项。定义输出的一些类型。定义段落。定义对象的参数。定义预格式文本。定义任何类型的任务的进度。定义短的引用。定义若浏览器不支持 ruby 元素显示的内容。定义 ruby 注释的解释。定义 ruby 注释。不赞成使用。定义加删除线的文本。定义计算机代码样本。定义客户端脚本。定义 section。定义选择列表（下拉列表）。定义小号文本。定义媒介源
7、。定义文档中的节。不赞成使用。定义加删除线文本。定义强调文本。定义文档的样式信息。定义下标文本。为 元素定义可见的标题。定义上标文本。定义表格。定义表格中的主体内容。定义表格中的单元。定义多行的文本输入控件。定义表格中的表注内容（脚注）。定义表格中的表头单元格。定义表格中的表头内容。定义日期/时间。定义文档的标题。定义表格中的行。定义用在媒体播放器中的文本轨道。定义打字机文本。不赞成使用。定义下划线文本。定义无序列表。定义文本的变量部分。定义视频。定义视频。不赞成使用。定义预格式文本。基础标签描述定义文档类型。定义 HTML 文档。定义文档的标题。定义文档的主体。 to 定义 HTML 标题。
8、定义段落。定义简单的折行。定义水平线。定义注释。音频/视频标签描述定义声音内容。定义媒介源。定义用在媒体播放器中的文本轨道。定义视频。（三)Bootstrap简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。漂亮的Web页面不仅要求掌握CSS，同时还需要有足够的美感，对我等没有艺术细胞的开发者而言，2011年8月20日Bootstrap的出现以及开源就迎来了春天！（四）AngularJS是什么AngularJS是一款由Google维护的开源JavaScript库，为开发单一页面Web应用（CRUD）而生的。它的目标是增强基于浏览器的应用，并带有MVC模式功能，这为了使得开发和测试变得更
9、加容易。 函式库读取包含附加自定义的HTML， 遵从这些自定义属性中的指令，并将页面中的输入或输出与由JavaScript变量表示的模型绑定起来。这些JavaScript变量的值可以手工设置，或者从静态或动态JSON资源中获取。二.实验过程及分析（一）Index.Html小主题大世界整体结构：相应的代码： HTML5 小主题*大世界 Just at the point 震撼90后 导航 Google XX 打喷嚏 小小箴言 当一个人只为维持生计而思维的时候，他的思想就难以高尚。 卢梭 衣不如新，人不如旧 井蛙不可语天，夏虫不可语冰 有党性，没人性 相关链接： 酷我视界 这就是生活！ 1. 不想
10、解决人民提出的问题，老想解决提出问题的人民。 2. 要不是美领馆按pm2.5标准向外公布空气检测结果，我们肯定还生活在“现在播报新闻，冬季来临，全国大部地区全天有大雾，空气质量良”的世界里。 3. 某男问大师：“大师，我女朋友虽有优点，但缺点让我难以忍受，怎样才能让她只有优点没有缺点呢？”大师笑答：“方法很简单，不过若要我教你，你得先下山为我找一张只有正面没反面的纸回来。” 该男略一沉吟下山而去，很快又上山来，递给大师一张“人民日报” 。大师看后，从此遁入空门，不再过问世事。 4. 人民对领导人情感的强烈程度，往往与领导人的牛逼程度无关，而是与人民的傻逼程度及国家的封闭程度成正比！ 相关链接：
11、 修炼空间 英语点点 agony痛苦爱过你； pregnant怀孕扑来个男的； ambulance救护车俺不能死； ponderous肥胖的胖的要死； pest害虫拍死它； ambition雄心俺必胜； bale灾祸背噢； admire羡慕额的妈呀 There are always ways 其对应的css设计：相应的csss代码body background-color: #48a7cc; font-family: Microsoft Yahei,SimHei; margin: 0 auto; max-width: 900px; border: solid #f4f1ec;header ba
12、ckground: #455af4; display: block; color: #FFFFFF; text-align: center;header h2 margin: 0;h1 font: 72px; margin: 0;h2 font: 24px; margin: 0; text-al:center; /*color: #F47D31;*/h3 font: 18px; margin: 0; text-align: center; color: #88f4da;h4 color: #3536ff; background-color: #FFFFFF; -webkit-box-shado
13、w:2px 2px 20px #888; -webkit-transform:rotate(-45deg); -moz-box-shadow: 2px 2px 20px #888; -moz-transform:rotate(-45deg); position: absolute; padding: 0 150px; top: 50px; left: -120px; text-align: center;nav display: block; width:25%; float:left;nav a:link, nav a:visited display:block; color: #88f4d
14、a; border-bottom: 1px solid #FFFFFF; padding: 10px; text-decoration: none; font-weight: bold; margin: 5px;nav a:hover color: #b6abff; background-color: #455af4;nav h3 margin: 15px; color: white;#container background-color: #888888;section display: block; width: 100%; float:left;article background: #
15、eee; display: block; margin: 10px; padding: 10px; /* -webkit-border-radius: 10px; -moz-border-radius: 10px; */ border-radius: 10px; /*-webkit-box-shadow:2px 2px 20px #888;*/ /*-webkit-transform:rotate(10deg);*/ /*-moz-box-shadow:2px 2px 20px #888;*/ /*-moz-transform:rotate(-10deg);*/ transform:rotat
16、e(0deg); box-shadow: 2px 2px 20px #888;article header border-radius: 10px; padding: 5px;article footer border-radius: 10px; padding: 5px;article h1 font: 18px;aside display: block; width: 25%; float: left;aside h3 margin: 15px; color: white;aside p margin: 15px; color: white; font-weight: bold; font
17、-style: italic;footer clear:both; display: block; background: #455af4; color: #FFFFFF; text-align: center; padding: 15px;footer h2 font: 14px; color: white;进行CSS重置：margin: 0;padding: 0;告诉浏览器渲染html5元素块:header, footer, aside, nav, article display: block;主体body的宽度被定义为940 px,集中。我们的导航栏需要跨越整个窗口的宽度,所以我们必须应
18、用一些额外的样式nav position: absolute;left: 0;width: 100%;background: url(nav_background);使它左边的窗口,使其跨越整个宽度。我们将中心嵌套列表中显示它的边界布局:nav ul margin: 0 auto;width: 940px;list-style: none;现在我们将定义一些额外的风格使导航项目看起来更漂亮和网格布局更加对齐。我也包括页面风格突出用户,subscription-link和一些自定义样式。nav ul li float: left;nav ul li a display: block;margin
19、-right: 20px;width: 140px;font-size: 14px;line-height: 44px;text-align: center;text-decoration: none;color: #777;nav ul li a:hover color: #fff;nav ul li.selected a color: #fff;nav ul li.subscribe a margin-left: 22px;padding-left: 33px;text-align: left;background: url(rss.png) left center no-repeat;在css中有颜色记忆功能，便于查找颜色。页面结果：（二）酷我视界.html设计酷我视界代码如下 酷我 酷我视界 音乐 影视 运动商店 a href= a href= 90后不是荒唐的代称，更不是玩乐的借口。 youth is just free and easy 90后今日头条 发表于 2015年1月1日8:00AM 来自账户 90后 - 3 评论 某男问大师：“大师，我女朋友虽有优点，但缺点让我难以忍受，怎样才能让她只有优点没有缺点呢？”大师笑答：“方法很简单，不过若要我教你，你得先下山为我找一张只有正面没反
