- Home
- World Wide Web
- Introducing HTML
- Introducing CSS
- Dreamweaver Interface
- Top Tips
- Putting it all together!
- Design Principles
- Accessibility
- Useful Links
- Glossary
If you see this symbol in the text it is a Link to Glossary with more detailed information
Putting it all together!
Setting up a site
In this section we will be using Dreamweaver, there will be some activities but then you can experiment as you wish. If there is something you want to try and do Richard and I will be here to help and we will hopefully, answer any questions you may have.
But first we have to get a site up and ready for working on. This is a very important part of setting up your website. You need to ensure that ALL your files will be accessible once they are on the remote site on the www.
Setting up a Site definition
Dreamweaver's site management features are very powerful. However, in order to take advantage of the features, you must first define a site. We will only define the local site at the moment in Activity 19.
Activity 20
Copy and Paste the Test website folder from the Workshop folder into your own folder
From the Site menu, select New Site...The Site definition dialogue box appears. Make sure the basic tab is selected.
In the What would you like to name your site? text box, type the name of your site - Type Test Site
NOTE: you don't have to worry about lower case or spaces on this name
Click Next
In the next page make sure that No, I don't want to use a server technology is selected
Click Next
Make sure that you have Edit local copies on my machine... is selected (see screenshot below)
Browse for your site - the Test website folder that you copied into your folder. You will need this if you want to try the Optional Activities 21 and 22.
NOTE: You can also make a new folder to put your website in at this time if you haven't already set up one.
Click Next
In the next box where it says How do you connect to your remote server? Select None in the drop down box
Click Next
The dialogue box will now give you a summary of the settings you have made, you can always change these settings by going into Site > Manage site and selecting your site and clicking edit. This is how you will set up your Remote site, where you upload your website to at later date.
Click Done and your site will appear in the files on the left hand side of Dreamweaver
There is an Activity Setting up your Remote site in Activity 33 in the optional Activities below, we won't be able to do this today, but you can refer to it later.
Once you have set up your site and connected to the remote server as long as you do not move anything your settings will remain the same, you will only have to do this once. If you only have one site in Dreamweaver when you open it up your site will be ready for you to work on in the file panel.
Folder Structure (Optional)
Link to information on Folder Structure (optional) with Activity 21 and Activity 22
Project 2 - Altering a website
In the following activites you will be altering and adding to pages in a small website.
First if you would like to Copy the Project 2 folder from the Workshop folder to your own named folder and then you can alter and play with this website as much as you like, by trying out some of the many features Dreamweaver has.
I have listed some activities below and you can dip in and out of them as you wish. Richard and I will be on hand to help you but just have a go. Don't worry if you get things wrong it all comes down to practice and a bit of confindence, you can not expect to learn all this in a day but when you come to update your website in Dreamweaver you should be able to recognise many of the features you have used.
If you have bought a memory stick with you you will be able to take your unfinshed work and continue the activities at a later date.
To do many of the things in your pages you will use the Insert bar below. I have labelled the ones you are most likely to use today. These are in the Common section if you click the arrow at the side of Common toolbar you will see a number of other Insert bars you could use and can also set up a bar of Favourites with a selection of your favourites from all the Insert bars. But for today we will use the Common Insert bar.
They are fairly self explanitory I will not go into them now but we will use them in the activities in Project 2.
Go ahead and Play!
Adding stuff to pages
When we use the Properties Inspector for updating and formatting the pages there will be some properties that I do not wish you to use. I would like you to use CSS to format your pages rather than adding code straight into the pages in the non-standard way, and this is what these properties will do if you use them. I'm sure when a later version of Dreamweaver comes out you will only be able to format with styles!
The font style and size has already been declared in the style sheets as aligning, bold and italic text. So you can still use them all but you will be using an external style sheet to add any properties.
You will have to define your Project 2 site in Dreamweaver first, look back at Activity 20 if you are unsure how to do this
Putting content in your website
Here are the Activities for Project 2, try some of them or all of them as you wish.
- Activity 23 - Adding text, formatting headings on the index page
- Activity 24 - Adding some images into the Index page
- Activity 25 - Making a new page from a predesigned template
- Activity 26 - Adding a footer as a Library item and editing the Library item
- Activity 27 - Making a Contact page and formatting the text
- Activity 28 - Creating lists and formatting a list
- Activity 29 - Creating an internal page link
- Activity 30 - Creating page anchor links
- Activity 31 - External links
- Activity 32 - Adding and formatting a table from Word
Creating lists in Dreamweaver
Activity 28
You have probably all made bulleted lists in Word you can do the same in Dreamweaver by clicking the ordered or unordered list buttons in the Property Inspector.
But like the Word bulleted lists they can be very plain so we will make the Towns and villages column on the right hand side look a bit more interesting.
- Click your mouse to the left of B in Blandford Forum
- Click on the unordered list button in the Property Inspector
- A bulleted list will be created. Click on the left of Gillingham press the backspace key on your keyboard and then the return on your keyboard.
- This will create your list. Do this with the rest of the towns and then create new lists for the Villages and Towns on the edge of the Vale.
Save and Preview your page to check the lists.
Now we will make them more interesting by adding a style.
- Click inside anywhere in one of the lists you have just created
- We want to change the style on an unordered list which has an HTML tag <ul>
- Select this tag from the status bar at the bottom of the document window
- Click on the arrow next to the Style box in the Property Inspector and select the arrow style from the list. Your list should be formatted!
- Try this on the other lists
Save and Preview your page to look at the changes. You will add external links to these in Activity 31
Creating Links in Dreamweaver
Putting links in Dreamweaver is a lot easier than typing in HTML code. There as always is a number of ways to do this I have found that the Point to file is the quickest to link to internal files.Activity 29
Internal Link
Open the index.htm file of Project 2 website. The left hand navigation has not got any links to the other pages as yet. Link to the Population and the Contact Us web pages using this method:
Highlight Population with your mouse go down to the Point to File icon at the right of the Link box in the Properties Inspector (see screenshot below) and Click and drag your mouse to the population.htm in the Files panel.
As easy as that!
Do the same with Contact us, link to contact.htm.
Save and Preview your page to check the links
Activity 30
Page anchor links
We will use a Library item to do this activity.
- Open the Assets panel next to the Files panel make sure the Library button is selected (if you are not sure go to Using Library items in Dreamweaver on the Top tips page .
- Click on the top_page library item. Drag it to where you want the link to go at the bottom of the Content area in index.htm under the Introducing the Blackmore Vale text.
This part of the link has been set up for you in the Library item.
- To link to the top of the page you will need to click on the anchor button
in the Common Insert menu and drag it next to the text in the banner right at the top of the page. - The Named Anchor dialogue box will open type page into the box. This corresponds to the name that was given in the Library item at the bottom of the page.
The anchor symbol will not show up in a Browser it is just a visual aid to help you when you are designing your pages.
Activity 31
External links
You pasted in a list of villages and towns in the Blackmore Vale in index.htm. They all have websites. In this activity we will be adding external links to this list.
- Open the Links for Project 2 Word document and you will see that all the village websites are listed.
- Highlight and the first one, Blandford - just the link not the town name, you need to have the full address including the http:// .
- Right click the highlighted link and click on Dreamweaver in the bottom task bar to open it on top of the Word file then Paste the link into the Link box.
- Just click anywhere inside the Document window to set it.
That was easy wasn't it!
Save and Preview your page to check the link.
Try it with the other links.
Adding Tables in Dreamweaver
Activity 32
In this activity will add some text and a table to the population.htm page.
- Open the page in Dreamweaver if it is not already open.
- Open the Population Table Word document file from the Project 2 Resources folder
- Copy and Paste the text above the table into the population.htm page
- Format the top line to Heading 1
There are many ways, as always to add a table you can Copy and Paste it straight from Word but often it brings a lot of rubbish with it and your table will look messy and we want to format to the website design.
This is one method:
- Click below the text you have just pasted in.
- Count the rows and columns used in the Table in the Word document in this case you have 9 columns and 5 rows
- Bring Dreamweaver to the top of your screen and click the table
button in the Common Insert bar - The Table Properties box will open. Alter the properties as in the screenshot below with 5 rows and 9 columns clearing any other of the table size boxes. Click Both to select the Header and type Census information 1921 - 2001 in the Caption box.
- Click OK your table will be in your document window
- Select the table tag <table> from the status bar at the bottom of the document window
- Click on the arrow next to the Class box in the Tables Property Inspector and select the datatable style from the list.
Your table should look a little more interesting. If you just copied and pasted your information now some of the formatting would be lost. So you need to do this in a couple of stages!
- Select and Copy all the figures in the table in the Word document leaving out the top line and the towns
- Paste straight into the corresponding cells in Dreamweaver by selecting the cells.
- You will then have to Copy and Paste or type in all of the header cells separately to retain the formatting.
There are many other things you can do with tables like insert more rows, merge cells and such like. This is similar to how you may have done it in Word we will not have time to go over it at the moment but please ask if there is anything specific you would like to try.
Using Styles
Optional section to look at if you have time or refer to at a later date! Using CSS in Dreamweaver.
Setting up a Remote site
Activity 33
When you want to set up your Remote site so you can upload or update your website you need to go into Site > Manage Sites.
Select your website, it may be the only one and click the Edit button
The Site definition dialogue opens. Make sure the Basic tab is selected. Click Next until you reach the How do you connect to your Remote Server? and select FTP in the drop down box and you will get the dialogue box below.
In the What is the hostname or FTP address of your Web server? type in your web address www.yourschool.dorset.sch.uk
Leave the What folder on the server do you want to store your files in? empty.
What is your FTP login? and What is your FTP password? will be the login and password details you have been given from SWGFL.
You can test your connection by clicking the Test Connection and if you are successful the following box will appear. Click OK the box will close click Cancel on the Site Dialogue box and then click Done on the Manage sites box.
Your Remote site is now ready for you to connect and upload files.
I will not go into detail about the different ways to upload files, but if your Remote and local folder are the same Dreamweaver will put the files you upload in the correct folders. When I upload a new website to the Remote server I put all the files within the website folder up to the Remote Server.
Connecting and Uploading files
A very quick start guide to connecting and uploading files to to your Remote server!
The screenshot below shows you what you will see when you are connected to the Remote Server.
When you have uploaded your files to the server remember that these can be back up files as well if you lost your website files locally. You can always bring these files back down again by using the Get arrow (next to the Put arrow) in the Document Toolbar.
Next Section Design Principles & Standards >>