|
Let's Make a Layout
Alright, so now it's on to the finishing touches. The Finishing touches are quite simpley where we tweak the layout and add in our content.
A lot of the time the finishing pieces involve going back and double checking to make sure things are as you want them, testing to make sure the scroll bar looks as you want it to look, and that everything is legible. As far as elegance, it might LOOK nice to have fonts that almost blend with the background but in quality... it's hard to see and doesn't really appeal to a reader.
What you want to do now is add in content and links.
Your main content would go in the main.html file. Whenever you create a new page like perhaps a credits page you would use the main.html page as your template.
If you are unsure as to how to make paragraphs, line breaks or anything like that head back over to HTML 101
Normally to make a link I'd just send you over to HTML 101, but in this case, because making a link involves getting it to appear into the content section we'll go over it.
The code for a link is <a href="/">TEXT</a>
However, when a link is clicked it will open inside the frame it is on. We don't want that, we want links clicked in the link frame to open either in the content frame, new window or in the whole window.
To do this we use the target property.
target="main" will get the link to open up in the frame that has the name "main" (Remember from before =P )
target=_parent will get the link to open up in the whole window instead of inside either of the frames.
target=_new will get the link to open up in a new window. Pop up!
These just go inside the <a href="/"> tag. So a link that we wanted to open in the main frame (that credits page we talked about) would look like this <a href="credits.html" target="main">
Once you have your content and links, you'll be ready to go live. Now if you haven't been using the internet to view this anyway...
Make sure all your files are uploaded to the web in the right places, then browse your site, click the links and make sure they work. There is nothing more horrid then a bunch of broken links.
(If something isn't working check out the HTML 101, 202 and CSS 101 to see if there is something you missed in terms of linking to files in the right places. Information about the / is in HTML 101 )
Now every site is different, the best is FTP, which will only come from owning a domain or being subdomained by someone. If you don't have an FTP program you CAN use your IE browser though I would suggest that you download a free program such as SmartFTP.
If you are using something such as Tripod, Geocities, or Freewebs, you'll have to use their file manager and upload each file seperately. (Please don't IM me asking me how, I don't use them and I haven't in seven years.)
Sometimes when you upload you'll notice little quirks, be sure to work them out, perhaps a div isn't inline as it should be, change it and reupload and check.
Make sure your images are uploaded to the correct place as well as your html files. And then voila... you've made a webpage.
Check it out: What My final product looks like!!!
So now you've got your website, congrats and best of luck on making many more!
If you've liked this tutorial, or have comments/questions on it, leave me a message in the shoutbox or IM me or drop me an E-Mail
The feedback tells me if I should do more of these, like a iframes one, a tables one... a pop up one... things like that! ^_^;
Let's Make a Layout(iFrames!) Part One :: Getting Started
Let's Make a Layout(iFrames!) Part Two :: Tables
Let's Make a Layout(iFrames!) Part Three :: iframes
Let's Make a Layout(iFrames!) Part Four :: CSS
Let's Make a Layout(iFrames!) Part Five :: Final Touches.
|