Sign In | Subscribe

Enter your Sign on user name and password.

Forgot password?
  • Follow us on:
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Lecture Comments (2)

1 answer

Last reply by: Candyce Mairs
Tue Jul 30, 2013 8:07 AM

Post by Miguel Cuzquen on July 29, 2013

What does debugging means in simple user terms?
Thanks in advance for kind your replay

Separation of Content & Presentation

  • View separation-of-Content-presentation.jpg
  • The web was created as a way for researchers to share research information
  • The browser is used to read the HTML tags on a web page
  • When the web began it was comprised solely of text, bulleted & numbered lists & hyperlinks
  • As the web began to take off, users wanted it to be better organized
  • Additional HTML tags were added in order to allow for a page to be better organized and include images
  • Web page content is provided using HTML tags
  • The HTML tags on a web page provide structure to the web page
  • The content for a web page is either static, meaning it never changes, or is provided when the web page is requested using a database to provide the content
  • All content ends up within HTML tags in order to be displayed onto the web page
  • Styling for the web page content is done using CSS
  • A browser is comprised of the following:
    • HTML Parser - reads the HTML tags on the page to set up the page structure
    • CSS Interpreter - reads the CSS style rules on a web page to format & position web page content
    • JavaScript interpreter - reads any JavaScript on a web page and awaits event triggers which change content on a web page

Separation of Content & Presentation

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Three Parts of a Browser 1:15
    • HTML - Page Structure
    • CSS - Styling
    • JS - User Interactivity
  • Interpreters 5:24
  • Summary of the Three Parts of a Browser 6:03

Transcription: Separation of Content & Presentation

I now want to talk about the separation of content and presentation and the three pieces of a browser.0000

It is important for you to understand the concept of what all is involved with the browser because the browser it is what is going to display everything we create for the user.0008

So, it is a very important piece of the web.0019

Let us take a look at what a browser contains.0022

This also helps you in debugging, if and when you get to that point, so that you kind of understand what piece is doing what.0026

So, we have separation of content and presentation and that is a specification that was created by the W3C, the controlling standard organization for the web.0036

And, when HTML first started, HTML was everything.0049

We tried to do everything with the it, the web took off, all of the sudden HTML could not do what we need it to do, especially when it came to presenting content in a nice visual manner.0054

And that process continued, so that is when another piece came into play.0066

So, let us take a look at what piece does what within our browser.0071

First of all there are three parts to a browser.0076

The browser has an HTML portion, a CSS portion and a JavaScript portion.0079

Now, the HTML piece provides the page structure.0086

Specifically, the structure of the page is created all with HTML, so it is an important piece.0090

Everything comes down to the structure of that page in HTML and that is the first thing that gets displayed when you look at a page.0100

So, if you are not adding the other pieces to a proper structure, it is like the foundation of your house.0109

You are building floor after floor, you are adding windows, you are adding drapes, you are adding carpet, you are adding painted wallpaper.0116

You are making it look nice meanwhile you have got this shaky foundation.0123

So, HTML it is where it is at, that is our starting point and that is the piece that Dreamweaver helps us create.0128

Now, how do we make that structure start looking nice?0137

Just like the house analogy, first we get that foundation, and then we build the walls, add the studs0142

But, our house does not look very nice when it just has plaster or wall board, or whatever, inside of it.0149

We need to make it look nice and that is where CSS comes into play.0156

CSS, for Cascading Style Sheet, is the important piece to give our fonts a family, to make them look nice, adds a size to our font, it would also add line height, it adds the size of your fonts specifically.0162

So, all formatting is done by CSS.0181

Now what about the positioning piece?0184

Well, that is where CSS also comes into play.0188

Poor HTML used to try and do all that using HTML tables and it did not work very well.0191

It was complicated, it was messy, you go to put a new image in, that was a different size, and all of sudden you whole page go crazy.0198

So, what we have is CSS positioning and I would say of HTML and CSS in terms of the styling, the positioning piece is the tricky one.0206

The formatting, most people can figure that one out on their own, but when it comes to positioning, and what I am talking about is this piece here.0220

So, we have a header up at the top, how do I get that header positioned correctly?0228

Then, we have our navigation over here, how do I get that on the left underneath the header?0234

And then we have our main content area, and our content area could be subdivided into columns or not and then we may or may not have a footer piece.0240

So how do we get all those pieces of the page sitting in the right way and sitting in the right way in every browser?0251

That is the tricky part, but formatting and positioning work together sitting within that HTML page structure.0260

Now, we get to the fancy stuff, so I want to add user activity or inter activity and we want the images to change and we want messages to appear, we want some fancy things to happen.0270

That is where JavaScript comes into play.0283

JS is standing for Java Script, it adds that interact activity piece that we want with regards to users, so we can get other things to happen besides this.0287

JavaScript has become a big piece of the webpage puzzle in terms of making it look fancy do things it is all JavaScript behind the scenes.0301

So, basically the three parts of a browser come down to HTML, CSS and JavaScript and they all work together.0315

Now, CSS and JavaScript, per say, are referred to as interpreters because that is exactly what they do.0326

They interpret the code we write within our webpages, and they may interpret it differently between browsers.0332

You will find for the most part in the HTML side that piece is not too different browsers.0342

But, the CSS and the JavaScript, because they are considered interpreters, they can interpret it a little bit different.0348

The CSS and JavaScript requires more testing in the browser than the basic HTML piece.0357

But, that is the separation of content and presentation and how the three parts of a browser all work together to create a very nice looking page and acting page based on the interactivity of a website.0363

And you want to get fancy, you are moving into JavaScript or CSS to do it.0381

So, those are the three parts of a browser and how we separate content and presentation within a webpage.0387