Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Positioning elements

From: Creating a First Web Site with Dreamweaver CS6

Video: Positioning elements

Currently you can see how my web page is set up. I do have some basic formatting, all of my text is in here, and I have a nice background, but still it's a far cry from my actual design that I created in Photoshop. So let's go ahead and take a look at that. Here I am in Photoshop, and you can see that I need to insert a logo, and I need to start creating some items in here, so I need to basically create a box to position in my navigation.

Positioning elements

Currently you can see how my web page is set up. I do have some basic formatting, all of my text is in here, and I have a nice background, but still it's a far cry from my actual design that I created in Photoshop. So let's go ahead and take a look at that. Here I am in Photoshop, and you can see that I need to insert a logo, and I need to start creating some items in here, so I need to basically create a box to position in my navigation.

I need this header text to be right there, and I need to create a content box right here, where all my content will exist. So I need to start creating those various divisions for my web page. So I'm going to do that by going back into Dreamweaver and right in here in Dreamweaver I'm going to place my cursor at the top, and I'm going to insert an image. The image I'm going to insert happens to be in my Chapter 02, my 04 Begin folder, keep in mind this is where my index.html file exists.

So relative to that if I go in that images folder, that's where I have my PNG file. So I want to make sure the link to my graphic, that URL is relative, okay so that's what that should like. Selecting Open, I want to add some Alternate text, Eva Jones Design, search engines will pick up on this so that's why I want to add that Alternate text, there it is. Now I'm going to start positioning some of these items, and again, I want to start dividing up this content, so I'm going to use some divs.

Luckily, if I go to my Insert panel, and I change to Layout--and I have these different layout options--and really what I want to do is start to absolute position some divisions, some divs, so this gives me the ability to Draw an AP div. So selecting that I can just click and drag to make a box for my logo, with that drawn, I can select my logo, Cut it, place my cursor inside of that AP div, and then Paste it just like that.

Now if I select that yellow border, you can see that down here in my Properties panel I can start to adjust this accordingly. In fact, I want it to be about 100 pixels from the left side, and the top looks perfect, because I want it to be right up at the top edge just like that. It looks pretty good--the Z-index I'll get into later--but that's the depth that it's at, and usually any time I start creating these divs, I just start getting the habit of just saving my files so that's what I'm doing, I'll save my file.

My next objective here is going to be to create navigation bar, so I'm just going to place my cursor up here and just hit Return a couple times to give me a little bit of space, but I want to draw an AP div for the navigation. So selecting that, drawing my bar just like that, you can see I've drawn this AP div just like that. In fact, right down here, remember it was black, in my Photoshop design I can change the background to black just like that. So I've created that, again, I'm just going to get in a habit of saving, I've saved this specific CSS element, but now what I want to do is inside of here if I click in here I can start typing in some text.

So I need to have home, about, portfolio, and contact as those various links, so I'm just typing in some text. Now I want this text to be flush right. So, what I can do is I can go to my Properties panel, CSS tabs selected, and just make sure your page is saved, so I'm going to save this page and right over here, and I can go ahead and align right, selecting that, it will align its to the right-hand side.

So far so good, I'm going to insert a couple more, Draw AP div for this header right here. Just beneath the logo I can draw that just like that, taking that line, Selecting it, Cutting it, placing my cursor in there, Pasting it in there just like that. You'll notice this did change, because it didn't actually take the Heading 1 style, and this will happen, if that does just select it and just like you did before for a HTML tab, you need to make sure you change that to Heading 1, and there's your particular style. All right, that looks good.

I can even shorten this up a little bit if I want to. Next up is all of this text right here, as I scroll down. Well, same thing, drawing an AP div, how about halfway right here, I'll draw that AP div just like that. I'll change the background color to black, and now I can take this text, Selecting it All, and then Cutting it and then placing my cursor in here and Pasting it.

You can see all of that text, I'll scroll up. But look at my box, look, that black only goes so far down. Well, if I select that AP div, you can see right in here, oh, look the Height 236 pixels, well, that's not going to work, I can select that, delete it, hit Enter or Return, and you can see it fills it up all the way down. All right, so far so good. I think that's working out pretty well, in fact, I'm going to select Live view just to experience this a little bit more closely to what the end user will see, and you can tell, look what I have going on? This logo is actually behind this bar when really I need to change the depth of these items so that's what I'm going to do next, I'm going to turn off Live view.

I'm going to select this AP div. the first one that I drew, the Z-index is at 1, so it's like closest to the background. Well, I just need to make it higher than this nav, which happens to be at 2, so if select this one, I can select it, and you know what? Let's type in 200, okay? Because you can go much higher than say single digits, and now that always going to be on top, even when I start to draw more in there just like I plan on doing. So, selecting Live view you can see all of my content is positioned appropriately, and now I can move on to the next step, and the next up will be actually customizing the look of this even more.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS6
Creating a First Web Site with Dreamweaver CS6

30 video lessons · 40155 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Dreamweaver CS6.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.