HTML联系我们网页制作(html关于我们页面制作)
需要一份html教程的网页制作，主题是我的个人网页，
这是我在大学学的知识
给你借鉴一下 ，希望对你有帮助
网页设计教程
html文字操作（一）
1、段落 p……/p
在dreamweaver设计界面中，enter（回车）即为另起一段。
2、换行 br/
在dreamweaver设计界面中，shift+enter即为另起一段。
3、标题1~6 h1……/h1
标题1最大，依次变小。
4、空格:
Dreamweaver 只允许一次空格，如果需要使用连续空格，则需要设置，或使用nbsp；
或使用快捷键：ctrl+shift+space（空格键）
5、水平线 hr
size:水平线的粗细
width:长度
align:对齐方式
htlm文字操作（二）
一、几个文字特殊效果
1、加粗b/b strong/strong
2、倾斜i/i em/em
3、上标sup/sup（适合用代码来实现，设计中无法完成）
4、下标sub/sub（适合用代码来实现，设计中无法完成）
随着css的逐渐普及，文字的效果都更多的通过css来实现，以上的几个标签作为了解即可。
二、文字列表
1、无序列表
无序列表有两个标签ul和li
ul
liCSS教程/li
liDOM教程/li
liXML教程/li
liFlash教程/li
/ul
2、有序列表
有序列表有两个标签ol和li
ol
liCSS教程/li
liDOM教程/li
liXML教程/li
liFlash教程/li
/ol
图片
一、如何获取图像
最好的途径是通过互联网
二、使用设计界面插入图像
1、菜单（一个图片属性：替换文字）
2、工具栏
3、拖曳
三、图像格式扩展阅读：
JPEG图像、GIF图像、PNG图像
四、代码
img src=" " width=" " height=" " alt=" "/
一、超级链接的基本知识
1、含义：实现网页之间的跳转和联系
2、分类：
绝对链接
相对链接 在同一站点不同位置之间的链接
二、三种常见的超级链接
1、文字链接a href=""百度/a
2、图像链接
3、图像热点链接
===============
还有不是太常用的链接
1、空连接 a href="#"空连接/a
2、锚链接:在同一页面的不同位置跳转
三、链接的属性
链接目标 a href="" target="_blank"百度/a
表单设计
一、设计界面
1、单元格间距
2、单元格边距
二、代码
1、从属关系：表格由行组成，行由单元格组成。
表格：table……/table
行：tr……/tr
单元格：td……/td
2、table标签的属性
bgcolor:背景色
cellspacing:表格的单元格间距（间距）
cellpadding:表格的单元格边距（填充）
文字占据一行div/div
文字不占据一行span/span
、html引入css的几种方法
1、链接式
将css代码写在一个独立的文件中，文件的扩展名为.css。然后在html网页中使用link/标签将外部css文件放在head/head之间。举例：
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
link href="tp.css" rel="stylesheet" type="text/css"
/head
2、嵌入式
将Css代码写在head/head之间，并且用style/style包含起来，如果考虑到兼容性，可以再使用!-- -- 将css代码包含其中。
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style type="text/css"
!--
p {
font-family: "楷体_GB2312";
font-size: 18px;
}
--
/style
/head
1．标签选择器：
就是网页元素本身，所有的XHTML框架中的标签都可以作为CSS样式的选择器，如定义段落样式，我们可以选择P标签的名称，即把P作为选择器。P{/*定义段落属性*/}。如果定义了标签样式，则整个网页中使用了该标签都会应用这个样式。一般应用在统一文档的某个元素的显示样式中。
2．ID选择器：
它是唯一的，网页中不同的元素它的ID是不一样的。而且一个元素它只能应用一个ID。因为如果我们使用Javascript来控制网页元素的时候它是通过ID来实现的，在这种情况下就无法正常工作了。它在定义的时候用#开始，它在应用的时候用id=””。它的名称由设计者来确定。
3． 类选择：
它的名称也是由设计者来确定的，它在定义的时候用点号开始，应用的时候用class=“”；它与ID选择器所不同的是它具有一对多的特性而ID是一对一的特性。也就是说一个类选择器它可以应用到多个网页元素中而且一个元素可以应用多个类，一个元素也可以应用两个类样式，中间用空格分开，但不能是三个或者更多。在同等条件下，ID具有比class更高的优先权。
1、复杂类选择器
p.one{color:red}
实例：
style
.one{color:red;}
p.two{color:blue;}
/style
.one可以用于各种标签；而。two只能用于p标签。
2、后代选择器
div p{color:#00FF00}
例子：
div
h1这是一个标题。/h1
p我是一个兵。/p
/div
3、组合选择器（集体声明）
p，h1，.one{color:red}
4、通用选择器
对html文档的所有元素进行控制。
*{color：red；}
5、伪类选择器
a:link;hover;visited;active
或者：a.one:link;a#two:link
当用css定义链接的各种状态时，一定要注意其书写顺序，即：:link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。
一、属性
1.大小 font-size
大小就是字号，可以直接填入数字，然后选择单位。
2.样式
font-style
设置文字的外观，包括正常、斜体、偏斜体。
3.行高 line-height
这项设置在网页制作种很常用。设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。需要注意的是，单位应该和文字的单位一致，行高的数值是包括字号数值在内的。例如，文字设置为12pt，如果要创建一倍行距，则行高应该为24pt。
4.修饰 font-decoration
文本的特殊样式：上下划线、删除线、闪烁（IE不支持此效果）
5.粗细 font-weight
设置文字的加粗还是变细的效果。
6.颜色 color
设置文字的色彩。
颜色的表示方法常见的有RGB模式、十六进制模式和名称模式。
7.字体 font-family
设置文字的字体，注意多个字体的选择。
8.文本对齐 text-align
设置文本的水平对齐方式。 这里也不仅仅局限于文字，泛指所包含的内容。
9.文字缩进 text-indent
这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体的数值，然后选择单位。文字的缩进和字号要保持统一。如字号为12px，像创建两个中文自的缩进效果，文字缩进就应该为18px。
二、属性值：css中的单位
1、大小单位：px和em
2、颜色单位：red和#00ff00
三、css背景
1、背景色：background-color: （5-1）
2、背景图片：background-image:url(^);（5-3）
3、背景图片的重复方式：background-repeat：（5-5）
4、背景图片的位置：background-position：top right；（30% 70%;水平位置 垂直位置）(300px 30px;)（5-8）
5、背景图片的固定与否：background-attachment：scroll；（fixed；）背景是否与网页内容一起滚动。（5-10）
fixed：背景不动，内容动；scroll：背景和内容一起滚动
6、背景图片的综合样式：background：blue url(……) no-repeat fixed 5px 10px;
7、列表样式：list-style：
如何用html制作一个网页
1，打开记事本，并在其中输入必要信息，完整代码如下：
!DOCTYPE htmlhtmlhead meta charset="utf-8" title/title
bodyheaderimg src="molihua.jpg"width="412" height="291"/header article header h2茉莉花/h2 p作者：宋 · 刘克庄 /p /header hr/ p曾与瑶姬约。恍相逢、翠裳摇曳，珠韝联络。风露青冥非人世，揽结玉龙骖鹤。
爱万朵、千条纤弱。
祷祝花神怜惜取，问开时、晴雨须斟酌。枝上雪，莫消却。
恼人匹似中狂药。
凭危栏、烛光交映，乐声遥作。身上春衫香薰透，看到参横月落。
算茉莉、犹低一著。坐有缑山王郎子，倚玉箫、度曲难为酢。君不饮，铸成错。/p h3清平乐/h3 p冰轮万里。云卷天如洗。先向海山生大士。却诞卯金之子。冰盆荔子堪尝。胆瓶茉莉尤香。震旦人人炎热，补陀夜夜清凉。/pdl dt《浣溪沙》/dt dd南国幽花比并香。直从初夏到秋凉/dd dt《鹧鸪天》/dt dd携靓侣，泛轻航。棹歌惊起野鸳鸯/dd dt《真珠帘》/dtdd茉莉芰荷香，拍满笙箫院。/dd
/dl/article footer2019.9.6/footer /body/html
启动浏览器运行后，大家会发现界面并不美观，文字看着也比较乱。
为了解决这个问题，可以在界面添加css规则，让界面更好看，更标准化，将下面的代码块添加到记事本中，位置在head和head/也就是头部之间：
style type="text/css"body{ background:gray;} h2{ text-align:center;} header{ text-align:center; } article p{ text-indent:2em; } footer{ font-size:12px; font-align:center; } /style
再次保存和预览，是不是看着美观多了
关于html页面制作
制作的网页：
整体思路：
先布局再CSS控制
骨架搭好了，初始化样式，
后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及
对外部样式表的引入
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片
的宽，那么这里背景图片设置的有意思吗？不设置效果一样呀！！
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么
先分清楚哪些是同级目录文件
我现在在操作首页实战.html，里面有图片1的路径，从上面可以看出首页实战.html和img文件夹为同级的目录，则路径应该写为:img/1.jpg
效果图
!DOCTYPEhtml
html
head
metacharset="UTF-8"
title/title
styletype="text/css"
#container{
width:1002px;
background-color:gray;
}
#header{
height:120px;
background-color:?aquamarine;
}
#main{
height:?600px;
background:?darkgoldenrod;
}
#footer{
height:?120px;
background:?yellowgreen;
}
#main-left{
float:?left;
background:?yellow;
width:?700px;
height:?100%;
}
#main-right{
float:?right;
background:?pink;
width:?302px;
height:100%?;
}
/style
/head
body
divid="container"
divid="header"/div
divid="main"
divid="main-left"/div
divid="main-right"/div
/div
divid="footer"/div
/div
/body
/html
注意：这里对id为main的div里面的子div
main-left和main-right设置浮动样式时，要设置宽和高不然不起作用(起单独一个宽或者高也不起作用，这里的背景颜色只是父div的背景颜色)。可能的原因是div里面没内容，没长和宽，自然不会显示背景颜色
3、当一个div包含两个左右浮动的div并且后面接个普通的div时
div id="main"
div id="lside"
/div
div id="rside"
/div
/div
div id=”footer”?
/div
因为两个浮动的div浮在水面上，但是父div(即id为main的div)没有高度所以没把父div撑开。Footer的div会在水平面上，所以加背景颜色和height后可以看到此div在这两个浮动div下面，要使footer的div呈现在下面并且不被覆盖，
第一种方法：给main的div加height：800px；让他撑开
第二种方法：在两个浮动div后面加上一个class为cl的div，样式为clear：both；
网页制作的初步完成：
Html代码：
!DOCTYPEhtml
html
head
metacharset="UTF-8"
title/title
linkrel="stylesheet"type="text/css"href="css/reset.css"/
linkrel="stylesheet"href="css/首页实战-2.css"/
/head
body
divid="container" ??????????????!--div#container--
divid="header" ?????????????!--div#header+div#main+div#footer--
imgsrc="img/logo.jpg"alt=""id="logo"/
ulid="nav"
liahref="#"导航1/a/li
????!--li*7a{导航$}--
liahref="#"导航2/a/li
liahref="#"导航3/a/li
liahref="#"导航4/a/li
liahref="#"导航5/a/li
liahref="#"导航6/a/li
liahref="#"导航7/a/li
/ul
/div
imgsrc="img/about_banner.jpg"alt=""id="banner"/
divid="main"
divid="lside"
divclass="subtitle"
imgsrc="img/circle.gif"/
h1核心业务/h1
ahref=""MORE/a
/div
divclass="four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul ????????????????????????????!--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul ????????????????????????????!--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul ????????????????????????????!--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
divclass="four"
h2电子商务类网站建设/h2
imgsrc="img/eshop_service.jpg"alt=""/
ul ????????????????????????????!--ulli*5{方便的货物管理$}--
liahref="#"方便的货物管理/a/li
liahref="#"自定义会员类型/a/li
liahref="#"在线支付功能/a/li
liahref="#"丰富的订单统计/a/li
liahref="#"财务报表生成/a/li
/ul
/div
/div
divid="rside"
divclass="subtitle"
imgsrc="img/circle.gif"/
h1文章观点/h1
ahref=""MORE/a
/div
ulid="art" ??????????????!--ul#navli*7{文章$}--
liahref="#"这是一篇好文章1/a/li
???!--li*5a{这是一篇好文章$}--
liahref="#"这是一篇好文章2/a/li
liahref="#"这是一篇好文章3/a/li
liahref="#"这是一篇好文章4/a/li
liahref="#"这是一篇好文章5/a/li
/ul
divclass="subtitle"
imgsrc="img/circle.gif"/
h1联系我们/h1
ahref=""MORE/a
/div
divid="contact"
/div
/div
/div
divid="footer"
ul ??????????????????????????????????!--ulli*7a{联系我们} --
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
/ul
address?2006-2009 北京市灵犀慧通科技有限公司版权所有
京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict/address
/div
/div
/body
/html
样式代码：
#container?{
margin:?0?auto;
width:?1002px;
}
#header?{
height:?128px;
background:?gray url(../img/top_bg.jpg)no-repeat;
}
#nav?li?{
float:?left;
/*1、让导航横向*/
/*background: purple; ???*/
/*2、将导航撑开*/
width:?90px;
margin-right:?1px;
}
#nav?a?{
font-size:?16px;
font-family:?"微软雅黑";
color:?#363636;
/*8、文字颜色*/
display:?block;
/*5、鼠标移动上去后背景颜色局限在a标签内容中*/
height:?37px;
/*6、这些高度都有规定的*/
width:?90px;
text-align:?center;
/*7 、让文字居中*/
}
#nav?a:hover?{
/*3、鼠标放上来后变的样式*/
color:?white;
background:?url(../img/nav_on.gif);
/*4、鼠标移动后的背景颜色*/
}
#banner{
margin:?10px?0;
}
#main{
/*height: 800px; */??????????????????/* ?9、撑开*/
}
.subtitle{
height:?37px;
background:?url(../img/index_main_top_bg.gif); ??/*14对原先设置的背景颜色进行更改*/
}
.subtitle?img{
float:?left;
????????????????????????/*10将初始化的图片左浮动*/
margin:?5px?0?0?10px;
????????????????/*11对图片进行微调*/
}
.subtitle?h1{
float:left;
font-size:?16px;
??????????????????????????/*12对标题中字体进行设置*/
font-family:?"微软雅黑",simhei,sans-serif;
margin-left:10px;
}
.subtitle?a{
float:?right;
font-size:?12px;
???????????????????????????/*13对超链接进行微调*/
color:?gray;
}
.four{
width:?326px;
height:?200px;
background:?#EEE; ????????????????????/*这里将原先的背景改成其他的颜色(用QQ截图下面有显示RGB的颜色,这里只是转换成16进制)*/
float:?left;
margin:?10px;
}
.four?h2{
font-size:?16px;
font-family:?"微软雅黑";
margin:?6px?0?6px?10px;
????????????????????/*16将h2标题做做修改*/
}
.four?img{
float:?left; ??????????????????????????/*11、让class为four标签的img左浮动*/
margin-left:?10px;
???????????????????????????/*15图片背后有背景颜色为白色*/
padding:?6px;
background:?white;
}
.four?ul{
float:?left;
margin-left:?10px;
}
.four?li{
background:?url(../img/service_intro_bg.gif)no-repeat; ?????/*16标签前面的小黑点*/
padding-left:?10px;
?????????????????????????????/*17小黑点在字的下面*/
height:?20px;
}
.four?a{
color:?gray; ??????????????????????????????????/*18a标签的颜色*/
}
#lside{
height:?480px;
width:?694px;
border:?1px?solid?#EEE;
float:?left; ???????????????????????????/*8、让左右两个div并列一起*/
/*background: cornflowerblue;*/??????????????/*这里设置是来区分9*/??/*19删除背景图*/
border-top:?none;
}
#rside{
/*height: 600px;*/
width:?294px;
/*border:1px solid gray;*/
float:?right; ???????????????????????????/*让左右两个div并列一起*/
/*background: greenyellow; */????????????????/*这是一整个大的div到后面设置的话这个要去掉了*/
}
#art{
background:?#EEE;
margin-top:?1px;
padding-top:10px;
}
#art?a{
display:?block;
background:?url(../img/article_head.gif)no-repeat;
height:?29px;
padding-left:?30px;
}
#art?a:hover{
background:?url(../img/article_on_bg.gif); ??/*鼠标移动到文章标题后的背景*/
}
#contact{
margin-top:?1px;
height:?250px;
background:?#EEE;
}
#footer{
height:?120px;
/*background: gray;*/
clear:both; ????????????????????????/* 9、撑开*/
margin-top:?20px;
}
#footer?ul{
height:?40px;
background:?#EEE;
}
#footer?li{
float:?left;
margin-top:?15px;
margin-right:?10px;
}
#footer?address{
font-family:?"微软雅黑",sans-serif;
font-size:10px;
margin-top:?15px;
}
html如何制作网站
1，可以直接新建一个.html结尾的文件，也可以打开编辑器之后，在里面新建一个文件，然后保存为 .html结尾的，结果都一样。
2，然后选择使用某种编辑器来打开它，如使用Notepad++编辑器来编辑它。
3，然后在这个文件中写入网页所需的基本代码。
4，写好之后，根据需要设置编码格式，一般是utf-8格式，格式设置不对，会出现乱码的情况；设置好格式之后，点击左上角的图标来保存或者是直接按下 ctrl+s快捷键来保存。
5，保存好之后，然后点击‘运行’菜单，在出现的菜单中根据需要选择不同的浏览器来查看刚才编辑好的网页，当然也可以按下快捷键，如 谷歌的是 shift+Ctrl+alt+R 来看看效果如何，这就是简单的html网页教程了。
以上就是西安文菲科技的html制作流程