Notes 9/6: Dreamweaver

  1. drag folder from flash drive onto desktop
  2. double click to preview on web
  3. right-click index.html, open with dreamweaver to edit code (save constantly)
  4. save desktop folder onto flash drive at end of session
  5. toggle b/w source code & style.css to make edits to content and presentation style sheet

Source Code:Screen Shot 2016-09-06 at 9.53.17 AM

Line 1: <!doctype html> (states that doc type is html 5)

Line 2: <html> “hypertext markup language”(angled brackets means markup language, always needs an opening and closing, only lowercase letters)

Line 3: <head>

Line 4: <meta charset = “UTF-8”> (a character encoding capable of encoding all possible characters, or code points, defined by Unicode and originally designed by Ken Thompson and Rob Pike. The encoding is variable-length and uses 8-bit code units)

Line 5: <title> Callie’s Second HTML page </title>

Line 6: <link href=”https://fonts.googleapis.com/css?family=Dosis|Roboto” rel=”stylesheet”> (font family–standard link from Google fonts)

Line 7: <link href= “style.css” rel=”stylesheet” type=”text/css”>

Line 8: </head>

Line 9: <body>

Line 10: <h5>

Line 11: Callie’s Second Homepage

Line 12: </h5>

Line 13:

Line 14:

Line 15: </body>

Line 16: </html>

Style.css

**Header + Main + Footer height must add up to height = 750px

Screen Shot 2016-09-06 at 10.47.14 AM.png

Live Preview:Screen Shot 2016-09-06 at 9.53.30 AM.png

**Cascading Style Sheets (CSS) = a style sheet language used for describing the presentation of a doc written in a markup language

**Always write code inside of body lines!

**Everything needs an opening and closing tab (except image source)

**The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

**Keep code organized and aligned, red means something is wrong with your code!

**<!–end of container–> (comments in source code are notes to yourself that won’t publish on web)

**/*visited color*/ (notes to yourself in style.css)

screen-shot-2016-09-06-at-10-25-44-amScreen Shot 2016-09-06 at 11.35.11 AM.png

How to add page links in source code: Anchor <a href= “http://google.com”&gt; About</a>   (href is hyper-reference, a fixed link to another page)

How to change color in style.css: 

  1. Type css href into google (http://www.w3schools.com/css/css_link.asp)
  2. Copy and paste example into dreamweaver style.css under under {body} & {a}
    • a:link (never seen link before)
    • a:visited (visited link)
    • a:hover (when hovering over)
    • a:active (when holding mouse button down)

Screen Shot 2016-09-06 at 11.15.39 AM.png

Visit  www.color.adobe.com (explore, edit copy, copy hex # and paste into code with pound sign in front)

How to change font in style.css:

  1. Will change for everything in the a’s

Screen Shot 2016-09-06 at 11.32.16 AM.png

 

Advertisements