Dreamweaver Tutorial - Create a basic Webpage

[Music Playing]

Hi, there. Mark Costner here from DreamweaverMadeSimple.com. In this short tutorial series, I am going to show you how to create a basic webpage using Dreamweaver. But before we get stuck into actually using Dreamweaver, there are few other things that we need to do.

Step one before you create your actual website in Dreamweaver, you need to decide an actual layout and the best way to do this is to spend sometime browsing around on the internet and find some sites that you actually like. Keep a pen and paper handy and make notes of what you like and dislike about the various websites. What color combinations do you think work for you? What sort of style works for you and what sort of layout?

Once you have browsed around bit and got some idea of layouts that you actually like, it is time for you to create a wireframe. Now, a wireframe is basically a black diagram or skeleton outline of your website. Let me give you an example. Let us say that we have decided that our website is going to have a header up the top and in that header, we are going to have four buttons that we are going to use as a navigator bar and these buttons maybe buttons like Home, Contact Us, Frequently Asked Questions or whatever else it maybe. Next, we have decided that we are going to have the main part of the page as the body with no extra menus or anything else; just our plain text in there and any images and in this case, we have decided we also want a photo to go at the bottom of the actual page.

Now, looking at this, it looks pretty uninteresting and certainly not attractive. But that is where the next step comes in; creating your page graphics. The whole idea here is that you will create the graphic elements or the pictures that will go into each one of these sections and once it is complete, you have a complete website. Let me give an example once again. So, let us say we have gone off and we have used the software package something like Photoshop or Fireworks or any other program that you chose to create the graphics in. You then create first of all your head of graphic that would go into the header space. Then you might create a photographic that will fit in to the footer area of your website. As you can see, our website is really beginning to take shape. But we would add a little bit more style to this particular site. So, we are going to put some side bars on either side of the header and we are going to put some sidebars on either side of the body just to give the page a little more definition. Then, we are going to also add those same sidebars to the footer and as you can see, by simply creating a few simple graphics, we now got a complete webpage template ready to go.

Now that you have created your wireframe and created your page graphics, you are just about ready to get started with Dreamweaver. Stay tuned for our next video. We are going to show you how to set up Dreamweaver the correct way and also get started on creating your first webpage. Now, if you like this tutorial, you can get 15 more tutorials over at DreamweaverMadeSimple.com and we even got a 15 part free tutorial that we are giving away over there. So, pop on over to DreamweaverMadeSimple.com and check out all the Dreamweaver tutorials available there. I look forward to seeing you there and keep your eye open for the next video in the series.


Transcription by: Scribe4you Transcription Services