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. {pagebreak}

2. Links

How to change links colors?

This category is is self explanatory and for the most part choose the color combinations you like. If you skip this section or leave it at "default" your will be fine. I decided to change a few things:

This will make out page that much more unique and help us carry a theme or concept of interactivity. Since we are on the roll let's define few more things that are 'text related'.

3. Headings

As the name implies there are settings for your text headings, used for emphasis such as Article Title, Paragraphs, Intros or any type of heading. For the sake of tutorial choose settings for at least a few of them. Here are the ones I chosed:

 

4. Title/Encoding

Another easy category to miss but equality important. Here is where you declare your page title (visible at top/blue part of your browser) and character type that matches your language choice. For our mission, there is no need to get into this discussion but feel free to get as technical as you like and read more on www.unicode.org/reports/tr15.

5. Tracing Image

This is NOT an HTML element but rather a Dreamweaver feature where you can use single image (perhaps a screenshot) of your layout/design as a tracing paper. It is handy only while using WYSIWYG feature as it gives you a visual guide for you to place your tables and div elements. In other words, you can not publish what you see.

And there you have it! All this prep work was done before we even designed a single page...or have we? Well, let's see it in action.

6. Apply and Test

Now you are ready to add some content so go ahead and type up some text. If you are not too sure what to write or simply just looking to create a template or test page then go to http://www.lipsum.com and generate a few Lorem Ipsum paragraphs of text that you can use and paste it into you page. Make sure you are only pasting the text not the format taken from the site. To ensure that you do so paste you text into a simple text editor (such as notepad) to remove any formatting and then copy paste it into Dreamweaver page. If you remember we have created a few heading and links settings earlier so let's see how they look. Select a sentence or part of text that assumes the role of a headline and then turn to your Properties Window and if not visible (Window --> Properties or Ctrl+F3). Now from the drop-down list choose your formatting (remember we only defined 3 of them).

Next let's turn some words or text into links - again by selecting some text and then turning to our Properties Window. In the (you guessed it) Link Field enter your URLs of pages or simply a pound sign "#" to create a dummy links. Save your work and check it. Here is how my & your page turned out. Now what? Now you are ready to tackle the subject of Layouts and objects that compose more complex designs.

Learn how you can save time as well as keep consistency in your work by using Layer Styles. In this example we will demonstrate effects of "Thin Borders", "Raised/Beveled", "Drop Shadow" and "Color Overlay" effects and how combined can be applied as single layer style.

1. Create a new layer or use a shape

You can start of with the blank document and create an empty layer but we will use a simple shape so we can test drive our Layer Style immediately. To follow us along open the file called "Star Shape.jpg" and grab the Magic Wand tool and click on our black part of star shape to select it. You can experiment with ‘white parts’ of this shape but to select all of them you need to hold down Shift key and click on each white part inside our star. For now, let’s focus on black. Now go to Edit—> Copy then Edit—> Paste to create a new layer containing your shape. Double click on this layer and let’s add a few effects. Here used are:

2. Drop Shadow Effect

3. Bevel and Emboss ("Raised Effect")

4. Color Overlay

Color used was #FE870F.

 

5. Stroke ("Thin Border")

Click "OK" to apply your new Layer Style. You have done all this work to create these effects so why go through this again if you like the end result. You don’t have to, just flip the page! {pagebreak}

6. Define your Layer Styles

First ensure that your Styles tab/window is visible by going to Window—> Styles. Next, click on the little arrow button at the top corner of this window to toggle menu bar and choose New Style…. Name it something, in our case "MostarNetworks Style".

If you had any (default) style loaded you can now Right-Click—> Delete Style to delete all existing styles. Go back to you art work and double click on the layer on which you appled all the effects earlier. Click on "New Style…" button and name your style, mine ended up named as "Raised Borders".

Forever Stored and never to be repeated! You do not have to have multiple effects to create a layer style. Consider using just "Color Overlay" effect to perhaps save a custom set of colors that are used in one project. All style are stored locally in folder: "C:\Program Files\Adobe\Photoshop 7.0\Presets\Styles" or what ever is relative to your installation. Here is how my ‘star shape’ looks after this style is applied:

 

....I also created an additional style and applied it to ‘white parts’ of the star shape on a whole new layer.

As you can imagine, you can get pretty crafty with your style and quickly carry over the same theme to other objects and shapes in your design.

You may use the styles you downloaded with this tutorial without any restriction.

Here is a quick way of creating ‘rounded edges’ look that is well liked in web design community. You can use this technique to create table or layer backgrounds, tabs, buttons and just about any shape that requires a smooth curve. Photoshop is not the only application that you can use but it sure makes it easy to produce sharp looking design.

1. Gaussian Blur effect

Start of by going to File --> New and create image with dimensions of 300x300px. Now go to your Main Toolbar and choose Rectangular Tool with the foreground color of your choice (here used was black) and create a simple rectangular shape. Then choose Layer --> Flatten Image to do so on our newly created shape/layer.

Next, we will apply Filter --> Blur --> Gausian Blur with the Radius Value of 5.0

2. Adjusting Levels

This gave us a bit much of blur so we need to ‘gain back’ some of it by adjusting Levels.

Go to Layer --> New Adjustment Layer --> Levels and enter values of [110] [1][130]



You can now flatten the image again and save it. Naturally, mine is called ”Rounded Edges.jpg”.



That is it!

Now, having this shape in black color it not really all that exciting. If you used you own color you will notice that it has changed, reason for this being is that we changed the green levels down to value of 1 making it almost non-existent. So let’s use Photoshop for one more minute and decorate our shape....jump over to next tutorial and read Create and Manage Layer Styles.

One of easiest ways to add some dynamic life to your web page is by using Dreamweaver set of built-in features called “Behaviors”. In our example we will use behavior called ‘Show-Hide Layers’ to make a small photo album but the technique can be applied to any site that showcases products or just as another way of showing information dynamically. Using Dreamweaver is all you will need so put away your heavy books and stop your database server. Before we begin you may wish to download files (466.89 Kb) used in this tutorial and follow along.

1. Creating a basic layout and inserting layers

Start fresh by creating a new document File -> New -> Basic HTML Document.

Next we will tackle the basic idea of our layout and where we want to display our photos.Insert a new layer by going to Insert -> Layout Objects -> Layer and double-click on its name to rename it into ”Thumbnails”.

To view Layers Tab go to Window -> Layers (F2) and while you are at it Window -> Insert tab is available.

Next we will Draw a New Layer right next to the one we inserted. Go to your Layout tab and while in Standard Mode click on the icon to select the ’Draw Layer‘ tool. Name this layer “Greeting” as it will be used to show a quick message to our visitor.



Layer “Greeting” will hold only a few lines of text so there is no need to make it overly large in height. Click inside of it and type in some instructional text such as “Move your mouse over the images to view them in full size”...or whatever makes sense to your project.

Right under this layer draw another layer and name it ”FullSize-1”.

And you are right, this layer will hold our 1st larger image related to the the thumbnail images we are going to place in the very first layer we made ("Thumbnails").

To the right of this layer lets draw another called ”FS1-Info” where this layer is going to be shown along the full size image and will hold some extra info about our image.

Right about now would be a good time to save your document as you are done with your basic layout.

Here is how your layout and layers should look by now:



Being how our photo album will have 3 images lets create last 2 layers that will hold or ‘large images’ and name them in the convention we established in first step.

In other words create layers “FullSize-2” and “FullSize-3” and try to position them right on top of the initially created “FullSize-1” layer.

Repeat the same process to add corresponding ‘info’ layers ("FS2-Info" and “FS3-Info") while trying to place them over “FS1-Info” layer we used in our basic layout.

You can select layer and then adjust its position on “Properties” tab to position them to the pixel.

If everything went well you should be done with your entire layout and have 7 layers at your disposal.



{pagebreak}

2. Inserting Images and Hiding Layers

Congratulations! You are more than 1/2 through this tutorial. Now lets insert some of your photos and start by clicking inside of layer “Tumbnails” and insert all 3 thumbnail images (tumbnail_1.jpg, thumbnail_2.jpg and thumbnail_3.jpg).

Next we will insert our 1st ‘full sized’ image (image_1.jpg)into layer called “FullSize-1” and then click inside layer called “FS1-Info” and type up some text related to our image. Now you see how taking your time to name layers is starting to come in handy .

Now we can hide layers “FullSize-1” and “FS1-Info” as we done with them and we focus on the rest of the images and layers involved. To hide the layer you can select it and then in the Properties Tab set its visibility to ‘hidden’.



Repeate the same steps for the remaining 2 of our full sized images placed in layers “FullSize-2” & “FullSize-3” while describing images in thier respective “FS2-Info” & “FS3-Info” layers.

At this point all of your layers should be hidden with the exception to “Thumbnails” and “Greeting” which you set to ‘visible’ - your layers should match to ours in image below:

3. Applying Behaviors to Thumbnails

In our last step we going to start applying Behaviors to our thumbnail images but before that is even possible we nee to turn our thubnail images into links. The easiest way to so is selecting the image and then in Properties Tab into the Link field enter “#” .



With the image still selected you can now go to Behaviors Tab (Shift+F4) and click on the ‘+’ icon to apply a behavior of your choice.



In our example we will use “onMouseOver” and then set the 2 related layers to ‘visible’ (FullSize-1 and FS1-Info) while setting the rest to hidden.



Don’t forget that we are not going to touch those 2 visible layers (Greetings and Thumbnails) at any point.

Now we have to take care of what happens ones user moves the mouse away from thumbnail. For this we are going to apply second set of ‘Show-Hide Layers’ Behaviors and put all the layers back to their initial state of being hidden. Change the default behavior to “onMouseOut” and save your work.

If all went well your page will now look like ours Example #1.

You are done with the backbone of this tutorial.

Now, repeat the step number 3. for the last two thumbnails.

In essence:

tbumbnail_2--> onMouseOver --> Hide: FullSize-1,FS1-Info, FullSize-3, FS3-Info

--> Show: FullSize-2, FS2-Info

--> onMouseOut --> Hide All

tbumbnail_3--> onMouseOver --> Hide: FullSize-1,FS1-Info, FullSize-3, FS2-Info

--> Show: FullSize-3, FS3-Info

--> onMouseOut --> Hide All

Save your work and celebrate - not a single time have you had to hand code your page.

Your final page should be close to ours that you can see HERE.

Of course our layout is not very exciting but don’t stop here and explore what a few CSS decorations and mix of the same behavior can do for your design. See another Example #2 in action.

There really is no ‘golden rule’ here...apply actions and experiment with using text links instead of thumbnail images and what you find pleasing.

With a mix of “onClick” and “onMouseOver/Out” actions possibles are endless and how you want the visitor to interact with your page is up to YOU!

To keep you motivated see this Example #3 of DW in action.