HTML制作企业网站页面（html的网页制作）

IT服务网

作者

华为云服务器特价优惠火热进行中！

2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。

合作流程：
1、点击链接注册/关联华为云账号：点击跳转
2、添加客服微信号：cloud7591，确定产品方案、价格方案、服务支持方案等；
3、客服协助购买，并拉微信技术服务群，享受一对一免费技术支持服务；
★技术专家在金蝶、华为、腾讯原厂有多年工作经验，并已从事云计算服务8年，可对域名、备案、网站搭建、系统部署、AI人工智能、云资源规划等上云常见问题提供更专业靠谱的服务，对相应产品提供更优惠的报价和方案，欢迎咨询。

本篇文章给大家谈谈HTML制作企业网站页面，以及html的网页制作对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

想给一个企业做网站，只用html就可以做吗？

可以的，不过维护或者更新内容，扩展页面比较麻烦。

如果是小企业就 10个页面以下完全可以用html搞定

用高级语言反而浪费时间。

如何用html编写一个简单的网页

简单的html网页可以直接利用文本编写的，无需下载特定编辑器。

1、在我们的windows操作系统中，桌面上鼠标右键新建一个txt文本，并命名为"最简单网页",只是便于标识，实际上并不影响我们的操作。注意我们需要提前在文件属性中把扩展名显示出来。

2、我们打开文件夹属性设置，将文件扩展名显示出来，后面我们需要对文件扩展名进行操作，不同操作系统的设置位置不太一样，我们可以直接搜索"文件夹属性"来进行查找修改。

3、然后输入最简单的HTML文本语言。

代码如下：

html

body

最简单的网页

/body

/html

4、保存并关闭txt文本，然后修改我们txt文本的扩展名为html，此时会弹出警告框，提示我们修改后可能会导致文件不能使用，这是操作系统的一个处理逻辑，为了防止无意或恶意的损坏文件的行为。

5、无需担心，因为这在我们自己的掌控之下，确认警告，点击"是"，然后双击打开我们自己的第一个html网页，就可以看到一个最简单的html网页了。

HTML制作企业网站页面（html的网页制作）

用html如何制作一个简单的网页代码？

1、首先，在计算机桌面上创建一个新文件夹，然后在该文件夹中创建一个新的文本文档。

2、然后双击打开带有记事本的文本文档，如下图所示，我们编写一个简单的html代码。

3、单击“另存为”的功能选项，显示默认保存为编码为ANSI。

4、我们将更改编码和文件名，将其更改为如图所示的图像并保存。

5、然后返回到新创建的文件夹，发现有一个额外的html文件。

6、最后，使用浏览器打开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 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

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

divid="footer"

ul !--ulli*7a{联系我们} --

liahref="#"联系我们/a/li

/ul

京ICP备07020337号 W3C Valid CSS W3C Valid XHTML 1.0 Strict/address

/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、首先我们需要在桌面上，新建一张记事本

2、然后我们需要打开记事本，编写代码

3、然后我们需要把记事本修改后缀名为.html

4、然后我们需要在桌面上就会有一张网页，这一点很重要。

5、最后我们需要需要在浏览器上运行该网页

怎么用html制作简单得网页代码？

用html制作简单的网页的步骤：

1、整体形象设计：企业确定要搭建网站，那么首先就需要确定企业的整体形象，这个形象包括企业的logo设计，整个站点的色彩搭配，网页流程设计，版面设计，甚至包括哪些地方本使用动态效果，哪些地方搭配文字信息，又或者需要布局哪些模块等等，这个都需要纳入到整体形象设计当中。

2、页面风格设计：网站整体设计完成之后，需要落实到每个小的页面，每个页面风格设计可以不同，但大的方向却需要一致，这样才能保证整个站点是整洁有序的，千万不能是一个页面一个页面设计，这样让用户感觉到非常突兀，甚至会不适应。

3、代码设计：代码设计其实也就是功能设计，一个网站不可能只是展示，还需要有一些其他功能，最少有联系版块的功能，留言功能等等，如果是电子商务网站还需要一些支付功能等等。此外，代码设计也涵盖了整个网站的框架布局，这个需要站长结合SEO优化元素去设计。

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

HTML制作企业网站页面的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html的网页制作、HTML制作企业网站页面的信息别忘了在本站进行查找喔。

阅读全文

发布于 2023-03-27 14:03:27

HTML制作企业网站页面

喜欢 0

分享空间
分享微博
手机扫一扫

海报

HTML制作企业网站页面（html的网页制作）

本文目录一览：

想给一个企业做网站，只用html就可以做吗？

如何用html编写一个简单的网页

用html如何制作一个简单的网页代码？

关于html页面制作

如何制作HTML页面

怎么用html制作简单得网页代码？

推荐阅读

复制成功