Page Under Construction! Selecting the appropriate type for your webpages’ text
is part of the design process.
To format your text to be more readable, you follow the rules of typography.
Typography is the study of the appearance and arrangement of characters, commonly referred to as type.
The characteristics that define type are typeface, color, style, and size.
Images
Images can improve the design and the appearance of a web page.
They can personalize and familiarize the unknown,
deliver a message, and prompt visitors’ actions.
Webpage images include illustrations, diagrams, and photographs.
Aesthetics
Webpages should be visually attractive, convey a powerful message, and leave a distinct impression.
Successful web publications that accomplish these objectives combine creativity
with the basic design principles of balance and proximity,
contrast and focus, and unity and visual identity.
Responsive web design ensures that the content is viewable on multiple devices and screen sizes.
Planning
Once you have developed a thorough website plan that takes into consideration your audience expectations, website goals, and design plans, you are prepared to create your website. As you learned in previous chapters, web designers use text and images to communicate messages and to set a mood. In this chapter, you learn more about typography standards and practices to ensure readability. You also learn how to select appropriate images, such as photographs, diagrams, illustrations, and more, which add value to your website and support your website’s message. Then, you learn how to prepare images for the web.
CO:1.7:
Assignment 13 CH05: Typography & Images
Review E-Text Chapter 5 — Typography & Images.
You will begin to apply the chapter concepts to the ongoing development process in web design using the concepts, techniques, and design tips presented and receive instructions for completing another segment of the ongoing design process.
Image Goals
Content relevance and value to your website.
Conform with or complement your website’s color scheme.
.gif - The Graphics Interchange Format (GIF) bitmap image file format
was the original image format used on the web.
CompuServe created the GIF format in the late 1980s.
GIFs contain a compression algorithm that reduces file size.
GIF images are 8-bit color images, meaning they have a maximum of 256 colors.
This color limitation makes the GIF format inappropriate for complex images, such as photographs.
GIFs are optimal for basic, solid-color images, such as cartoons, diagrams, and navigation buttons.
Different types of GIF images include interlaced, transparent, and animated.
Interlaced GIFs
.gif images appear on the screen in a sequence of passes.
Each pass displays the whole image at a higher resolution as the image changes from blurry to distinct.
An interlaced GIF gives a preview of the image to come without extensively affecting file size.
To create a transparent GIF, you can specify that the webpage remove a specific color.
The absence of that color allows the webpage background to show through from behind the image.
Animated GIFs consist of a series of frames that repeat to simulate movement
.jpg
.jpg - Joints Group Exhange Format
.png
.png - Portable Network Graphic
.webp
.webp - Google WebP Image File
HTML Images
HTML Images Syntax
The HTML < img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages.
The < img> tag creates a holding space for the referenced image.
The < img> tag is empty, it contains attributes only, and does not have a closing tag.
The < img> tag has two required attributes:
The 'src' Attribute
specifies the path (URL) to the image.
The 'alt' Attribute
specifies alternate text for the image.
Note: When a web page loads, it is the browser, at that moment,
that gets the image from a web server and inserts it into the page.
Therefore, make sure that the image actually stays in the same spot
in relation to the web page, otherwise your visitors will get a broken link icon.
The broken link icon and the alt text are shown if the browser cannot find the image.
Resize the browser window to see the effect.
Screens larger than 700px wide displays four images side by side.
Screens less than 700px wide displays two images side by side.
Screens less than 500px, images stack vertically (100%).
Replace 'Intro' placeholder text:
Responsive, dynamic images improve the design and the appearance of a web page
to personalize and familiarize the unknown,
deliver a message, and prompt visitors’ actions.
Responsive images include illustrations, diagrams, and photographs.
About
Replace 'About' placeholder text:
Responsive images automatically resize, hide, shrink, or enlarge,
to look good on all devices.
Check them out!
Purpose
Replace 'Purpose' placeholder text:
Responsive, relevant and compelling images add value to your website
and support your website’s message.
Images that conform or complement your website’s color scheme.
will contribute to the overall mood you want to set.
(Chunked text for small devices.)
Replace refined 'Intro' text:
Responsive, dynamic images can improve the appearance of a web page and prompt visitors’ actions.
Replace refined 'About' text:
Responsive Images will automatically adjust for different screen sizes.
Replace refined 'Purpose' text:
Responsive, relevant, and compelling images add value and support your website’s message.
Responsive Columns
Replace placeholer title and text:
Columns, tables, and containers are fundamental in web design because
they organize and unify content between the header and footer.
The two columns below will include future responsive multimedia.
Resize the browser window to see the effect!
Title1
Responsive one and two-column
layouts are most common and best for all device screens, especially mobile.
This column will include a future responsive multimedia video.
This column will include a future responsive multimedia video.
This column will include a future responsive multimedia video.
Title2
Responsive one and two-column
layouts are most common and best for all device screens, especially mobile.
This column will include a future responsive multimedia video.
This column will include a future responsive multimedia video.
This column will include a future responsive multimedia video.
Responsive Image Gallery
Replace placeholer title and text:
This example use media queries to re-arrange the images
on different screen sizes: for screens larger than 700px wide,
it will show four images side by side,
for screens smaller than 700px, it will show two images side by side.
For screens smaller than 500px, the images will stack vertically (100%).
Resize the browser window to see the effect!
