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

1、南华大学计算机科学与技术学院实验报告（20162017 学年度 第1学期）课程名称Web前端开发技术实验名称 Web实验报告姓名刘让洲学号20144350101专业软件工程班级1班地点寝室教师刘洋第一章一、第一章所学内容知识点：在第一章中，我们学习了什么是web技术，对web技术有一定的 了解，知道进行web开发以后要学习的各种技术以及对各种技术的简 单介绍，为后面的学习打基础。二、第一章实验：实验1-1源代码：Web前端技术初步应用Pfont-size : 20px;color : red;text-indent : 2em;h3font-size : 24px;font-style : b

2、older ;color : #000099;）Web前端开发技术HTMLCSSJavaScript网络学习资源HTML教程alert（ Web前端开发工程师就业前景好，待遇高！）;i bis端技年初*在=+”业前端开发技术HTMLCSSJavaScript上 一127.DA.1 ;8020上鸵冠云显于t乂网络学习秀源,心工在HgW;切=守 今土!实验1-2-1实验截图:1HalLj实验1-2-2实验截图1S7,O.OJ：SO2C上的网,显示:rM 书门开网站与航于席西.兄第二章一、第二章所学内容知识点：在第二章中，我们学习了 HTML勺基本文档结构以及基本的语法,包括等标签的学习。二、第二章

3、实验：实验2-1源代码：求知家园欢迎来到我们的求知家园！实验2-1运行结果：i j an率曰x I -+-次一迎宓至i口儿们白勺市3u家园!实验2-1源代码：Google 搜索 欢迎使用Google搜索！ vbr 实验2-2运行结果:1 匚 Googled | +欢迎使用Gmxle搜素！第三章一、第三章所学内容知识点：在第三章中，我们学习 Web页面初步设计，如：向 We师添加文 字信息，格式化文本标记，怎样进行段落的排版与设计，以及相应的 各种标签的应用等； 二、第三章实验：实验3-1实验源代码：刘让洲的自荐信刘让洲自荐信 尊敬的领导：     您好!

4、    感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！     我是 南华大学计算机科学与技术学院 2014级学 生刘让洲。经过将近四年的大学学习和锻炼，与同龄人一样, 我即将走上工作岗位，通过社会来证实自己的知识和能力。 为了找到 一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己 的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。     止匕致 敬礼!联系E-mail:416528046实验3-1运行截图:I D刘让洲的自荐信

5、x +lc t)刘让希自荐信尊敬的领导；您好！感谢您在百忙之本启阅我的自荐材料！相信此刻的停留不会让您失望！我是南华大学计算楣件与技术学院2期隹及学生刘让洲“经过将近四年的大学学习 和锻炼，与同龄人一祥，我即将走上工作岗位，通过社会来证实自己的知识和能力，为 了找到一份符合自己特长和兴趣的工作,更好地发挥自己的才能.实现自己的人生价 值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务“北做敬礼！联系E-盘mi工：4工55e8048番qo conn实验3-2实验源代码：数学方程式h3font-size : 24px; color : red; text-align : center; 数

6、学方程式2x2+3x=9x1+x2=10实验3-2运行截图:i | lx 1 +数学方程式2x2+3k=9 第四章一、第四章所学内容知识点：在第四章中，我们主要学习了网页中列表的制作，包括有序列表,无序列表，列表嵌套以及自定义列表等；二、第四章实验：实验4-1源代码：windows 不同版本 windows 95windows 98windows NTwindows NT Workstationsli windows NT Serverwindows 2000windows 2000 Professional/ li windows 2000 Serverwindows 2000 Advanc

7、e Serverwindows xpwindows vistawindows 7windows 8实验4-1运行截图：I）Pl windox不因版本X +Q 二1. windows 952. window 983. wimlrws TiT vindrwp NT Warkstai on vi ndcw? NT Server4. vindotre 2000 windews 2Q00 Frafeseional windews 2000 Server windews ZUOO Advanc白 ServerE. vi.ndows 斗6. windows vista7 windows 78. window

8、s 8实验4-2源代码：第四届中国大学出版社图书奖公示 vh2第四届中国大学出版社图书奖公示v出优秀教材一等奖（68种）vdd1 .刑事诉讼法（第五版），陈光中主编，北京大学出版社2,普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖 编著，北京大学出版社3,音音教程（第四版），唐作藩著，北京大学出版社4.保险学（第5版），孙祁祥著，北京大学出版社.虫1优秀教材二等奖（119种）1.艺术欣赏教程（第2版），杨辛、谢孟 主编，北京大学出版社2.经济学基础（第6版），美曼昆著，北京大学出版社3,创新管理：赢得持续竞争优势（第 2版），陈劲著，北京大学出版社4.医学遗传学（第3版），傅松滨主编，北

9、京大学医学出版.实验4-2运行截图：1国匹用国7；手二战七庭书奖f+第四届中国大学出版社图书奖公示代秀教材一等奖（6附）L刑事诉讼法（第五版.一陈光中主编，北京大学出版壮2普通化学原理（第好瓦，哪文,王颖霞，下江,陈景祖编著，北京大学出版社 &音季薮程（第四版），唐作潘著北京大学出版社保险学（第微），孙邛祥著“北京大学出版社1 .艺术的赏教程（第外反，杨辛、射孟主编，北京大学出版社2 .经济学基岫（第6版，美晏昆茗，北京大学出版社3,创新管鹿：赢薄捋续竞争优势（第2版），陈劲著，北京大舁出版社4,医学援借学（第三版】，傅松海主珀.北京入学医学出版第五章一、第五章所学内容知识点：在第四五章中，我

10、们主要学习了网页中的超链接，网页中链接的标签，路径以及分类，图片链接等；三、第四章实验：实验5-1源代码：apple 网站 style type =text/cssul list-style-type : none; margin : 0auto ;li float : left ; padding : 10px; img width : 200px; height : 150 px; hr clear : both ; apple 网站 实验5-1运行截图：app 1 a网站SwatchAiriPcdailWnr 格力库I椒端也M一律li 萨5T*T|KII 叫tSdriBAi口*:Ti/学

11、d几实验5-2源代码：桂林山水风景图片imgwidth : 100px; height : 100px; border : 0; h3 color : #ff0000 ;:30px; floaul list-style-type : none; text-align : center; li display : inline ; width : 120px; line-height t: left ;桂林山水风景图片a桂林山水 1 href =img/gl2.jpg img桂林山水 2 href =img/gl3.jpg 桂林山水 3桂林山水 4实验5-2运截图:|桂林山水风景图片闻*髀甜桂林

12、山水1桂林林水4桂林口水3科杭山水4第六章一、第六章所学内容知识点：在第一章中，我们主要学习了怎样在网页插入图像和音乐，视频等多媒体，滚动文字，背景音乐使得网页更加炫酷了一点呢。二、第六章实验：实验6-1原代码： 图像对齐方式应用图像对齐方式应用未设置对齐方式的图像：PNG 图像文件存储格式，其目的是试图（原来此处使用了 “企图）替代GIF和TIFF文件格式，同 时增加一些GIF文件格式所不具备的特性。已设置对齐方式的图像：PNG用了从LZ77派生的一个非专利无失真式压缩算法（名为 deflation ）。 这个算法对图像里的直线进行预测然后存储颜色差值，这使得 PNG 经常能获得比原始图像甚

13、至比 GIF更大的压缩率。但也有一些软件不 能使用适合的预测而造成过分臃肿的PNG文件。PNG用了从LZ77派生的一个非专利无失真式压缩算法（名为 deflation ）。 这个算法对图像里的直线进行预测然后存储颜色差值，这使得 PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。PNG#用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation ）。这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNGg常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。实验6-

14、1运行截图：E | *年设涧才式的图像U工络 PHO, IH注n存制悟儒，再口的恿状HHr本此砒像用了“虫曲，忖加”粕口用口二村小武;FID!班 蚣，1文抖格式削不一的4寻4：- 己班刑方丈帕图隆丁III T JUkU；raTitffJ-T-lh mj Jt* MTnJffiRSW f 工 为*门 7Lrm -j 坦1* 注圉 国 MtW 匹造心 TH 制然HUJTMEQ 于恒，坦便” 炷册 I5REFE 比底岫国 H& Wd 1F /才 随压HI率. QtilWT NKPF HIffldM ffl gr从过:i IHL+HiMw.文H,V /fT JALZ?-TTE*则优生MTtlfERlM

15、l法将如打HurO . 培个1注对四a里的帙法看/刖1燃后仃1“10事 坦雷干“冷醺氏用htJIT油国fit K%1F第aira#的压地*占 恒也一曲敕M-r- it使刑道色讷 *E 巾 值时J过划借料讷phg文忤,V- jf 蝴阖础唱密警赢嘉!相蜩M磊带禺隘出辐二篇工肝式二任时四H型的场您印例燃后1THp，坦便K沪阍红中酷明加百帕国8小上 W实验6-2源代码： 图像画廊 img width : 100px; height : 100px; border : 2px#cc0066 ridgeul list-style-type : none; li float : left ; 图像画廊 wi

16、dth =390 height =293 border =0 altwidth =400 height =253 border =0 altwidth =400 height =164 border =0第七章一、第七章所学内容知识点：在第七章中，我们主要学习了 CSS的基本概念，CSS的基本语法, CSSi择器类型，CSS选择器的声明，CSS勺定义与引用以及使用等 知识；三、第七章实验截图：实验7-1源代码：古诗排版 body text-align : center; p font-family :隶书；早发白帝城李白 朝辞白帝彩云间， 千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。实验7

17、-1截图：早发白帝城李口朝辞白帝彩云间.千里江陵一日还，两岸猿声啼不住，轻舟已过万重山口实验7-2源代码：Web前端开发工程师工作内容* font-family :楷体；color : blue; #li1 font : italicbold 24px 黑体；.li2 background : #9999cc ; letter-spacing : 1px;#li3 font-size : 18px; color : red; Web前端开发工程师工作内容web前端工程师在不同的公司，会有不同的职能，但称呼都是类似。做网站设计、网页界面开发做网页界面开发做网页界面开发、前台数据绑定和前台逻辑的处

18、理设计、开发、数据处理实验7-2运行结果：i cw的舒心肛做Web前端开发工程师工作内家起b前端工程师在不同的必司，会点不同的璃能，但称呼都是臭似.耀网站设计、网页界面开发,黄再更属左升宏，网太界面R.家前台教搔弟定为全台何点的她短-设计、开发、效瞰型第八章一、第八章所学内容知识点：在第八章中，我们主要学习了DIV的定义已经简单使用，DIV的嵌套以及DIV的层叠，另外捎带学习了 span标签的用法；二、第八章实验：实验8-1源代码：新闻 2013央视 综艺节目发力彰显公益大爱继北京、上海后，2013 年腾讯视频推介会昨又在广州隆重举行 “跨界融合 开放共赢”移动互联网营 销峰会首届 联建杯”

19、户外LED显示屏媒 体大赛评审圆满落幕外部CSS文件代码：#d1width : 600px;height : 360 px;background-color : Lime;#d2font-family :幼圆；font-size : 20px;.bfont-weight : bold ;text-decoration : underline ;color : red;.it font-style : italic ; font-size : 24px; font-weight : bold ；实验8-1运行结果:I 口野闻X +2013央视综艺节目发力 彰显公益大爱,继北京.上海后，2013年

20、腌迅视频推介会昨又在广州隆重举行川居界融合 开放共赢移动互联网营销峰会首届“联建杯户外LED显示屏媒体大赛评审圆满落墓实验8-2源代码: 匾牌设计 body text-align : center; #div0 width : 800 px; height : 100 px;border : 20pxoutset #ff0000 ;padding : 20px;magin: 100px;p font : italicbolder 30px/1.5em 隶书;text-align : center;background : #efedee ;海纳百川，有容乃大实验8-2运行结果：年3赣釐问宜融吒

21、每漏一 +6。海纳百川,有容乃大第九章一、第九章所学内容知识点：在第一章中，我们主要学习了 CSS羊式属性，包括CSS的字体样 式，文本样式，CSS勺颜色和背景，CSS列表样式以及CSS的盒模型; 网页中各种效果很多都是由 CSS来控制的。二、第九章实验截图：实验9-1源代码：Head Lineh1background : #678;color : white;text-align : center ;Pfont-family : Arial ;font-size : 16px;line-height : 1.5 em;.firstLetter font-size : 3em;float :

22、left ;imgborder : dashed 1 px gray;margin : 10px10px10px0;padding : 5px;float : left ;Head LineMobile Widget 使用的标准的 Wetfe术，如HTML CSS javascript 等。这些经典的 WebK术规范是由W3c（万维网联盟）的下属各个工作组制定并推进 的。作为开发 Widget之前的知识准备，在本章中我们将逐一介绍这 些技术。实验9-1截图| 口 H?ad LineX +后。Head LineM由旭Widgot使用的标准的Webi支术，如HTML CSS, 2忠cipt等。这些

23、经典的限时1术规范是由W3C （万维网联盟）的下 属各个工作组制定并推进趴作为开发Widget之前的知识准备，在本 章中我们将逐一介绍这些技术。第十章一、第十章所学内容知识点：在第十章中，我们主要学习了 DIV+CSS对页面进行整体的布局以及简答的一级导水平导航条和二级水平导航条的设计；二、第十章实验截图：实验10-1源代码：Web页面设计实例#part1 width : 30%height : 100;#part2 width : 70% height : 100;首页 博客设计 论坛 关于 欢度新春佳节Copyrights 2015-2020 Web前端开发工作室 ©All ri

24、ghts reserved.中 国江苏 mycss.css 文件body font-family : Verdana ;font-size : 16px;margin : 0;text-align : center; /*整个页面居中显示*/pmargin : 2px; font-size : 14px;#Container margin : Oauto ;width : 900px;#Header height : 118px;border-bottom : 5px;background-color : rgb (230, 230, 230);border-bottom : 5pxsolid

25、 #FFFFFF;#PageBodyheight : 380px;border-bottom : 5pxsolid #FFFFFF;#SideBar float : left ;width :200px;height : 380px;background : #Dff100 ;text-align : center;padding : 50pxauto ;border-right : 5pxsolid #FFFFFF;#MainBody float : right ;width :695px;height : 380px;background : #cff000 ;#Footer height

26、 : 60px;background-color : rgb (230, 230, 230);text-align : center;font-family : Courier New ;font-size : 12px;padding-top : 10px;imgfloat : left5span width : 50px; height : 30px;font-size :20px;font-family :华文新魏;#Header span padding-top : 40px;a width : 48px; height : 24px;font-size :20px;font-fami

27、ly :华文新魏;ul list-style-type : none; margin : 0px; padding : 0px;li width : 50px; height : 30px;font-size :20px;font-family :华文新魏;padding : 10px10px;h3 text-align : center; color : red; font-size : 24px;background : #CFF000; padding : 6pxauto ; a: link , a: visited , a: hover , a: active text-decoration : non e; display : block ; a: hover border-bottom : 2pxsolid #FF0000;:#55A0FF; color : #FFFFFF;实验10-1运行结果:时 WATCH +旗跑