Change Text Style, Color, Font, Size
Edit the style of text---properties panel
B= Bold
I= Italic
Edit the color of the text & links----properties panel
Change the Background Color of the whole page
Click on page properties (bottom of the page)---
you can change the text color & background color.
Change the Sidebar Color
Sidebar color------click anywhere in the sidebar----bottom of the page-----click on tag <div#sidebar1>----properties panel-----click on “Edit CSS”
CSS panel should expand on your right hand column-----find background color-----double click it------edit the color.
(Note—this change CANOT be undo with the edit/undo option. You have to manually change it if you want it back to the default color.)Change background color of the Header and Footer
Click somewhere in the header. Locate "<div#header> in the status bar and click it.
Click on "Edit CSS"button----double click "background" in the CSS panel on the right side of your screen.
Again, there's no way to undo the change. with Edit----Undo.
Creating a Navigation Menu Bar to your web page
Move your cursor to the side bar.
Click Insert----Spry---Spry Menu Bar.
Select---Vertical---A default menu will be insert into the sidebar.
Click on the blue bar to open the properties panel.
Click & select "Item 1"---change the text to "Home" and proceed to edit the rest of the links.
By default, Dreamweaver creates a submenu for your menu, but we don't need one at the point, so we will delete it.
Delete Submenu
select the Item 1.1----click on "-" sign to delete item 1.1.
Save your work to W Drive and use internet explorer to see your page.
Customing the Spry Framwork's menu Bar Widge
Centering the Menu Bar
Ther's no easy way to do it, so we have to do it manually.
Copy the following text
<Style type="text/css">
ul.MenuBarVertical
{
margin: 0 auto;
width:8em;
}
</style>Switch to "Code" view, one the top of your active page.
Find </head>
Paste the copied text right before the </head>
Change the Color of the Menu Bar
Right side of your screen---File Panel, Find the correct drive---W drive or your jump drive.
Double click on the folder "SpryAssets".
Double click on the file "SpryMenuBar Vertical.css".A page full of codes will appear. This is the CSS Code for your menu bar.
Click on Edit ----Find and Replace----From menu, Type "ul.MenuBarVertical a" in the Find box.
Click ---Find next -(dismiss the dialog box when you're done)---Look to your right hand column.
Drag the light blue "Application panel" down and diplay the background color of the menu bar. Change the color to what ever you prefer.
Repeat the process, this time we are looking for "ul.menuBarVertical a:hover" (dismiss the dialog box when you're done).
Change the background color.
Save your work---make sure you click on "Save All", since you have made changes in 2 different files.
Make Your Webpage More Attractive by Using Graphics
You will need a small image to act as the logo of your website
You will need a small image to place on the top left hand corner of your web page. This image will serve as your site's logo. It will appear on every page of your website.
When creating your logo, note the following:
Try to keep the width and height of the image small. There are no fixed size stipulations for a logo, but if your logo is too wide or tall, you will have a hard time fitting it into your web page. If the picture you have is too big, try resizing it in your graphics software.
If you really have no idea what to put in your logo, just get a small graphic from the Internet.Adding Images to Your Dreamweaver Page
Put a copy of your graphics files in the same directory as the file you created for your website.At the top of the page is the name of your website. Place the text cursor to the left of the name. You will be inserting your logo at this position.
Choose "Insert | Image" from the menu.A dialog box will appear. You should see the image or images that you previously saved in the folder. If you have more than one images in the folder and are not sure which is the one you are going to use for your logo, you can click the name of the image once. A preview of the image will appear in the dialog box, making it easier for you to select the correct image.
Once you have decided on the image you want, select it by clicking on it once, and then clicking the "OK" button.
A dialog box will appear, asking you for the "Alternate text" for the image. This is basically a brief description of your image. The description will be displayed for visitors browsing with graphics disabled. It will also be the text that is read aloud by screen readers. The latter are used by visually impaired people visiting your website. Search engines also rely on the text, since they cannot "see" images either. It's wise to always give your graphics a brief description.
Since this image is merely your site's logo, you can either type into the "Alternate text" field your company's name or even just the word "logo" if you're lazy. Don't worry that the box is so small - it will scroll as you type.
Once you've typed your "Alternate text", click the OK button. Ignore the "Long description" field.
Your logo should now appear before your company name or your site name. If you find the logo is too big, and you want to redo it, simply click it once and hit the DEL key.
(Recreate your logo as needed, save it into the website folder and repeat the above procedure.)
At this point, you will probably find that the logo is uncomfortably close to the name of your website. To introduce some space between the logo and your site name, click the logo once to select it. At the bottom of your Dreamweaver window, you should a panel labeled "Properties" containing information about your image.
Locate the "H Space" edit box and enter "5" (without the quotes). Press enter.
Notice that some space has been inserted between your image and your website title. If you think 5 is too much or too little, you can experiment with other values in this box. Basically, a larger value means that more space is inserted, while a smaller value shrinks the amount of space between your picture and the surrounding material.
You've now added a logo for your web page, making it look slightly more professional.
Align the Text with the Graphic
Repeat the insert graphic process-----if you have a long paragraph, sometimes, the words do not exactly flow over to the right of the image. To make all the words appear to the right of the image, click the image. Locate the "Align" box in the Properties panel. It is currently set to "Default". Set it to "Left".
The image should now be placed completely to the left of the text, with the words filling in the space on the right.
If the image is too close to the words to your liking, adjust the "H Space" in the Properties panel as before. You can also adjust the "V Space" to change the vertical space between the image and the words. If you don't know what I mean, just experiment by setting some value like "5" (without the quotes) in the "V Space" box to see what happens. You can always delete the value again if you don't like the result.
Save your page with "File | Save".