|
designing a website: the structure and form.
Before doing anything, you should decide on the structure of the website that
you're about to make. Layouts have unlimited combinations and possibilities but
the structure of a website does not. (Please note that this is a tutorial for a
website, not a webpage)
It will almost always be either of the four below. The layout may be very different, but the structure is essentially the same. When you are making a website, there will often be at least 5 pages or more. How your visitor navigate between these 5 pages will depend on your navigation box. It should be clear and simple. As this is a 'tutorial', I'm going to guide you through by doing it step by step.
step 1.
1) First of all, you should choose one of the 4 structures above
and copy the codes provided below. Rather than explaining about the coding, I
think that it is perhaps more sensible to give you the codes, because
all of my knowledge came from studying the codes of other websites, rather than
memorizing the 'rules'. Through experience, you will quickly learn and be able to
code it yourself. The day would come sooner than you think. So, the codes are
presented chronologically from the top left to top right - bottom left then bottom right. If you have Dreamweaver or FrontPage, copy the code
into the software (download
them). If you don't, you can just use Notepad for the moment, but if you are beginner, I strongly recommend you to download one of the two softwares.
step 2.
2) After you have copied the codes, it's time to put in the content. If you
are just testing out, maybe you could put some random sentences into your
'website'. By the way, do not confuse the <head> tags for HTML and the
header of a website. "Header" is just a word I use to describe that part
of a structure of a website.
In the Header, you could put in a big title for your website, it could be
text, or an image. At later stages of the tutorial, I will teach you or provide
you with header images to use. For the moment, maybe you could just enter some
text. You could make it big and enlarged so it looks like a big fat title.
As for the navigation, you could enter some text links. You could also put in
something for the content.
preview example.
Click on the screenshots below to see what you could do on Dreamweaver and FrontPage. Below the images are the code that would generate the same structure as the screenshot. You might want to reference the codes.
As you can see, the 'website' is still at a very basic stage - with few colors, but at least you have a decent structure now. In the next section, I'm going to talk about CSS, and straight after that, we would put images and backgrounds into the layout to make it look like a real website. |
for you.
resources.
domain.
affiliates.
info.
|
