网页设计（一）_网页设计csdn

作者：笔触狂放9 | 2024-03-03 09:56:32

踩

网页设计csdn

网页设计

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

网页设计

网页设计
前言
一、什么是网页
二、使用网页编辑软件
这是我写的网页
- 这是html代码
- 这是css代码
效果图如下
温馨提示

前言

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

网页设计（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