How is this website made?

[appleide]

I might want to create a website similiar to wesnoth.org for a future game I will make (or rather, making, version 0.1 will come out at least after january). Just wondering if someone typed HTML on notepad or used DreamWeaver or... etc to come up with http://www.wesnoth.org.

[VS]

I didn't make it, but looking at it, I can see three parts: there is main page, written manually, and then wiki and forum. All these use the same heading block, so the latter two had to be customized a bit. But that way there is not much custom code... of course wiki styles had to be tweaked as well, but still less work than making it all from scratch.


The header itself is rather clear: it consists of one container box, #global, which holds two other boxes: #header and #nav.

Code: Select all

<div id="global">

<div id="header">
  <div id="logo">

    <a href="http://www.wesnoth.org/home"><img alt="Wesnoth logo" src="http://www.wesnoth.org/mw/skins/glamdrol/wesnoth-logo.jpg"></a>
  </div>
</div>

<div id="nav">
  <ul>
    <li><a href="http://www.wesnoth.org/">Home</a></li>
    <li><a href="http://www.wesnoth.org/wiki/Play">Play</a></li>
    <li><a href="http://www.wesnoth.org/wiki/Create">Create</a></li>

    <li><a href="http://www.wesnoth.org/forum/">Forums</a></li>
    <li><a href="http://www.wesnoth.org/wiki/Support">Support</a></li>
    <li><a href="http://www.wesnoth.org/wiki/Project">Project</a></li>
    <li><a href="http://www.wesnoth.org/wiki/Credits">Credits</a></li>
  </ul>
</div>

</div>

The visual stuff that turns it into what you see is in style declarations:

Code: Select all

#global {
  width: 100%;
  margin: 0;
  padding: 0;
  font: 0.88em sans-serif;
}

Main box spans the entire width of page.

Code: Select all

ul {
  line-height: 1.6em;
}

#header {
  margin: 0;
  padding: 0;
  background: #444 url('http://www.wesnoth.org/mw/skins/glamdrol/headerbg.jpg') top repeat-x;
  border-bottom: 1px solid #000;
}

The header (which expands to fill all width by its nature - default display: block) has a repeating background of stone.

Code: Select all

#header #logo {
  margin: 0;
  padding: 0;
  text-align: center;
}

This centers all its children. Honestly, no idea why another container is needed - guess it probably has something to do with how centering works (or breaks) in IE vs. the rest of browsers.

Code: Select all

#header #logo img {
  margin: 0;
  padding: 0;
  border: none;
}

No border or other (here useless) stuff for the logo picture...

Code: Select all

#header #logo a {
  margin: 0;
  padding: 0;
  color: #654;
  text-decoration: none;
  font-size: 0.8em;
}

Probably fallback styling for the link that holds logo in case it does not display and shows as text.

Code: Select all

#nav {
  margin: 0;
  padding: 3px 4px 15px 4px;
  background: #272727 url('http://www.wesnoth.org/mw/skins/glamdrol/navbg.png') repeat-x bottom;
  text-align: center;
  border-top: 1px solid #595959;
  font-size: 0.95em;
}

Navbar also fills the whole parent width by default and has some inside spacing around content (padding); again background picture, and all children centered.

Code: Select all

#nav ul, #nav li {
  display: inline;
  margin: 0;
  padding: 0;
}

Turn the unordered list from vertical to horizontal. This happens if you change it from block to inline.

Code: Select all

#nav li {
  padding: 0 5px;
}

Just spacing.

Code: Select all

#nav a {
  /*color: #A74;*/
  color: #B48648;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: bold;
  text-decoration: none;
}

#nav a:hover {
  color: #CCC;
}

Font for navbar links.

.. and that's it. If you already know a bit of CSS, this is a really nice example on usage of cascade, all selectors exploit the fact that the topmost containers in this part of code have ids and so the list and links and all don't need classes to be targeted without breaking other .

As said before, the rest is about wiring this bit into wiki and forum so that they send this before all their content, and voila, you get a consistent site with the same heading everywhere

[ettin]

I might want to create a website similiar to wesnoth.org for a future game I will make (or rather, making, version 0.1 will come out at least after january). Just wondering if someone typed HTML on notepad or used DreamWeaver or... etc to come up with http://www.wesnoth.org.

I used vim to create the frontpage HTML and CSS. The wiki is basically the same: same stylesheet, using a custom MediaWiki theme which contains the basic structure in HTML. For the forum we just change the header: it looks OK and it is far easier to maintain than customizing the whole thing.

Even though it may seem daunting at first (wesnoth.org's stylesheet is huge), learning CSS is worth it.

[longhair]

And just to make it a bit clearer, the forum you are reading from right now is built on PHPBB. PHPBB is free, and often comes with your web hosting package. If you ever do want to set up a forum using it, be very careful to read through the documentation and understand the permissions system. The defaults are a bit too permissive IMHO.

I don't know what wiki program is in use, but there are several nice ones out there.

ettin was spot on about both the trouble of learning CSS, and the benefits of doing so. At this point, I can't imagine making a website without it.

Personally, VIM drives me nuts to use, but I guess it depends upon how your mind works. I personally use Quanta+ to do my web development, and Eclipse has some nice tools for HTML coding. On the windows end of things, a lot of people like notepad++.