Using HTML

Using HTML for web design

In this tutorial we learnt the process of making a basic website using HTML code in Adobe Dreamweaver. We covered how to set-up new pages, create link to pages, using tables, inserting images and previewing the website in your browser. 

First of all you should go File > new > HTML

Now go Site > New Site give it a name and select a root folder for it (The folder can be anywhere)

Make sure to re-name your documents at save them, or else this will look unprofessional on the final website. The first document should be a index.html always, this is the home of your website. 

Create as many more pages as you want and repeat the process, in this case I've created an 'About' and 'Contact' page.

At this stage go to insert > table and change the settings as you wish and hit 'OK', this should create a table on the document you are on.

You can now also import images to the document by saving them to your root folder (The one you made at the start), they should now appear in the library - if not refresh with 'F5'.

You can now drag the images from the library into the cells in the table, as shown here. In this case I used some .Gifs I got online. You should be able to see them there. 

Now, I create a new HTML page called 'Large_01' and place a large image here from my library. 

I head back to my other page (About page) and go Window > Behaviour. This should open a new tab on the right, now you can click the small + icon and choose 'Open browser window' with one of the cell selected. This should open a window of options, in the 'URL to Display' browse to the 'Large_01' HTML we made, this creates a link between the two. You can change the other settings if you wish. 

To make the audience aware we can click on the small image, we add a '#' to the Link tab in the bottom tool bar as shown in this image. Now a hand-cursor will appear when you roll over it. 

Now if you preview it by click the small globe icon at the top tool bar then > Preview in Chrome etc.. You will see a working draft of your website and you now should be able to click one of the images and make a new larger image of it pop up in a new window. 

If you want to you can create new page, call them what you want. Then back on your index page, you can create links to your other pages byconnecting them on the 'Links' toolbar a the bottom of the page - you can have as many as you want.

File Formats

File Formarts For Mobile & Web Devices
When mobile & web comes into play, there are certain procedures you should take into account. With mobile internet speeds not being as fast as our broadband, It takes longer to load an image on a website. Therefore optimizing the image to have a lower file size would make it load faster - a much better experience for the audience.

Depndant on the type of image, there a three different file formats you generally always should use. JPEG's are used for more photographic images & images with gradients. GIF's are used for images with block colours and not great detail. PNG's are used for images that require transprancy.

JPEG
Pros:
- Low File Size
- Adaptable quality
- Good for photographic images

Cons:
- Loses quality & data of an image
- Cannot hold transparency
- Cannot be lossless


GIF
Pros:
- Great for block coloured images
- Can hold transparency data
- Low file size

Cons:
- Not good for detail/photgraphic imagery
- The transparency is limited
- Compresses images

PNG
Pros:
- High quality transparency
- Good for Flash
- Versatile for web design

Cons:
- Higher file size
- Compresses the file
- Does not support animation

Here you can see the difference between file formats. JPEG is smooth at only 40% quality, therefore it is very versatile for devices - it can look good at come at a low bandwidth cost. GIF you can see is poor quality, it shows grain and loss of colours. This is because GIF has a small limit on the number of colours it can show. The maximum is 256 colours, but in this image it shows it at 32 colours. And finally PNG, it is good quality, but comes at a higher file size, JPEG would be more ideal as there is no transparency and a variety of colours.