使用Dreamweaver制作网页

| 文章字数:2k | 阅读时长:7min
这是一篇更新于 549 天前的文章,其中的信息可能已经有所发展或是发生改变。

Dreamweaver是一款集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持,设计师和程序员可以在几乎任何地方快速制作和进行网站建设。同时它为一些什么都不懂的小白提供了一个制作网页的平台,只需一些十分简单的操作便可以在短时间内制作出一个网页来。本文主要来介绍如何在短时间内制作一个简洁并且美观的网页。

网页主题🌈

在你网页制作之前首先要确定的就是网页的主题,确定一个主题显得尤为重要。因为只有当你确定好一个主题之后,任务才可以得到下一步的实施。没有主题盲目的去做最终做出来的东西必然是乱七八糟的,最后老师肯定页不会给你一个很高的分数。所以如果你想得到一个较高的分数,确定好一个明确的主题最终做出来一个像模像样的网页才是取得高分的关键。打个比方来说确定主题就像你盖房子🏠想要改一个什么样的房子。

Themes关于主题有的老师已经规定过,例如:

  1. 我的家乡

  2. 祖国的优秀传统文化

  3. 中国现代杰出人物

  4. 家乡的人文历史

  5. 世界杯与消费调研

  6. 羽毛球技战术介绍

  7. 民乐队组成介绍

  8. 国产电影推介

  9. 中国航空航天发展记录

  10. 戏曲剧种介绍

  11. 二十四节气介绍

  12. 关于书法

  13. 名族品牌介绍

  14. 国宝会说话

还有的没有规定让自己自由发挥的,这里建议你制作一个类似于个人博客的网站。你可以记录一下自己日常学习的一些东西,以及自己平时娱乐的一些信息等等。例如这个网站🎈。如果你是选题的话可以参考这个是上面关于国产电影推介的。🎦这个是今年给别人做的😂,有很多欠缺不足的地方希望大家不喷🤣。

网页布局🌈

网页虽然有了主题,但是仅凭这个是不够的。下一步你还要确定网页的布局,网页布局对改善网站的外观非常重要。选择了一个正确的布局方式,下面的工作也必定会是容易的。在网页中的各个部分该放什么东西,在一处该用表格还是该插入图片。制作之前要有一个大致的布局思路!大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。大多数网站可以使用

或者 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

两种网页布局

①使用div元素布局

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
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Div布局</title> 
</head>
<body>

<div id="container" style="width:100%">

<div id="header" style="background-color:#ffcc99;">
<h1 style="margin-bottom:0;">网页标题</h1></div>

<div id="menu" style="background-color:#FFF0F5;height:500px;width:10%;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:500px;width:90%;float:left;">
内容</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © xxx</div>

</div>

</body>
</html>

效果

看到一长串的代码和最终的截图,或许你是一脸懵逼的。看不懂不要紧,这里不需要你能看懂也不需要你能够理解学会这些代码是啥意思。有兴趣有能力的可以去稍微研究一下,由于Div布局牵扯到写代码🙅‍不建议大家使用。不用Div元素布局我们还有其他的方法,下面对其进行介绍。

②使用表格元素布局

由于Div元素布局较难,大家短时间内也不容易掌握。想必大多数老师日常的教学中对于页的构建都是使用DW软件往里面插入表格,然后进行合并拆分等最终制作成了一个简单的页面。此类方法简单粗暴,易于掌握。是目前来说大家制作网页作业的最好的选择。但是table标签是不建议作为布局工具使用的,因为表格并不是布局工具。But这个可以用在你的作业中,来帮助你快速的完成作业。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#ffcc99;">
<h1>主要的网页标题</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © xxx</td>
</tr>
</table>

</body>
</html>

这串代码和刚才上面的那段代码的效果是完全相同的。既然能够达到同样的效果并且还可以十分简单的完成作业,那么目前来说就要抛弃Div布局来使用表格完成网页的制作。

③一些其他的布局样式

除了上面的的那种布局样式外,下面两种布局样式也是比较受欢迎的。

两列左窄右宽型

这种布局和小米官网的布局是类似的

通栏平均分布型

这种布局和🔨锤子官网的布局是类似的

除了这些还有好多其他的网页布局样式知乎上也有相关介绍传送门🚪。如果这些你都觉得不好、不喜欢的话,🙆‍可以根据自己的喜好来用表格对网页进行布局。

布局总结

建议

若你想让自己做出的网页可以好看一点,可以这样在自己的网页中同时使用div元素和表格来构建自己的网页,为页面创建背景以及色彩丰富的外观。由于创建高级的布局非常耗时,并且没有接触过前端的人代码也写不出来。你完全不必担心,使用模板是一个快速的选项你可以使用DW软件内的模板直接创建并使用别人构建好的布局,自己对其进行优化美化就🆗了。(模板的使用在网页的制作时会讲到,这里不做详细说明)

网页制作🌈

上面说了那么多,终于要来到关键的部分了。确定好一系列东西之后,在制作网页之前你还需要做一手准备就是网页中要用的的图片的准备

花费几十块,甚至上百块找代做并不能够百分百让你取得高分,他们的网页我看过大多也都比较烂。跟你自己做差不了多少其实对于网页前端,他们其实和你们一样都是一个小白。他们之所以能够做出一个网页来,是因为他们使用这个名叫Dreamweaver的软件的熟练度比你高一点罢了。我相信只要你看了这个教程多加联系也一定能够做出自己令自己满意的网页!

—————————————————未完待续———————————————————

扫码加我微信