DREAMWEAVER: WYSIWYG WHA???
Adobe Dreamweaver has been around for a while now so it's had some time to get pretty good at what it does. So what does it do? What you see is what you get - well almost. Dreamweaver lets you build a web site like it was in word. You type in the text in the Design window and Dreamweaver magically turns it into HTML for you that a browser will understand. So right now you are probably thinking 'Sweet, I don't need to learn HTML!', well unfortunately that is not the case. Dreamweaver will not write perfect code for you, nor will it guarantee that the code it does write will create a web site that looks identical in every browser. However, Dreamweaver will help you make a website quicker and easier.
1. Open up Dreamweaver. CS5.5 will look like this:
Don't worry if it doesn't look exactly like this. I've got a whole bunch of recently used shortcuts added in.
2. Click on New > HTML.
You should now see a blank page and a whole bunch of tool bars. It's a good idea to reset your workspace when you first start Dreamweaver especially if you are using a public computer at uni for example.
3. Go to Window > Workspace Layout > Designer
Your screen will go crazy for a second and then everything will be neat. Play around with the other settings if you like. You can even save your own layout when you get more used to it. Now it's time to check out the various toolbars.
4. Click on the Split Button
The Dreamweaver CS5.5 Toolbar
The first three buttons you'll notice are the Code, Split and Design buttons. You'll figure out pretty quick what these do. Design view is your 'website preview' if you like (keep in mind websites can look ENTIRELY different in this view than they do in a browser). Code view, shows all the code funnily enough. Split is a mixture of the two.
Once you've clicked on the split button, you'll see some code that Dreamweaver has already given you. Don't be scared by line one. This just tells the document which set of HTML rules to follow. Do a google on DOCTYPE if you want to find out more.
The other new tag is the meta tag which provides additional information to the browser about your page. The meta tag can be used to set how your site is listed in search engines and thats about all you need to know for now.
5. Give your page a title
Either type it in the Title box or type it between the title tags. Up to you.
6. Have a play, type something in the Design window
Chuck a sentence in the Design view. Now click on the Code view. Check out the code that was written for you! Probably a <p> tag or two, maybe some strange looking code. <p> is the paragraph tag and tells the browser to start a new paragraph and gives the text a new line to start on.   is an HTML code for non-breaking space or in other words, a space. HTML ignores more than one space so you need to force it to print a space using   if you want more than one.
Notice how when you add some content into the Design view, it doesn't update in the code and vice versa. Don't freak out when your site isn't changing, just try clicking the other window to see the update.
7. Have a go applying some properties using the properties panel
The Dreamweaver CS5.5 Properties
It's kinda like word. Select your text and then select your formatting and presto. However, you may notice some differences. For one thing, there is no font list. This is because when building websites, you never know what fonts the user of your website will have installed on their machine. If you do set a font using CSS, and someone is looking at your site and doesn't have that font installed then it will change to their system default font, making your site look ugly and maybe not how you intended it to look. So in short, stick with the default font for now. If you want a different font for a heading for example, your best bet is to make it as an image in an editor like Photoshop and bring it in to Dreamweaver.
8. Add a link to your page
Try highlighting some text and in the Link box of the Properties panel type in a website address. Make sure you add 'http://' at the start so the browser will know you want to go to a website. If you don't add the http://, it will think you are linking to a page in your own website, otherwise known as a local link. A link in HTML is known as an anchor tag and follows the following format:
<a href="http://www.yoursitehere.com">click this link</a>
The href part is known as a tag attribute. Many tags can be given additional functionallity using attributes. The <a> tag has another useful attribute target which tells the browser where to open the link.
<a href="http://www.yoursitehere.com" target="_blank">click this link</a>
will open http://www.yoursitehere.com in a new window. You can also change this using the 'Target' drop down box in the Properties panel.
