南华大学web课程设计实验报告Word格式文档下载.docx

资源描述

南华大学web课程设计实验报告Word格式文档下载.docx

《南华大学web课程设计实验报告Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《南华大学web课程设计实验报告Word格式文档下载.docx（34页珍藏版）》请在冰点文库上搜索。

南华大学web课程设计实验报告Word格式文档下载.docx

20px;

color:

red;

text-indent:

2em;

}

h3{

24px;

font-style:

bolder;

#000099;

/style>

/head>

body>

h3>

Web前端开发技术<

/h3>

HTML<

/p>

CSS<

JavaScript<

网络学习资源<

ahref="

scripttype="

text/javascript"

alert（"

Web前端开发工程师就业前景好，待遇高！

）;

/script>

/body>

/html>

实验1-2-1实验截图：

实验1-2-2实验截图

第二章

一、第二章所学内容知识点：

在第二章中，我们学习了HTML的基本文档结构以及基本的语法，包括<

等标签的学习。

二、第二章实验：

实验2-1源代码：

求知家园<

bodytext="

blue"

bgcolor="

#99ffff"

欢迎来到我们的求知家园！

hrsize="

color="

#ff3333"

实验2-1运行结果：

Google搜索<

bodybgcolor="

#ffff33"

欢迎使用Google搜索！

br>

imgsrc="

img/google.jpg"

width="

275"

height="

95"

border="

alt="

#0033ff"

实验2-2运行结果：

第三章

一、第三章所学内容知识点：

在第三章中，我们学习Web页面初步设计，如：

向Web中添加文字信息，格式化文本标记，怎样进行段落的排版与设计，以及相应的各种标签的应用等；

二、第三章实验：

实验3-1实验源代码：

刘让洲的自荐信<

center>

刘让洲自荐信<

/center>

hrwidth="

100%"

size="

#000fff"

尊敬的领导：

nbsp;

您好！

感谢您在百忙之中启阅我的自荐材料！

相信此刻的停留不会让您失望！

span>

我是<

spanstyle="

color:

red;

南华大学计算机科学与技术学院2014级学生刘让洲<

/span>

。

经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。

为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。

此致<

敬礼!

/b>

#00ffff"

address>

联系E-mail:

416528046@<

/address>

实验3-1运行截图：

实验3-2实验源代码：

数学方程式<

h3{font-size:

text-align:

center;

}

hrcolor="

80%"

2x<

sup>

/sup>

+3x=9<

sub>

/sub>

+x<

=10

实验3-2运行截图：

第四章

一、第四章所学内容知识点：

在第四章中，我们主要学习了网页中列表的制作，包括有序列表，无序列表，列表嵌套以及自定义列表等；

二、第四章实验：

实验4-1源代码：

windows不同版本<

oltype="

li>

windows95<

/li>

windows98<

windowsNT

ultype="

disc"

windowsNTWorkstation<

windowsNTServer<

/ul>

windows2000

windows2000Professional<

windows2000Server<

windows2000AdvanceServer<

windowsxp<

windowsvista<

windows7<

windows8<

/ol>

实验4-1运行截图：

实验4-2源代码：

第四届中国大学出版社图书奖公示<

#ccffcc"

h2>

/h2>

dl>

dt>

优秀教材一等奖（68种）<

/dt>

dd>

1.刑事诉讼法（第五版），陈光中主编，北京大学出版社<

/dd>

2.普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖编著，北京大学出版社<

3.音韻學教程（第四版），唐作藩著，北京大学出版社<

4.保险学（第5版），孙祁祥著，北京大学出版社<

...<

优秀教材二等奖（119种）<

1.艺术欣赏教程（第2版），杨辛、谢孟主编，北京大学出版社<

2.经济学基础（第6版），[美]曼昆著，北京大学出版社<

3.创新管理：

赢得持续竞争优势（第2版），陈劲著，北京大学出版社<

4.医学遗传学（第3版），傅松滨主编，北京大学医学出版<

/dl>

实验4-2运行截图：

第五章

一、第五章所学内容知识点：

在第四五章中，我们主要学习了网页中的超链接，网页中链接的标签，路径以及分类，图片链接等；

三、第四章实验：

实验5-1源代码：

apple网站<

ul{list-style-type:

none;

margin:

0auto;

li{float:

left;

padding:

10px;

}

img{width:

200px;

height:

150px;

hr{clear:

both;

h2align="

center"

#66ff33"

ul>

src="

img/1.PNG"

/a>

img/2.PNG"

img/3.PNG"

img/4.PNG"

实验5-1运行截图：

实验5-2源代码：

桂林山水风景图片<

100px;

border:

}

h3{color:

#ff0000;

li{display:

inline;

width:

120px;

line-height:

30px;

float:

left;

h3align="

img/gl1.jpg"

target="

_top"

桂林山水1<

img/gl2.jpg"

桂林山水2<

img/gl3.jpg"

桂林山水3<

img/gl4.jpg"

桂林山水4<

实验5-2运截图：

第六章

一、第六章所学内容知识点：

在第一章中，我们主要学习了怎样在网页插入图像和音乐，视频等多媒体，滚动文字，背景音乐使得网页更加炫酷了一点呢。

二、第六章实验：

实验6-1原代码：

图像对齐方式应用<

#ff3366"

未设置对齐方式的图像:

imgsrc="

img/eg_cute.gif"

PNG，图像文件存储格式，其目的是试图（原来此处使用了"

企图"

）替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。

已设置对齐方式的图像：

PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。

align="

bottom"

这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。

但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。

middle"

left"

实验6-1运行截图：

实验6-2源代码：

图像画廊<

img{width:

2px#cc0066ridge;

ul{list-style-type:

li{float:

图像画廊<

#00ff33"

marqueebehavior="

alternate"

390"

259"

400"

300"

293"

253"

164"

/marquee>

实验6-2运行结果：

第七章

一、第七章所学内容知识点：

在第七章中，我们主要学习了CSS的基本概念，CSS的基本语法，CSS选择器类型，CSS选择器的声明，CSS的定义与引用以及使用等知识；

三、第七章实验截图：

实验7-1源代码：

古诗排版<

body{text-align:

p{font-family:

隶书"

;

早发白帝城<

h6>

李白<

/h6>

朝辞白帝彩云间，

pstyle="

font-size:

150%;

千里江陵一日还。

200%;

两岸猿声啼不住，

250%;

轻舟已过万重山。

实验7-1截图：

实验7-2源代码：

Web前端开发工程师工作内容<

*{font-family:

楷体;

blue;

#li1{font:

italicbold24px黑体;

.li2{background:

#9999cc;

letter-spacing:

1px;

#li3{font-size:

18px;

h1>

/h1>

web前端工程师在不同的公司，会有不同的职能，但称呼都是类似。

liid="

li1"

做网站设计、网页界面开发<

liclass="

li2"

做网页界面开发<

li3"

做网页界面开发、前台数据绑定和前台逻辑的处理<

listyle="

#0000cc;

background:

#c0c0c0;

font-family:

隶书;

设计、开发、数据处理<

实验7-2运行结果：

第八章

一、第八章所学内容知识点：

在第八章中，我们主要学习了DIV的定义已经简单使用，DIV的嵌套以及DIV的层叠，另外捎带学习了span标签的用法；

二、第八章实验：

实验8-1源代码：

新闻<

linkhref="

css/mycss.css"

rel="

stylesheet"

type="

divid="

d1"

d2"

2013<

spanclass="

央视<

综艺节目发力彰显公益大爱<

继北京、上海后，2013年<

腾讯<

视频推介会昨又在广州隆重举行<

“<

跨界融合开放共赢<

”移动互联网营销峰会<

首届<

it"

“联建杯”<

户外LED显示屏媒体大赛评审圆满落幕<

/div>

外部CSS文件代码：

#d1{

width:

600px;

height:

360px;

background-color:

Lime;

#d2{

font-family:

幼圆"

font-size:

.b{

font-weight:

bold;

text-decoration:

underline;

color:

.it{font-style:

italic;

font-weight:

实验8-1运行结果：

实验8-2源代码：

匾牌设计<

body{text-align:

#div0{width:

800px;

20pxoutset#ff0000;

magin:

p{font:

italicbolder30px/1.5em隶书;

#efedee;

div0"

展开阅读全文