当前位置:   article > 正文

网页设计(一)_网页设计csdn

网页设计csdn

网页设计

提示:这里有基础内容,也有中级内容
例如:网页设计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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

我的个人习惯是把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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268

效果图如下

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

温馨提示

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/184386
推荐阅读
相关标签
  

闽ICP备14008679号