Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Dreamweaver CS6
Watching:

Positioning elements


From:

Creating a First Web Site with Dreamweaver CS6

with Paul Trani

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating a First Web Site with Dreamweaver CS6
2h 48m Beginner Aug 30, 2012

Viewers: in countries Watching now:

Join author Paul Trani as he shows how to create a web site step by step with Adobe Dreamweaver CS6, one of the industry's leading web authoring tools. But not just any web site. A responsive HTML5 web site that works across multiple browsers and devices, complete with rich imagery and text, a robust portfolio, video content, and even a contact form. This course covers how to use web standards such as HTML5 for structure and Cascading Style Sheets (CSS) to control colors, fonts, navigation, and more. The course also demonstrates how to test across multiple browsers and devices and upload your new site to the web.

Topics include:
  • Understanding basic web principles
  • Adding content to a web page
  • Linking to web sites and email addresses
  • Styling content with CSS
  • Creating a layout that fits multiple browsers and devices
  • Building an HTML5 layout
  • Inserting images and video
  • Adding a menu bar
  • Creating a contact form
  • Integrating a Twitter feed
  • Uploading and testing a web site
Subjects:
Web Web Design
Software:
Dreamweaver
Author:
Paul Trani

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.

Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS6.


Expand all | Collapse all
Please wait...
Q: Where do I learn more about how to make a website?
A: Discover more on this topic by visiting how to make a website on lynda.com.
Share a link to this course
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.
Upgrade now


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.

Upgrade now

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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