dreamweaver

C

Soc omp

Dreamweaver Workshop

Introductory workshop on how to use Macromedia Dreamweaver to create your own website.

October 2003 , Rev 0

Fionnuala Gibney

C

Soc omp

What is Dreamweaver?

Macromedia’s Dreamweaver package is one of the website editors which try and make web site design just a little easier, and they seem to have succeeded.

It is a very well laid-out package, which is why it has become very popular to use for designing sites both with beginners and avid web designers alike.

C

Soc omp

Introduction

Firstly we’ll get familiar with the layout of Dreamweaver and then we’ll be creating our own sample website.

The sample we’ll be creating will be to describe your own favourite band.

C

Soc omp

View Types

Firstly we’ll notice that you have 3 different view options: • Design View (selected) • Code View • Code & Design View (split screen between both of these) We’ll be working in Design View.

C

Soc omp

Defining A Site

The first thing you need to do in creating a website is to “Define a site�.

Be sure that you are working on a blank white screen, i.e. a new page.

(If in doubt, just click on File > New to create a new page)

C

Soc omp

Defining A Site

When you define a site you are just telling Dreamweaver where you are going to keep all your files and what the name of your website is going to be.

This means you’ll be able to access all your files very easily and makes your website far easier to create and manage.

C

Soc omp

Defining A Site

Select Site and then Define Sites from your top menu bar.

Of the options available select New‌

C

Soc omp

In “Local Info” we’ll just give our site a name: “My REM Website”, etc. will do.

Naming Your Site

C

Soc omp

Selecting a Root Folder

Now we’ll create a folder to store all our site files in.

Click the folder icon.

C

Soc omp

Creating Your Root Folder

Select your U: drive and then click the “Create a New Folder” Icon: You can call your folder anything you like, “Website” would be a good start.

Then press Select

C

Soc omp

Dreamweaver should now create your file cache, you can select OK and then choose your site from the list and press Done

Defining Your Site

C

Soc omp

Your Site

Dreamweaver will now show you the list of files in your site in your “root folder�, initially none. You can look at this window as your site grows to see how your site links together and what pages you have created.

If you close this and wish to view it again, you simply click on Window and then Site Map from the top menu bar.

C

Soc omp

Your First Page

Now click back on the “Untitled” page in your Start bar.

Now we will save your first page into the root folder.

Click File and Save As… and save your page as “index.html” in your root folder.

C

Soc omp

Page Title

One of the most important things to do is to check the properties of the page you are creating. It lets you set the way you want the page to look. First set the title: eg. “My REM Site�

Then select Modify > Page Properties...

C

Soc omp

Page Properties Here we will set the: •background colour and •text colour Do this my clicking the colour chooser button beside the words:

C

Soc omp

There are also other option you can change here, we will look at some of them a little later on.

Page Properties We can then pick a colour from the colour choose menu.

Choose a (nice) combination for your background colour and text colour to begin with.

Select OK when done.

C

Soc omp

Content

Now you can add text (writing) to your website.

You can use the formatting toolbar to add any standard effects to your text, changing the alignment, size, colour, font and so on.

C

Soc omp

Content

Just add a heading to your page and increase the size of it and then try to centralize it.

Underneath add a few words about your favourite band in normal size text. I changed the colour of my heading too, using the colour chooser:

C

Soc omp

More Content

Next we’ll add in some images to our websites to make them more interesting.

First we’ll find an image and save it to our root directory, we’re going to add a picture of the band.

To get an image quickly, open an internet browser window and go to www.google.com and then select “Image Search” and search for a picture.

Once you have found a picture you like right-click on it and press Save Picture As… and save it into your root directory with a meaningful name. (eg “band.jpg”)

C

Soc omp

Inserting Images

Now return to your Dreamweaver window.

The first icon on the objects panel is ‘Insert Image’.

Click this and then select the image you saved and then click Insert

Objects Panel

C

Soc omp

Inserting Images Saved Elsewhere If you want to insert an image saved outside your root directory

then Dreamweaver will prompt you to save this image in your root folder, you should click Yes if prompted.

C

Soc omp

Image Properties

When an image is selected your formatting toolbar will show the image properties.

You can align the image in the same way as you do with text.

You can also add Alternative text to show when the image is loading, or if the image isn’t working.

C

Soc omp

Other Content

You can add Horizonal Rules to your website to break up sections of text, or for any other reason.

Click the “Insert Horizontal Rule� box from the Objects Menu.

Click on it to alter its properties (Height and Width) in the Formatting Menu

C

Soc omp

Other Content

I’ve made my horizontal rule to be 80% of the page.

Change from “pixels” to “%” by clicking on the drop down menu beside the Width.

Align it to the centre too so it looks better.

C

Soc omp

Adding Links

Once you have a basic page created you will want to add links to other pages you have created, or to other interesting sites that you think are relevant to your site.

We’re going to add a link to different site about your favourite band.

Both images and text can be made into links in a very similar way.

Highlight the text (or select the image) you wish to make into a link.

C

Soc omp

Adding an External Link

Type “Another site!� and highlight the sentence.

In the Formatting toolbar you will see a section marked Link. If you are linking to a different website (an external link) then simply type the address into the text area. e.g. http://www.REM.com/ (you can use google.com to find a link!)

This will make your sentence into a link.

C

Soc omp

Adding An Image Link

If you are making an image into a link then the principle is the same, simply type the address of the site you are linking to into the “Link� section of the toolbar.

Try making the picture you added into a link.

C

Soc omp

Adding more pages

Select File and New from the top menu bar.

Now just make another short page about your band, maybe adding information about your favourite song, then save it as “favourite.html�

You can add pictures or anything else you want to this page as well.

Once you are happy with it, close the window and go back to your main page. (index.html)

C

Soc omp

Adding an Internal Link

Type “Click here for information on my favourite song” and highlight the sentence.

In the Formatting toolbar you will again see a section marked Link.

Click the little folder beside this and then select “favourite.html” and press OK This will add the link into the other page on your site.

C

Soc omp

Adding Mail Links

You can add a link which will show your email address and allow people to email you by clicking the “Insert Email Link� option from the Objects Menu.

You will be prompted to add the text for the link and also to add your email address.

Press OK when ready.

C

Soc omp

Once you start linking your pages together you can look at the site map again.

Site Map

Remember to open the site map, you simply click on Window and then Site Map from the top menu bar.

C

Soc omp

Adding Tables

As you probably know from looking at websites, layout can look very plain unless you use tables, which are an extremely powerful tool for laying out data and images on an HTML page.

Tables provide ways to add vertical and horizontal structure to a page.

C

Soc omp

Adding Tables

Tables consist of three basic components: - Rows (horizontal spacing) - Columns (vertical spacing) - Cells (the container created when a row and column intersect)

C

Soc omp

Adding Tables

This sample table has: • 4 rows

C

Soc omp

• 3 columns

Adding Tables

C

Soc omp

• 12 cells

Adding Tables

C

Soc omp

Adding Tables

You can click the Insert Table option from the object box, or you can click Insert and then Table from the top menu bar.

Set the size of the table by setting the number of rows and columns.

C

Soc omp

We’re going to add a table to store information about albums, so we’ll have 2 columns and say 3 rows.

Put 3 in the Rows section and 2 in the Columns.

Then select OK when you are ready.

C

Soc omp

Using Tables

To add text to a table simply select the cell you wish to add the text to and type it in.

To add images to a table then select the cell you wish to add the image to and click the add image button.

You can align text and images inside tables as normal.

C

Soc omp

Using Tables

We’re going to add a picture of the cover of an album into one cell, and then put the name of it into the cell beside it.

C

Soc omp

Table Properties

You can change the colour of the background of the table (by selecting the whole table and using the Bg Color option.

And if you are using a border you can set it’s colour using the Brdr Color option. (again we’re using the colour selctor button! )

C

Soc omp

Cell Properites

If you select a cell on its own you can set the background colour and border for it by using the Bg and Brdr options.

C

Soc omp

Images as Backgrounds

You can also use images as backgrounds for both tables, cells and the entire page.

To apply this, have an image saved and then use the Bg or Bg Image option.

To set the background of a cell, click the folder icon next to the Bg text area and select the image.

C

Soc omp

Images as Backgrounds

To set the background of whole table, select the whole table and then click the folder icon next to the Bg text area and select the image.

C

Soc omp

Images as Backgrounds

To set the background of the entire page select Modify and then Page Properties… from the top menu bar.

Select Browse from beside “Background Image” and select the image you wish to use as the background.

C

Soc omp

Putting Your Site Online

Once you have added a few pages of content, you can put your website online.

To do this you need to have downloaded the WinSCP program from the CompSoc website.

It is in the “Quick Links� section for handiness.

C

Soc omp

Putting Your Site Online

Run WinSCP, goto the “Basic� section.

Host: frink.nuigalway.ie Port Number: 22 Insert your own username and password and then click Login

C

Soc omp

Putting Your Site Online

The left-hand side shows your computer.

Open up your root directory.

The right-hand side shows your account on frink. Open up the “public_html� directory.

Transferring files is just a matter of selecting and pressing F5 to copy.

C

Soc omp

Putting Your Site Online

Once you have uploaded all the files, you should be able to look at them online.

Open up an internet browser and type: http://www.compsoc.nuigalway.ie/~username/ You can add and remove content by editing your website and uploading the altered / new pages.