Part 2.1: How to add a logo to your Website
1: Create an ‘Images’ folder in your in your website directory. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
In the right hand panel in Dreamweaver you will see a section named ‘Files’. In this section there are two tabs, ‘Files’ and ‘Assets’. Select the ‘Files’ Tab.
In this tab you will see a list of the files used for your website “index.html” & “twoColLiqLtHdr.css”. We created these files in Part One of this tutorial.
To make the new folder right click just below the two existing files in your site and select ‘New Folder’ from the menu that appears. This will create a folder called ‘untitled’ – rename this folder ‘images’ by typing over the default folder name. Hit ‘Enter’ to complete this.
2: Copy your images in to your Images folder
Now we need to copy all the images you have created into this new folder, this is done without using Dreamweaver. To do this you need to navigate to the folder they are currently held in, select the images you want to use and copy them. This can be done by right clicking on the images and selecting ‘Copy’ from the menu that appears or by pressing ‘Ctrl + c’ on the keyboard when you have selected the images to copy.
Navigate to the ‘images’ folder you have just created and paste the images here. This can be done by right clicking in the ‘images’ folder and selecting ‘Paste’ from the menu that appears or pressing ‘Ctrl + p’ on the keyboard.
The images should now appear as icons in the ‘images folder’.
3: Open your Web Page
Go back to Dreamweaver and open your index.html file in the ‘Files’ panel on the right hand side of Dreamweaver. The page should open in Dreamweaver’s main window.
4: Insert the Image into your Web Page
When the index page opens the blinking text cursor should appear just to the left of your Website’s name in the Header. If it is somewhere else on the page , left click just to the left of your Website’s name to place the text cursor here, this is where we will insert the logo.
On the menu, click ‘Insert > Image’. A dialog box should appear containing a list of the folders in your website. You should see “_notes” and “images”. Double click the “images” folder to open it.
You should see a list of the images you copied here in step one. If you are unsure which image you want to use you can left click each of them and a preview will appear at the right hand side of the dialog box. When you have selected the correct image, click ‘Ok’ at the bottom of the dialog box.
Another dialog box entitled “Image Tag Accessibility Attributes” will appear. Insert “Example Company’s Logo” into the “Alternate Text” field.
The ‘alternate text’ is a description of the image. The text appears if a visitor looks at your site with the images disabled in their browser. The ‘alternate text’ is also indexed by search engines and read by screen readers for the visually impaired. You don’t need to insert anything into the ‘alternate text’ field but you should do to make your website accessible to the disabled.
Click the ‘Ok’ button at the bottom of the dialog box to continue (you don’t need to enter anything into the ‘Long Description’ field.
Your logo should now appear next to your site name in the header. If the image is too big or you want to change the image you can select it, hit ‘Delete’ on your keyboard to remove it. Repeat this stage to insert the new image.
If your logo is designed to fill the whole horizontal space of your site and your website name should be displayed below the logo, click the left mouse button in between the image and your site name. Press ‘Enter’ or ‘Return’ on your keyboard to move the site name below the logo.
If you don’t like how this looks you can do one of two things. To undo your last action select ‘Edit > Undo New Paragraph’ from the menu or press ‘Ctrl + z’ on your keyboard.
You can also remake your logo so it includes your website’s name. If you do this you can delete the text version of your site name. If you do this make sure you put your site name in the ‘Alternate Text’ of the image (ideally elsewhere on your web page as well).
5: Fixing the spacing between your logo and site name
If your logo fits beside your site name in the header it will probably be too close to the text. This can be easily remedied.
Click the image once to select it. At the bottom of the Dreamweaver window you will be able to see a panel entitled ‘Properties’. With your picture selected the ‘Properties’ panel will show a number of fields you can change to configure your image (see below)
In the ‘H Space’ field enter a value of ‘5’ and press ‘Enter’ or ‘Return’ on your keyboard. In the main Dreamweaver window you will see space has been added either side of your logo.
You can also adjust the ‘V Space’ value to add space at the top and bottom of your logo.
Change these values until you are happy with the amount of space around your logo.
6: Save and publish your web page
Select ‘File > Save’ from the menu to save your web page.
Then select ‘Site > Put’ from the menu. You have already set up your site in the previous chapter your web page should upload. Dreamweaver may ask you if you want to ‘Put Dependent Files’, if so select ‘Yes’. Dreamweaver will automatically upload all the other files (images, css) that this page uses.
You have now added a logo to your website.
