YHSCS :: Web Design :: Lessons :: Positioning and Links

Web Design :: Lessons :: Lists and Background Images

Lists

Tag Definition from W3 Schools:
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Use the <li> tag to define list items.

A common task on a web page is to create a list of items. There are two main types of lists we will discuss and later in the semester we will learn how you can create a menu using a list.

An ordered list is a list that follows a certain numerical order or ranking. All of the lists on this web page lesson our ordered lists. The list will display a number or letter for each item in the list. Each item in a list is referred to as a list item.

Go to Insert>HTML>Text Objects>Ordered List to add an ordered list to your page.
Type some text to create the first list item.
Press "Enter" and add at least two more list items.

Tag Definition from W3 Schools:
The <ul> tag defines an unordered (bulleted) list.

Use the <ul> tag together with the <li> tag to create unordered lists.

An unordered list is also known as a bulleted list because it uses bullets instead of numbers or letters.

Go to Insert>HTML>Text Objects>Unordered List to add an unordered list to your page.
Type some text to create the first list item.
Press "Enter" and add at least two more list items.

Once you have created a list you can modify its appearance using CSS. With an ordered list you can change how the numbers look and with an unordered list you can change the look of the bullets using the list-style-type property.

Add a new CSS class and call it "listStyle".
Add a property for list-style-type.

The following are the list style types you can use:

Unordered Lists:

disc
circle
square

Ordered Lists:

decimal
decimal-leading-zero: Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
lower-roman: Lowercase roman numerals (i, ii, iii, iv, v, etc.).
upper-roman: Uppercase roman numerals (I, II, III, IV, V, etc.).
lower-greek: Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)
lower-latin: Lowercase ascii letters (a, b, c, ... z).
upper-latin: Uppercase ascii letters (A, B, C, ... Z).
armenian: Traditional uppercase Armenian numbering (Ա, Բ, Գ...).
georgian: Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
lower-alpha: Lowercase ascii letters (a, b, c, ... z).
upper-alpha: Uppercase ascii letters (A, B, C, ... Z).

Textured Backgrounds

Textured backgrounds are an alternative to using solid colors, gradients, or pictures as the background of your website. Pictures can be very difficult to use effectively on a website because of the variances of web browsers and the fact that text can be hard to read if care is not taken when choosing a background picture.

You could make your own textured background in Fireworks or Photoshop, but it can be hard to get the texture to line up correctly when it is repeated. There are a lot of sites on the web, though, that provide background textures for free so a search engine is probably your first stop when you plan to use a background texture. Simply search for "background texture" and you will find hundreds of results. One good site to find a lot of background textures is CG Textures. You can find seamless textures on the site by searching for "tiled."

Download an image from CG Textures to your lesson folder.
Add a new CSS rule for the <body> tag.
Change the background-image property to the texture you downloaded.
Finally, change the background-repeat Property to "repeat".

You can also choose to have your background repeat along the horizontal or vertical axis. Choose "repeat-x" to make the background repeat across horizontally or "repeat-y" to make it repeat down vertically.

Full Size Backgrounds

Adding a background image that spans the screen is tricky for web design since the size of the screen can be vastly different. However, the following CSS properties will let you create a full-size background image. Dreamweaver does not have this ability built in so you will have to add the following properties manually to your stylesheet.

-webkit-background-size:cover;
background-attachment:fixed;
background-image:url(images/background.jpg);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;