Welcome to Dreamweaver level II
(introduction to CSS and Javascript behaviors)
Inspiration | The Fire fox Developer Toolbar | Code Snippets | Source Files (mac zip)
Today's Outline:
- Quick intro - "where you are at right now with D. W. and CSS
- First things first...The FREE fire fox Developer Toolbar!
- Why CSS? - the much better way to build a site. main benefits..
- with css in place on the site, updates are easy
- creates less code for the HTML
- separates content (HTML),from presentation, (CSS) look at this example (make sure and install the firefox developers toolbar for this)
- helps your pages rank better in search engines because your content is clean and meaningful
CSS -
- Stands for Cascading Style sheet
- In a nutshell: a collection of rules that mark up our web page
- Theses rules "hook" onto the html elements on our web page and make them look how we define.
- these rules come in the form of text css code (can be VERY simple code) that live in three places:
- internal (within the HTML head tags)
- external (this is best practice)
- in-line (you don't ever really want to do this)
- The code structure of a Cascading Style sheet: lets jot this one down on notes.
- CSS Selectors: the heavy lifting done here, so what are they?
- Types of selectors:
- tags (we can override the existing default look for ANY tag!)
- ID selectors (must be unique in the document)
- Class selectors (can use multiple times)
- dynamic selectors (pseudo selectors) meaning we can style up our links!
- Everything is an Element on a web page (this is what the CSS Selector affects)
- We have been using css styles for a while actually and may not have known it.......
- Browsers have their own default styles (warning! this is also a common pitfall for browser inconsistencies), with CSS, what we are saying to the browser is"hey I know you give the <p> tag certain padding, margin and color, etc on your own, but I want to you to use these values instead."
--------------------------------------- 15 minute break--------------------------------------------
- The CSS panel - the hub for css management.
- Create our styles and build up the look for a while.
- Style sheet best practices, segment your style sheet.....
- "Layout" section (css rules that only work on how the page is laid out, Header, body with two columns, footer as an example.
- "presentation" section (css rules that control how the formatting is setup, ie, color, font, bold
- use comments for these sections in the Code view,
- comments in css..... /* everything here is a comment */
- Export out internal styles so they become an external style sheet.
- open the css panel
- Highlight the all the rules we want to export
- right-click on the selected css rules and choose "Move Css Rules..."
- Link the style sheet to all other web pages in the site (the real reason why this CSS thing is so cool)
- Edit the style sheet whenever we need to.
- Troubleshooting our style sheets:
- Watch out for that cascade! The golden rule: internal styles will override external styles, 90% of your pitfalls.
- check the CSS panel out, to let you know if you have internal styles!, you always know this if you see the generic <style> tag in the Css panel
- other trouble shooting tips
- Positioning Elements in CSS: absolute positioning Vs relative positioning
- the normal flow of the document, gravity is backwards on an HTML page!
- Using Divs
- Create Mouse Rollovers
- What are "Roll (mouse) Over's, Mouse Out, and Mouse Clicks events
- The Behaviors panel
- The roll over images button
- The navigation bar tool (if time permits)
- Javascript code - all done for us by dreamweaver (put in the head section html tags)
- Library Items
- what are Library Items? (why are they so cool?)
- Creating Library Items (the assets panel)
- Using library assets after we create them
- modifying them later
- using code snippets (optional)
- The <head> ....</head> tags in your html document.
- page titles (may be the most important info on the page)
- meta tags (what are meta tags, what does meta mean)
- search engine