tag with the ID of "header" and the content...well, I'll let you guess. If you don't know what the
tag is, don't panic, I'll explain that in another tutorial.
Firstly, we'll open up one of the pages on the old site and highlight the navigation area by clicking within the table containing the nav bar and clicking " on the tag selection bar.
If we then switch to code view, you will see that all the code for the navigation bar including the div tags has been highlighted.
If you don't have a finished page to work with in this case, you can download and use the code we are working with from here. To get this into your snippets panel, follow the instructions below to get the panel open and click the small icon with the cross on it to create a new snippet.
Right click the text and choose "Create New Snippet". You will be presented with a dialogue which contains all the highlighted code in a text box. You can edit it, you can reformat it, you can do whatever you like to it here.
In this case however, because its going to be the main navigation bar for my new site, I'm going to change the "Snippet Type" from "Wrap Selection" to "Insert Block", because thats whats going to happen with it. I'm also going to name it "SD navbar" and give a fairly concise description of what the snippet actually is. This is important, because if you describe it like "Its a really cool navbar I made" then six months down the track, you won't be able to tell what it actually is except by opening it and going through it.
Once you have done what you need to with the code and everything is looking like it should, press ok and the snippet will be saved to your snippets panel.
To get to your snippets panel, you can either open the "Code" panel group and click on the "Snippets" tab, or you can use the "Window" menu at the top of the screen and choose "Snippets" from the drop down.
Now to use the snippet itself, its simply a matter of going back to your new page, opening the snippets panel and double clicking on it. When we pressed Ok on the new snippet dialogue, Dreamweaver saved the snippet to the top level of the snippet tree within the panel. We can reorganise that if we want - its just like moving files around in Windows Explorer but for the moment, I'm going to leave it where it is.
Double click on your new snippet and if you are in design view in Dreamweaver, you will see the navbar - with all its links intact but without any styling - appear on your new page.
We'll have a quick look at how to give the new navbar some style now.
Using the "Window" menu, click on "CSS Styles" and open the CSS Styles panel up. Click the icon with the small cross on it at the bottom of the panel to create a new CSS Style. Just as a by the way, CSS stands for Cascading Style Sheets. All of you more expert users are probably laughing at me for mentioning this, but I remember being terribly confused about what they were.
When the dialogue comes up, set the options like I have in the screenshot below. If you have given your
tag a different ID to mine, use the ID you gave it, but precede the actual name with a pound sign, like I have.
As soon as you press Ok on that dialogue, Dreamweaver will ask you to save the new stylesheet somewhere. Its probably best to create a folder called "CSS" or something similar and save your css files in there, just to keep things organised.
As soon as you have saved the new css file, you will get yet another dialogue from Dreamweaver. Now because I tend to hand code my CSS, I try not to use the dreamweaver styling dialogues. Some people like them, I don't. Its completely up to you. I'll be showing you my way though.
The dialogue you are presented with is looking for you to make some decisions about how you want to style your web page. For the moment, just think about what font you want to use in your page. In this example, I want the primary font (if available on the viewers computer) to be Verdana, so thats what I've chosen.
Once you have chosen your font and pressed "Apply/OK" the dialogue will disappear and you will see the new css file in the css folder in the Files panel (Window/Files). You will also see that the new navigation bar in your html page is now being shown using the font you chose.
Lets see if we can position it where it should be shall we?
Double click on the new CSS file you created and it will open up in a new tab on the main Dreamweaver screen. You should see something like:
#nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
on it.
All by itself, that isn't so bad, but if you look on the main html page, you can see the table is stretched all the way over to the right hand side and the actual table is sitting at what is in reality, a totally useless place to go.
So, in the new CSS file, click on the outside of the semi colon but still within the curly brackets and press enter a few times. Place the cursor directly underneath the word font and type "position: absolute;".
You will see that after you have typed the word position and the colon, a popup menu appears with several options on it. These are code hints and they can be very useful. Its a good idea to remember though, that the options Dreamweaver presents you with are not necessarily all the options you have with each CSS tag. I'll be showing you one of these shortly.
If you pressed the enter key after typing that last line of code, you will see another code hint box appear. For the moment, ignore it and type the following lines of code, pressing enter after each one.
top: 75px;
left: 5px;
width: 100px;
font-size: smaller;
background-color: transparent;
Make sure through all of this, that the code you are typing is within the pink curly braces. If its not, things will start to get very confused and the changes you have made will simply have no effect. Your new CSS sheet should look something like this when you have finished typing:
Press CTRL-S on your keyboard to save the new css sheet and have a look at your html page. The navbar should be exactly where you put it. Play around with the px numbers on the CSS sheet and you should start to get an idea of how it all works. As you can see though, while we have managed to place the navbar where we want to, we haven't yet changed any of the colors. Thats getting into psuedo-classes and is something I will deal with in a future tutorial.
I hope you enjoyed this tutorial and found it to be informative. There will be more coming along as time goes by.
Before starting a professional website, one should look into all the resources available online. For instance to make a good website design, one can get a web design degree. Then before selecting the hosting company that you would like to acquire you should read some of the webhosting reviews. There are many web hosting companies out there and for a beginner it can be very confusing as to which one to opt for. Besides the prices some of these hosting companies provide extra services for free for instance free online backup for data and internet marketing to some extent. Finally one should look for fast and reliable wireless internet providers.
