网页设计

提示：这里有基础内容，也有中级内容
例如：网页设计div布局

网页设计

前言

提示：这里可以添加本文要记录的大概内容：这是摘取网上讲解。

网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。
网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是网页

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。
网页介绍：
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
（推荐教程：html教程）
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

二、使用网页编辑软件

（一）、初学者的网页制作软件

1、Microsoft FrontPage，操作界面和Word比较类似，可以很容易上手；

2、Netscape编辑器；

3、Adobe Pagemill的一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便；

4、Claris Home Page；

（二）、中级网页制作软件

1、DreamWeaver，自制动态HTML动画的网页；

2、Fireworks；

3、Flash；

4、HotDog Professional，可以制作要加入多种复杂技术的网页，HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择；

5、HomeSite，是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑perl程序。HomeSite更适合那些比较复杂，页面内容比较多的设计，不过由于功能比较多，上手会比较慢；

6、HotMetal Pro，制作具有强大数据嵌入能力的网页，HotMetal为用户提供了“太多”的工具，而且它还可以用网状图或树状图表现整个站点文档的链接状况；

（三）、高级网页制作软件

1、Microsoft Visual Studio，适合开发动态的aspx网页，同时，还能制作无刷新网站、webservice功能等，仅适合高级用户；

2、Jbuilder，不论是各种版本，均适合使用其开发出JSP网页，仅适合高级用户；

3、还可以使用记事本进行编写各种HTML代码、CSS代码、JS代码和各种动态脚本的工作，最后制作出网页。

提示：如果小伙伴们是自学的话，可以在w3school上学习网页和前端

这是链接
w3school

这是我写的网页

这是html代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="shouye.css">
        <title>默一个人博客</title>
        <style type="text/css">
        </style>
        <body class="kujia">
            <div class="biaoti1">
                <div class="biaoti">
                    <a href="#" class="logo"></a>
                    <a href="#" class="geren">主页</a>
                    <a href="#" class="shouye">首页</a>
                    <a href="#nr1" class="wengao">文稿</a>
                    <a href="#tuji" class="tu">图片</a>
                    <a href="#" class="ziliaoxiazai">资料下载</a>
                    <a href="#" class="wenxintishi">温馨提示</a>
                    <a href="#" class="logo1"></a>
                </div>
            </div>
            <div class="neirong">
                <div class="nr1">
                    <div id="nr1">
                        <div class="tu1"></div>
                        <ol class="wen1">
                            <li><a href="#">意林这篇文章太美了波</a></li>
                            <li><a href="#">黄昏后你写什么优美的作品</a></li>
                            <li><a href="#">我想说的话你可以听到吗</a></li>
                            <li><a href="#">是你在想我吗</a></li>
                            <li><a href="#">bbbbbbbb</a></li>
                        </ol>
                        <div class="tu2"></div>
                        <ol class="wen1">
                            <li><a href="#">意林这篇文章太美了波</a></li>
                            <li><a href="#">黄昏后你写什么优美的作品</a></li>
                            <li><a href="#">我想说的话你可以听到吗</a></li>
                            <li><a href="#">是你在想我吗</a></li>
                            <li><a href="#">bbbbbbbb</a></li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="tuji">
                <div id="tuji">
                    <div class="zhaopian1"></div>
                    <div class="zhaopian2"></div>
                    <div class="zhaopian3"></div>
                    <div class="zhaopian4"></div>
                    <div class="zhaopian5"></div>
                    <div class="zhaopian6"></div>
                    <div class="zhaopian7"></div>
                    <div class="zhaopian8"></div>
                </div>
                </div>
            </div>
        </body>
    </head>
</html>

我的个人习惯是把css和html分开写好点，例如js，jq等。

这是css代码

*{
    padding: 0;
    margin: 0;
}
html{
    height: 100%;
}
body{
    height: 100%;
}
.kujia{
    width: 100%;
    height: 100%;
    background: url(../个人博客/tupian/1.jpeg);
    background-size: 100%;
}
.biaoti1{
    height:100px;
    width:100%;
    margin:0px auto;
    overflow:hidden;
}
.biaoti{
    width: 100%;
    height: 100px;
    background-color:aliceblue;
    margin: 0px auto;
    opacity: 0.5;
    overflow: hidden;
}
.logo{
    height: 100px;
    width: 100px;
    background: url(../个人博客/tupian/2.png);
    background-size: 100%;
    float: left;
    margin-left: 200px;
}
.geren{
    width: 200px;
    height: 100px;                
    float: left;
    margin-left: 10px;
    margin-top: 18px;
    text-align: center;
    font-size: 36px;
    color: cyan;
    text-decoration: none;
}
.shouye{
    width: 200px;
    height: 100px;
    float: left;
    margin-top: 18px;
    font-size: 36px;
    text-align: center;
    color: cyan;
    text-decoration: none;
}
.wengao{
    width: 200px;
    height: 100px;
    float:left;
    margin-top: 18px;
    font-size: 36px;
    text-align: center;
    color: cyan;
    text-decoration: none;
}
.tu{
    width: 200px;
    height: 100px;
    float: left;
    margin-top: 18px;
    font-size: 36px;
    text-align: center;
    color: cyan;
    text-decoration: none;
}
.ziliaoxiazai{
    width: 200px;
    height: 100px;
    float: left;
    margin-top: 18px;
    text-align: center;
    font-size: 36px;
    color: cyan;
    text-decoration: none;
}
.wenxintishi{
    width: 200px;
    height: 100px;
    float: left;
    margin-top: 18px;
    font-size: 36px;
    text-align: center;
    color: cyan;
    text-decoration: none;
}
.logo1{
    width: 100px;
    height: 100px;
    float:left;
    background: url(../个人博客/tupian/3.png);
    background-size: 100%;
}
.neirong{
    width: 1400px;
    height: 850px;
    float: left;
    margin-top: 20px;
    margin-left: 200px;
    border: 1px solid rgb(234, 0, 255);
    border-radius: 20px;
}
.nr1{
    width: 1300px;
    height: 780px;
    float: left;
    margin-top: 20px;
    margin-left: 50px;
    border: 1px solid white;
    border-radius: 20px;
}
.tu1{
    width: 720px;
    height: 360px;
    background: url(../个人博客/tupian/3.jpg);
    border: 1px;
    border-radius: 20px;
    background-size: 100%;
    margin-top: 20px;
    float: left;
}
.wen1{
    width: 400px;
    height: 360px;
    float: left;
    background-size: 100%;
    margin-top: 30px;
    margin-left: 50px;
    text-align: left;
    color: deeppink;
    font-size: 24px;
}
.tu2{
    width: 720px;
    height: 300px;
    background: url(../个人博客/tupian/4.jpg);
    border: 1px;
    border-radius: 20px;
    background-size: 100%;
    margin-top: 20px;
    float: left;
}
.wen12{
    width: 400px;
    height: 360px;
    float: left;
    background-size: 100%;
    margin-top: 30px;
    margin-left: 50px;
    text-align: left;
    color: deeppink;
    font-size: 24px;
}
ol li a{
    text-decoration: none;
}
.tuji{
    width: 1400px;
    height: 850px;
    float: left;
    margin-top: 20px;
    margin-left: 200px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 20px 0px 0px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.zhaopian1{
    width: 600px;
    height: 300px;
    background: url(../个人博客/tupian/5.jpg);
    background-size: 100%;
    float: left;
    margin-top: 20px;
    margin-left: 40px;
    border: 1px solid rgb(18, 219, 186);
    border-radius: 20px;
}
.zhaopian2{
    width: 600px;
    height: 300px;
    background: url(../个人博客/tupian/6.jpg);
    background-size: 100%;
    float: left;
    margin-top: 20px;
    margin-left: 100px;
    border: 1px solid rgb(28, 98, 248);
    border-radius: 20px;
}
.zhaopian3{
    width: 600px;
    height: 300px;
    background: url(../个人博客/tupian/7.jpg);
    background-size: 100%;
    float: left;
    margin-top: 20px;
    margin-left: 40px;
    border: 1px solid rgb(18, 219, 186);
    border-radius: 20px;
}
.zhaopian4{
    width: 600px;
    height: 300px;
    background: url(../个人博客/tupian/8.jpg);
    background-size: 100%;
    float: left;
    margin-top: 20px;
    margin-left: 100px;
    border: 1px solid rgb(28, 98, 248);
    border-radius: 20px;
}
.zhaopian5{
    width: 600px;
    height: 300px;
    background: url(../个人博客/tupian/9.jpg);
    background-size: 100%;
    float: left;
    margin-top: 20px;
    margin-left: 40px;
    border: 1px solid rgb(18, 219, 186);
    border-radius: 20px;
}
.zhaopian6{
    width: 600px;
    height: 300px;
    background: url(../个人博客/tupian/10.jpg);
    background-size: 100%;
    float: left;
    margin-top: 20px;
    margin-left: 100px;
    border: 1px solid rgb(28, 98, 248);
    border-radius: 20px;
}
.zhaopian7{
    width: 600px;
    height: 300px;
    background: url(../个人博客/tupian/11.jpg);
    background-size: 100%;
    float: left;
    margin-top: 20px;
    margin-left: 40px;
    border: 1px solid rgb(18, 219, 186);
    border-radius: 20px;
}
.zhaopian8{
    width: 600px;
    height: 300px;
    background:url(../个人博客/tupian/12.jpg);
    background-size: 100%;
    float: left;
    margin-top: 20px;
    margin-left: 100px;
    border: 1px solid rgb(28, 98, 248);
    border-radius: 20px;
}

效果图如下

在这里插入图片描述
在这里插入图片描述

温馨提示

在这里只有文稿和图片具有实际效果，因为其他放了也没有意义，这个网页设计只能个人使用，以后会学到更为高级的语言才可以和大家共同使用。

# html # 前端 # html5 # 前端框架 # css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟