Dreamweaver Tutorial

Hello and welcome to the Dreamweaver tutorial. The tutorial is about designing web page with tables in Dreamweaver CS5/CS4. That is in this tutorial you will learn how to build your first web page using tables. The video is really great and very easy to understand, so don’t miss it.

Hello everyone, in the last tutorial we discussed how to sink the Dreamweaver and get the setup with your website. We also created a sample index which is the first page the users will receive when they come to your website. In this tutorial I would like to elaborate more on the index and show you a way of building the index in it’s entirely. Now the way I am loading it this time would be using a method called tables and that I am gonna get started and you will see that in a moment. So I am gonna select odd index here and just going to do it here. Then I am gonna go to file, new, HTML, and nine and I am just gonna hit create okay. In the first thing I am going to do is gonna change the title from the untitled document and now this will appear on the main title of the tabs of Mozilla fire fox or Google chrome or whatever you use. Also I am gonna come to page properties and I am gonna change the background.

Okay now the table way is where you insert tables and then tables hold whatever content you have, such as pictures, videos, text stuff like that. Ammm so I am going to go to insert table, then make it one row, two columns, 10-40 or 10-24 in width and this is the standard desktop for websites make sure there’s no border and that we these blank, I am just gonna hit okay. Now so the user sees it centered on there screen and I am just gonna go to align and center. And now this has been centered on their screen, so I am going to add a picture. So I am just going go to insert image just to show that this can insert a picture. I am going to go to my desktop and we are just going to my other website and forward this.

And I just wanna me to save this, copy to this website, just say okay. And there is my logo and usually what these logos do is they link directly to your home page. Now you don’t see index.html here and that’s because it hasn’t been saved. So I am gonna come to file, save as, we will save it as index, with a lower case I, it’s saved and you will see it appear right here now. You also see this appear changed index, don’t worry about any of this other stuff itself from other website. Okay so I am gonna drag this link here through the index, now this is a very helpful because its only index but you never know there may be some of the clips in there anyway. You will also notice that this bar is pushed way out here now.

If you wanna content besides your logo you can drag this over here and I am gonna put little bit of text over here okay. You can also a center this to make it perfectly centered this with this line and this line. So now we have content held in by a table and you may be wondering you put no border but you have this starting line. If you would go and look in its live forms, there’s nothing here. So you don’t actually see the table you just see the contents of the tables. Okay so now we wanna add another table, you know we want more to it. Ammm so make sure that this cable right here isn’t could you want the bar to be right after the table and then you do the same thing you did before you just go to insert table.

And just center this table and here you can make it one column or even thirty four however many make sense to you and you know if you have a blog, website or something ammm this would be the place for that. Just put some sample code there. Okay so now we have our sample code in the middle, we have two tables and we have a picture that links to your own index so it will reload the page. So save the last table we may want and like a copy right so we are gonna go to insert table, down here and make it one column yeah here again and here you can just type copyright or Dreamweaver has and special characters, you go to insert HTML special characters and just click the copyright. And you will see the little circle if you see inside it and just put you know whatever as your company name and I will just center this.

So right now we successfully created our index just save all and you can keep doing this you know you can put more pictures here. This will get you started with all the text ammm you know and then you further here and you can move these tables up and down, between each other everything like that. Ammeter tables are good for tabular data, if you are doing a basic websites. However in the next tutorial I will show you how to create the exact same thing on here and then to give div tags. The dive tags are usually what most people use now but I am just gonna show you both ways of doing it. Also styling, navigation boards all of that is coming in a future tutorial. So if you like the videos ammm one two so see then the future tutorials go and subscribe and as always thanks for watching

Tags: navodila dreamweaver, macromedia dreamweaver, dreamweaver cs3 or tutorials, free dreamweaver template, dreamweaver navodila, dreamweaver 2003 tutorial

Tags

Dreamweaver Tutorials