Sign In | Subscribe
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

Bookmark and Share
Lecture Comments (3)

0 answers

Post by Candyce Mairs on September 18, 2014

Yes, the blank starter layout pages in Dreamweaver CS5 do not contain the 2 HTML5 options. You can still go through this exercise however. Just use the option in CS5 called 2 column fixed, right sidebar, header & footer. The difference between these 2 are the HTML tags on the page.

You should still be able to follow the exercises in this chapter using that page in your version of Dreamweaver. Please let me know if you have any trouble doing that.

0 answers

Post by David Martinuk on September 18, 2014

I was just thinking that I'm using CS5 for these tutorials and could that be why.

0 answers

Post by David Martinuk on September 17, 2014

When I click on blank page / HTML / my layout area does not show the two html 5 text to click on at the bottom. Please let me know how to find them,thanks David

Creating a Pre-Defined CSS Layout Page

  • We will create a new web page using one of the pre-defined CSS layouts
  • This web page will not look exactly like our original design
  • I want to introduce you to these layout pages so you can get a feel for how they work
  • To create our new pages:
    1. Select the Pre-Defined website in the Files panel dropdown
    2. Choose File-> New
    3. Moving from left to right, choose Blank Page, HTML, HTML5: 2 column fixed, right sidebar, header & footer
    4. Choose Layout CSS-Add to Head
    5. Click the Create button
    6. Save the file and name it original-predefined-layout.html
    7. Choose Save As once again & name it index.html
    8. This page will become our homepage
  • Our pages are set up with a header, footer, right navigation & a 2 column layout

Creating a Pre-Defined CSS Layout Page

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
  • New HTML5 Layout Page 0:49
  • Preview in Browser 2:28
  • Save Page 2:43
  • Browser Preview 4:35
  • Page in Files Panel 5:12

Transcription: Creating a Pre-Defined CSS Layout Page

We are now going to take a look at building a page based on one of the predefined CSS layouts within Dreamweaver and we are going to add it to our predefined layout website.0000

Make sure that it is chosen in the Files area, if you do not have this set up yet, you are going to want to take a look at Defining a site in Dreamweaver lesson so that you can get this two websites set up within Dreamweaver on your system. 0014

I also copied over a few files that we are going to use during this lesson, as we build our predefined layout page and that is where these files came from and these are located in the Exercise file tab, underneath the video area.0031

So, let us build a page, I am going to go up to File new and within this area I am going to choose starting from the left blank page HTML and I am going to go down to the two options in the HTML5 DocType area.0050

I am going to choose a 2 column fixed, right sidebar, so basically the only HTML5, 2 column option.0067

Over, in this right hand area I am going to keep the defaults, but notice if I really wanted to, I could change the DocType over here, by default, it showed up as HTML5 because that is the one I have chosen.0077

I also have the option of where to put my CSS files and we will get into that later, I am just going to stick with the default add to the head of the document.0092

I will click Create and my page is going to be created and opened in Dreamweaver.0103

This is the first time we have really been able to see a page in Dreamweaver, in the document window so let us take a quick at it.0110

Basically, we have the page and on the right hand side is the scroll bar in order to scroll down. 0120

If your screen it is a little bit taller than mine, you may not have to scroll quite so much. 0127

But basically, this is an entire webpage prebuilt for us, it has got text dropped in, it has got hyperlinks dropped in particular areas, what we are going do is use this as a starting point to launch our page.0132

Let us take a look at this in the browser, and I am going to do that by clicking on the globe up at the top of the screen and just choose a browser.0148

I will go ahead and just put it into Chrome, since it is the very first one.0159

Now, as soon as you do that, Dreamweaver is going to ask you to save it and we want to save this page anyway, so I will say Yes, by default you can see it gets the name untitled.0163

And the reason you are asked about saving it is because Dreamweaver does not know where this file is located, so if we start adding content to this page, Dreamweaver does not quite know how to coordinate it all.0176

So, what we want to do is as soon as we create a new page, we want to save it in the location where we want the page, so that Dreamweaver understands where that is.0190

Let us click Yes and whatever website you have open in your Files panel -- and I had the predefined opened -- that is going to be the default location to save a new page, which is perfect, saves us having to browse around, and I am going to name this index.0201

Now, the Index file, is one of those files that the webserver knows to use as a homepage, if nobody specifies a homepage when they come to our website.0220

So, my homepage is always going to be named index in any website I create, it is not going to be Home or Homepage or anything crazy, it is always going to be lowercase i with the word index.0234

The reason for that is every webserver out there understands that if I name a page index, with a lowercase i that is the page to use in case somebody does not go to a specific page within our site.0249

I am going to go ahead and save that, make sure you are in that same right folder, click Save and we now have a new index page added and notice it popped me right into the browser.0265

So, let us take a look at this page, and this what it looks like in the browser. 0279

There is a header section and that header has some, sort of, content in it, up in here we have the logo or if we had a logo, we would put it there. 0284

But the idea is this page is already populated with some information -- the idea is we replace this information with our own.0297

There is our webpage in the browser, I will go ahead and close that up, notice, and we also have an index.html within our Files panel now.0306

That will become our home page, in case your file is not showing up here, make sure you click the Refresh button.0317

If for some reason it is still not showing up as that index.html, you may not have had the correct website listed here.0325

So, if it is not showing up over here you want to go back and figure out where that file end it up being saved.0335

And you can to that very easily, just by doing a file Save as and it will show you exactly what folder, that file ended up in... 0342

And just make sure it is the same one as your site root folder, what we defined as the root folder, within Dreamweaver.0352

And I can hover over this and know the location of this folder versus where my Save as ended up, and compare the two and just make sure they are in the same folder.0361

This Files panel does a good job of refreshing, so if you are not finding it, for some reason, more than likely it did not quite end up in the same folder you have set up within Dreamweaver.0375

But that is how you create a new page and this is our predefined CSS layout page, what we need to do now, is go in and customize this page.0387

Dreamweaver did most of the work for us as far as the layout is concerned+ADs- now we just need to walk through the various steps to customize this page and we will be doing that moving forward.0399

But that is how you can use a prebuilt CSS layout page, simply save it as your own in your own website and now we have a starting point for a CSS position page and Dreamweaver did most of that positioning work for us.0414

So, that is a predefined CSS layout page within Dreamweaver.0432