网页制作实验报告6个实验参考模板Word文件下载.docx

资源描述

网页制作实验报告6个实验参考模板Word文件下载.docx

《网页制作实验报告6个实验参考模板Word文件下载.docx》由会员分享，可在线阅读，更多相关《网页制作实验报告6个实验参考模板Word文件下载.docx（30页珍藏版）》请在冰点文库上搜索。

网页制作实验报告6个实验参考模板Word文件下载.docx

3."

三"

这种布局多用于国外站点，国内用的不多。

特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。

4.对称对比布局。

顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。

优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。

5.POP布局。

POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。

常用于时尚类站点，比如ELLE.com。

优点显而易见：

漂亮吸引人

进入internet找到以上各种布局，并写出各种版面布局网站的域名和所采用的版面布局形式

找出使用大色块和抽象线条构图风格的网站（至少各2个）；

例：

大色块主页

找出10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。

三、实验步骤与要求

1）新建一个记事本文件本在其中输入如下代码：

DOCTYPEhtmlPUBLIC"

-//W3C//DTDXHTML1.0Transitional//EN"

http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

htmlxmlns="

//www.w3.org/1999/xhtml"

head>

metahttp-equiv="

Content-Type"

content="

text/html;

charset=utf-8"

title>

我的第一个网页<

/title>

/head>

body>

HelloWorld!

/p>

/body>

/html>

2）把记事本文件扩展名改为.html，双击运行。

实验二HTML语言应用

一、实验目的:

1．掌握常用的HTML语言标记；

2．利用文本编辑器建立HTML文档，制作简单网页。

3．学习将其它格式的文档转换成HTML格式的文档

二、实验内容：

1．打开文本编辑器“记事本”中输入如下的HTML代码程序,建立一个具有基本结构标记的HTML文件，然后以自己名字（用字母）另存为.htm文件，并在浏览器中运行。

html>

王辉的主页<

bodybgcolor="

#f0ffFF"

br>

---换行--->

h2>

center>

王辉的个人主页<

/center>

/h2>

hr>

2.在以上程序的基础上一步一步的添加红色部分的语句并运行，浏览网页。

fontsize=6>

我要变大<

/font>

fontsize=7>

我要更大<

fontcolor=blue>

我要变成兰色<

fontcolor=#A52A2A>

我要变成褐色<

（3）增加移动字幕

fontsize=5>

字体变大<

字体要更大<

字体变成兰色<

字体变成褐色<

marquee>

背景音乐浏阳河！

/marquee>

marqueeheight=40width=100%bgcolor=f0ffffbehavior="

alternate"

湖南民歌浏阳河

marqueeheight=90width=100%bgcolor=f0fff0direction=upscrollamount=1>

浏阳河<

弯过了几道弯<

几十里水路到湘江<

江边有个什么县哪<

出了个什么人<

领导人民得解放<

啊依呀依子哟<

弯过了九道弯<

五十里水路到湘江<

江边有个湘潭县哪<

出了个毛主席<

啊依呀依子哟

4、建立表格

tableborder=1bgcolor=#f0fff0width="

80%"

我要建立表格

tr>

thwidth=100%colspan="

表格标题行<

/th>

tdalign=rightheight=40>

第1行第1列右对齐<

/td>

tdalign=right>

第1行第2列右对齐<

/tr>

tdalign=center>

第2行第1列居中<

第2行第2列居中<

tdalign=left>

第3行第1列左对齐<

第3行第2列左对齐<

/table>

5、插入图片

100%"

我要建立表格<

我要插入图片,将图片newyork.bmp另存为newyork.jpg，并和此网页放在同一目录下

ahref="

imgsrc=newyork.jpg>

/a>

点击以上图象可以到我们学校主页

6、建立各种链接

aname="

#item"

我要链接到中国教育科研网<

wang.htm"

我要链接到自己的主页<

做一名为wang.htm的网页,并和此网页放在同一目录下

我要链接到本页的第七行“我要建立表格”<

7、改变网页背景图片，加入背景音乐。

bgsoundsrc="

lyh.mid"

background="

lit.gif"

新建自己的主页（wang.htm）程序：

20秒跳到王辉主页

refresh"

content=20;

url="

wen.htm"

h1>

欢迎光临我的个人主页<

/b>

/h1>

embedwidth="

653"

height="

364"

src="

newyear.swf"

8．将WORD文档，POWERPOINT文档转换成HTML格式文件。

（1）做一个1页的WORD文档，将其另存为HTML格式文件。

（2）做一个有5张幻灯片的Powerpoint文档，将其另存为HTML格式文件。

在浏览器中，运行上述两个HTML文件。

并写出转换步骤。

实验三CSS样式表的应用---CSS的引用

1、掌握CSS样式表的引用的几种方式

2、学习如何控制字号，字模及加入特殊效果

3、了解要素和图象方面的样式设置

1、整页套用样式：

不执行这个网页程序，回答程序中的问题，为什么？

StyleType="

text/css"

--h2{color:

blue;

text-align:

center}

h1{color:

red;

right}-->

/style>

网站<

请指出这个几字的颜色及对齐方式<

h3>

请指出这个几字的颜色<

/h3>

2、样式文件引入

你怎样不改变以下程序，分别使“网站实验”几个字变红色，“css网页实验”几个字变成绿色

linkrel="

stylesheet"

Type="

href="

cs.css"

网站实验<

css网页实验<

3、如何使有超级链接的文字不出现下划线，如何使鼠标移动到超链上产生变色的效果

写出以下语句，并改变参数，使超链上产生变色，并改变有超级链接文字的下划线的类型

linkcss<

style>

—

link{color:

green;

text-decoration:

none}

visited{color:

hover{color:

black;

underline;

font-size:

25pt}

-->

pstyle="

font-family:

行书体;

28pt"

ahref="

未访问的链接<

宋体;

18pt"

访问过的链接<

鼠标激活的链接<

4、用css控制的网页

1）用以下语句建立一个6.htm文件

charset=gb2312"

用css控制的网页<

type="

style.css"

tablewidth="

755"

388"

tdwidth="

100"

align="

right"

30"

544"

h1align="

center"

文章标题：

inputtype="

text"

name="

txttitle"

size="

70"

class="

smallinput"

maxlength="

93"

class="

b2"

b2>

CSS就是一种叫做样式表（stylesheet）的技术。

也有的人称之为层叠样式表（CascadingStylesheet）。

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

/b2>