网页的基本结构
网页的基本构成-网页设计组成元素-基本结构介绍
网页的基本构成-网页设计组成元素-基本结构介绍不同性质、不同类别的网站，其页面内容的安排是不同的。
一般网页的基本内容包括标题、网站LOGO、页眉、页脚、导航、主要内容等。
如果想具体了解网页的基本构成，那无妨接着往下看吧!1、网页标题网页标题是对一个网页的高度概括。
网站中的每一个页面都有一个标题，用来表示该页面的主要内容。
它的主要作用是引导访问者清楚地浏览网站的内容。
2、网站的LOGO在IT领域，LOGO意味着标志、标识。
它的主要用途是与其他网站链接，让其他网站链接到该标志和门户，代表一个网站或网站的某个部分。
LOGO的图形形式，特别是动态的LOGO，比文字形式的链接更引人注意。
为了促进互联网上的信息传播，一个统一的国际标准是必要的。
目前，关于网站的LOGO有三种规格：(1) 88×31像素，这是互联网上最常见的LOGO规格。
(2) 120×60像素，这种规格用于一般大小的LOGO。
(3) 120×90像素，这种规格用于大型LOGO。
3、网页页眉网页页眉是指页面顶部的部分，有些页面划分得比较显然，有些页面则没有明确的区分。
通常状况下，页头的〔制定〕风格与页面整体风格一致，富有变化的页眉与网站的标志LOGO具有相同的作用。
页眉的位置比较吸引人，大多数网站制在这里设置网站的目的、口号、广告语等。
4、网页页脚网页页脚位于页面底部，通常用来标注站点所属公司的名称、地址、网站版权、电子邮件地址等信息，使用户能够了解网站所有者的基本状况。
5、网页导航网页导航是指通过一定的技术手段，为访问者提供一定的网页浏览方式，使他们能够方便地获取所必须内容。
网页导航在每个网页中的位置是不同的。
网页导航的表现形式是网页上的栏目菜单设置、辅助菜单和其他在线帮助。
6、网页的主体内容主体内容是〔网页制定〕的元素。
它一般是二级链接内容的标题，或是内容。
网页设计与制作简答题
1、简述Web浏览器打开一个W e b文件的工作过程。
2、描述网页设计的一般步骤。
3、简述网页设计的基本准则。
4、简述规划网站目录结构时应遵循的原则。
5、描述版面布局的步骤。
6、什么是“HTML”？HTML“标记”又是什么？7、简述“HTML”文档的基本结构。
8、简述以下一段H T ML代码中各对标记的作用。
〈html〉〈head〉〈title〉网页设计〈/title〉〈/head〉〈body〉〈h2〉北国风光〈/h2〉〈/body〉〈/html〉9、如何进行本地网页的测试？10、网站管理和维护的主要工作有哪些？11、什么是Web浏览器?12、简述网页设计中所需要注意的通用规则。
13、简述DHTML的概念及主要组成。
14、简述使用Fro ntPage在网页中插入一个日历的过程。
15、简述色彩的三原色的概念及每种颜色的调配范围。
16、为什么要采用D H TML技术？客户端动态网页技术有哪些优点？17、网站栏目划分的原则是什么？18、XML与HTM L相比的主要优点有哪些？19、请简述一下网站的设计流程？20、简述FireW orks的特点。
21、网页制作的步骤是什么？22、怎样让链接没有下划线?23、怎样在网页中加入多媒体播放?24、怎样让网页的背景图像不滚动?25、怎样定义网页的关键字?26、什么是Web浏览器?27、网页上所说的重心平衡指的是什么?28、什么是DHTM L？DHTML技术主要由哪几部分组成？29、在CSS中，对字体的的设置所涉及到的属性有哪些？30、用HTML语言回答一个HT ML文件应具有的基本结构。
31、比较GIF格式和JPG格式的原理与各自的适用范围。
32、为什么要采用D H TML技术?客户端动态网页技术有哪些优点?33、简述站点的概念以及虚拟目录和实际目录之间的对应关系。
网站几种常见的结构
网站的几种常见的结构1.主页（Home Page）主页（Home Page)它是一个网页，是进入一个网站的开始画面，就同“瘟酒吧”的蓝天白云一样。
也就是说，主页是一个网站的门面，要想设计出一个优秀的网站，就必须有一个“要让浏览者想不看都难”的主页，它必须引人入胜，能吸引每一个来访者的注意力，引发人们的好奇心，能让人产生一种深入探索你的网站的冲动。
优秀的主页是一个好的网站必须具备的第一要素。
2.超级链接（Hyperlink)超级链接是WWW的神经系统，它也是向导，把你从一个网页带到另一个网页，或者从网页的某一部分引导到另一部分。
超级链接是用特殊的文本或图象来实现链接的，单击它就可以实现它的功能。
3.网页（Web Page)网页就是、、、、（很难懂的概念，极其抽象，看得见摸不着），你为什么到互联网去，你在WWW上看到的就是网页。
它是由HTML编写的文件，上面有贴图，有音乐，有、、、、4.超文本（HyperText)超文本是一种新的文件形式，指一个文件的内容可以无限地与相关资料链接。
超文本是自然语言文本与计算机交互、转移和动态显示等能力结合，超文本系统允许用户任意构造链接，通过Hyperlink来实现。
5 超文本语言（Hyper Text Markup Language）超文本语言(HTML)是制作编写网页、包含超级链接的超文件的标准语言，它由文本和标记组成。
超文本文件的扩展名一般为.html或.htm。
二，网站的组织结构上网的网虫一定觉得网络上内容丰富、信息繁杂，但你是否想过一个网站的组织结构。
网页的组织结构有以下四种：1、线性结构这是网站最简单的一种结构，它是以某种顺序组织的，可以是时间顺序，也可以是逻辑甚至是字母顺序。
通过这些顺序呈线性地链接。
如一般的索引就采用线性结构。
线性结构是组织网页的基本结构，复杂的结构也可以看成是由线性结构组成的。
2、二维表结构这种结构允许用户横向、纵向地浏览信息。
它就好象一个二维表，如看课表一样。
网页设计与制作期末试题与答案
网页设计与制作模拟试题（一）一、单项选择题(每空1分，共10分)1.目前在Internet上应用最为广泛的服务是( B )。
A.FTP服务B.WWW服务C.Telnet服务D.Gopher服务2.在域名系统中，域名采用( C )。
A.树型命名机制B.星型命名机制C.层次型命名机制D.网状型命名机制3.HTTP协议是一种(D )协议。
A．文件传输协议B．远程登录协议C．邮件协议D．超文本传输协议4.HTML语言中的转行标记是(B )。
A.<html>B.<br>C.<title>D.<p>5.在HTML中，标题字体标记<hx>中x的最大取值是( C )。
A.4B.5C.6D.76.以下不能用来定义表格内容的标记为( A )。
A.<br>B.<tr>C.<th>D.<td>7.下面不是组成一个HTML文件基本结构标记的是( C )。
A.<HTML></HTML>B.<HEAD></HEAD>C.<FORM></FORM>D.<BODY></BODY>8. 加入一条水平线的HTML代码是( A )。
A. <hr>B. <img src="name" border=?>C. <img src="name" align=?>D. <img src="name">9.在HTML中，标记<pre>的作用是( B )。
A.标题标记B.预排版标记C.转行标记D.文字效果标记10.要创建一个Email地址的链接，下面正确的句法是( A )。
A. <a href=“mailto:mirror@”>与我联系</a>B. <a href=“files:mirror@”>与我联系</a>C. <a href=“http:mirror@”>与我联系</a>D. <a href=“usenet:mirror@”>与我联系</a>11.客户/服务器系统的最大特点是客户机和服务器( D )A. 必须运行在同一台机器上B. 必须运行在同一个网络上C. 必须运行在不同的计算机上D. 不必运行在同一计算机上12.若需要软件把LAN上的客户机从Internet上隐藏起来，并为客户机执行Web请求，则下面( D )软件能实现此项功能。
html5 web前端期末考试复习题
html5 web前端期末考试复习题一、单选题（每小题2分）1. 用HTML标记语言编写一个简单的网页，网页最基本的结构是A、<HTML> <title>…</title><body>…</body> </HTML>B、<HTML> <title>…</title><frame>…</frame> </HTML>C、<HTML> <head>…</head><body>…</body> </HTML>(正确答案)D、<HTML> <head>…</head><frame>…</frame> </HTML>2. 在HTML语言中，设置表格中文字与边框距离的标签是A、<TABLE border=#>B、<TABLE cellpadding=#>(正确答案)C、<TABLE width=#>D、<TABLE cellspacing=#>3. 下面关于HTML描述不正确的是？A、HTML称为超文本标记语言B、HtML代码由各种标签组成C、HTML文档的扩展名以.html结尾D、HTML是一种编译型的编程语言(正确答案)4. 以下标记符中，没有对应的结束标记的是A、<HTML>B、<body>C、<title>D、<br>(正确答案)5. A文件夹与b.html文件是同级，其中A下有a.html，现在我们希望在a.html文件中创建超链接，链接到b.html，应该在a.html页面代码中如何描述超链接href属性？（）A、../../b.htmlB、./b.htmlC、../b.html(正确答案)D、b.html6. 在HTML中，（）标签用于在网页中创建表单。
网页基本编辑实验报告
一、实验目的1. 熟悉网页编辑的基本工具和功能。
2. 掌握HTML和CSS的基本语法。
3. 能够运用网页编辑软件进行简单的网页设计。
二、实验环境1. 操作系统：Windows 102. 网页编辑软件：Dreamweaver CC3. 浏览器：Google Chrome三、实验内容1. 网页基本结构2. HTML标签的使用3. CSS样式表的使用4. 网页布局设计四、实验步骤1. 网页基本结构（1）新建一个HTML文件，命名为“index.html”。
（2）在Dreamweaver中打开该文件，输入以下代码：```html<!DOCTYPE html><html><head><title>网页标题</title></head><body><!-- 网页内容 --></body></html>```（3）保存文件。
2. HTML标签的使用（1）在`<body>`标签内添加一个标题标签`<h1>`，并设置文本内容为“欢迎访问我的网站”。
（2）在标题下方添加一个段落标签`<p>`，并设置文本内容为“这里是我的个人网站，欢迎您的访问和交流。
”。
（3）保存文件。
3. CSS样式表的使用（1）在`<head>`标签内添加一个`<style>`标签，用于编写CSS样式。
（2）设置标题标签`<h1>`的字体大小为40px，颜色为红色。
（3）设置段落标签`<p>`的字体大小为18px，颜色为蓝色。
（4）保存文件。
4. 网页布局设计（1）在`<body>`标签内添加一个`<div>`标签，并设置其样式，如宽度、高度、边框等。
（2）在`<div>`标签内添加一个`<img>`标签，设置图片路径为本地图片“example.jpg”。
几种常见的网页布局形式
几种常见的网页布局形式网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。
1.“国”字形布局也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
这种结构是我们在网上见到的差不多最多的一种结构类型。
2.“匡”字形布局这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。
这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。
3.“三”字形布局这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。
这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。
如图所示即是一种三字形布局的网页。
4.“川”字形布局整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。
如图1-19所示的“Beijing 2008”网站就是一种川字形的布局。
5.海报型布局这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。
这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
6.Flash布局这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。
其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。
其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。
编写html页面基本结构
编写html页面基本结构HTML页面基本结构HTML是一种标记语言，用于创建网页。
它是Web开发的基础，因为它定义了网页的结构和内容。
在本文中，我们将介绍HTML页面的基本结构，以及如何使用HTML创建网页。
HTML页面的基本结构包括以下几个部分：1. DOCTYPE声明DOCTYPE声明是HTML页面的第一行，它告诉浏览器使用哪个HTML版本来解析页面。
例如，HTML5的DOCTYPE声明如下：<!DOCTYPE html>2. HTML标签HTML标签是HTML页面的根元素，它告诉浏览器这是一个HTML 文档。
HTML标签的格式如下：<html><!-- 页面内容 --></html>3. Head标签Head标签包含了页面的元数据，例如页面的标题、关键字、描述等。
它不会在页面中显示，但是对于搜索引擎优化(SEO)非常重要。
Head标签的格式如下：<head><title>页面标题</title><meta name="keywords" content="关键字1,关键字2,关键字3"><meta name="description" content="页面描述"></head>4. Body标签Body标签包含了页面的主要内容，例如文本、图像、视频等。
它是页面中最重要的标签之一。
Body标签的格式如下：<body><!-- 页面内容 --></body>5. 标题标签标题标签用于定义页面的标题，它会显示在浏览器的标题栏中。
标题标签的格式如下：<title>页面标题</title>6. 段落标签段落标签用于定义文本的段落，它是HTML页面中最常用的标签之一。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
{
obj.style.fontSize="30px";
}
</script>
<p onClick="fun(this)">事件绑定</p>
This表示事件源p；
window.onload=function(){alert("欢迎来到美淘网");}
<body onUnload="alert('触发onload事件')">
<meta charset="utf-8">
<title>无标题文档</title>
<style typ="text/css">
p{
color:red;
font-size:20px;
font-family:微软雅黑;
letter-spacing:10px; /*字符间距*/
text-align:right;/*文本的对齐方式*/
left:50px;
top:-20px;
}
#box3
{
background-color:yellow;
color:black;
position:fixed;/*固定定位*/
top:30px;
left:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1">第一个层</div>
下拉列表<select name=””size（显示的行数）=”3”> <optionvalue=”湖北省”selected=”selected”>湖北省</option> </select>
多行文本域：自我介绍<textarea name cols=’列’rows=”行”></textarea>
提交按钮<input type=”submit”value=按钮显示的值”name/>
<marquee direction="right" onMouseOver="stop()" onMouseOut="start()">
<img src="images/psb (1).jpg" width="300" height="300" alt="1"/>
</marquee>
浏览器默认处理程序
<div id="box2">第二个层</div>
<div id="box3">第三个层</div>
</div>
</body>
盒子的浮动
Float:left;
Clear:both;overflow：hidden解决浮动塌陷
常用流行布局的实现
自适应width：80%当改变窗口的大小时，页面内容始终是窗口的80%
font-size:9px;
font-family:黑体;
}
.red(类选择器)
{
Color:red;
}
#news（id选择器）
{
Background-color:red;
}
</style>
选择器的优先级ID选择器》类选择器》标签选择器
文本和字体属性
<!doctype html>
<html>
<head>
title>盒子的定位</title>
<style type="text/css">
#wrapper
{
border:3px solid black;
}
#box1,#box2,#box3
{
border:3px solid black;
margin:5px;
height:40px;
width:300px;
<script type="text/javascript">
function Check()
{
event.returnValue=false;
}
</script>
<body>
<form action="index.html" onSubmit="return false;">
<input type="submit" value="确定"/>
(3,4)
函数也是一种数据类型function类型
匿名函数作为函数的参数来传递
Var area=function(width,height){
Document.write(“面积：”+width*height);
};
Area(3,4);
常用事件、
<script type="text/javascript">
var name=window.prompt("请输入姓名：");
window.alert("欢迎"+name);
确认对话框
var flag=window.confirm("确认删除吗？");
if(flag)
window.alert("执行删除操作");
else
window.alert("取消删除操作");
text-decoration:underline;/*文本修饰*/
line-height:30px;/*文本行高*/
font:bold 20px微软雅黑;
}
</style><Fra bibliotekhead>
<body>
<p>css是一种页面修饰梅花技术</p>
</body>
</html>
CSS盒子模型
<style type="text/css">
background-color:red;
background-image:url();
}
body
{
margin:0px;
}
#box2{
margin-top:30px;/*盒子之间的间距*/
border:5px solid red;
</style>
}
</head>
<body>
<div id="box1">
网页的基本结构
<html> <head><title><title></head><body></body></html>
文本标签
标题标签<h1></h1>……..<h6></h6>
段落标签<p align=’center,left,right’><fontcolor,face,size>字体标签</font></p>
<img src="images/2015.03.14.jpg" height="500" width="300">
</div>
<div id="box2">盒子2
</div>
</body>
网页布局设计
标准文档流
行内元素从左到右解析文档
块级元素从上到下解析元素
Display属性可以改变元素的性质
盒子的定位
JavaScript基础知识
定义函数
<script type="text/javascript">
function getArea (width,height)
{
var re=width*height;
return re;
/*document.write("面积："+re);*/
}
var area=getArea(3,4);
换行标签<br/>
水平线标签<hr size=’20px’color=’red’width=’100%’/>(<)< (>)>
图片标签<img src=”图片路径”alt=’图片提示信息’height,width,align=’文本与图片的对齐方式’/>
滚动标签<marquee direction=’up’></marquee>
密码框<input type=”password”>
单选按钮<input type=”radio”value=”男”name=”sex”>
复选框<input type=”checkbox”value=”篮球”checked=”checked”/>