实验一 网页设计基础实验
一、实验目的
1．掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点；
2．了解网页布局的形式。
3.用记事本编写一个简单的网页。
二、实验内容
1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体调的搭配是否协调，主题是否突出等）。
2．在网上出下列版面布局的结构形式：
⑴．“T”结构布局
1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，
右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节彩上不注意，很容易让人"看之无味"。
2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。
3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条块，将页面整体分割为四部分，块中大多放广告条。
4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深，一半浅，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。
5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE。优点显而易见：漂亮吸引人
进入internet到以上各种布局，并写出各种版面布局网站的域名和所采用的版面布局形式
出使用大块和抽象线条构图风格的网站（至少各2个）；例：大块主页
出10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。
三、实验步骤与要求
1）新建一个记事本文件本在其中输入如下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
个人网站的制作实验报告<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的第一个网页</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
2）把记事本文件扩展名改为.html，双击运行。
实验二 HTML语言应用
一、实验目的:
1．掌握常用的HTML语言标记；
2．利用文本编辑器建立HTML文档，制作简单网页。
3．学习将其它格式的文档转换成HTML格式的文档
二、实验内容：
1．打开文本编辑器“记事本”中输入如下的HTML代码程序,建立一个具有基本结构标记的HTML文件，然后以自己名字（用字母）另存为.htm文件，并在浏览器中运行。
<html>
<head>
<title>王辉的主页</title>
</head>
<body bgcolor="#f0ffFF"><br>
<h2><center>王辉的个人主页</center></h2>
<hr>
</body>
</html>
2. 在以上程序的基础上一步一步的添加红部分的语句并运行，浏览网页。
<html>
<head>
<title>王辉的主页</title>
</head>
<body bgcolor="#f0ffFF"><br>
<h2><center>王辉的个人主页</center></h2>
<hr>
<font size=6>我要变大</font>
<font size=7>我要更大</font>
<font color=blue>我要变成兰</font>
<font color=#A52A2A>我要变成褐</font>
</body>
</html>
(3)增加移动字幕
<html>
<head>
<title>王辉的主页</title>
</head>
<body bgcolor="#f0ffFF"><br>
<h2><center>王辉的个人主页</center></h2>
<hr>
<font size=5>字体变大</font>
<font size=6>字体要更大</font>
<font color=blue>字体变成兰</font>
<font color=#A52A2A>字体变成褐</font>
<hr>
<marquee>背景音乐浏阳河！</marquee>
<marquee height=40 width=100% bgcolor=f0ffff behavior="alternate"><font size=5>
湖南民歌浏阳河
</font></marquee>
<marquee height=90 width=100% bgcolor=f0fff0 direction=up scrollamount=1 ><br><br>浏阳河<br><br>
弯过了几道弯<br><br>
几十里水路到湘江<br><br><br>
江边有个什么县哪<br><br><br>
出了个什么人<br><br>
领导人民得解放<br>
啊依呀依子哟<br><br><br>
浏阳河<br><br>
弯过了九道弯<br><br>
五十里水路到湘江<br><br>
江边有个湘潭县哪<br><br>
出了个<br><br>
领导人民得解放<br><br>
啊依呀依子哟
</marquee>
<hr>
</body>
</html>
4、建立表格
<html>
<head>
<title>王辉的主页</title>
</head>
<body bgcolor="#f0ffFF"><br>
<h2><center>王辉的个人主页</center></h2>
<hr>
<font size=5>字体变大</font>
<font size=6>字体要更大</font>
<font color=blue>字体变成兰</font>
<font color=#A52A2A>字体变成褐</font>
<hr>
<marquee>背景音乐浏阳河！</marquee>
<marquee height=40 width=100% bgcolor=f0ffff behavior="alternate"><font size=5>
湖南民歌浏阳河
</font></marquee>
<marquee height=90 width=100% bgcolor=f0fff0 direction=up scrollamount=1 ><br><br>
浏阳河<br><br>
弯过了几道弯<br><br>
几十里水路到湘江<br><br><br>
江边有个什么县哪<br><br><br>
出了个什么人<br><br>
领导人民得解放<br>
啊依呀依子哟<br><br><br>
浏阳河<br><br>
弯过了九道弯<br><br>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论