Designing Websites in Dreamweaver

Designing Websites in Dreamweaver

Designing websites in Dreamweaver

Introduction

To create a basic website we need to use a language. The language we use for the web is HTML. HTML is a markup language that allows us to express ideas/structure onto a webpage. There are many applications you can use to create webpages however Dreamweaver is the most commonly used. It is known as WIZIWYG which basically means that you don’t have to code pages, “what you see is what you get”.

Last lesson

Las lesson we covered the following.

Creating a new page

  1. Click File > New > Click Blank Page
  2. Choose HTML as the page type
  3. Choose blank as the layout
  4. Click create

Note: This is used to create new pages and when you want to create multiple pages for your website, you will need to use the steps above.

The page will be named untitled. This means that we have not saved it yet. Our next step is going to be to save the page.

  1. Click File > Save as > Select a folder that you are going to save your webpages in
  2. Your home page will need to be called index.html
  3. Other pages maybe called whatever you wish as long as it has the extension .html

Why do we call it index.html?

If you are ever decide to publish your website onto the Internet. You will need to call the first page index.html because that is the file name the server is looking for. If you want to be clever, you can change the server settings so file does not have to be called index.html :D.

Our first page

We have created our first page and we can preview it by pressing F12 on our keyboard. The only problem is that we don’t have anything on the page so the browser is just going to load a blank html page with no content whatsoever.

Design, split and code

The best way to create webpages is to use the code section because it gives you more control of what you are doing. If you are quite new to coding then you may start off with using the design section. The difference between the two is that the design will allow you to make things without worrying how it is made however if there is a problem, it is will be difficult to troubleshoot if you are not familiar with the code.

Coding using basic html tags

If you click on code, you will have the following code on your screen.

<!DOCTYPE HTML>

<head>

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

Explanation:

The doctype is telling the browser what standard of html we are complying with.

The html tag is telling the browser that anything in between will need to be treated as html tags.

The head is used to put scripts and also css styles which allow us to change and structure the website.

The meta tag is used to tell the browser what format the website is in and the encoding it is using.

The title is used to give the website a title that is seen on the browser window.

Finally, the body is where all of your tags will go and this is what you will see when you load your page.

Things to remember

Every html tag comes in pars. <body> </body>

Every tag has an opening and closing tag. The closing tag is identified by the forward slash</body>.

Dreamweaver will usually close the tag for you when you open it but it is good to know and check.

Lesson 09/10/13

Starter

Note: Make sure you have tried each one and you are comfortable with it.

Time: 10 - 15 minutes.

Basic html tags

Formatting

<p> This is used to create paragraphs.<p>

<b> -- This is used to make the text bold</b>

<u> This will make the text underline</u>

<i>This is for italics</i>

Links

There are used to allow the user to navigate to different pages on your website. You can link to another page, a section within your current page or you can link to multimedia such as images, videos, etc…

<a href=”index.html”>Home Page</a>

The <a> tag defines the hyperlink. The href is pointing to where the file is. Really important to have all your pages in the same folder. The Home Page is the text that will be displayed as the link.

Easier way:

You can right click on the text you want as the link in design view and choose make a link.

Images

<img src=”homer.png” />

We use the img tag to tell the browser that we are creating an image. The src is asking for where the file is located. It is really important that you put the file name and also the extension, otherwise it will not work. The img is one of the rare tags that does not have a closing pair.

Tables task

Minutes: 15

Tables are a great way of storing data and they can also be used as layout for webpages.

Each table starts with a <table> tag and also ends with a </table> tag.

Inside of the table tag, we use some called <tr> table row, and inside of this we have something called <td>, table definition.

<table border=”1”.>

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

<tr>

<td>Row2, cell 1</td>

<td>Row2, cell 1</td>

</table>

What it will look like:

Row 1, cell 1 / Row 1, cell 2
Row2, cell 1</ / Row2, cell 1

Create the following table:

First Name / Last Name / Points
Jill / Smith / 50
Eve / Jackson / 94
John / Doe / 80
Adam / Johnson / 67

Extension: try to replace the example below using html table.

Month / Savings / Savings for holiday!
January / $100 / $50
February / $80

DIVS

Divs are a great way of breaking down your content into chunks.

APDIVS

Top View