Home »
Home > dreamweaver cs4
Part 2.2: Adding Other Images to your Web Page
To add images into the main body of your web page you should use the same technique described above. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.
Place the text cursor where you wish to insert the image and select ‘Insert > Image’ from the menu. The same adjustments to the ‘H Space’ and ‘V Space’ can be made by adjusting the values in the ‘Properties’ panel.
You can also align your images to the right or left of your text. When you insert an image into the text it will probably similar to the image below:
You can align your images so the text flows all around them. To do this, select the image by left clicking it once. In the ‘Properties’ panel you should see a drop down menu entitled ‘Align’, it should be set to ‘Default’. Click the drop down menu and select ‘Left’.
The image should be aligned to the left with the text flowing around it like the image below:
To align the image on the right, select ‘Right’ from the ‘Align’ drop down menu in the ‘Properties’ panel.
Adjust the ‘H Space’ and ‘V Space’ values until you are happy with how the image displays.
When you are happy with the images you have added, save and publish your web page.
You should always test the changes you have made by pointing a browser at your site. Different browsers (Internet Explorer, Firefox & Opera are a few examples) sometimes display the same web page slightly differently. You should test your web page in as many browsers as possible to ensure that it displays correctly in all of them
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
Part 3.3: Changing the font size
This section describes how to make your text larger or smaller. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.
Different methods are described for one-off changes to small blocks of text, and changes to size that you want to make for a whole class.
One-off changes:
Select the piece of text you want to change the font size for with the cursor
In the Properties pane at the bottom of the screen, click on the CSS button (see picture)
The “Size” field will be set to 100% by default.
Change the font size to 150% and press enter
The “New CSS Rule” box will appear again, so create another new class called “largertext” and save it to your “twoColLiqLtHdr.css “ stylesheet in the Rule definition box as before.
This may seem a long winded way of changing text size now, but once you have all of the classes you need for your site set up it is a much easier and tidier way to work.
Size changes made to a whole class:
Place your cursor within a large block of text that you applied your “coursedescription” style to earlier.
Now open up the “CSS Styles” panel on the right hand side of the page again (as described above) and double-click on the font-family line to open up the CSS Rules Definition box
Change the font size to 90%
Press OK
All text in the coursedescription class will now be reduced to 90% size
Note that in addition to the font size, you can also make changes to the font weight (e.g. bold), style (italic) of your class – along with a range of other options.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
Part 3.4: Different Coloured Text
If you would like to change the font colour for a whole class, you can open the CSS Rule Definition box from the CSS Panel as described above. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
Simply place your cursor within text that has that class applied to it, double click and change the colour in the Rule Definition box.
When you hit OK, all of the text in that class will be updated to the new colour you’ve chosen.
However if you want to change the colour of a small piece of text without changing the rest of the class:
Select your chosen piece of text with the cursor.
In the Properties panel at the bottom of the page, click on the CSS button (if not already selected) and click on the colour box to the right of the size options (see picture)
dreamweaver-training-9
Now pick a colour from the palette and create a new class as before with a clear name – for instance “redcoursedescription” if you’ve changed the text to red. Again, make sure you select the twoColLiqLtHdr.css stylesheeet in the Rule Definition box.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
Part 3.5: Making bold or italic text
Unlike changes to font, size or colour, you can make text italic or bold without changing the whole class or creating a new one. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.
Highlight the text you want to change
In the properties panel at the bottom of the page, make sure that the HTML button is selected on the left and simply click on the “B” (for bold) or “I” (for italics) buttons as required. (see picture)
Alternatively, you can just use the keyboard shortcuts CTRL + I or CTRL + B just as you would when using Microsoft Word.
Note – on a Mac, use CMD in place of CTRL
Saving your work
Once you’ve finished making all of the changes you want to your font styles, sizes and colours, and have created all of the classes you need, go to File > Save All to save your work.
Make sure you select Save All and not just Save, as in addition to the index.html page, Dreamweaver has also been making changes to the “twoColLiqLtHdr.css” stylesheet
Publish the site – ensuring that you include all dependent files
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
This chapter concentrates on how to change the default white background of your website. This includes changing the colour of selected areas of your website, and the option of adding a background image as the backdrop to your website. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
Basic Things to Note About Changing Colours or Adding Background Images
Before we can begin, there are a few important things to take into consideration:
1: Colour contrast: Make sure that when you change the background colour of your website it is best to choose highly contrasting colours. Try not to put red words on a blue background (or vice versa), grey words on a black background or yellow words on a white background as this will make it very hard to read.
2: Make Sure Background Images Do Not Interfere with Foreground Text: If you’re adding a background image, make sure the image does not make it difficult for visitors to read your page. Background colours and images are merely the backdrop to your main content, so be careful not to distract visitors to what your website is actually about.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 6th, 2009 | No Comments »
Part 4.1: Changing the Background Colour or adding a Background Image
Load Dreamweaver CS4 and double-click the “index.html” file in the FILES pane. You should see the two column layout that we created in Dreamweaver Training Part 1, a site logo and graphics that we added in Dreamweaver Training Part 2, and customised font settings made in Dreamweaver Training Part 3.
Take a look at the background colours of your web page as it currently stands. There are a few set colours already in place; the header, footer and side bar have different shades of light grey, the main content has a white background, and the background behind the two columns (page background) has a dark shade of grey.
Changing the Page Background
Click anywhere on your page.
In PROPERTIES at the bottom of the Dreamweaver window, click the button that says “Page Properties”.
A dialog box entitled “Page Properties” will appear. You can either:
- Change the Background Colour: Click the square box beside the word “Background color”. A colour picker window will appear, allowing you to change the colour. Click on the colour you desire. If you decide that you really don’t want to change the colour after all, hit the ESC key on your keyboard. When you’re satisfied, click the “OK”. Your web page background should automatically have changed colour.
- Use a Background Image: make sure an image has been saved into your “images” folder. Then, in the Page Properties dialog box, click the “Browse” button.
A dialog box with the title bar reading “Select Image Source” will appear. Double-click the “images” folder in the dialog box. Select the picture you require for your background. Once your image is selected, click the “OK” button.
The background image file and folder name should now appear in the “Background image” field.
Click the down arrow for the “Repeat” field (underneath the “Background image” field). If your image is small, and you want to duplicate copies of the image to fill the entire window, click “repeat” in the drop down box. If you are happy with the size of your image, and you do not need to duplicate it, click ‘’no-repeat’’. You can also make the image tile horizontally (“repeat-x”) or vertically (“repeat-y”).
Remember, you can view your web page with the changes you selected without leaving the dialog box. If you clicked “repeat” but are not sure whether it looks good for your site, click the “Apply” button at the bottom of “Page Properties”. In the background, behind your dialog box, you should be able to see your page with the changes. If you’re not satisfied with it, just change the repeat pattern and click “Apply” again. When you’re satisfied with your choice, click the “OK” button.
(Note: if you decided you no longer require a background image, and have clicked ‘’Apply’’, clicking ‘’cancel’’ will not undo your change. To do this you will need to click the “Background image” field and use the DEL or backspace key to remove the filename and folder.)
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
Part 4.2: The Dreamweaver CS4 Status Bar
The Dreamweaver status bar needs to be introduced before we can configure the background of the rest of the page. You can learn all these techniques with a qualified trainer on our introduction to Dreamweaver course in Brighton, Sussex.
First put the text cursor somewhere in one of your paragraphs in your side bar.
Locate the status bar. It is located near the bottom of the Dreamweaver window, just between your web page and the PROPERTIES panel.
The status bar is important if you want to customize your website’s appearance. It allows you to select entire blocks in your web page so that you can change things like colours, fonts, etc, of whole sections of your page in one go. The left side of the status bar contains the following ‘’Tags’’ – “<div#container> <div#sidebar1> <p>”. These ‘’tags’’ will differ depending on where you clicked onto the page, and how big your Dreamweaver window is.
Clicking each tag will select a different block enclosing the spot where your text cursor is in.
The “<p>” refers to a “paragraph” in the underlying code of your web page.
The “<div#sidebar1>” tag when clicked, selects the entire left column.
The “<div#container>” tag when clicked, selects both columns and the header and footer.
Each tag indicates a block of items on the screen. The “<p>” block is designed to hold a single paragraph of text.
The “<div>” tag is needed when the side bar contains words, pictures, lists of items, etc.
Other tags are also visible when you click in different sections of your page. If you click the header (the top horizontal bar where your website name is) notice that your company name displays the “<h1>” tag. This is enclosed inside a DIV block (“<div#header>”).
Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver course.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
Part 6.3: How to Change the Colours of the Spry Menu Bar Widget
To change the colours of the Spry Menu Bar Widget when its set to its default configuration, you will need to click somewhere in one of the menu buttons and select the “<a>” item on the status bar. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
Double-click either the “background-color” line in the CSS STYLES panel or the “color” line. If you double-clicked the “background-color”, the CSS Rule Definition dialog box will open to the background section allowing you to choose any colour from the colour picker.
If you have double-clicked the “color” line instead, the same CSS Rule Definition dialog box will appear, but it will open to the “Type” section. This will allow you to change the colour of the text when the mouse is hovering over the button.
If you want to change the colour of the menu bar when the mouse is not hovering over the button is to do the following:
1. Expand the FILES panel on the right side of Dreamweaver (if it’s currently collapsed). Doubleclick the “SpryAssets” folder in the list below, then doubleclick the “SpryMenuBarVertical.css” file to open it.
2. The CSS code that controls the appearance of your vertical menu bar will be displayed.
Click “Edit > Find and Replace…” from the menu. A dialog box, called “Find and Replace”, will appear. Type “ul.MenuBarVertical a” into the “Find” field, and click the “Find Next” button.
In the background of the window, Dreamweaver will highlight “ul.MenuBarVertical a” in the document. Click the “Close” button on the “Find and Replace” dialog box.
3. In the right side of the CSS STYLES panel, look for ‘Properties for “ul.MenuBarVertical a”‘.
Directly underneath you should be able to see “background-color” and “color” options.
To change them, click the square colour box beside the item and the colour picker tool will be displayed.
4. Click “Window > index.html” to return back to your main web page. Do NOT click the “X” button as your work has not yet been saved and all customisations will be lost.
5. If you decide to change the colours at any point, click “Window > SpryMenuBarVertical.css” again to switch back to the CSS file. If you have not moved your cursor or anything like that you should be able to change the colour as before from the CSS STYLES pane.
Saving, Publishing and Testing Your Work
Once you are happy with the changes that have been made click “File > Save All”.
To publish your work click “Site > Put” as before. When done, open a web browser and try out your menu. Remember, if you click any of the menu items, you will no doubt get an error message. This is fine because we haven’t created other pages on the site.
Congratulations! You have successfully added a professional-looking menu bar to your website, completed the home page, and mastered nearly all the skills and tricks of using Dreamweaver for designing ordinary web pages.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
