Task HTML1: Le Quesnay website

In this first task you will learn some of the fundamental skills you need to get started with DreamWeaver, including:

  • Creating an HTML file
  • Using tables to set the layout
  • Adding content to an HTML page
  • Creating a website by using your first page as a template
  • Using CSS to format HTML tags
  • Using CSS to format classes for individual items

Follow the instructions step-by-step, and expand the “Find out how” sections for more guidance if you need it.

Instructions

1. In DreamWeaver, create a new HTML file. Save it in a new folder in your Z:/ drive, something like this: HTML/Tasks/Le Quesnay/index.html

2. Set the page title to Le Quesnay: Home.

3. In the HTML file, create a table with 3 columns and 5 rows, 625px wide. Border, padding and spacing should all be set to zero. Align it in the centre of the page.

4. Set the following dimensions for the sections of the table:

5. Download this file and extract the contents to a folder called images inside the folder where you created your index.html page.

6. In DreamWeaver, place the following content into your table. Any text in pink indicates the need to add an image or formatting.

Welcome text

On these pages you will find information about the house, the owners, and the area, as well as contact details with which to book your stay.

Facilities text

  • Full continental breakfast
  • Heated pool
  • Ample parking
  • Pool table and table tennis
  • Satellite TV in lounge
  • En-suite bathrooms
  • Tea & coffee-making facilities in each room

Contact text

Address: Le Quesnay,
Commune de Contrières,
MANCHE, 50660,
France

Footer text

© 2004-14, Le Quesnay. All rights reserved.

7. Make the top word in each of the three columns heading 1. Make sure each of the images inserted is center aligned. Make sure each of the three cells in row 4 is vertically aligned to the Top.

8. Add a hyperlink to each word in the second row (navigation bar) that points to the relevant page:

Home = index.html, About = about.html, Rooms = rooms.html, Area = area.html, Contact = contact.html

At this point, we have filled our page with content. It should look like this:

9. Create a new file in DreamWeaver, and choose CSS. Save this as stylesheet.css in the same folder as your index.html file.
In it, we are going to set the formatting options for each component of the page, starting with the body tag. You can do this by typing values in (if you already know CSS syntax, feel free to try this), or you can let DreamWeaver help you by using windows and dropdown lists.

10. Add a new CSS rule by hitting the button in the CSS Styles pane, and choose the body tag.

Set three criteria for the body of your webpage:

  • Background colour: #9c6732
  • Font family: Verdana, Arial, Helvetica, sans-serif
  • Font size: x-small

When you have entered these values, hit OK to see your CSS code. It should look like this:

To test it, we need to attach your stylesheet to the index.html page.

11. Save your stylesheet (Ctrl+S).

12. Go back in to index.html. Hit the attach style sheet button and look for your stylesheet. Note that sometimes, DreamWeaver has a bug that makes it difficult to add the stylesheet. To fix it, go up a folder, navigate back to your file and try again.

Save your index.html file and you should see the changes.

13. Add the table tag to your stylesheet and give it a white background.

14. Add the h1 tag to your stylesheet. Make the colour #652501 and set the font size to small.

15. We want to change the background colour of the navigation bar (the second row in your table). To do this without changing every cell in the table, we need to give the cell a class. In your index.html file, go to the section in your HTML code that covers that cell, and add class=”nav” inside the <td> (or <th> depending on how DreamWeaver made your table) tag.

Now switch to your CSS. Anytime we want to call up a class, we put a full stop (period) in front of it. In DreamWeaver, add your nav class like this:

Format the background colour to be #e2c066 and center align the text.

16. Do the same thing for the footer, adding a “footer” class to the relevant cell in your HTML, and creating a footer class in your stylesheet.

17. Finally on this page, we need to format hyperlinks, using the a tag. Hyperlinks have multiple states because they’re interactive. These states are:

a:link                     the hyperlink
a:hover                 the hyperlink when your mouse hovers over it
a:active                 the hyperlink when you click on it
a:visited              the hyperlink once you visit it

We can set these in the new CSS rule window by choosing the Advanced selector type:

Set the following values:

a:link                     color: #642500
a:hover                color: #a6592c
a:active                color: #c07548
a:visited              color: #452410

18. We are now going to make the other four pages of the website. Delete all of the content from the three columns in row 4 and leave them blank.

For each page, you should:

  • Include the page name in the page title, eg Le Quesnay: About, Le Quesnay: Rooms
  • Save it with the filename you specified for each hyperlink in the navbar: about.html, rooms.html, area.html, contact.html.

19. Open about.html

Create a class in your stylesheet called emphasis and set its background colour to #e2c066.

Apply this class to the left cell in row 4 in about.html. In that cell, add this content:

About Le Quesnay

#image:summer.jpg, alt text: The house in summer#

Le Quesnay is a farmhouse built in 1815. It was formerly part of a large estate that has been broken up and sold over the years, but the property as it currently stands still has ten barns in various sizes. The house was little more than a shell when we bought it in 2004, but the farmhouse has now been completely renovated.

Make the top line heading 1.

20. Merge cells 2 & 3 on row 4 together. Set their width to 416px. In this cell, insert the following content:

Setting & History

#image:lounge.jpg alt text: The lounge align:right#The house is in Contrières, a village of 400, and was a working farm and major centre of the village for many years – the current mayor, M. Camille, was born just two months before the liberation of France in the salon of the house!

The village lies between the towns of Coutances, Caen, Cherbourg & St Malo (all of which easily reachable by car), and many of the villagers have vivid memories of WWII. With the D-Day landing beaches only forty minutes to an hour away by car, Le Quesnay is perfectly situated for anyone with an interest in military history.

#image:kitchen.jpg alt text: The kitchen align:left#The property was bought in January 2004 by us, Geoff & Joanne Nalson, and we emigrated from the UK in April of the same year. After a great deal of hard work (and money!), we feel happy with the house, and are enjoying our new lives. That said, our work isn’t done yet – there are still two large barns that we are converting into gîtes, so there is still plenty to be done!

Set line 1 to heading 1, all other text to paragraph.

Your page should look like this:

21. Open rooms.html. Merge all three cells on row 4 into one cell. Now split that cell into 2 columns, each 312px wide.

Split the left and right cells into two rows each, so you get a table of four cells like this:

Set the height of each cell to 260px. In these cells, enter the following:

Top-left cell

The Blue Room

#image:rooms-blue.jpg alt text:Blue room align=center#

Spacious first floor double bedroom with en-suite bath & shower.

Top-right cell

The Lilac Room

#image:rooms-lilac.jpg alt text:Lilac room align=center#

Double bedroom with four poster bed and en-suite shower room – perfect for couples & honeymooners.

Bottom-left cell

The Red Room

#image:rooms-red.jpg alt text:Red room align=center#

Family room that can sleep up to four. The bed can be set up as a king size double or two singles depending on your needs.

Bottom-right cell

The Gold Room

#image:rooms-gold.jpg alt text:Gold room align=center#

First floor double bedroom with en-suite shower room. The pool area and garden are visible from the windows.

Your page should look like this:

22. Open the area.html page.

Set the class of the left cell on row 4 to “emphasis”. Merge cells 2 & 3 (just like the about page).

In the left cell, add this content:

H1:The Landing Beaches

#image:beach.jpg alt: The landing beaches align:center#

The D-Day landing beaches, upon which the Allied forces landed in 1945 to liberate Europe from Nazi control, are just over an hour away by car. Gold beach at Arromanches has a museum with an extensive collection of militaria and guided tours (in English, French, Dutch & German) that detail the progress of the Allied invasion, explaining the role of the floating harbours and midget submarines in the Allied strategy, through to the final push that led to the downfall of the German domination of Europe.
Ask for opening times upon arrival.

23. In the right cell, add this content:

#image:coutances.jpg alt: Coutances cathedral align:right# H1:The Area

Le Quesnay lies ten minutes away from Coutances, a cathedral town with a large tourist information office, as well as a wide array of shops, restaurants and bars. Perfect for souvenir-grabbing and seeing the French way of life, there is always something going on in the town. Open air markets are held regularly – ask us for details during your stay.

#image:montstmichel.jpg alt: Mont St Michel align:left# H1:Tourist Attractions

One of the biggest tourist attractions in Normandy is the fortified island monastery of Mont St Michel – around an hour away from Le Quesnay by car. Referred to as Ynys Trebes in Arthurian legend, the monastery is heavily steeped in history and is an excellent example of medieval architectural ingenuity – well worth a visit. We recommend visiting in the morning to avoid the crowds.

In addition, Bayeux is forty minutes away by car, famous for the tapestry of the Battle of Hastings, but also a charming historical town with its own cathedral.

The Channel Islands are easily accessible by boat ride from Barneville-Cateret, St. Malo and visitors can take their car when sailing from Granville.

Your page should look like this:

24. Open the contact.html page. Set the class of the left cell of row 4 to emphasis. In that cell, enter this content:

H1:Contact

#image:door.jpg alt:Welcome to Le Quesnay align:center#

We are always happy to receive enquiries about potential bookings, and however you get in touch we will always endeavour to get back to you as soon as possible.

Address: Le Quesnay,
Commune de Contrières,
MANCHE, 50660, France
Phone: (33) 233 17 26 59

25. Merge cells 2 & 3, and set the width to 412px.

Add “Find us” as heading 1.

Underneath, in HTML view, enter the following code:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d751.6629941443301!2d-1.4206876847141192!3d48.97486872720151!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x480c0a41296d4865%3A0x29f25bfbb47f6d64!2sD539%2C+50660+Contri%C3%A8res%2C+France!5e1!3m2!1sen!2stw!4v1510720189961" width="400" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>

Center the iframe in the window and remove any extra lines you see underneath it.