Modifying the design of a site

We will continue using our site that we updated the content of. First we will change the background of the site. You have to click on the new CSS button in the right-hand toolbar and a dialog will pop up.

You can make class selectors which will modify any HTML element that you append the class to, redefine HTML tags to only modify certain HTML elements, and use CSS selectors to modify when links are rolled over, visited, or unvisited. For the background we want to redefine an HTML tag so that is what we select and in the drop-down list we select the body tag to modify. We then select that to create a new style sheet file. Then click Ok.

Another dialog will appear asking you to choose where to save the new file. You will want to save it in the same area that your site is saved. You can then name the CSS file and make sure that it is saved as type Style Sheet Files (*.css). Then click Save.

The next dialog that will appear will allow you to make the changes to the body tag. In this case we want to select the background from the list, then we select a color for the backgorund from the palette. You can also make your own color using the custom palette. If you would like to use an image for a background then you can browse for an image and use that for the background. By default the web browser will tile the image across the page to fill it up. If you would like to modify how the image is tiled you can change the options under Repeat. The options are repeat-x, repeat-y, no-repeat, and repeat. Repeat-x will repeat the image along the x-axis or horizontally across the page. Repeat-y will repeat the image along the y-axis or vertically down the page. No-repeat will not allow it to repeat and repeat allows it to repeat but you do not need to select it since it is the default option.

You can also position the image in a new location using the Vertical and Horizontal Position options.

Using these steps over and over we can create multiple designs for our sites.

Here is what our site looks like now.

We can update links, insert pictures, or update the text.