welcome to the my place, my space ict tutorial for web...

My Place My Space ICT Tutorial for Web Design part 2Illustrated Transcript

8_Introduction to web page design

Welcome to part 2 of the My Place, My Space ICT tutorial for Web page design.

The aim of this tutorial is to show you how to layout and populate web pages within Adobe Dreamweaver.

In part 1, we showed you how to create a website to promote 'A Great Day out In Bangor' using Dreamweaver. We will now finish our five page website by enhancing the design of the template using style sheets. We will insert text and graphics into the HTML pages and create a site navigation using hyperlinks. It’s a good idea to have your site map handy to help you construct your web pages.

bbc.co.uk/myplacemyspace/teachers/ict-technical-help/ 1


9_Creating a web page

We will add a new webpage to our site and change its style settings. Select 'more' from the 'Create New' menu. This will open the 'New Document' inspector window. Make sure the new document is a 'Blank Page' and that 'HTML' is selected in the 'Page type' menu. Then choose a suitable layout from the 'Layout menu'. Consider how many columns your webpage will need. Remember, it helps to roughly sketch out the layout of your page before you start building.

We've chosen the 'three column layout' with 'header and footer' template for this page.



10_Editing the CSS

If you look at the task pane on the right hand side you will see a 'CSS styles' tab. This contains the 'Cascading style sheet', which lists the settings for the look and formatting of the page. We can edit these settings by clicking on any of the individual 'rules' within the pane.



11_Setting the fonts & colour screen

Double-click the Body 'rule'. This brings up the 'CSS Rule definition Inspector window.' Use the 'Type' category to view and set the font for the web page. Select the 'Background' category to select and change the background colour of your webpage.

Simply click on the coloured square beside 'Background-colour' and use the dropper to select your colour and click 'apply' and 'ok'. Scroll down the page to see if you have chosen an appropriate colour. If not, return to 'CSS Rule definition Inspector window, select the background category and chose an alternate colour.



12_Adding a Header or Banner

Now it's time to add a header or banner to our design.

Double click the #header 'rule' in the 'CSS Styles' task pane. This brings up the 'CSS Rule definition Inspector window.'

Select the 'Background' category. Click on 'browse' to select a background image for the header.

We've already created a banner in image editing software and saved it to the 'images' folder in the 'local site folder'. We wanted to include the logo and slogan in the banner so we made it run the full



width of the page and used the Dreamweaver default measurement of 780 pixels.

Navigate to the images folder and click on the banner image, click 'Ok' then 'Apply.'



13_Creating HyperlinksWe are using the left hand column of the page for our navigation.This area will provide links to the other pages in our website.

First we need to type in the name of the pages we will be linking to within the site.

Next we need to link each page name to the correct page using the 'Properties' task pane. Select the 'target icon' beside the link field.



Click, hold down the left mouse button and drag the arrow to the corresponding page in the 'Local Files' menu in the Left-hand corner. Alternatively, you can type the name of the page into the 'Link' field. Repeat this process for all your page names. Now you have successfully created 'hyperlinks' between your pages.



14_Adding Images

Now we are ready to place some images in the right hand column of our webpage. Select where you want to place the image then click on the small square picture icon in the 'common' menu bar, this is the 'Insert Images' icon.

The 'Select Image Source' Inspector window will now appear. Navigate to the 'Images' folder, select the appropriate image and click 'ok'.



This will bring up the 'Image Tag Accessibility Attributes' Inspector window. Add the 'alternate text' for the image, this should be an alternative for the image when it cannot be seen, describing or stating its purpose. Next, click on the folder icon beside the long description field and navigate to the image and click 'OK'.

Ideally, you will have manipulated the image in an image editing software package and saved it for web using the correct dimensions. However, if your image is too large for the page, you can resize it using the 'Properties' task pane at the bottom of the screen. Just change the dimensions in the width and height fields.

Repeat the process to place another image. Select where you want to place your image, use the 'Insert Images' icon. Navigate to the



'images' folder, select the appropriate image. Add the 'alternate text' for the image, and browse to the image using the long description folder icon.



15_Adding & Linking in the main content

Now we will focus on adding and formatting text. The dashed outline indicates the outline of the textbox. Just click inside the box and start typing.

First enter your heading, this should tell the viewer about the contents of the page and should be in a larger font size than the main body text. Next add your body text. It is good practice to create hyperlinks within the text. Simply highlight the word and click and drag the 'Target icon' arrow to the corresponding page in the 'Local Files' menu.



Once you have entered all your text, added all the required links and are happy with your design, continue through the site populating the other pages.



16_Saving and previewing the WebpageNow you're ready to save your site. Simply go to 'File' menu and select 'Save All'.

To preview your webpage in a web browser select the world symbol on the page menu, this is the 'Preview in Browser' icon. Select 'Preview in Iexplore'.

Your finished design will then open up in a new browser window. This will demonstrate how the site will look when viewed online.



When you are happy with the previewed version of the site you are ready to upload it to a live server. To do this, you will need to create a 'Site Definition' and fill in your server details. Your ICT advisor will be able to help you with this final task.


welcome to the my place, my space ict tutorial for web...

Documents