本篇文章给大家谈谈web网页设计怎么插图片，以及网页设计中怎么添加图片对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、网页背景图片怎么设置
• 2、如何在网页添加图片？
• 3、html图片怎么添加

网页背景图片怎么设置

1、首先打开Atom编辑器导入项目文件夹，先创建一个index.html的文件。定义一下html文件的主信息，如下图所示：

2、然后填写自己的网页内容， 设置一下样式，直接在body后面加上background="图片名字"即可插入图片，如下图所示：

3、最后来到浏览器，刷新一下网页，这样就会显示背景了，如下图所示：

设计注意：

1、配色问题 一个网页的色彩最好不要超过3种，一面视觉效果混乱，用色柔和，对比度强的色彩不能应用于一般网站，时尚网站使用还可以。一般不好搭配的颜色，用灰度搭配。

2、字体问题

很重要的一个问题，用标准字标准色，这是一个规范，行距一般控制在20px左右，不要太小，也不要太大，自己大小注意，中文12px，英文11px或者10px。

3、布局规范

布局是非常重要的，考虑客户浏览习惯以及他们想展现的内容，并且优化。一个网页，如果布局不合理的话不但影响浏览，而且非常难看。

如何在网页添加图片？

【1】为了方便快速演示，这里用一下Dreamweaver软件，当然也可直接用文本文件来代替，其网页代码是一致的！

【2】打开Dreamweaver软件，新建一个HTML空白页！

【3】将其网页的标题修改一下，改为所需要的标题，同时将文件保存到电脑中，这里就直接保存在桌面上了！

【4】保存好后，可以运行一下，用浏览器打这个网页文件，是不存这个标题图标的！

【5】即然是图标，就需要一个.ico扩展名的图片，如果是其他类型的图片，可以通过网上再线转换功能，转为ico格式的图片！这里就演示怎样获得ico格式图片了！

【6】准备好，将网页文件与图标图片放到同一个目录下，在标题下，再添加一个简单的代码就好了，link rel="shortcut icon" href="111.ico"/，这个文件名一定要与ico图标的文件名一致！

Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，最初为美国MACROMEDIA公司开发 ，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计人员和开发人员可以在几乎任何地方快速制作和进行网站建设。

Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。使用视觉辅助功能减少错误并提高网站开发速度。

Dreamweaver1.0发布于1997年12月，由之前的Macromedia公司发布。

Dreamweaver2.0，发布于1998年12月。

Dreamweaver3.0，发布于1999年12月。Dreamweaver3.0不足3M，是个经典版本。无论是多破的机器，速度特快，功能够用。此时的Dreamweaver已经是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。

html图片怎么添加

html图片添加的方法如下：

工具：Dell游匣G15、Windows10、记事本2021。

1、首先在电脑中新建一个文件夹（如：web-01），在该文件夹里新建一个html文件（如：index1.html）。

2、接着打开这个html文件，编写一个html的基本框架。

3、接着在头部head……/head中加入插入背景图片的代码。不设置平铺方式的情况下是默认水平竖直都平铺。

4、若要不重复平铺，需要写入“background-repeat: no-repeat”此时，图片只显示一次。

5、编写完成之后，保存为html后缀，如下图所示就完成了。

关于web网页设计怎么插图片和网页设计中怎么添加图片的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。