文档介绍：CSS+HTML静态网页设计
1,B/S的原理
2,html基本语法以及基本标签
3,Dreamweaver软件工具介绍以及基本操作
4,表格和表单以及层的概念
5,CSS介绍以及基本语法
6,CSS基本常用属性
7,CSS+DIV网页布局应用
8,总结本课程
1,B/S的原理
什么是B/S?就是浏览器服务器模式
客户端 通过浏览器输入网址
服务器端 服务器端语言如C#.NET,java
Php,
请求
IIS
响应
处理
B/S原理
原理:
客户端通过浏览器发出网址请求,请求传送到服务器端,服务器接收到这个请求,利用服务器端语言编译处理以后,返回给客户端,客户端通过HTML语言解析,展示给用户浏览,这就是一套完整的B/S原理。
2,html基本语法以及基本标签
什么是HTML?
超文本标记语言
一个网页的语法框架
<html>
<head>
<title>这是我的第一个网页</title>
</head>
<body>hello world!</body>
</html>
解释:<html>是一个网页基本定义,<head></head>代表头部,<body></body>代表身体部分,记住:一定要有闭合标签
HTML基本标签
<a></a>超链接标记
作用:链接到其它地方的地址
例如:<a href=“”>这是百度首页</a>
<ul></ul>无序列表,在网页中纵向排列,常和<li>合用,例如:
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<font></font>,字体文字标记
常用代码:
<font size=‘12’ color=‘red’>你好</font>
解释语法含义:表示字体大小属性为12,颜色为红色
<span></span>,span标记,和DIV的区别DIV遇到重复行就自动换行,<span>标记则并排在同一列。
<p></p>:段落标记,主要描述一个行的标记,例如:
<p>这是一个段落标记</p>
4,表格和表单以及层的概念
<table></table>:表格标记,例如定义一个两行两列表格
代码如下:
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr><td>3</td><td>4</td></tr>
</table>
表格的属性:boder(边框),width(宽度),height(高度),cellspace,rowspace等等
层
层的定义
就是一组html为DIV的元素标记
层的作用
用于排版和显示网页内容的标记
代码示例:
<div class=‘t1’>这是一个层的布局</div>
主要解决的问题就是页面的排版问题
表单元素
什么是表单?
用input定义,textarea除外
文本框:
例如:<input type=‘text’>这是一个文本框</input>
密码框:
例如:<input type=‘password’>这是一个密码框</input>
下拉列表框:
例如:<select name=‘商城’>
<option>汽车</option>
<option>商品</option>
<option>衣服</option>
</select>