Click on any phrase to play the video from that point.
[♪ Music ♪]
[Classroom] [Basic Site Layout and Navigation in Dreamweaver CS5]
Now, in the last lesson, what I talked about was the fundamentals of websites,
how they work and how the web works in general.
And in this lesson, what you're going to do is build your very first web page.
But before we jump into Dreamweaver, I want to make sure you have the files.
So, if you're on Adobe TVs website, go ahead and click the
"download sample files" button to download the assets,
or if you're not on Adobe TVs website, just go ahead and go to the URL that's listed.
Okay, so once you have the assets, you can just go ahead and put them
on your desktop like I have them here,
and what I want to do first off is launch Dreamweaver.
And when you launch Dreamweaver, you're greeted by this welcome screen,
and from this welcome screen, you guessed it, I'm going to create
a brand new HTML page.
Okay, so I'm going to select HTML, and I want you to click "HTML."
And it will create this HTML page.
So, this is Dreamweaver.
Let's first make sure the workspace is set up appropriately.
So, I'm going to go to "Window," go down to "Workspace Layout,"
and I'm going to change this to "Designer."
So, go ahead and select "Designer."
And it will change the workspace to something maybe a little more friendly.
Now, notice each one of these panels can be adjusted as well,
say, for instance, this BrowserLab, if I double-click on it,
it will open up this panel.
Well, I really don't need this panel right now, so I can always sort of
drag it out if I want to reposition it, but in this case,
what I want to do is I just want to close it.
So, I'm going to click that little close button right there in the upper left to close that panel.
And I'm going to go ahead and leave open the insert panel,
this CSS Styles panel and then this Files panel.
Again, here's another panel that I don't need, so I'll just click and drag it out,
and again, if you don't need a panel, you can always drag it out
and enclose it, but ultimately, I want you to make sure
that you have the Insert panel, the CSS Styles panel and the Files panel on the side.
Right down here at the bottom you'll see the Properties panel, which will list out
all the properties of whatever item I have selected.
Now, if you don't see any of these panels, what you can do is you can go to
Window and you'll see all of the various panels right down in here.
So, again, if the Files panel isn't open,
just go ahead and select that and it will open it up.
Obviously, it is open, that's what that check mark means.
So, it is displayed right here.
Okay, so, here I have this untitled document,
my very first web page, HTML page,
and what I want to do first off is I want to go ahead and change the title.
So, right up here, since this is for a restaurant, I'm going to go ahead
and type in the title of this page,
"Ristorante Paolo Belletti."
This is important because this obviously is the name or the title of my page,
and I'm going to go ahead and type it in there, but let's take a look
at what's going on behind the scenes.
So, notice I'm currently in Design view, but watch what happens if I click on Split view.
It actually gives me the code right here.
This is the HTML code, and what I just modified was the title right here.
Okay, I can even go to full Code view by clicking right there
and here is all of my code.
So again, I can use this input text field right here for title to change it there,
or I can actually modify the actual code right in here.
So again, I'll just jump in here and I'll type in "Home" like that,
and there it is and I'll just go to, say, Design view if I click on Design view.
It if was any text that I typed in on the page, then it would appear in here,
but notice how it changes the title.
So really, you have the flexibility to work in Design mode, Split mode,
or this Code view as well, and what I'm going to use is I'm going to use Design mode.
So, I'm going to click "Design," that Design button, so that's pressed.
So, your next step at this point is actually putting content on this page.
Now, you don't have to type in all of your content right in Dreamweaver.
What you can do is you can take content from other sources
such as a TXT file, a DOC file, even sort of copy and paste text from an email.
It really doesn't matter, but oftentimes you'll be dealing with content from another location,
and what I have in here in this Ristorante Paolo folder, if I take a look inside
of this Assets folder, you will have this TXT file.
This is a website content TXT.
So, just double-click on that file to open it up,
and notice here's plenty of text.
So again, this is all the content for the website.
Notice how it says "Home page."
Here's the home page content, the menu page.
As I scroll down, the location page and then contact page.
This is really my home page, so what I'm going to do is I'm going to just click and drag
to select all of this text right here, clear up to "Classic Italian with a Modern Twist."
I'm going to select all this text, and I'm going to do an Edit, Copy.
So, I'm going to copy that text.
Now, I'm going to go back into Dreamweaver, so I'm going to click back
on that Dreamweaver page and all I need to do is go to "Edit, Paste."
Sure enough, there's the text.
I can go ahead and modify it, do whatever I need to to it.
In this case, what I want to do is I want to just go ahead and apply
some basic formatting because this is really a heading,
this line right here, so I want to make some heading text
and have it stand out more.
So, what I'm going to do is I'm going to go down here to the Properties panel
and what this lists out are all the properties for whatever I have selected.
In this case, it's this text.
So, I can come down here, and again,
I don't want this to be paragraph text.
I want it to change this to "Heading 1."
So, I'm going to select "Heading 1."
Sure enough, it changes that text.
So, go ahead and do that.
Also with this "Chef Paolo's Promise" I need this
as sort of a secondary heading, "Heading 2."
So, just select those words, go down, again, right down here
under Format, Select, Heading 2, select that.
Keep in mind that this HTML tab is pressed, okay,
so there might be a chance that maybe CSS is pressed,
so just make sure that you have HTML pressed there.
And sure enough, it changes.
So, that's looking better, that's more along the lines of what I want.
But I really don't have any control over the positioning of this text.
I don't like how this text goes clear across this HTML page.
So, what I want to do next is I want to go ahead and create
a box that this text will go in.
So, what you'll need to do is go to the Insert panel, and again,
if it's not open, just go ahead and go to Window and it'll be listed in there.
But here's my Insert panel, and this second item, again,
under Standard, there's this Draw AP Div,
and what that is is that means it's an absolute positioned division.
So, it's just a general term for sort of dividing up this layout.
That's what a div is, it's just a division.
The AP means an absolute positioned div, and that's what I want.
I want to control the positioning of my text.
So, just click "Draw AP Div" and on your page
just do a click and drag to generate that div.
Notice how it creates this box, and yeah, this is more along the lines of what I want.
So, what you can always do when controlling the position
is you can just go ahead and roll over in the upper left and grab that box.
This is your box to control the position of it, and I can move that around.
So, I might want to move that down a little bit.
Not only that, what I can do is I can control the absolute position of this box
using my, you guessed it, Properties panel.
So, right down here, you can see it says left, position from the top,
but more importantly, what I want to do is I want to adjust the width of this box.
Okay, so I'm going to go ahead and type in "800" and hit the Enter key,
and it makes it 800 pixels wide.
Looks pretty good so far.
The next thing I'm going to do, right down here in the Properties panel, since I want to be
a little bit more descriptive in the items that I create, I'm going to go ahead and change this
from AP Div 1, which is just a generic name for that box,
and I want to make it something more descriptive, like content.
Okay, I'll just type in "Content" right there.
I'll hit "Enter."
And that's actually my content box now.
So, it's set up and good to go.
So, the last step is to select this text.
So, I'll just click and drag to select all of this text,
and I want to go ahead and move it inside of this box.
So I'm going to go ahead and cut it.
Go to Edit, Cut,
and then put my cursor inside of this box.
So, I've just clicked inside of it, and I'll do Edit, Paste.
Sure enough, there's my text.
And this, again, more along the lines of what I want to do.
One last note.
When it comes to pasting content in from other documents,
obviously I've used a TXT file,
but you can also use other formats as well.
Here's a DOCX file, and this actually has some special formatting on it as well,
and notice that it already has some header, and then even a Header 2.
And what I can always do is I can always copy this text that has formatting,
and I can paste it into my Dreamweaver page.
So, feel free.
That option is available.
When you do paste it in, like I did a second ago, I went to Edit, Paste.
I can go to Paste Special, and that's when you get these various options.
So, if you want to keep that formatting, the bold, any underlining,
whatever the case may be, that formatting will come through, again,
less work you have to do in Dreamweaver, and like I said, I have this done.
So, I'll click "Cancel," and I'd say it's pretty darn good to go.
So, my final step here is of course to save my page.
I'd say this looks like a great start,
so I'm going to do a File, select Save,
and I'm going to save this back to my Ristorante Paolo folder.
And what I'm going to do is I'm going to create a new folder
where my entire site's going to live, specifically, this page right now.
So, what I'm going to do is I'm going to click "New Folder" right there,
and I'm going to create a new folder called "My Site."
I'll create it right in there.
It's really in that same folder in that My Site folder.
I'm going to go ahead and give this a specific name.
I'm going to call this "Index.html."
The index HTML page is the very first page that somebody's going to see
when they come to your website.
So again, this is my home page, so when you think of index,
think of home page, okay?
Index HTML, click "Save."
So, congratulate yourself on making your very first web page,
and again, this is the start of an entire site.
So, the next lesson is going to include setting up a local site
where your entire website will live.
So, thanks for watching.
[♪ Music ♪]
