MostarNetworks

By now, you must have explored making a new page from templates or editing pages you liked. If you have not it makes no difference. Use Dreamweaver to setup basic page elements and produce css to go along. You would be surprised how much it can be done before even having to write or see a single line of code.

Since the topic is Page Properties and we need a page to work with then go ahead and make new document by going to: File --> New (Ctrl+N) and choose Page Type of "HTML" and Layout of "" while hitting Create button.

 

You are now presented with clean and blank page. Although we have not done much work we should save this document and now is good time as any other. It would be only appropriate to call it "Index.html" being how it is our first page. Your landing page on your 'live site' can be called "default.html" or "index.html" depending on how your host/server is setup. Now, let's use the magic setting of page by going to Modify --> Page Properties (Ctrl+J) where you should be presented with the window as seen on image below.

 

Immediately you will notice that there are 5 Categories of settings:

• Appearance
• Links
• Headings
• Title/Encoding
• Tracing Image

So let's break it up into sections and see what each category setting can do for us. Most of the settings should be pretty intuitive while I hope you can pick up a few tips from the following.

1. Appearance

How to set the default font?

First three choices deal with text format we want to use throughout the page. For the sake of the tutorial choose the same settings as seen on image.

Done. You don't have to worry about setting the font and colors ever again, just type away and your text will remain consistent.

How to set image as a page background?

Now we tackle the background of our page and we can simply choose the color we like or browse to choose the background image. How big of an image you choose it is up to you but generally you would want to avoid large images in order to dodge the long load time of your page. Most of the time you would strive to use an image that is some form of a pattern. If you like use one the of images below:

Here is another great property/option of "Repeat" that goes in hand with using our background image.

In case you have not noticed, a this point you are successfully using Dreamweaver to design with CSS . Repeat property can have one of the following 4 values: no-repeat = as it sounds image will be show just as its original size is and will be placed with the respect to you whole page and in the upper left corner. (see Example #1) repeat = image will be repeated vertically and horizontally - filling the whole page and creating a "tile" effect. (see Example #2, Example #3) repeat-x = image will be repeated only horizontally. (see Example #4) repeat-y = repeated vertically.(see Example #5) There you have it, you just learned how to set background image for your page!

How to remove spaces around the page?

As you have seen in examples have just entered some text to give a bit of perspective of the page look. Clearly there is a bit of space (padding) around our page. Don't worry, next, we will make our page be a "full screen" or use the padding to "center" our content. Best of all we can do it at the same Appearance dialog box. To remove all spacing around your content enter the 0 (zero) pixel value in all of the padding fields (left,right,top,bottom). Apply the settings and you are done, you content will no longer have the annoying little spacing around it. On the other hand, you can adjust left and right padding values to "center" your content. You can choose fixed value/size and use pixels "px" as measuring units to accomplish this. Personally, I prefer using percentages "%" because this will ensure that no matter what the screen resolution visitor is using it will scale along. In other words I have chosen settings as show on the image below:

 

Essentially this will always ensure that 50% of the page seen will be dedicated to content while 25% will be used on left and right side of content to maintain the spacing/padding. Changing these values will give the impression of page 'getting wider'. Adjust padding values to your liking and save your "Index.html" page. Let's move on the next category.