在现代网页设计中，子页面图片的使用非常普遍。它们不仅能丰富网页的内容，还能提高用户体验和视觉效果。那么，如何建立网站子页面图片呢？下面我们来详细讲解一下步骤和方法。

1. 准备工作

需要准备一些高质量的图片资源。这些图片可以是公司产品的图片、团队成员的合影或者相关主题的背景图等。确保图片的分辨率足够高，以便在不同设备上都能清晰显示。

2. 上传图片到服务器

将准备好的图片文件通过FTP工具上传到网站的服务器。常见的FTP工具有FileZilla等。上传时，建议将图片存放在一个单独的文件夹中，比如 images 文件夹，这样便于管理和查找。

3. 创建子页面

进入网站的后台管理系统，创建一个新的子页面。如果使用的是一个内容管理系统（CMS），如WordPress，可以通过插件或模板进行操作。如果没有使用CMS，则需要手动编写HTML代码。

示例代码：

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<title>子页面标题</title>  
</head>  
<body>  
<h1>子页面标题</h1>  
<img src="images/example.jpg" alt="描述图片的文字">  
</body>  
</html>

4. 插入图片链接

在HTML代码中找到合适的位置插入 <img> 标签，并在 src 属性中填写图片的路径。例如，如果图片名为 example.jpg 并存储在 images 文件夹中，则 src 属性应为 images/example.jpg。同时，不要忘记添加 alt 属性以提供图片的描述。

5. 保存并预览

完成上述步骤后，保存HTML文件并通过浏览器打开该文件进行预览。确保图片能够正确显示且没有出现加载错误或其他问题。

6. 样式调整

为了让图片看起来更美观，可以使用CSS进行样式调整。例如，可以设置图片的大小、边框、阴影等效果。下面是一个简单的CSS示例：

CSS样式：

img {  
width: 50%; /* 设置图片宽度为父容器的一半 */  
border: 2px solid #ccc; /* 给图片增加一个灰色的边框 */  
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */  
}

7. 响应式设计

为了使图片在各种设备上都能良好显示，可以考虑使用响应式图片技术。例如，可以使用 srcset 属性指定多个不同分辨率的图片，浏览器会根据设备的屏幕大小自动选择合适的图片。

示例代码：

<img  
src="images/example-small.jpg"  
srcset="images/example-small.jpg 640w, images/example-medium.jpg 960w, images/example-large.jpg 1280w"  
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"  
alt="描述图片的文字">

通过以上步骤，你可以成功地在网站子页面中插入并展示图片。记得定期更新和维护你的图片库，以确保网站的视觉效果和用户体验始终保持在最佳状态。