web design basics_04
TRANSCRIPT
![Page 1: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/1.jpg)
WEB DESIGN BASICS
![Page 3: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/3.jpg)
01:36 AM 3
New Material Added to the Blog
http://startingmyownwebpage.wordpress.com/
![Page 4: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/4.jpg)
01:36 AM 4
Private Blogs
![Page 6: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/6.jpg)
01:36 AM 6
Insert Media
![Page 7: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/7.jpg)
01:36 AM 7
Individual Media
![Page 8: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/8.jpg)
01:36 AM 8
Create Gallery
![Page 9: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/9.jpg)
01:36 AM 9
Gallery
An image gallery will display a set of small images attached to a particular post or page.
Readers can click on any image to launch a full-size carousel that allows them to scroll through the entire gallery one image at
a time.
With the slideshow option, images will automatically move from one to the next after a few seconds.
![Page 10: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/10.jpg)
01:36 AM 10
Let’s try it!
From the Dashboard, click on Add New Page Click on Add Media Choose Create Gallery Click on Upload Files and then Select Files
![Page 11: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/11.jpg)
01:36 AM 11
Link to: Does not apply to slideshows. Attachment Page: A specialized page in your blog that shows the image in your
selected theme.
Media File: A direct link to the full-size uploaded image.
Columns: The number of columns of thumbnails to display. This may be affected by your choice of theme, so be sure and test a bit with your current theme. This option does not apply to slideshows.
Random Order: Check this box to randomize the order of images in your gallery or slideshow. That means the order will change randomly every time the page is loaded.
Type: Specify the type of gallery here. The options are a default gallery of thumbnail images, a gallery with rectangular tiles, a gallery with square tiles, a gallery with circular tiles, or a slideshow.
Gallery Settings
![Page 12: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/12.jpg)
01:36 AM 12
Link To
![Page 13: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/13.jpg)
01:36 AM 13
Styles
![Page 14: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/14.jpg)
01:36 AM 14
Slideshow
Mosaic
Circle
You have three choices for how a gallery will be displayed in your post: a thumbnail grid layout, a tiled mosaic-style layout, or
in a slideshow. All sites default to the thumbnail grid style.
Tiled layouts can display in one of three styles: rectangular tiles (which include hover-over captions), square tiles, or
circular tiles.
Gallery
![Page 15: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/15.jpg)
01:36 AM 15
Hover-over caption
![Page 16: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/16.jpg)
01:36 AM 16
To change the default image layout:
![Page 17: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/17.jpg)
01:36 AM 17
![Page 18: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/18.jpg)
01:36 AM 18
Allowed File Formats
![Page 19: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/19.jpg)
01:36 AM 19
Megabytes/Gigabytes
![Page 20: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/20.jpg)
01:36 AM 20
How many pictures?
![Page 21: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/21.jpg)
01:36 AM 21
Featured Image
A featured image represent the contents, mood, or theme of a post or page.
![Page 22: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/22.jpg)
01:36 AM 22
Note
If your featured image doesn’t appear after following the instructions above, please make
sure that it meets the size requirements
![Page 23: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/23.jpg)
01:36 AM 23
Removing a Featured Image
![Page 24: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/24.jpg)
01:36 AM 24
Feature Headers
Featured Header only works with themes that allow custom header images and have featured
header images enabled.
![Page 25: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/25.jpg)
01:36 AM 25
Themes that support Featured Headers
![Page 26: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/26.jpg)
01:36 AM 26
Gallery
TIP:
If you have trouble creating a gallery in your post, try entering the title and saving it as a draft before you upload any images.
![Page 27: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/27.jpg)
01:36 AM 27
Cont
act F
orm
s
![Page 28: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/28.jpg)
01:36 AM 28
Widgets!
![Page 29: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/29.jpg)
01:36 AM 29
Widgets
Widget is a fancy word for tools or content that you can add, arrange, and remove from the sidebar(s) of your blog.
Depending on the Theme that you are using, Widgets might appear to the right, the bottom or both the right and bottom of your webpage.
![Page 30: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/30.jpg)
01:36 AM 30
Widgets can be configured to appear only on certain pages (or be hidden on certain pages) by
using the Visibility panel.
Widgets
![Page 31: Web design basics_04](https://reader036.vdocuments.us/reader036/viewer/2022062418/55532142b4c905a7778b4cf9/html5/thumbnails/31.jpg)
01:36 AM 31
WidgetsVisibility is controlled by five aspects: page type, category,
tag, date, and author.
For example, if you wanted the Archives widget to only appear on category archives and error
pages, choose “Show” from the first dropdown and then add two rules: “Page is 404
Error Page” and “Category is All Category Pages.”