南华大学web课程设计实验报告.docx
南华大学web课程设计实验报告.docx
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 南华 大学 web 课程设计 实验 报告
- 资源描述：
-
南华大学 计算机科学与技术学院 实 验 报 告 （ 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展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/3676972.html