Click on any phrase to play the video from that point.
[♪♪] [ADOBE TV Presents]
[♪♪]
[CLASSROOM] [Classic Site Layout and Navigation in Dreamweaver CS5]
Hello. My name is Paul Trani. I'm a platform evangelist for Adobe.
We're going to cover basic site layout and navigation using Dreamweaver
where we're going to be learning how to make an entire website full of graphics,
full of video, text, you name it.
But before I get into all those details,
I want to give you guys an overview of how the Web works
as well as web pages.
So the Web works basically by a series of computers that are just all over the world
And these computers are known as web servers, because what do they do?
They serve up web pages and websites.
So what a user does is they will go to maybe use a web browser such as Safari.
They'll type in a URL, which is a Uniform Resource Locator, or a web address.
They'll type that in, say adobe.com, and they will get this web page. And that's what this is.
All a web page is is if I go to View Source,
it's a page filled with code, either JavaScript, using various web technologies
but most notably, HTML formatting.
So what HTML is it's just a web technology, it's a programming language
that is filled with formatting tags.
Say, for instance, right here it says "title."
The title for this web page is Adobe.
But this is a basic web tag for this page, an HTML tag.
HTML is HyperText Markup Language
because it marks up this text and just displays it whichever way you'd like.
So that's the basics of HTML, and I'll be getting more into that later.
But know that the web browser reads all of this code, all this HTML,
and of course displays this lovely page right here filled with graphics.
And sure enough, this page is linked to other pages.
As you can see, I can click on any one of these buttons up at the top
and it will take me to a different web page.
You link a number of web pages together, and what you get is a website,
which is what we will be making.
But before you dive into Dreamweaver,
what you need to do is design what you're going to build.
And that's what I've done already, so I'm just going to go ahead and open up Photoshop.
This is what you would do is you would use a graphic design tool,
you'd use Photoshop, you'd use Illustrator, you'd use Fireworks,
to design out a page.
I'm not going to go over how this was built,
but I do want to go over the fundamentals that I used in creating this website.
So this is for Ristorante Paolo Belletti.
This is this restaurant website.
What I've done is there's a graphic up here at the top
which looks nice, and that's kind of what it starts with.
But more importantly, it gives me the name of the site right here.
This is a crucial area when it comes to web design is this upper left-hand corner
because that's what people see the most.
So I want to make sure my logo or the company logo is going to be in that upper left area.
Next up I have this content.
So I have some text, and I have an image to kind of break up the text a little bit.
But this text is not only just straight text but it includes a couple things.
It has a header right here,
and even right here you can see that these two words are underlined.
The idea here is this is actually a web link.
So if the user clicks on this text, it will actually take them to a different page
or some other location.
But that's what I want to do is I want to differentiate a web link from text.
That's what I've obviously done in this design.
Let's take a look at web navigation.
Again, off here to the side you can see I have this stacked navigation.
And this isn't a very complex site. It actually only contains four other pages.
But again, it's considered a static layout.
I'll talk about navigation later as well. But all these links do is jump to other pages.
So if I take a look, in my Layers panel I actually already have those pages designed.
So let me click Menu.
Again, if they click on that Menu link right here, it will take them to the Menu page.
They can sort of peruse all the various items on this page.
They can click on Location.
They are of course given that location, which includes a nice little Google map.
And then there is a Contact page with a familiar-looking face.
But you get the idea. I've designed all the pages already in Photoshop.
And that's what I'd want to do is I'd want to create the design
and get it approved by the client would be the goal.
Now that the design is all squared away,
the next lesson will cover creating our very first web page in Dreamweaver CS5.
[♪♪] [ADOBE TV PRODUCTIONS - tv.adobe.com]
