Dreamweaver Workshop

10/02/2014 § Leave a comment

Today in Steve’s tutorial session we began working in Dreamweaver. This was a completely new experience for me so I was quite excited to start! We began by setting up the basics for a new HTML site.

You initially need to name your site and create a folder on your desktop where everything for it will be saved and linked too (note: every time you open your file you will have to re-connect the folder to the file or else the links will be broken). You then need to fill out all your server information, in this case we were just shown a preview as none of us had access to a server yet. Finally, you HAVE to save the new HTML page as ‘index’ or else it won’t work, I don’t quite know why. Check out http://www.w3c.org for help on how to construct a HTML website under their conditions. Your page then opens up like so:

The HTML code that is there is pretty straight forward to understand, the tags help you identify what needs filling in and adjusting to your liking. If you type between the ‘head’ tags, it creates the title of the page that will open up when a user clicks on your website. If you move onto the ‘body’ tag, that is where all your content goes. You can either type your writing on the blank page provided or you can type it into your HTML body area and hit the refresh button.

When you save this page and preview it as a site, the code is read in a linear fashion. HTML is the actual website page. CSS governs the layout. On this note, we need to create a layout for the site using CSS. Go to ‘File’ – ‘New’ – ‘CSS’ and you now have 2 pages open. Save the new CSS file as stylesheet (almost every website will have a Stylesheet). CSS is basically just a set of rules for the page:

Once you’ve saved the new CSS file, you need to link the stylesheet to the HTML page so that it knows to change the site according to your layout rules (using the drop down menu under the CSS Styles panel on the right of your screen). After we had done this, we looked into giving directions on the background colour. Steve gave us a great tip on how to make sure it’s set up correctly: always roughly sketch out what you want it to look like first, that way you know what you’re doing will look right. Dreamweaver doesn’t use RGB like a lot of software, it uses hexidecimal like Photoshop does (FF FF FF is white and 00 00 00 is black). Steve recommended we chose grey as our background as a tester so here is the code we typed in:

body {background-color:#666;

}

The curly brackets start and close the code and semi-colon terminates it completely. If you save it, this should now change the colour of your background to grey. We then firgured out the sizing for our website and learnt that most websites have a size of 1024 pixels wide.

  • Outer Wrapper: 1024px wide 
  • header: Width: 1024px (100% in HTML-use the 100% as if we change the outer wrapper the header will change with it) Height: 75px
  • main content: Width-100% again Height: 500px (whatever size you need to fit your images in)
  • Footer: Width-100% again Height: 25px

This information needs inputting to your CSS stylesheet like my images below, you always use an ID to begin your outer wrapper and this is identified by the hash key:

Screen Shot 2014-02-10 at 14.47.06

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Dreamweaver Workshop at Taylor Sim.

meta

%d bloggers like this: