南华大学web课程设计实验报告.docx

资源描述

南华大学计算机科学与技术学院实验报告（ 2016 ~2017 学年度第 1 学期）课程名称 Web前端开发技术实验名称 Web实验报告姓名刘让洲学号 20144350101 专业软件工程班级 1班地点寝室教师刘洋第一章一、第一章所学内容知识点：在第一章中，我们学习了什么是web技术，对web技术有一定的了解，知道进行web开发以后要学习的各种技术以及对各种技术的简单介绍，为后面的学习打基础。二、第一章实验：实验1-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web前端技术初步应用</title> <style type="text/css"> p{ font-size:20px; color:red; text-indent: 2em; } h3{ font-size:24px; font-style:bolder; color:#000099; } </style> </head> <body> <h3>Web前端开发技术</h3> <p>HTML</p> <p>CSS</p> <p>JavaScript</p> <h3>网络学习资源</h3> <a href=" <script type="text/javascript"> alert("Web前端开发工程师就业前景好，待遇高！"); </script> </body> </html> 实验1-2-1实验截图：实验1-2-2实验截图第二章一、第二章所学内容知识点：在第二章中，我们学习了HTML的基本文档结构以及基本的语法，包括<body><head><title>等标签的学习。二、第二章实验：实验2-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>求知家园</title> </head> <body text="blue" bgcolor="#99ffff"> 欢迎来到我们的求知家园！ <hr size="5" color="#ff3333"> </body> </html> 实验2-1运行结果：实验2-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Google搜索</title> </head> <body bgcolor="#ffff33"> 欢迎使用Google搜索！<br> <img src="img/google.jpg" width="275" height="95" border="0" alt=""> <hr size="5" color="#0033ff"> </body> </html> 实验2-2运行结果：第三章一、第三章所学内容知识点：在第三章中，我们学习Web页面初步设计，如：向Web中添加文字信息，格式化文本标记，怎样进行段落的排版与设计，以及相应的各种标签的应用等；二、第三章实验：实验3-1实验源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>刘让洲的自荐信</title> </head> <body> <center>刘让洲自荐信</center> <hr width="100%" size="1" color="#000fff"> 尊敬的领导：<br>     您好！ <p>    感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！</p> <span>    我是<span style="color: red;">南华大学计算机科学与技术学院2014级学生刘让洲</span>。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。</p>     此致<br> 敬礼!<b></b><br> <hr width="100%" size="1" color="#00ffff"> <center><address>联系E-mail:416528046@</address></center> </body> </html> 实验3-1运行截图：实验3-2实验源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数学方程式</title> <style type="text/css"> h3{font-size:24px;color:red;text-align:center;} </style> </head> <body> <h3>数学方程式</h3> <hr color="blue" width="80%" size="2"> <center> 2x<sup>2</sup>+3x=9<br> x<sub>1</sub>+x<sub>2</sub>=10 </center> </body> </html> 实验3-2运行截图：第四章一、第四章所学内容知识点：在第四章中，我们主要学习了网页中列表的制作，包括有序列表，无序列表，列表嵌套以及自定义列表等；二、第四章实验：实验4-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>windows不同版本</title> </head> <body> <ol type="1"> <li>windows 95</li> <li>windows 98</li> <li>windows NT <ul type="disc"> <li>windows NT Workstation</li> <li>windows NT Server</li> </ul> </li> <li>windows 2000 <ul type="disc"> <li>windows 2000 Professional</li> <li>windows 2000 Server</li> <li>windows 2000 Advance Server</li> </ul> </li> <li>windows xp</li> <li>windows vista</li> <li>windows 7</li> <li>windows 8</li> </ol> </body> </html> 实验4-1运行截图：实验4-2源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第四届中国大学出版社图书奖公示</title> </head> <body bgcolor="#ccffcc"> <h2>第四届中国大学出版社图书奖公示</h2> <dl> <dt>优秀教材一等奖（68种）</dt> <dd>1.刑事诉讼法（第五版），陈光中主编，北京大学出版社</dd> <dd>2.普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖编著，北京大学出版社</dd> <dd>3.音韻學教程（第四版），唐作藩著，北京大学出版社</dd> <dd>4.保险学(第5版)，孙祁祥著，北京大学出版社</dd> <dd>...</dd> <dt>优秀教材二等奖（119种）</dt> <dd>1.艺术欣赏教程（第2版），杨辛、谢孟主编，北京大学出版社</dd> <dd>2.经济学基础（第6版），[美] 曼昆著，北京大学出版社</dd> <dd>3.创新管理：赢得持续竞争优势（第2版），陈劲著，北京大学出版社</dd> <dd>4.医学遗传学（第3版），傅松滨主编，北京大学医学出版 </dd> <dd>...</dd> </dl> </body> </html> 实验4-2运行截图：第五章一、第五章所学内容知识点：在第四五章中，我们主要学习了网页中的超链接，网页中链接的标签，路径以及分类，图片链接等；三、第四章实验：实验5-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>apple网站</title> <style type="text/css"> ul{list-style-type:none;margin:0 auto;} li{float:left;padding:10px; } img{width:200px;height:150px;} hr{clear:both;} </style> </head> <body> <h2 align="center">apple网站</h2> <hr size="3" color="#66ff33"> <ul> <li><a href=" src="img/1.PNG" ></a></li> <li><a href=" src="img/2.PNG""></a></li> <li><a href=" src="img/3.PNG"" ></a></li> <li><a href=" src="img/4.PNG""></a></li> </ul> <hr size="3" color="#66ff33"> </body></html> 实验5-1运行截图：实验5-2源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>桂林山水风景图片</title> <style type="text/css"> img{width:100px;height:100px;border:0;} h3{color:#ff0000;} ul{list-style-type:none;text-align:center;} li{display:inline;width:120px;line-height:30px;float: left;} </style> </head> <body> <h3 align="center" >桂林山水风景图片</h3> <ul> <li><a href="img/gl1.jpg" target="_top"><img src="img/gl1.jpg" alt=""><br>桂林山水1<br></a></li> <li><a href="img/gl2.jpg"><img src="img/gl2.jpg" alt=""><br>桂林山水2<br></a></li> <li><a href="img/gl3.jpg"><img src="img/gl3.jpg" alt=""><br>桂林山水3<br></a></li> <li><a href="img/gl4.jpg"><img src="img/gl4.jpg" alt=""><br>桂林山水4<br></a></li> </ul> </body> </html> 实验5-2运截图：第六章一、第六章所学内容知识点：在第一章中，我们主要学习了怎样在网页插入图像和音乐，视频等多媒体，滚动文字，背景音乐使得网页更加炫酷了一点呢。二、第六章实验：实验6-1原代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像对齐方式应用</title> </head> <body> <h2 align="center">图像对齐方式应用</h2> <hr color="#ff3366"> <h3>未设置对齐方式的图像:</h3> <p> <img src ="img/eg_cute.gif">PNG，图像文件存储格式，其目的是试图(原来此处使用了"企图")替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。</p> <h3>已设置对齐方式的图像：</h3> <p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。<img src="img/eg_cute.gif" align="bottom">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。 </p> <p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。<img src ="img/eg_cute.gif" align="middle">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。 </p> <p> <img src ="img/eg_cute.gif" align="left">PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。</p> </body></html> 实验6-1运行截图：实验6-2源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 图像画廊 </title> <style type="text/css"> img{width:100px;height:100px;border:2px #cc0066 ridge;} ul{list-style-type:none;} li{float:left;} </style> </head> <body> <h2 align="center">图像画廊</h2> <hr color="#00ff33" size="5"> <marquee behavior="alternate"> <ul> <li><img src="img/gl1.jpg" width="390" height="259" border="0" alt=""></li> <li><img src="img/gl2.jpg" width="400" height="300" border="0" alt=""></li> <li><img src="img/gl3.jpg" width="390" height="293" border="0" alt=""></li> <li><img src="img/gl4.jpg" width="400" height="253" border="0" alt=""></li> <li><img src="img/google.jpg" width="400" height="164" border="0" alt=""></li> </ul> </marquee> <hr color="#00ff33" size="5"> </body> </html> 实验6-2运行结果：第七章一、第七章所学内容知识点：在第七章中，我们主要学习了CSS的基本概念，CSS 的基本语法，CSS选择器类型，CSS选择器的声明，CSS的定义与引用以及使用等知识；三、第七章实验截图：实验7-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗排版</title> <style type="text/css"> body{text-align:center; } p{font-family:"隶书"; } </style> </head> <body> <h3>早发白帝城</h3> <h6>李白</h6> <p>朝辞白帝彩云间， <p style="font-size:150%;">千里江陵一日还。 <p style="font-size:200%;">两岸猿声啼不住， <p style="font-size:250%;">轻舟已过万重山。 </body> </html> 实验7-1截图：实验7-2源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web前端开发工程师工作内容</title> <style type="text/css"> *{font-family:楷体;color:blue;} #li1{font:italic bold 24px 黑体;} .li2{background:#9999cc;letter-spacing:1px;} #li3{font-size:18px;color:red;} </style> </head> <body> <h1>Web前端开发工程师工作内容</h1> <h3>web前端工程师在不同的公司，会有不同的职能，但称呼都是类似。</h3> <ul> <li id="li1">做网站设计、网页界面开发</li> <li class="li2">做网页界面开发</li> <li id="li3">做网页界面开发、前台数据绑定和前台逻辑的处理</li> <li style="color:#0000cc;background:#c0c0c0;font-family:隶书;">设计、开发、数据处理</li> </ul> </body> </html> 实验7-2运行结果：第八章一、第八章所学内容知识点：在第八章中，我们主要学习了DIV的定义已经简单使用，DIV的嵌套以及DIV的层叠，另外捎带学习了span标签的用法；二、第八章实验：实验8-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻</title> <link href="css/mycss.css" rel="stylesheet" type="text/css"> </head> <body> <div id="d1"> <img src="img/google.jpg"> <div id="d2"> ·2013<span class="b" >央视</span>综艺节目发力彰显公益大爱<br> ·继北京、上海后，2013年<span class="b">腾讯</span>视频推介会昨又在广州隆重举行<br> ·“<span class="b">跨界融合开放共赢</span>”移动互联网营销峰会<br> ·首届<span class="it">“联建杯”</span>户外LED显示屏媒体大赛评审圆满落幕<br> </div> </div> </body> </html> 外部CSS文件代码： #d1{ width:600px; height:360px; background-color:Lime; } #d2{ font-family:"幼圆"; font-size:20px; } .b{ font-weight:bold; text-decoration:underline; color:red; } .it{font-style:italic;font-size:24px;font-weight:bold;} 实验8-1运行结果：实验8-2源代码： <html lang="en"> <head> <meta charset="UTF-8"> <title>匾牌设计</title> <style type="text/css"> body{text-align:center;} #div0{width:800px;height:100px; border:20px outset #ff0000; padding:20px; magin:100px; } p{font:italic bolder 30px/1.5em 隶书 ; text-align:center; background:#efedee; } </style> </head> <body> <div id="div0" class=""> <p>海纳百川，有容乃大</p> </div> </body> </html> 实验8-2运行结果：第九章一、第九章所学内容知识点：在第一章中，我们主要学习了CSS样式属性，包括CSS的字体样式，文本样式，CSS的颜色和背景,CSS列表样式以及CSS的盒模型；网页中各种效果很多都是由CSS来控制的。二、第九章实验截图：实验9-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Head Line</title> <style type="text/css"> h1{ background:#678; color:white; text-align:center; } p{ font-family:Arial; font-size:16px; line-height:1.5em; } .firstLetter{ font-size:3em; float:left; } img{ border:dashed 1px gray; margin:10px 10px 10px 0; padding:5px; float:left; } </style> </head> <body> <h1>Head Line</h1> <img src="img/eg_cute.gif"/> <p><span class="firstLetter">M</span>obile Widget使用的标准的Web技术，如HTML，CSS，javascript等。这些经典的Web技术规范是由W3C（万维网联盟）的下属各个工作组制定并推进的。作为开发Widget之前的知识准备，在本章中我们将逐一介绍这些技术。 </body></html> 实验9-1截图第十章一、第十章所学内容知识点：在第十章中，我们主要学习了DIV+CSS岁对页面进行整体的布局。以及简答的一级导水平导航条和二级水平导航条的设计；二、第十章实验截图：实验10-1源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web页面设计实例</title> <link href="css/mycss.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #part1{ width:30%; height:100; } #part2{ width:70%; height:100; } </style> </head> <body> <div id="Container"> <div id="Header"> <div id="part1"><img src="img/eg_cute.gif"></img></div> <div id="part2"> </div> </div> <div id="PageBody"> <div id="SideBar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">博客</a></li> <li><a href="#">设计</a></li> <li><a href="#">论坛</a></li> <li><a href="#">关于</a></li> </ul> </div> <div id="MainBody"> <h3>欢度新春佳节</h3> <img src="img/1.PNG" width="694" height="308" border="0" alt=""> </div> </div> <div id="Footer"> <p>Copyrights 2015-2020 Web前端开发工作室© All rights reserved. 中国江苏</p> </div> </div> </body> </html> </body> </html> mycss.css文件 body { font-family:Verdana; font-size:16px; margin:0; text-align:center; /*整个页面居中显示*/ } p{ margin:2px; font-size:14px; } #Container { margin:0 auto; width:900px; } #Header { height:118px; border-bottom:5px; background-color:rgb(230,230,230); border-bottom:5px solid #FFFFFF; } #PageBody { height:380px; border-bottom:5px solid #FFFFFF; } #SideBar { float:left; width:200px; height:380px; background:#Dff100; text-align:center; padding:50px auto; border-right:5px solid #FFFFFF; } #MainBody { float:right; width:695px; height:380px; background:#cff000; } #Footer { height:60px; background-color:rgb(230,230,230); text-align:center; font-family:"Courier New"; font-size:12px; padding-top:10px; } img{ float:left; } span{ width:50px;height:30px; font-size:20px; font-family:"华文新魏"; } #Header span{padding-top:40px;} a{ width:48px;height:24px; font-size:20px; font-family:"华文新魏"; } ul{list-style-type:none;margin:0px;padding:0px;} li{ width:50px;height:30px; font-size:20px; font-family:"华文新魏"; padding:10px 10px; } h3{text-align:center;color:red;font-size:24px; background:#CFF000;padding:6px auto;} a:link,a:visited,a:hover,a:active{text-decoration:none;display:block; } a:hover{border-bottom:2px solid #FF0000; background:#55A0FF;color:#FFFFFF;} 实验10-1运行结果：实验10-2源代码; <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV+CSS布局</title> <style type="text/css"> *{font:24px/1.5em 黑体;margin:0 auto;padding:0px;} #Container{ width:1000px; margin:0 auto;/*设置整个容器在浏览器中水平居中*/ } #Header{ height:120px; background:#093; } #logo{ height:80px; background:#5f5; border-bottom:2px solid white; } #nav{ height:40px; background:#3f5; border-bottom:2px solid white; } #Content{ background:#0EFEFEF; background-color: #009933; } #Content-Left{ height:400px; width:250px; float:left; background:#88ff66; border-right:2px solid white; } #Content-center-right{ height:400px; width:250px; float:left; background:#88ff66; border-right:2px solid white; } #Content-right{ height:400px; width:250px; float:left; background:#99ff66; } #Footer{ height:40px; background:#6FC; border-top:2px solid w

展开阅读全文