使用Dreamweaver来设计网页,对于好的网页设计,通过搜索直接到效果的源代码,看起如何实现的。
(一)Html(Hyper Text Markup Language):超文本标记语言
1、标记(标签或元素)的形式
<元素名>内容</元素名>
<font>文字</font>
<元素名/>
<imgsrc=“…”/>
<元素名>
<br>
2、位于尖括号内,可以具有属性值
3、属性值必须“” 或‘’,不写也可以解析, 但是不推荐(不符合XHTML)
4、有开始必须有结束(XHTML)
5、标签不能嵌套
6、不区分大小写,但应该养成良好的编程习惯,推荐都用小写
7、网页的注释标签为:<!-- 注释内容 --->
8、网页插入空格: ; 注意后面有个分号,不要忘记 &:&;在添加网址属性值时会用到
(二)<head>头部标签
作用的范围是整篇文档,可以有<meta>元信息定义,文档样式表定义和脚本等信息,定义在头部标签的内容往往不会再网页上直接显示。
一、head标签中的元信息标签<meta>
一般用来定义页面信息的说明(description),关键字(keywords),编辑工具(generator),网页编码(http-equiv=“content-type”),网页定时跳转(http-equiv=“refresh”)等信息。
1、关键字(keywords)
可提高被搜索引擎搜索到的概率,关键字不止一个。
格式:<meta name="keywords" content="关键字" >
2、网页编码(http-equiv)
格式:<meta http-equiv="content-type" content="text/html; charset="UTF-8" >
3、网页定时跳转
格式:<meta http-equiv="refresh" content="跳转的时间;url=跳转到的地址" >
二、<base>标签:<base> 标签为页面上的所有链接规定默认地址或默认目标。
三、<style>标签:定义网页的样式
四、<script>标签:定义网页的动作
(三)<body>主体标签
网页的标签都会有自己的一些属性,用来设置网页的样式,但是,现在网页的大部分样式设置都是采用CSS样式来设置,更加的方便和统一。
id标记:可用于标识一个唯一的元素,会用于CSS样式的选择器。
(四)文字与段落标签
一、标题字标签
各级标题由<h1>到<h6>元素来定义。其中<h1>是最高级别的标题,依次递减。
二、换行标签:<br/> 不换行标签:<nobr>内容</nobr>
三、下划线标签:<u>内容</u>
四、段落标签:<p>
五、插入水平线标签:<hr/>
(五)插入图像标签
格式:<img src="图像文件的地址" alt="图像的提示文字" > alt:表示当图片没有加载出来时,在图片位置显示的提示内容
一、图像热区链接
<img src="图像地址" usemap="#映射图像名称" >
然后定义热区图像以及热区的链接属性
<map name="映射图像的名称" > //热区的名字与图像的usemap名字相对应(注意#)
<area shap="热区形状" coords="热区坐标" href="链接地址" >
</map>
实例:
<img src="planets.gif" width="145" height="126" alt="Planets"usemap="#planetmap">
<mapname="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
(六)使用列表
列表分为:有序列表,无序列表,定义列表
一、有序列表
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
二、无序列表
无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
三、自定义列表
自定义列表是:项目和其注释的组合,自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每项的注释以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
(七)使用表格:重点(表格多用于展示数据,div用于布局)
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。表格的标题由<caption>定义,表头由<th>定义。
一、<td>标签:定义HTML表格中的标准单元格
1、rowspan:单元格可横跨的行数
2、colspan:单元格可横跨的列数
实例:
<h4>水平标题:</h4>
<table border="1">
<caption>个人信息</caption>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th> //一行三个表头
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直标题:</h4>
<caption>个人信息</caption>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td> //一行一个表头
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
一、路径问题(重点)
1、本地路径
局限性:只适合于本地(不提倡)
实例:" F:\java视频\java\html "
2、绝对路径
局限性:绝对路径是包括服务器在内的完全路径,不利于站点的测试和移植。(使用网站上的资源,会导致受制于人,资源不受自己控制)
实例:http://www.foo.com/img_url.jpg
3、相对路径(一定要区分清楚)
相对路径是相对于当前URL地址来说的。
../:表示上级目录
实例:"../../images/01.jpg"
实例:<img src ="/"> 这里的斜杠/:表示当前站点的根目录
二、区分urL,urn,uri
1、urL(uniform resource locator):统一资源定位符,通过看地址就可以知道资源的位置
网络协议 + 主机名 + 端口号 + 资源名(定位标记)
http://www.baidu.com:80/index.html#top
2、urn
urn(uniform resource name):持久可用的资源标准名称
3、uri
uri(uniform resource identifier):包含url和urn
三、区分/(斜杠)和\(反斜杠)
其中\(反斜杠):java中具有转义字符的功能
1、windows本地路径使用\(反斜杠)
2、linux和网络以及dos命令使用的是/(斜杠)
3、在java语言文件操作中写:"C:\\User\\new\\sss.dat"与"C:/User/new/sss.dat"都可以,但是C:\user\new\sss.dat是错误的。
一、锚点链接
用于解决页面内容过长,通过锚点链接,直接链接到用户想要的页面。
建立锚点格式:<a name="锚点名称" >
创建链接到锚点的链接
1、链接到同一页面中的锚点
<a href="#锚点的名称" > 其中需要#以及锚点的名称作为href的值
2、链接到其他页面中的锚点
<a href="链接的文件地址#锚点的名称" >
(九)使用表单(<form>)(重点)
表单主要用来收集客户端提供的相关信息,使网页具有交互功能。由许多不同的表单标签组成,有文字字段,单选按钮,复选框,菜单和列表以及按钮。
一、表单标签中的属性
1、action:用于指定表单数据提交到哪个地址进行处理(一般采用相对路径:相对于当前URL路径来说的)
2、method:传递方法(get和post)
注意get与post的区别
1、get提交方法:有字节限制(256byte),参数显示在url中,格式:url/userinfo?username=李四&password=heihei 参数用&号连接
2、post提交方法:没有长度限制,不会显示在url中
3、target:目标显示方式
一、输入标签:<input>
value:用来定义文本框的默认值
通过属性type来指示是哪种输入表单元素
1、text:输入文字字段
2、radio:单选按钮
在单选按钮中必须设置value的值,对于一个选择列表中所有的单选按钮,必须设置为相同的名称便于判断,
同时,在单选按钮中只有一个按钮可以设置为checked(表示默认被选中)。
value的值用于提交到服务器代替标签的内容。
(1)value的用法
value 属性对于不同 input 类型,用法也不同:
- 对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
- 对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始(默认)值
- 对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL。
注意:value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
注意:value 属性不适用于 <input type="file">。
<form action="url">
<input type="radio" name="sex" value="male" >Male<br>
<input type="radio" name="sex" value="female">Female
</form>
3、Checkbox:复选框
对于复选框可以是不同的名字,不会产生影响。
<form action="url">
<input type="checkbox" name="vehicle1" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car
</form>
4、button:普通按钮
普通按钮一般要配合脚本来进行表单处理
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function msg()
{
alert("Hello world!");
}
</script>
</head>
<body>
<form>
<input type="button" value="点我" οnclick="msg()">
</form>
5、submit:提交按钮
6、reset:重置按钮
7、image:将图片作为一个按钮
<input type="image" src="img_submit.gif" alt="Submit">
8、hidden:定义隐藏字段,用户不可见
<input type="hidden" name="country" value="Norway">
9、file:用于上传文件
选择一个文件: <input type="file" name="img">
(十)、下拉列表标签:<select>
1、size属性:用来显示列表的项数
2、multiple属性:表示可以选择多个选项 (按住 Ctrl (windows) / Command (Mac) 按钮来选择多个选项。)
3、列表项通过<option>标签显示,格式:<option value="选项值" selected>选项显示内容</option>
selected(默认被选中):表示该选项在默认情况下是选中的,一个下拉菜单中只能有一个默认选项被选中。
<select size="2" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
(十一)、文本域标签:<textarea>
用户需要输入多行文本时,可以使用文本域而不是文字字段。
1、属性cols:表示列 rows:表示行
2、wrap 属性规定在表单提交时文本区域中的文本是如何换行的
<textarea rows="10" cols="30" wrap="soft|hard">
我是一个文本框。
</textarea>
3、wrap属性值的描述
值 | 描述 |
---|---|
soft | 在表单提交时,textarea 中的文本不换行。默认。 |
hard | 在表单提交时,textarea 中的文本换行(包含换行符)当使用 "hard" 时,必须指定 cols 属性。 |
(一)Html中的区块元素与内联元素
一、块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table> <div>
二、内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>,<span>
其中可以使用<div>标签用于页面布局。使用<table>显示数据。
标签 | 描述 |
---|---|
<div> | 定义了文档的区域,块级 (block-level) |
<span> | 用来组合文档中的行内元素, 内联元素(inline) |
(二)框架结构
框架一般由框架集和框架组成。框架集是一个框架的集合。
一、<frameset>标签来设置框架集
框架页面的结构是在框架集中设置的,通过框架的分割方式分为水平分割窗口(rows),垂直分割窗口(cols)
1、在当前文件直接分割
2、在当前文件分割,在引用的子文件再进行分割。
嵌套分割窗口
<frameset rows="框架窗口的高度" >
<frame name="窗口的名字"src="页面文件地址">
<frameset cols="框架窗口的宽度" >
<frame name="窗口的名字" src="页面文件地址">
</frameset>
</frameset>
其中高度与宽度的取值:一组用逗号分隔的像素值,百分比或者相对度量值。
实例:
<html>
<head><title>Frame</title></head>
<!--注意不要有body-->
<!--<body>-->
<frameset cols="20%, *">
<frame name="left"src="01.html" noresize>
<frameset rows="40%,*">
<frame name="righttop"src="02.html">
<frame name="rightbottom"src="03.html">
</frameset>
</frameset>
<!--</body>-->
</html>
二、<frame>标签
用来定义一个单独的框架页面,框架页面的属性设置都在<frame>标签中进行。
格式:<frame src="页面源文件的地址" name="页面名称" scrolling="是否显示滚动条(yes|no|auto)">
属性noresize:表示禁止调整窗口的尺寸。
三、浮动框架标签<iframe>
<iframe src="页面源文件的地址(可以为网址或者文件路径)"></iframe>
(四)建立超链接(使用<a>标签)(与框架结合使用)
格式:<a href="链接目标" target="目标窗口的打开方式" > 网页内容 </a>
target参数的取值:
值 | 描述 |
---|---|
_blank | 在新窗口中打开被链接文档。 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
实例:
<html>
<head><title>Frame说明</title></head>
<body>
<a href="20_1.html">链接到20_1</a>
<br>
<a href="20_2.html">链接到20_2</a>
<br>
<a href="20_1.html" target="righttop">链接到20_1,但在右上窗口显示</a>
<br>
<a href="20_1.html" target="_parent">链接到20_1,但在我的父窗口显示</a>
<br>
<a href="20_1.html" target="_top">链接到20_1,但在最上层窗口显示</a>
<br>
<a href="20_1.html" target="_blank">链接到20_1,但在新窗口显示</a>
<br>
</body>
</html>
(三)添加多媒体
网页的多媒体元素一般包括动态文字,动态图像,声音以及动画等。
一、设置滚动标签<marquee>
可以移动文字,图片,表格等。
格式:<marquee direction="滚动方向" behavior="滚动方式" scrollamount="滚动速度" >滚动内容</marquee>
1、direction取值:up,down,left(默认),right
2、behavior取值:scroll(默认):循环滚动 slide:只滚动一次就停止 alternate:来回交替滚动
3、scrollamount取值:实际上是设置每次滚动时移动的长度,以像素为单位
二、插入多媒体文件(flash动画,音频和视频文件)
语法:<embed src="多媒体文件地址"autostart="是否自动播放" width="宽度" height="高度" ></embed>
三、网页背景音乐标签<bgsound>
在网页中,除了可以嵌入普通的声音文件外,还可以为某个网页设置背景音乐。
<bgsound src="背景音乐地址" autostart="是否自动播放" loop="播放次数" >
如果无限播放可以把loop设为true即可