Text only | Text with Images

The Campaign Builder's Guild

The Archives => Campaign Elements and Design (Archived) => Topic started by: daggerhart on March 22, 2006, 01:23:09 AM

Title: Map Tutorial [ CSS & HTML ]
Post by: daggerhart on March 22, 2006, 01:23:09 AM
Hi, this turned out to be more of a template than a tutorial.  Had some problems posting code.

for reference, my map.  ---->      Map of Relygar (http://www.rapidlyflowing.com/e107/custompages/Relygar.html)   ( you're welcome to 'view page source' if you like. ((goto 'VIEW' at the top of the browser >> [ page ] Source)) ).


--- ****** What you need. ****** ---
* text editor ( i recommend 'wordpad' over 'notepad' you can not use MSWORD ).

--- ****** What you need to know. ****** ---

super-basics in few words.
- HTML (Hyper Text Markup Language) is a webpage programming language.   Consider this the structure / skeleton for your map.
- CSS (Cascading Style Sheets) is also a webpage programming language.   Consider this the skin / style for your map.
*  When used together, we get a good webpage.
*  You can style your webpage in HTML, but you shouldn't !  :crazy:

--- ****** Tutorial. ****** ---  
( i had a lot of problems posting the code in the forum.  All of the actual tutorial information is in the source code i link to. )

1. Make a new folder on your desktop entitled 'map' or something equally as clever.

2.  Right click on these links and 'Save Link As'
map.html (http://thecbg.org/stuff/map.html).  
* this is the base HTML for your map.
Code (html4strict) Select

 







 


 
* 100 x 200
  



* 200 x 200



* 300 x 50







map.css (http://thecbg.org/stuff/map.css)
* this is the style for the map.
Code (CSS) Select
/* This is where you decide where your map stuff will go, known as the 'style sheet'.
NOTE:   In CSS an 'id' is defined by placing a '#' sign directly infront of the name.
        A 'class' is defined by placing a '.' infront of the name.*/

/* In the HTML i wrote,
.  This defines the 'id' of 'whole_page'. */
#whole_map {
height: 390px;
width: 497px;
background-image: url('./map_graph.jpg');
}

/* In the HTML i wrote, * 100 x 200 .  This defines the 'class' of 'city1'. */
.city1 {
position: absolute;  
top: 100px;           /*This is how I tell the HTML where to put this*/
left: 200px;          /* Trial and error is an easy way to get things where you want them. */
}

.city2 {
position: absolute;
top: 200px;
left: 200px;
}

.city3 {
position: absolute;
top: 300px;
left: 50px;
}

/* Rinse, Repeat */

*Notice how HTML is similar to the BBcode you use on the forum to style your post.    
Map Graph (http://www.thecbg.org/stuff/map_graph.jpg)
* the background image i used in the example.
* Make sure you've saved all these files to the 'map' directory you made.

3. Open the file 'map.html'in your text editor.
*  Read through it, then do the same to 'map.css'.  

You can open map.html in yor webrowser to see the results.

----  sorry, I was trying to post the actual tutorial here, but somethings funky with the [ code] tags.

Ill see if i can make this look better later.   And I'll post how I made the 'legend' and those cool symbols (if viewing my page's source code doesnt help).

Paint.NET (http://www.eecs.wsu.edu/paint.net/index.html) this is a free program designed to replace the default paint program.
-  After you download, and install it, it will tell you that you need the '.NET framework (http://msdn.microsoft.com/netframework/downloads/updates/default.aspx)' and will automatically send you to this page to get it.
- Absolutely worth getting if you're using MSpaint.  (i use it.)

Let me know if you have any questions.
Text only | Text with Images