Steve – Dreamweaver Intro

February 10, 2014 § Leave a comment

We’re not going to actually have time to actually make a website in the three sessions that we’ll be having, but if we had a week we probably could. This is something to work on.

You don’t actually need Dreamweaver installed to make a website, you can just work on wordpad if you want! Going to look at HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets).

Site root folder = website folder , all the html, css, videos, images, audio etc.
Named it ‘my_first_site’ > Create HTML document > changed view to ‘split’ view so we can see the code and the preview.
Before we put anything into the site root folder, we need to tell Dreamweaver  where this folder is ‘Site’ > ‘New site’. If this isn’t set up then the links become ‘absolute’ where they can’t be found, so we want to be working with ‘relative’, so now the links will be relative to the folder I just set.

Screen Shot 2014-02-10 at 14.06.50

Next we looked at the ‘servers’ tab on the site setup menu. When we add a new server, we obviously need to own one, so we have to pay to host the site, these guys will give all the information needed to fill in the menu on ‘servers’ > connect using FTP (File Transfer Protocol – where files are moved across the net). The way a root directory works in the main server, is there are folders, and each folder is one website, so the root directory is the name of your site e.g. leopatterson.com, then the web URL is the full address. If all this is done correctly, the server will recognise all the details and tick them all.
If I change the computer I’m working on, I need to set up the site again,  locating the folder again, otherwise this will lead to broken links.

First page of the site has to be called ‘index.html’

The Code
the first line ‘DOCTYPE’ is the indication it’s a web browser, owned by W3C(World Wide Web Consortium), who standardised websites, (can give it a read) who make sure

<*****> = tags , these act as containers to put stuff in, the first one is the head tag
<title>Leo’s Website</title> would be the title of the page (invisible)
<body>
Hello There!
</body>
This would put that type into the main body of the website

Screen Shot 2014-02-10 at 14.21.22

So the web browser is reading the head of the code (indicating it what to do), then it reads all the code produced to generate what has been indicated for it to do!

What’s next is to figure out how to control the layout of the HTML document, so we’ll learn how to code where in the page we want something to go. That’s where CSS comes in
HTML = the actual content of the page (like the driver)
CSS = governs the layout (to oversee how to the HTML document is laid out)

Go File > New > CSS
Now we have two files, so we need to save the CSS file called ‘stylesheet.css’
CSS creates a set of rules for the page – ‘body {‘ opens up a load of options > press enter to go down a line, then scroll down to options, in this case ‘background colour’.
Semicolon; terminates any code
down a line and close it with a brace

Hexadecimal (hex) colour system:
FF FF FF = white (= full red / full green / full red)
00 00 00 = black (= no  red / etc.) > FF0=yellow

Screen Shot 2014-02-10 at 14.21.46

 

Screen Shot 2014-02-10 at 14.27.48

Now we need to save the CSS file, then we need to tell the HTML file where to look to get the CSS file. Go back to the HTML document >go to the right side of the page where ‘CSS Styles’ is and click on the drop down > select ‘Attach style sheet’ and link it up.
Link or import file – if you import it will write it into the HTML, but we don’t want that. We want to link it so we can edit the style sheet.css then Dreamweaver can automatically update it. This can go to every single age in the website, once in the style sheet, and it will update all pages.

Screen Shot 2014-02-10 at 14.28.53

‘rel’= relative path to the folder that the HTML page is saved to.

Look around the term ‘box model’ which is the way all websites should be laid out in CSS.

First you’d draw out your website on paper, to get an idea/concept of it
All websites start with an ‘outer wrapper; if this isn’t put in, the browser doesn’t know where the boundaries of your site is, so it’d go on forever. Generally they are 1024 pixels across
> Not goin g to specify a verticle boundary as we don’t know how much content is going to be on the site
> header = 100% W – this means it’s relative to the wrapper (width), it will stay the same size of it (100% of it); 75px height

Screen Shot 2014-02-10 at 14.48.00

This is incomplete, if this were a full sketch i’d include the dimensions also, stated.

To create the outer wrapper, and to indicate that we want to use it only once, we give it an ID which is denoted by the #hash#. Camel casing/backing = first word starts as a lower case, then every word after start with a caps. The outer wrapper doesnt actually have to be called
#outerWrapper {
              width:100%;
              height:auto; (auto means it will automatically update based on content)

Screen Shot 2014-02-10 at 14.45.46

Next week we look at how to use those styles, how to implement them into a website, building the page.

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 Steve – Dreamweaver Intro at Leo Patterson.

meta

%d bloggers like this: