Download Welcome to the My Place, My Space ICT tutorial for Web page

My Place My Space ICT Tutorial for Web Design part 2
Illustrated 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
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
2
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
3
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
4
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
5
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
Navigate to the images folder and click on the banner image, click 'Ok' then
'Apply.'
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
6
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
13_Creating Hyperlinks
We 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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
7
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
8
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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'.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
9
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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,
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
10
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
select the appropriate image. Add the 'alternate text' for the
image, and browse to the image using the long description folder icon.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
11
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
12
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
13
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
16_Saving and previewing the Webpage
Now 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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
14
My Place My Space ICT Tutorial for Web Design part 2
Illustrated Transcript
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.
bbc.co.uk/myplacemyspace/teachers/ict-technical-help/
15