The aim of the lesson was to complete these steps by the end of the lesson, which we were recapping from the previous three lessons. We did this as it would improve our skills and quickness in Dreamweaver, to learn the basics of the program and be able to set a website up on our own.
1. Use photoshop to create a web ready image
2. Site set up
3. Change the appearance a structured HTML page with CSS, using the supplied index.html file
4. Use a background image
5. Insert an Image
6. Preview the file in Firefox or Safari
7. Blog entry for the lesson
Open up the image in photoshop, check the image size, by going to ‘Image’ and then ‘Image size’
We reduced the size from 17.2MB to 1.55MB
Web resolution should be changed 240 to 72
Select sharper best for reduction, to check this you can zoom in keyboard shortcut ‘command 1’ this will zoom in your screen by 100% so you can actually see what the image looks like.
Crop tool – set the measurements to 500px and 300px and then drag the crop tool over the photo once you have positioned your crop then hit the return key and this will change your photo into the correct size.
Once you have cropped your image you then need to change it into transparent so that it will fade from your background colour of your website and then into your picture. This is just a function that we have learnt; you don’t have to do this to very photo that you include in your website.
Quick Mask Mode – Making your image transparent.
Click the quick mask mode and make sure that your background
Gradient Tool black to white it’ll be different depending on what colour your background is this should be the white square first followed by the black square below.
Unlock the layer, double click on the layer then click backspace and the running ants will appear around your image to show the selected area that will turn transparent to create a fade effect.
Saving your image, you must remember to save your image as save for web and devices as a PNG file.
To set up a new site in Dreamweaver
You can either go into the site menu and click site set up or create a new html on the welcome screen which might appear when you open Dreamweaver.
Name your website for example ‘Week 4 recap’
Choose your root folder ‘Aardvark Photography’
Advanced setting – local info –then choose your images folder.
Once you have done this you have successfully set up a new website.
The HTML part of the website is the control and structure
Main Tags to a website:
CSS (Cascading Style Sheets) are the appearance/design part of a website
To use CSS to change the appearance of your website you select page properties which is situated at the bottom of the Dreamweaver window.
This panel allows you change the appearance of the website, for example the background colour, the text colour, the text font, bold, italic, the size of the font and even the gaps between each line of text i.e. Title, sub heading and when your main section of your website starts.
Sometimes to change certain things to your website youhave to create a new CSS rule which will be for a tag, for a specific part of the website for example the header tag, nav tag, section tag or footer tag. This appears in a definition window where you can adapt your website to your personal criteria which we learnt how to change the font colour, background colours, Skip the ‘Block’ section and move on to the forth option which is ‘Box’ where you can change the spacing between the title, sub heading etc. We then changed the header tag to height 350px in the box section and also making the padding/margin to 10px all the way around.
The difference between padding and margins
Margins – sit outside
Padding – sit inside
When you create a new CSS rule for the section tag we then typed in the coding area ‘MAIN AREA’ at the left hand side of the Dreamweaver window which should appear when you work in ‘design’ view this allows you to see the coding side of the website but also the appearance of the website this is a good way as every time you change something using the CSS you can then see the coding change in the HTML part of the website, which is a good way to learn the coding for different appearance changes. The reason why we typed in ‘MAIN AREA’ to the coding html part was so that we could see this was our main section in the tag and where the main information of my website was going to be stored.
Once we had set up all the tags we then inserted the image that we had previously edited in Photoshop at the beginning of the lesson. You can insert an image by clicking in the insert panel at the right hand side of the Dreamweaver window, then select the ‘insert image’ icon and find the image in your images folder for your website which we also set up at the beginning of the lesson and then select the correct photo and then it will appear on your website. Once you can see the photo in the main area (section tag) of your website you have successfully set up your website and inserted an image that you prepared previously in another programme so that it was appropriate for the specification of my website.