-
让品牌有温度、有情感
专注品牌策划15年
如何制作html网页（如何制作html网页搜索栏超链接）
发布时间：2023-04-10 23:24:22
稿源：
创意岭 阅读：
62
大家好！今天让创意岭的小编来大家介绍下关于如何制作html网页的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、怎么用html制作简单得网页代码？
用html制作简单的网页的步骤：
1、整体形象设计：企业确定要搭建网站，那么首先就需要确定企业的整体形象，这个形象包括企业的logo设计，整个站点的色彩搭配，网页流程设计，版面设计，甚至包括哪些地方本使用动态效果，哪些地方搭配文字信息，又或者需要布局哪些模块等等，这个都需要纳入到整体形象设计当中。
2、页面风格设计：网站整体设计完成之后，需要落实到每个小的页面，每个页面风格设计可以不同，但大的方向却需要一致，这样才能保证整个站点是整洁有序的，千万不能是一个页面一个页面设计，这样让用户感觉到非常突兀，甚至会不适应。
3、代码设计：代码设计其实也就是功能设计，一个网站不可能只是展示，还需要有一些其他功能，最少有联系版块的功能，留言功能等等，如果是电子商务网站还需要一些支付功能等等。此外，代码设计也涵盖了整个网站的框架布局，这个需要站长结合SEO优化元素去设计。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
二、如何制作html
网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。
网站制作的步骤：
需要评估使用的功能规格；
竞争的研究；
发展的结构（树），网页的内容和演示；
创建一个Web界面（也被称为网页设计）；
用不同的编程语言的网站整合。主要的的HTML（标准通用标记语言下的一个应用），层叠样式表（外语简称：CSS），JavaScript，PHP，ASP.NET；
建立一个网站的内容管理系统（外语简称：CMS）；
预订和管理域名（网站地址，网站的访问）；
上线一个FTP服务器，允许主办的网站不断地连接到互联网上的Web服务器上的网页文件；
创建一个网站可以委托给易雅网或自己制作。要自己建立一个网站，它可以使用网页编辑器。
三、如何创建HTML页面
首先启动dreamweaver软件（注：小编用的是dreamweaver8.0，继8.0之后cs系列当然是添加了很多新功能，这些新的功能比较吸引网 页制作新手，因为可以利用简单的操作制作更丰富的效果，但是小编个人还是比较建议新手用8.0版本，等熟悉以后再用cs）
单击HTML，新建一个html页面， 小编用红色笔标出的部分为三种编写视图模式，第一个为代码，第二个上半部分可编写代码，下半部分可以直观的看到效果图，第三个就是纯效果图了（点击绿色笔标注出的插入，可以直接插入表单、表格、按钮、文本框等对象）。
内容编辑完成后、可以用Ctrl+S或者点击文件，修改路径和文件名称进行保存。
保存完成后，双击桌面上已经保存的html文件，就可以查看网页了。
四、关于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">
<li><ahref="#">导航1</a></li>
<!--li*7>a>{导航$}-->
<li><ahref="#">导航2</a></li>
<li><ahref="#">导航3</a></li>
<li><ahref="#">导航4</a></li>
<li><ahref="#">导航5</a></li>
<li><ahref="#">导航6</a></li>
<li><ahref="#">导航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">
<h4>电子商务类网站建设</h4>
<imgsrc="img/eshop_service.jpg"alt=""/>
<ul> <!--ul>li*5>{方便的货物管理$}-->
<li><ahref="#">方便的货物管理</a></li>
<li><ahref="#">自定义会员类型</a></li>
<li><ahref="#">在线支付功能</a></li>
<li><ahref="#">丰富的订单统计</a></li>
<li><ahref="#">财务报表生成</a></li>
</ul>
</div>
<divclass="four">
<h4>电子商务类网站建设</h4>
<imgsrc="img/eshop_service.jpg"alt=""/>
<ul> <!--ul>li*5>{方便的货物管理$}-->
<li><ahref="#">方便的货物管理</a></li>
<li><ahref="#">自定义会员类型</a></li>
<li><ahref="#">在线支付功能</a></li>
<li><ahref="#">丰富的订单统计</a></li>
<li><ahref="#">财务报表生成</a></li>
</ul>
</div>
<divclass="four">
<h4>电子商务类网站建设</h4>
<imgsrc="img/eshop_service.jpg"alt=""/>
<ul> <!--ul>li*5>{方便的货物管理$}-->
<li><ahref="#">方便的货物管理</a></li>
<li><ahref="#">自定义会员类型</a></li>
<li><ahref="#">在线支付功能</a></li>
<li><ahref="#">丰富的订单统计</a></li>
<li><ahref="#">财务报表生成</a></li>
</ul>
</div>
<divclass="four">
<h4>电子商务类网站建设</h4>
<imgsrc="img/eshop_service.jpg"alt=""/>
<ul> <!--ul>li*5>{方便的货物管理$}-->
<li><ahref="#">方便的货物管理</a></li>
<li><ahref="#">自定义会员类型</a></li>
<li><ahref="#">在线支付功能</a></li>
<li><ahref="#">丰富的订单统计</a></li>
<li><ahref="#">财务报表生成</a></li>
</ul>
</div>
</div>
<divid="rside">
<divclass="subtitle">
<imgsrc="img/circle.gif"/>
<h1>文章观点</h1>
<ahref="">MORE>></a>
</div>
<ulid="art"> <!--ul#nav>li*7>{文章$}-->
<li><ahref="#">这是一篇好文章1</a></li>
<!--li*5>a>{这是一篇好文章$}-->
<li><ahref="#">这是一篇好文章2</a></li>
<li><ahref="#">这是一篇好文章3</a></li>
<li><ahref="#">这是一篇好文章4</a></li>
<li><ahref="#">这是一篇好文章5</a></li>
</ul>
<divclass="subtitle">
<imgsrc="img/circle.gif"/>
<h1>联系我们</h1>
<ahref="">MORE>></a>
</div>
<divid="contact">
</div>
</div>
</div>
<divid="footer">
<ul> <!--ul>li*7>a>{联系我们} -->
<li><ahref="#">联系我们</a></li>
<li><ahref="#">联系我们</a></li>
<li><ahref="#">联系我们</a></li>
<li><ahref="#">联系我们</a></li>
<li><ahref="#">联系我们</a></li>
<li><ahref="#">联系我们</a></li>
<li><ahref="#">联系我们</a></li>
</ul>
<address>©2006-2009 北京市灵犀慧通科技有限公司版权所有
http://www.lionhit.com 京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 h4{
font-size: 16px;
font-family: "微软雅黑";
margin: 6px 0 6px 10px;
/*16将h4标题做做修改*/
}
.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网页相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
