~Making A Webpage~
For this session, please have these items on hand: a notebook of paper, a ruler, a pencil, and a highlighter. Also, have this available on your computer: a blank document on Notepad, a graphics program of some kind, and your internet browser, such as Chrome or Firefox.
To start with, we are going to help you generate a webpage from scratch, from your own ideas. We will start with something basic using a table layout.
- Step One: Open your notebook and map out what you'd like your webpage to look like. Include a place for a banner with your site's name on it, a place for navigation and links (we will do this under your banner with two columns on either side), and an area for content. Use your ruler and pencil to draw out your demo page. Now, highlight your banner.
- Step Two: Open up a graphics program, such as Paint or Photoshop something. Make your banner's design using the graphics program of your choice. Make it simple, for now, but choose eye-pleasing colors that will coordinate with your theme.
- Step Three: Look at your notebook at the navigation where your links will go. Highlight them on your paper, so you can now focus on them in your graphics program. It's good if your navi background can repeat all the way down the page without looking weird. Try something like my navi, but in your own color scheme and design. Select the top part of your right navi and save it. Then, do this for your left navi as well.
This is my left navi:
Honest, the navis need not look much different from each other. As you can see, I simply flipped the images horizontally to make them mirror each other. Notice how if you repeat the images vertically, they will look just fine. If you make your images have a border or add a line to them, the line will also be repeated. Avoid doing this. You can add a border or another image onto your navi later in the actual HTML code, which will be posted below.
- Step Four: Now, onto the content area. Highlight your content area on your paper so you know that this is what you are working on now. This part is pretty easy. Just choose a solid color or a texture able to repeat itself horizontally and vertically. I am going to make a tiny blue tile.
I only need a tiny bit of it. Try doing that because your browser will be able to load it faster if the image for a background is small. It will automatically repeat to fit on the page.
- Step Five: Now comes the coding. It won't be too difficult because I'll give you the code I am using for this demo-layout we've been working on. From there, edit the code to fit the layout you are making. Remember to put in the proper file extensions and sizes in where the code calls for it. Edit the CSS of the code for that. If you have a problem, check out the n00bie HTML guides that are on the site. :)
This is what the layout looks like: Preview.
Here is the code for it:
Our Staff | Original Characters | Pokémon Avenue Fan Club Listing | The Apricorn Times | Vaporeon's Library | Jolteon's Quiz Factory
Flareon's Art Museum | Sunshine Shoppe | Midnite @ the Movies | Leafeon's Lovely Garden | Glaceon's Cool Treats Truck
Sylveon's Bowtique | StarEoncyclopćdia | Eevee's Log | Flareon's Journal | Espeon's Diary | A-MAZE-ing | Contests | Fortune Cookies
Jigglypuff's Rehearsal Hall | Pokémon Crosswords | Pokémon Scrambles | Pokémon Star Version | Star Hunt
Who's That Pokemon? | Win An Award | Submit Your Works To Us | Help with Bullies & Gossip | Help With A Busy Schedule
Help With Online Dangers | Help With Virus Prevention | Advice About Anti-Pokemon? | Help With Art Block | What's A Smiley?
What is Chatspeak? | What is Web Courtesy? | Basic HTML Coding | Colors, Fonts & Symbols | Adding Images
Tables | Naming Your Site | Making Content Original | Making A Webpage | Choosing A Host | Gaining Affiliates | How To Update
Avatars & Blinkies | Banners | Button Templates | Headers & Page Dividers | Layouts | Pokémon Plushie Keychains
Pokémon Orphanage | Pokémon Wallpapers | PokéPlates & Updating Tables | Splashes | Textures | Inactive Affiliates
Pokémon is © to Nintendo and associated parties, 1996-2015, and is not affiliated with our fan-site in any way.
All content and images, except official artwork or stated otherwise, on this site is © to Stareon's Hideout, 2006-2014.
Images and text should not be sold, reproduced, and/or distributed in any way without prior permission.
To learn more about legally using these fictional works, please contact the web owner.