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 (6)

1 answer

Last reply by: Candyce Mairs
Sun Oct 5, 2014 8:56 AM

Post by David Martinuk on October 3, 2014

When ever I try to preview in safari it just brings up the top sites window, but when I preview in chrome it works fine. Why won't it preview in safari thanks, David.

0 answers

Post by David Seto on January 11, 2014

The second time when I posted a comment, it was o.k.

0 answers

Post by David Seto on January 11, 2014

There is a problem posting a question or comment. When I cliked on the button Post Comment below, I was kicked out of the lesson and it restarts automatically. Why?

1 answer

Last reply by: Candyce Mairs
Sun Jan 12, 2014 4:02 PM

Post by David Seto on January 11, 2014

I had asked the question regarding color picking of RGB colors in your Dreamweaver CC course. It was not possible to pick RGB in Dreamweaver CC. I tried it in Dreamweaver CS6. It is good. Adobe did a very bad job in getting rid of the old color picking method. It is not your fault, Candyce.

Building the Header Area

  • Pre-Defined layouts include areas on the page that you can customize
  • The present page has a logo image within a hyperlink
  • To delete this content
    1. Place your cursor in the header area
    2. Select the <a> tag in the Tag Selector
    3. Click the delete key on your keyboard
    4. We just deleted the image and hyperlink from this area
  • To add text within the header area
    1. Your cursor should still be in the header area, if not select the header tag in the tag selector
    2. Type the text "Wanderlust Travel"
    3. You should see text being added to the header area
  • To modify the css styles within the header area
    1. Move to the CSS Styles panel
    2. Each of the items in this list are styling something on our web page
    3. Each of these is known as a CSS rule
    4. Select the All button
    5. Locate the word header
    6. Drag it up to the top of this panel under the body tag so it can be located easily
    7. Click the pencil icon to edit the header tag
    8. Background category & note the present background color
      • Change the background color to #DA3700 which is an orange color
    9. Text category:
      • Font-family: Palatino linotype
      • Font-size: 50px
      • Font-weight: bold
      • Font-style: Italic
    10. Box category
      • height: 100px
      • padding-left: 50px
  • To change the Title for the document
    1. Highlight the header text on the page
    2. Use ctrl/cmd-c to copy that text
    3. Move up to the top of the document window
    4. Select the text untitled document and choose ctrl/cmd V to paste in the correct title
  • Dreamweaver has no auto-save feature (for good reason) so you must save your page as you complete specific pieces of work
  • Save the page and preview the page in the browser using the globe icon above the web page

Building the Header Area

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
  • Code View and Comments 0:40
  • Customizing the Header 1:22
    • Removing Image Placeholder
    • Select Regions
    • Adding Text
    • Set Page Title
  • CSS Styles Panel 7:31
    • Edit Header Color
    • Edit Header Text
  • Add CSS Style Rule 11:15
    • Rule Definition
  • Summary 14:36

Transcription: Building the Header Area

We are now going to take a look at starting to customize our predefined CSS layout page that we created and it is named the index.html page, within the predefined layout website.0000

So, there are two websites listed here, that I created previously or I defined within Dreamweaver and the predefined CSS layout is the website I am working in. 0014

And a new page was created from a prebuilt starter page and that is the page you are looking at here.0027

What I want to do is start making this page my own, so that is where we are going to start with and the first think I am going to do is take a look at the coding on the page.0034

Now, if I turn into Code view, you will see there are some light grey pieces throughout this code, you can see up here there is a few.0046

There are some comments for you specifically, to understand what each of these different pieces are all about.0057

There is also text within the each section that talks about that area of the page trying to explain it to you so you understand the layout of this page that helps you modified it yourself.0067

So, we are going to go up to this upped header area and I want to customize it, we are also going to take a look at adding a title to the page and add a header for the top of the actual page as text.0082

Let us start with the Header area, which is right up here, this upper green area.0096

What I am going to do is select this logo within the Header area and that is actually a placeholder.0103

If I go down to the Properties, you can see it says what it is, which is a placeholder and in case your Properties is not open, you can always get to it by going to Window, Properties.0111

And that properties area is telling me that is what I have selected, now that is fine, but this image place holder is also placed inside an A tag.0124

The idea is, you put in the logo for your company, here and when the user clicks on it, they can always get back to the home page for that particular website, simply by clicking the logo.0135

We are going to remove this, because we are going to use just text, up in our Header area, we do not need an image, SO how do we go about removing that?0149

Well it IS very simple, I can select it and hit the Delete key on my keyboard, or if I want to be a little pickier, what I can do is use this area here, right above the Properties section or Properties panel. 0159

This is known as the Tag selector, and what this does is show me all of the different coding pieces surrounding that content I have selected.0174

And it is a great way to be very particular about the pieces of the page you remove even if you are in Design view -- I do not have to go to Code view in to do this.0185

First of all I have the pace holder selected in the Tag view and you can see that is img, so I am going to right click and remove that tag and you could see the image is gone from this area of the page.0196

If I put my cursor in that area you will see I only see header now, so if I click on header it gets highlighted up here.0212

Now, this is another way to select regions of the page, you put your cursor inside of it and you will be able to see the code and it makes a little bit easier to select it.0223

We have removed that code for the place holder, we have also removed, because you cannot see it any longer, the hyperlink for that area.0235

And what I am going to do is add some text in here and I am going to say Wanderlust travel.0246

Ultimately, that will become the header logo, so to speak, area of my page and I am going to customize it using some CSS styles, we will get into that.0253

The other thing I want to do is make sure that this untitled document it is not the title on my page.0264

A title it is very important, let me go ahead and Do a file save, Dreamweaver does not have an auto save feature, so you are going to want to consistently save your page once you know it is all set.0271

The reason there is no auto save is because it could be saving things that we do not want it to when we re testing our code.0285

Dreamweaver it is a little bit different when you Are working in code and using an auto save versus a graphics type program or some of the other Adobe products, where it Is a little more important, to save, consistently.0292

But let Us take a look at where this untitled document ends up if we put it in the browser.0306

Now, that I have saved, I will go up here and I will just choose Chrome, because it is the first one. 0312

And now, that I have saved look what happens on the tab in the browser, this looks pretty tacky, you never want to have an untitled document like this show up on the web.0318

It becomes a part of the tab, if you are in Tabbed browsing, I will close that up, let me go out to Safari and show you.0330

What happens in safari with your title, is it goes up in the upper bar.0340

Now, this is default Safari, I have not customized it in any way, so if it Is tabbed browsing it goes into the Tab, if it is not Tab browsing, it goes into this upper bar area.0345

The other thing that occurs -- and I will go into Firefox just to show you what that is like -- when you go to Bookmark a page, the default text is whatever the title is. 0358

Now, in Firefox you can see it is up across the top bar, it is also in the Tab, and if I go to Bookmark this page, look at what happens. 0371

The title becomes a bookmark automatically and a lot of users do not know they can change that.0382

You never want untitled to be showing as the title of your page, so I am going to change this, and what I am going to do is simply copy using controller Command-C, I will highlight the text we just WROTE and I Will copy it and use commander Control-V to paste.0389

We will go ahead and to that again, so I can select and right click to copy, as well, whichever way you want and up in the title area I will right click to paste.0412

Whatever method of copy and paste you want to use, I just want TO make sure that the name of our company ends up in that title area.0425

And I will do a quick save, so file save, you will see me use a few different methods to do this, just to expose you to them.0433

So, we now have a title on our page, we also have a header on our page for our company and that is great, now what are we going to do?0443

Well, what we need to do is get rid of this green and we need to customize this text a little bit, so how do we do that?0453

We are going to move over to the CSS styles panel and this is probably new to quite a few of you, what I am going to do is click to open the CSS styles panel...0461

...and I am going to double click to close the files panel so that you can see you can see my panel just a little bit easier.0473

If your screen is a little taller than mine, feel free to keep the Files panel open.0481

Now, in case you do not have the CSS styles open, you can always get through it to window, CSS styles.0487

Let US take a look at what it is going on in this panel, and this panel I Am in the All button, so make sure All is selected up at the top and this panel actually has two pieces to it.0494

If I click All, you can see a listing of all kinds of CSS rules, and everyone of this I click on it is considered a different rule.0508

Now, this upper area of the page, if I put my cursor inside of it and look down in the Tag selector here, you can the tag that is being used is the Header tag.0519

What I am going to do is search for header in my styles, because there is a rule for that header that is making it this greenish tan color.0530

I have the header right here and take a look, the background color for this area is that long hex value, this is referred to as a hex value, is six characters plus a # and that is representing a specific color.0540

So, this hex value is creating our color, what we want to do is modify this color and we are going to use #, if you do not put in the pound it would not recognize your color.0559

We are going to do DA3700 and then I will hit Enter or Return and, Voila, we now have an orange Header area.0572

It is the rule for the header, which is the area I have my cursor in, and we just changed the background color to orange.0584

Now, there are a few other things we want to modify within this area, but let Us take a look at this particular text.0594

Now, I want this text to be a little bit bigger, it is not quite big enough. 0603

And what I am going to do is put my cursor anywhere in that text and I am going to do a control or command and the number 1, so, control or command and the number 1, and guess what?0608

All of the sudden it looks identical to our instructions, on the page, so we do not really need that instructions, but we will fix that later.0620

Now, at least, my text is large enough, but I want to modify this text.0631

Well, since I have made it an h1, now, you can see down in the Tag selector, inside our header, I have an h1. 0637

When we hit control or command-1, what it did was put an h1 surrounding our content.0645

If I go into split view and highlight, you will see code view has it highlighted, so you know what it is you are referencing and you can see there is an h1 on each side of this text.0653

What I am going to do, is add a style for the h1, if we look in our style rules we do not have an h1 anywhere in the list, so we Are going to add one.0665

So, I will walk you through the steps of adding a style rule for our header1.0677

First of all, in the CSS styles panel, at the bottom of the panel, in the bottom right corner, there is an attached style sheet as an icon, and that is a little link, there is the plus sign to add a new CSS rule, and that is what we are going to be doing. 0683

I am going to click +- and what that does is get me into this very scary interface for more people, so do not worry, by the end of this course you will be very familiar with this. 0701

And what I am going to do is start at the top, the selector type is going to be a tag, because what we have is a heading tag, it is going to be the h1.0714

Now, when I choose tag up here, you will see it gives me every html tag there is and what I want to choose is the h1.0727

I am going to put this in this document only and that means that all of the rules are contained within this single page.0738

So, this page contains everything the page needs in terms of style, I will click ok, and let s add some styles to our header1.0748

First of all, let s choose a font family of Palatino linotype, this is a built-in font stacks within Dreamweaver, and so I will select that, right here.0759

The other thing I am going to do is set the font size and I am going to use a pixel size, for now.0772

I will say 50 pixels tall, I am going to set it to bold, so in font, wait, and I will make it bold.0779

And the other thing I am going to do is make it italic, so under fonts style, I will choose italic and looks like there is a couple of OPTIONs, but there really is not.0789

The italic is really the only one, either is non-italic or italic, browsers do not support that oblique.0800

We are all set there, now there is one other thing I want to do and that is go out to the box category and what I am going to do is set some items here.0809

So, that box was not quite tall enough, so I am going to set it to A SET 100 pixels in height, so I have a little extra room.0820

And the other piece I want to add is I am going to uncheck, same for all, and the left PADDING is going to be 50 pixels wide, SO Let us click OK and take a look at our page.0830

Now notice, our text is styled, it looks quite different, notice also that these instructions are also styled. 0847

What I am going to do in the instructions is keep my cursor within that area and I am going to do a control-2 for that one.0856

What that does is make it a header2, which is smaller than a header1, and now you, can see it, and does not look like my upper header1.0866

We have just started to customize this page, adding information within the header, we deleted the image, we deleted the hyperlink associated with the image, and we added our own text and styled it. 0876

We also added a title to our webpage that is going to show up in the Bookmarks area and also either on the tab for the browser, or up across the window for the browser.0892

So, we are on our way to customizing this predefined CSS layout page.0905

Make sure you do a Save, that is very important once you have it set up the way you want. 0911

And that is it, we will just keep moving on this PAGE customizing each little piece as we go. 0917

But you were just exposed to starting to work with the predefined CSS layout page and also modify some of those prebuilt styles that are built into the page to make it ours.0925