web 实现清单表_Web开发阅读清单：图像基础

web 实现清单表

Strong web page content is usually enhanced with illustrations, presented in the form of bitmaps and vector images. This section covers the basic image formats, including optimize settings for each, and how to place images on pages with a little CSS.

强大的网页内容通常会通过插图进行增强，以位图和矢量图像的形式呈现。 本节介绍基本的图像格式，包括每种格式的优化设置，以及如何在带有少许CSS的页面上放置图像。

Goal: Source, optimize, and place images in various formats. Ensure that accessibility is maintained.

目标：以各种格式获取，优化和放置图像。 确保维护了可访问性 。

Prerequisites: Links & Lists

先决条件： 链接和列表

Total Time (Core Material): 2 hours

总时间 (核心材料)：2小时

核心材料 (Core Material)

PNG (PNGs)

Due to their features and associated file size, PNG images require special treatment:

由于其功能和相关的文件大小，PNG图像需要特殊处理：

PhotoShop图像处理 (PhotoShop Image Processing)

Images always require some sort of processing; the most common (but by no means the only) application to do so is Adobe PhotoShop:

图像总是需要某种处理。 最常见(但绝不是唯一)的应用程序是Adobe PhotoShop：

免费图片来源 (Free Image Sources)

In order to follow any of these exercises, you will obviously need images. While your own photographs and illustrations will always be preferrable, whatever their source, the images you use must always be legally acquired. The following provide useful useful resources for free, legal images:

为了进行任何这些练习，您显然需要图像。 尽管您自己的照片和插图总是可取的，但是无论它们的来源如何，您使用的图像都必须始终合法获得。 以下内容提供了免费的合法图像有用的有用资源：

Optional: Learn more about Creative Commons.

可选： 了解有关知识共享的更多信息 。

基本图像布局 (Basic Image Layout)

While some of the following are part of the more extensive CSS for Images reading list, they are included here to answer common questions about simple image layouts:

尽管以下某些内容是更广泛的“图像CSS”阅读列表的一部分 ，但它们包含在此处以回答有关简单图像布局的常见问题：

Optional: Understand bitmap image formats at a deeper level by reading up on Lossy vs. Lossless Compression. Read up on SVG and how to use SVG Images on web pages, and encoding images with data URIs.

可选 ：通过阅读有损压缩与无损压缩来更深入地了解位图图像格式。 阅读有关SVG的信息，以及如何在网页上使用SVG图像，以及如何使用 数据URI对图像进行编码 。

If you’re interested in making alpha-masked PNG images at small file sizes, read up on making basic PNGs in Photoshop, using alpha-masking to create clouds, and optimizing 32-bit PNGs

如果您有兴趣以小文件尺寸制作带Alpha遮罩的PNG图像，请继续阅读在Photoshop中制作基本PNG ，使用Alpha遮罩创建云以及优化32位PNG的内容。

推荐读物 (Recommended Reading)

Read the first half of the

WebDocs Platform article on images, with the understanding that the longdesc attribute is poorly supported across browsers. Note that the core material above has used CSS to set the width and height of images rather than than the WebDocs method of HTML attributes, as the former is generally a better and more easily adpated approach. Stop reading when you get to “Background Images With CSS”.

WebDocs平台上有关图像的文章的前半部分，并了解longdesc属性在所有浏览器中均受较差的支持。 请注意，上面的核心材料使用CSS来设置图像的宽度和高度，而不是HTML属性的WebDocs方法，因为前者通常是一种更好且更容易采用的方法。 转到“使用CSS的背景图片”时停止阅读。

Read Chapter 6 of HTML & CSS by Jon Duckett, “Images”.

阅读Jon Duckett撰写的HTML和CSS的第6章“图像”。

Read Chapter 7, “Adding Images”, from Learning Web Design by Jennifer Niederst Robbins. (Ignore the content at the end of the chapter regarding the iframe element).

阅读Jennifer Niederst Robbins的《 学习Web设计 》中的第7章“添加图像”。 (忽略本章末尾有关iframe元素的内容)。

补充材料 (Supplementary Material)

Watch the Treehouse video on Images.

在Images上观看Treehouse视频。

当你做完 (When You’re Done)

Take the writing piece you developed in the previous sections and illustrate it with appropriately sized and placed images, ensuring that the result remains both valid and accessible.

以您在上一节中开发的写作作品为例，并用适当大小和位置的图像进行说明，以确保结果既有效 又可访问 。

Next, we’ll look at HTML tables, and how to use them appropriately on web pages.

接下来，我们将研究HTML表以及如何在网页上正确使用它们。

翻译自: https://thenewcode.com/746/Web-Development-Reading-List-Image-Basics

web 实现清单表