 |
Part 3
I try to tell people all the time how simple HTML is, but people don't seem to believe me. HTML (HyperText Markup Language) is not like most programming languages. I don't create any complex behaviors or rules for computers using HTML. With HTML I'm just displaying text and media so that a web browser knows what kind of data a web page contains. To learn HTML all you have to do is memorize some 'tags' surrounded by angle brackets (<>) and a lot of practice. You can learn HTML for free on w3schools, but I will show you some basic tags. If this tutorial seems complicated, it probably has more to do with the use of CSS than HTML.
I use Adobe® Dreamweaver® as the coding environment for my web design. Dreamweaver is built for both designers and developers, by giving you the option to toggle between the Design view, Code view and Split View. Dreamweaver saves you time by auto-completing your tags and highlighting your errors. There are many features to help you build web sites in Dreamweaver, but we are just going to focus on a few important things...
Before we get to Dreamweaver®, let's make the most simple web page possible. Type the following code in MS Notepad, name the file with a .html extension and, voilà, you have a web page! Really, it was that easy. As you can see, the file begins and ends with an <html> tag. Each opening tag has a corresponding closing tag, usually with a forward slash in it. After the opening <html> tag there is a <head> tag which contains a <title> tag which, you guessed it, contains the title of your page which will appear on the title bar of the browser. Type anything between the two <body> </body> tags and it will be displayed on your web page. Find the file that you just created on your computer and double click it and it should open up in a browser.
But we don't want any old web page. We want the most technologically advanced, sophisticated, ground-breaking, cross-platform, cutting edge site possible ( Don't laugh too hard ;-) if this code becomes obsolete in few days). Using Dreamweaver, create a new blank page and you will get the following code (depending on your version):
Notice in the code above that there is some DOCTYPE code which tells browsers how to parse the page. I let Dreamweaver decide what is relevant. If you want to change the DOCTYPE you can open the Page Properties box (Hold Ctr>J) and select Title/Encoding to change the Document Type and Encoding. Unicode allows the characters in your code to be transported through as many systems and platforms as possible without corruption. I will use the default settings.
It is also in the Page Properties box that I can add a title and set other properties to the page. This will write the code for you. If you don't know HTML yet, look at the code to see how the code was modified by the information that you entered into the Page Properties box. Typing a title into the 'Title' field will simply insert the title text between the two <title></title> tags.
This all looks very technical, but don't worry too much about it. Dreamweaver will help you create the best HTML document possible and come up with the DOCTYPE, XMLS and 'meta content' for you. If you think you're going to have trouble sleeping tonight because you're not sure if you're using the right DOCTYPE, validate your page (Hold Shift>F6) to get the report below. Thankfully no errors were found!
Open the Page Properties box again and let's start with the 'Appearance' settings. I like to keep all my margins at 0. Here is where I can quickly set my background color at black (#000000).
If you look at the code now, you'll notice that something very strange has happened. We have now left the old world of HTML 3.2 behind and entered the brave new world of HTML 4.0.
4.0 introduced the use of 'styles' to HTML documents. Styles or 'Cascading Style Sheets' (CSS) keep the formatting of text and media separate from the HTML. If you have multiple pages to your web site, you'll be able to control the overall look by just updating only one .css file.
I'll remove the body style later and insert it into a separate .css file. But here you can begin to see how CSS works. The main thing I want you to notice is that the CSS syntax is made up of the: Selector {property:value} (Ex. body {margin-left: 0px;}). You don't need to remember these terms, just be aware that each style has a name followed by curly brackets containing properties.
The graphic below illustrates how I want to break my web page into separate div elements. Each <div> is a block of content that will be identified by a name (div id='wrapper").
The first div that I will create is the wrapper. The wrapper will contain all of the other divs and center them on the page. From the menu, select Text>CSS Styles>New. Select the 'Advanced' radio button and call the selector: #wrapper. Select the radio button for 'New Style Sheet File' and click OK. Save the file as style.css.
The CSS Rule Definition box will appear. I will select the 'box' category and create a width large enough to hold all the content (width:901). Deselect the ''Same for all' check box under Margin. Click OK and Save.
Now that style.css has been created it should look something like this:
From the menu, select Windows>CSS Styles or Hold Shift>F11 to open the Styles palette. Click once on '#wrapper to select it and click on the 'Add Property' link and select 'Margin' from the drop down menu.
Then type 0 auto in the text field. This will cause the main container (#wrapper) to always be centered on the web page no matter how wide the browser window is open.
Now that we have an external CSS file, we don't need any CSS defined in the HTML. So we'll copy the body style from the HTML and paste it into the CSS file above the wrapper selector.
Now back to the HTML file. Make sure you completely delete the CSS from the HTML file. The next time you create a web page, you can start with an external CSS file and skip having to remove it from the HTML. I just wanted you to see that CSS can be embedded in a web page or in it's own separate file. The advantage of having CSS as an external file is that you can modify the look of several pages (global edits) by only updating one CSS file.
Notice that in between the <head></head> tags (just below the title tags) there is now a link tag referencing the CSS file that we have created. If it's not there, type it in: <link href="style.css" rel="stylesheet" type="text/css />
Now we're going to insert our first div tag. This will be the 'wrapper' that we have just created. From the menu, select Insert>Layout Objects>Div Tag. The word 'wrapper' should be in the ID drop down menu. Select wrapper and click OK.
Notice that the div has been added in between the <body></body> tags in the HTML file:
Next, I create a 'header' div which will contain the top graphic and/or flash animation. I used an image named flash-placeholder.jpg which appears on most of the landing pages. On some of the pages I used a flash animation - in this portion of the tutorial we will only be discussing the jpg image not the flash.
To create the header div, use the Text>CSS Styles>New method that we used to create the wrapper div. This div will be positioned inside of the wrapper and needs to be justified left (float:left). I will make the height and width the same size as the header image, which happens to be 901 pixels wide and 223 pixels high. I will insert flash-placeholder.jpg as a background image and also add the property and value background-repeat: no-repeat. The 'no-repeat' will keep the image from tiling (repeating) if the div ever becomes larger than the image.
In the HTML file, use the Insert>Layout Objects>Div Tag method again to insert the header div within wrapper div. Make sure to delete the text 'Content for id "wrapper" Goes Here' and insert the header div here:
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
</div>
The next div we will create will contain the navigation menu. We will use the image that we created in Photoshop (menu-bg.jpg) as the background and it will determine the width and height of the div itself. We will also float this div left and and give it the 'no-repeat' property.
In this div we can also control what the text will look like (font:Arial, align:center). I want the text to be centered vertically, so I'll add some top padding (17 pixels). Because of the padding, I will have to decrease the div height by 17 pixels which results in a height of 33 pixels.
I want the links in the menu to have a uniformed space between them, so I'll add the word-spacing property. This will work good with single word navigation links. If you want to use more than one-word links like 'Contact Me', then you will have to create a separate style; perhaps a non breaking space with a word-spacing class (more on classes later).
Let's create a few more divs.
Main:
We need a 'main' div under the menu that will contain two columns. The height for the main div will be set to 'auto' so that it will scroll and increase in size as the content in the columns increase.
Leftcol:
This will be the left column and should float left. The height is also auto and we'll give it width, top, right, bottom, and left padding.
Rightcol:
This will be the right column and should float right. Let's make this column wider and give it a 0 pixel right margin.
Footer:
The footer will create a region at the bottom of the page that will add some separation space between the HTML content and the browser window. We can also use this area for any text we want including copyright information and more navigation links.
These four new divs should look like this within the CSS file:
In the HTML file, use the Insert>Layout Objects>Div Tag method again to insert the new divs. Notice below how the wrapper contains all of the divs. The header and menu divs are the first divs inside of the wrapper. The next div will be the 'main' div which will contain the columns., so make sure that the column divs are nested inside the main div. The footer div is the last div inside the wrapper.
If you select the 'Design View' in Dreamweaver, you should see the header and the navigation menu background images along with some dotted lines that represent the divs.
David Nyoni Technology >>>>> Download Now
ReplyDelete>>>>> Download Full
David Nyoni Technology >>>>> Download LINK
>>>>> Download Now
David Nyoni Technology >>>>> Download Full
>>>>> Download LINK Cu