Dreamweaver Tutorial

This is a helpful tutorial for Dreamweaver beginners. Basic user guidelines are very useful to one all. As you know, Dreamweaver is complicated software designed especially for hosting websites. In this generation of internet, it is always a plus point to know how to design a website.

In this tutorial, two things are shown effectively. One is to create a folder and second is to link text to a website. Creating a folded with a name that makes sense to you is important. It is easy and uncomplicated for Dreamweaver too. Creating a file like index.html will help Dreamweaver understand that this is the Home page of your site. These kind of tips are very useful to beginners.

We are doing a tutorial in Adobe Dreamweaver. Now, this is my first tutorial for Dreamweaver. In as such I think I am going to pretty make it pretty basic because Dreamweaver is a pretty complex program and if you haven’t made a site before, it can be very overwhelming and so, I think I’m going to do this first tutorial pretty slowly and this first tutorial is basically going to just introduce everyone to how to basically get a website kind of started. amm.. as opposed to, you know getting into all the technical stuff right away.

So, …. Ok, so how do you start a website? Well, it’s quite simple. It all starts with a folder. Keep that in mind. Every website you make, you want to have a folder pertaining to it. That’s pretty much the easiest way to say that. Oo.. Once you create your folder, you want all of the site files in that folder, to stay in that folder basically. So, it’s organized and Dreamweaver is happy that everything is in the same place basically. So, I’m going to go ahead and I’m going to create a new folder to kind of get started here. I’m going to go to my desktop here to create this folder, now, that might not be the most ideal place to create a website on the desktop but just for the tutorial, that’s what I’m going to do. Just for simplicity sake. So, I’m going to name this video under scroll tutorial. Hit enter. Ok, I have my folder.

The first step to starting your website in now complete. Ok, we’re going to go back to Dreamweaver and now we’re going to tell Dreamweaver that that folder is actually home base for our new website. So, let’s go up to site, new site, and now we have a whole bunch of options we can work with. We are just going to focus on the first two line here in local info façade in that site name and local ru.. folder. The site name is anything your low heart desires. But make sure you name it something that make sense to you so you can come back later and —- oh! ya, that name is what my site is basically and so I’m just going to name this video tutorial that yet again because is what this website is.

It’s my video tutorial to you guys. So, now, the local root folder is the folder we just created. The local root folder is the home base for our website, that’s where everything goes and that’s where everything’s going to be grabbed from. So, let’s browse for that folder. Click on desktop here, and now let’s click on video tutorial or whatever… wherever yours is located and whatever yours’ named, and hit choose. Ok, that’s all we’re going to do it for today. We can deal with all the other stuff at another time, in another tutorial, so, we’ll click ok and now a new dialogue box pops up. It’s a files dialogue box. As you can see right here where it’s local files, we have our folder right here.

That folder is empty right now but that’s going to change in second for we are going to create our first page. Dreamweaver usually brings up a welcome screen for the default setting, and this is very handy because you can create documents just by clicking on this little icons right here. So, let’s click on create new HTML. Click that. And now we have new HTML dialogue box open or page open. The first thing you ever want to do when creating a new page is save it. As a matter of fact you save a lot when working on anything because you never know with computers. So, lets go to file, save and let’s name this it’s as you can see it, we’re in our video tutorial folder which is where we want to be because we want all the files to be in that video tutorial folder or whatever you named your folder because that way Dreamweaver doesn’t get confused and everything’s good.

So, we’re going to name this page, index. Basically what index means is, it’s the Home page and when you finally upload your site to a server, like nine times of ten, the server is going to look for index.html as the homepage and grab that one and that’ll the first page of your website, the server brings everyone to, and that’s very important to remember. So, we’re in this index for right now. Hit save, and there we go. As you can tell, it’s named index.html. Now then, before we go, I’m just going to talk a little bit about linking objects together, because that’s pretty much a very basic feature you can do in Dreamweaver. So, I’ll show you guys that before we end this tutorial for today. So, as you know in websites, there is links, everywhere.

Links pretty much link everything together if you will. So, in Dreamweaver makes this really easy to do. So, let’s give this a try here. Hmm…. Let’s type out a… some words here so we can link it to an external website on the internet. So, let’s type out, click here. And you can automatically type, it’s already pretty much ready to go so, you can just go ahead insert typing, and we have our text there and what we’re going to do is we’re going to highlight it with our cursor and we’re going to go down to our —- box down here, which says, link. Now, you can browse for files on your root folder, for instance let’s say you create another page, and you can link, you can just browse to that page, a… an.. on your root folder and just link it right here.

Very simply. And that’s what you’re mostly going to do —– your site, but for today, let’s just dem… demp… demonstrate this more easily. Let’s link this to an external site. So, where it says link, click on the aa.. dialogue box and let’s type in one your favorite websites. Just pick one. so, but when you’re typing up URL’s of the website, be sure you have http colon backslash backslash first. Otherwise Dreamweaver won’t recognize this as a URL, so, http colon backslash backslash and then now you can type out the URL one of your favorite websites. So I just put in my personal website, since you know, it’s the best ever, ha.. ha.. and, we’d do that. And… be done of that.

Ok, when you hit enter or you click off, after you’ve done typing, you’ll notice that click here has changed to blue and underlined. It is default form that basically means that this is a linked text and you can change the color and you can change the format of that in the preferences of your website if you don’t like it that linked text look like that, but that’s how default looks like and that’s how you know it’s linked.

So, what’s we’re going to do now is we’re going to test this. So, let’s go to file, save and make sure what we just did is saved and now let’s go to the globe here and go to —- click that, and then let’s preview this in a browser. Your browser list may look differently. I’m just going to preview in Firefox since that is my favorite browser. So, click that, we’ll launch Firefox. And now, we are basically previewing the site in the web browser. It’s not on the internet. It’s just locally, you’re just seeing this locally, as it would look in a web browser. And as you can see here, we can click there. So, let’s try your link out. Click it once and see what happens. Wa wa! It took me to my website.

I hope it took you to your website. So, and that is just one of the very very basic features of Dreamweaver. Dreamweaver can do so much more but I mean, I don’t have nearly enough time to cover all in this tutorial alone so that’s why there will be future tutorials and so I hope you find this tutorial helpful and I hope you well in your website travels and I guess I see you guys next time. Thanks for watching!

Tags: dreamweaver cs3 promotional code, navodila dreamweaver, dreamweaver cs3 serial, dreamweaver tutorial cs, macromedia dreamweaver 8, dreamweaver cs3 tutorial

Tags

Dreamweaver Tutorials