Step-by-Step Dreamweaver Tutorials:
Here's what you get with DreamweaverMadeSimple...
1. Absolute Basics:
So you've got your Dreamweaver software, you're excited about getting started and creating your first site...
But where do you actually start?
What kind of document should you open to create your first page?
And what do you need to do, to make sure your site will actually show up on the internet?
This mini lesson shows you what you have to do to get started with Dreamweaver:
"In this section we will learn how to create a web site using the website creation wizard. Double-click the Dreamweaver icon on your desktop..."
Ok, so you've finished setting up your site, awesome!
Now it's time to get started with the actual fun part: Creating your first page!
Step number one is to give it some content. Let's put in some text!
"Let's start adding some content to your home page. In the Files panel, double-click the "index.htm" file..."
1.3 Add links to your web page:
Now that your page has some text on it, let's find out how you can create some links to other pages, or even other people's web sites!
This is really what brings your site to life, because links allow your visitors to have a proper look around the whole site.
"A web site consists of two or more web pages, interconnected by links. We will now create a basic navigation system to connect the home page with the pages that we will later create..."
1.4 Insert graphics
If you've followed the last few steps, your page should be coming along quite nicely.
But do you know what's definately missing?
Some images!
You want some great graphics, photos, logos... whatever you fancy, to make your site look more interesting and fun.
"Now that we have our home page set up, we want to insert an image.
To do so, click on the Images icon..."
1.5 Change your colours
Change your page's background colour, the colour of your links, of your text... Let's make it COLOURFUL!
"Your page is coming up ok, but it can still use some adjustments in terms of colors. So click Modify and choose Page Properties..."
2. Laying out your site and Navigation
Now that you know the basics let's see how to go about designing a professional page.
2.1 How to layout your pages properly by using tables
Did you know that one of the most important things when working in Dreamweaver is to use tables?
Without them you don't have any control over your layout, and your page will look like a kid's drawing.
Once you master tables your pages will be so much easier to create, and tey'll look like a pro designed them.
"Now we will learn how to build an advanced layout for the site, starting from a web site template created using a graphics program. We will lay out the pages using tables, so it is a good idea to make a sketch of the layout before starting in Dreamweaver..."
2.2 Add images to your layout.
Great, you've just created a proper professional web page layout, using tables!
Now it's time to start filling your layout with some goodies:
How about we start of with a great looking banner, then we add some 3D effects by inserting shadows... this will look awesome!
"Click the banner cell and insert the banner.jpg file here.
Dreamweaver Made Simple v1.1 Page 45
Click on the menu cell. We want to set the menubar.jpg image as background, so we can later add the navigation bar in this cell. To do this, click on folder icon next to the background image..."
2.3 Create a navigation bar
The navigation bar is the bar on top of a site, or on the left hand side, that contains the links to other pages of the same site.
Using a navigation bar is so important, because it allows you visitors to navigate properly on your site.
Think about it: Without a proper navigatin they won't be able to get to all your pages!
And here's the best:
Dreamweaver has an awesome function that lets you insert a navigation bar in only a few simple steps:
"Click on the second row of the table. This is where we will insert the website navigation bar.
Click Insert, then Image Object and choose Navigation Bar..."
3. Utilities - Tools to help you create your site
3.1 Understand code view and design view, Check spelling, find and replace text, and check for broken links
Wouldn't you agree that a website can looks as good as it gets, but if it's full of spelling mistakes, and half the links don't work, you're starting to feel that this site is kind of dodgy... and leave.
To make sure this doesn't happen to you and your site, Dreamweaver has some great features to check for spelling mistakes, for broken links, and it even finds and replace words for you - automatically.
"Dreamweaver has built-in spelling check capabilities. You can access it by pressing Text..."
4. Interactivity
Here you'll discover how to make your site more interactive by using forms (e.g checkboxes or textfields).
We also show you how to create a template, so you don't have to design ever page from scratch, and finally you'll find out how to get your finished site online.
4.1 How to use forms on your site:
Forms, like textfield or checkboxes, make your site more fun to use, cause people can actually DO something, and kind of interact with your site!
"We want to add a form that can be used by the visitors of the site to send suggestions and complaints. Click the page, just below the title.
Press on the toolbar selection menu..."
4.2 How to create a template from a page
Using templates will save you HOURS of work.
Here is why: Firstly, you don't have to create every single page of your website from scratch. Instead you have a template with the main layout, and all you need to add is text, maybe some images... done.
Secondly, if at any point in the future you wanna change something on every page, for example add a new link to your navigation bar, you'll only have to do that once, on the main template. All the other pages that you created from the template will update the change automatically.
Just imagine you had a 10 page site, and you'd have to go through each of page manually... very annoying.
"We will create a Dreamweaver template, starting from this simple page. Press File..."
4.3 Uploading your site
So you're finished? Done? Site is ready to go?
Congratulations!
Now all we need to do is upload your site, and the world can start visiting.
Hang on... "Upload the site?" How the heck do I do that??...
"In order to upload the site to a web server, we must first set the way to connect to the remote server. Press Site and choose Manage Sites..."
5. Advanced stuff - Learn how the pro's make their site look great!
Once you know how to do the steps above, you're basically ready to rock.
But, just in case you feel the urge to know even more, here are some of the advanced goodies...
5.1 Create custom styles
Ever heard of CSS styles? They are basically a custom made style, created by... that's right: yourself, that you can apply to your text, tables, etc.
So for example you can create your very own CSS style for text: You can choose the attributes to be verdana font, 12 pixels in size, bold, unserlined and bright pink.
Next time you want exactly this style for your text you simply type the text, highlight it, and choose the corresponding CSS style.
Pretty handy, and it saves you a lot of work and hassles.
"In this section we will learn about custom styles. They are generally known as Cascading Style Sheets (CSS) and are used to format a web page..."
5.2 Employ CSS styles
Now that you've learned the basics of setting up a CSS style, let's get a bit deeper into how to actually use them...
"We will now learn how to use a CSS file in our web page. Press Text,
then CSS Styles and choose Manage Styles..."
5.3 Create a rollover image
This is so much fun!!
Did you know you can make an image change when someone hovers over it with their mouse?
It's a great effect, and real easy to do:
"Rollover images are a great way of improving the look of your site. In this section we will learn how to create a rollover effect. Click the empty cell..."
