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

南华大学计算机科学与技术学院实 验 报 告 （ 2016 2017 学年度 第 1 学期 ）课程名称Web前端开发技术实验名称Web实验报告姓名刘让洲学号20144350101专业软件工程班级1班地点寝室教师刘洋第一章一、 第一章所学内容知识点：在第一章中，我们学习了什么是web技术，对web技术有一定的了解，知道进行web开发以后要学习的各种技术以及对各种技术的简单介绍，为后面的学习打基础。二、 第一章实验： 实验1-1源代码： Web前端技术初步应用pfont-size:20px;color:red;text-indent: 2em;h3font-size:24px;font-style:bolder;color:#000099;Web前端开发技术HTMLCSSJavaScript网络学习资源a href=alert(Web前端开发工程师就业前景好，待遇高！);实验1-2-1实验截图：实验1-2-2实验截图第二章一、第二章所学内容知识点：在第二章中，我们学习了HTML的基本文档结构以及基本的语法，包括等标签的学习。二、 第二章实验：实验2-1源代码： 求知家园 欢迎来到我们的求知家园！ 实验2-1运行结果：实验2-1源代码：Google搜索 欢迎使用Google搜索！实验2-2运行结果：第三章一、第三章所学内容知识点：在第三章中，我们学习Web页面初步设计，如：向Web中添加文字信息，格式化文本标记，怎样进行段落的排版与设计，以及相应的各种标签的应用等；二、第三章实验： 实验3-1实验源代码： 刘让洲的自荐信刘让洲自荐信尊敬的领导：    您好！    感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！    我是南华大学计算机科学与技术学院2014级学生刘让洲。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。    此致敬礼!联系E-mail:416528046实验3-1运行截图： 实验3-2实验源代码：数学方程式h3font-size:24px;color:red;text-align:center; 数学方程式 2x2+3x=9x1+x2=10实验3-2运行截图：第四章一、第四章所学内容知识点：在第四章中，我们主要学习了网页中列表的制作，包括有序列表，无序列表，列表嵌套以及自定义列表等；二、 第四章实验： 实验4-1源代码： windows不同版本windows 95windows 98windows NTwindows NT Workstationwindows NT Serverwindows 2000windows 2000 Professionalwindows 2000 Serverwindows 2000 Advance Serverwindows xpwindows vistawindows 7windows 8实验4-1运行截图：实验4-2源代码：第四届中国大学出版社图书奖公示第四届中国大学出版社图书奖公示优秀教材一等奖（68种）1.刑事诉讼法（第五版），陈光中主编，北京大学出版社2.普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖 编著，北京大学出版社3.音韻學教程（第四版），唐作藩著，北京大学出版社4.保险学(第5版)，孙祁祥著，北京大学出版社.优秀教材二等奖（119种）1.艺术欣赏教程（第2版），杨辛、谢孟 主编，北京大学出版社2.经济学基础（第6版），美 曼昆著，北京大学出版社3.创新管理：赢得持续竞争优势（第2版），陈劲著，北京大学出版社4.医学遗传学（第3版），傅松滨主编，北京大学医学出版.实验4-2运行截图：第五章一、第五章所学内容知识点：在第四五章中，我们主要学习了网页中的超链接，网页中链接的标签，路径以及分类，图片链接等；三、 第四章实验： 实验5-1源代码： apple网站ullist-style-type:none;margin:0 auto;lifloat:left;padding:10px; imgwidth:200px;height:150px;hrclear:both;apple网站 实验5-1运行截图：实验5-2源代码： 桂林山水风景图片imgwidth:100px;height:100px;border:0;h3color:#ff0000;ullist-style-type:none;text-align:center;lidisplay:inline;width:120px;line-height:30px;float: left;桂林山水风景图片 桂林山水1桂林山水2桂林山水3桂林山水4实验5-2运截图：第六章一、第六章所学内容知识点：在第一章中，我们主要学习了怎样在网页插入图像和音乐，视频等多媒体，滚动文字，背景音乐使得网页更加炫酷了一点呢。二、 第六章实验：实验6-1原代码： 图像对齐方式应用 图像对齐方式应用 未设置对齐方式的图像: PNG，图像文件存储格式，其目的是试图(原来此处使用了企图)替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。 已设置对齐方式的图像： PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。 PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。 PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。实验6-1运行截图：实验6-2源代码： 图像画廊 imgwidth:100px;height:100px;border:2px #cc0066 ridge;ullist-style-type:none;lifloat:left; 图像画廊 实验6-2运行结果：第七章一、第七章所学内容知识点：在第七章中，我们主要学习了CSS的基本概念，CSS 的基本语法，CSS选择器类型，CSS选择器的声明，CSS的定义与引用以及使用等知识；三、 第七章实验截图：实验7-1源代码： 古诗排版bodytext-align:center;pfont-family:隶书;早发白帝城李白朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。实验7-1截图：实验7-2源代码： Web前端开发工程师工作内容 *font-family:楷体;color:blue; #li1font:italic bold 24px 黑体; .li2background:#9999cc;letter-spacing:1px; #li3font-size:18px;color:red; Web前端开发工程师工作内容 web前端工程师在不同的公司，会有不同的职能，但称呼都是类似。 做网站设计、网页界面开发做网页界面开发做网页界面开发、前台数据绑定和前台逻辑的处理设计、开发、数据处理 实验7-2运行结果：第八章一、第八章所学内容知识点：在第八章中，我们主要学习了DIV的定义已经简单使用，DIV的嵌套以及DIV的层叠，另外捎带学习了span标签的用法；二、第八章实验： 实验8-1源代码： 新闻 2013央视综艺节目发力 彰显公益大爱继北京、上海后，2013年腾讯视频推介会昨又在广州隆重举行“跨界融合 开放共赢”移动互联网营销峰会首届“联建杯”户外LED显示屏媒体大赛评审圆满落幕 外部CSS文件代码：#d1 width:600px; height:360px; background-color:Lime;#d2 font-family:幼圆; font-size:20px;.b font-weight:bold; text-decoration:underline; color:red;.itfont-style:italic;font-size:24px;font-weight:bold;实验8-1运行结果：实验8-2源代码： 匾牌设计bodytext-align:center;#div0width:800px;height:100px;border:20px outset #ff0000;padding:20px;magin:100px;pfont:italic bolder 30px/1.5em 隶书 ;text-align:center; background:#efedee;海纳百川，有容乃大实验8-2运行结果：第九章一、第九章所学内容知识点：在第一章中，我们主要学习了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.5em;.firstLetterfont-size:3em;float:left;imgborder:dashed 1px gray;margin:10px 10px 10px 0;padding:5px;float:left;Head LineMobile Widget使用的标准的Web技术，如HTML，CSS，javascript等。这些经典的Web技术规范是由W3C（万维网联盟）的下属各个工作组制定并推进的。作为开发Widget之前的知识准备，在本章中我们将逐一介绍这些技术。实验9-1截图第十章一、第十章所学内容知识点：在第十章中，我们主要学习了DIV+CSS岁对页面进行整体的布局。以及简答的一级导水平导航条和二级水平导航条的设计；二、 第十章实验截图： 实验10-1源代码： Web页面设计实例#part1width:30%;height:100;#part2width:70%;height:100; 首页博客设计论坛关于 欢度新春佳节 Copyrights 2015-2020 Web前端开发工作室© All rights reserved. 中国江苏 mycss.css文件body font-family:Verdana; font-size:16px; margin:0;text-align:center; /*整个页面居中显示*/pmargin: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;imgfloat:left;spanwidth:50px;height:30px;font-size:20px;font-family:华文新魏;#Header spanpadding-top:40px;a width:48px;height:24px;font-size:20px;font-family:华文新魏;ullist-style-type:none;margin:0px;padding:0px;li width:50px;height:30px;font-size:20px;font-family:华文新魏;padding:10px 10px;h3text-align:center;color:red;font-size:24px;background:#CFF000;padding:6px auto;a:link,a:visited,a:hover,a:activetext-decoration:none;display:block; a:hoverborder-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF; 实验10-1运行结果：实验10-2源代码; DIV+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