User:Zozart/category test

From Valve Developer Community
Jump to: navigation, search

Expanded TomEdwards' two-column layout, integrating some of the features from the Main_Page in order to give it a similar style.

Problems with HTML:

  • Mixed HTML and Wiki markup
  • Hard to track opening and closing of <div>s
    • More difficult for users to edit

Versions:


Mixed HTML and Wiki markup

Code using a combination of HTML </div> tags and Wiki markup.


Reference


Wiki markup with simple tables

Only uses Wiki markup, with 2 simple columns.


Getting Started

Css.gif Counter-Strike: Source

Intermediate Topics

Hl2px16.gif Half-Life 2

Advanced Techniques

Abstract Mapping

Ammunition | Animals | Animated Clouds | Animated Sky | Antlions | Beams | Bushes | Cables | Color | Combat | Combine | Creatures | Doors | Dust | Elevators | Environmental Lighting | Explosions | Fire | Fog | Foliage | Glass | Grass | Headcrab | Health | Ladders | Lasers | Lighting | Moving Clouds | Music | Optimization | Outdoors | Physics | Retinal scanners | Ropes | Smoke | Sound | Special effects | Sun | Terrain | Trains | Trees | Turrets | Water | Weather | Windows | Zombie

Hammer Editor

Objects

Troubleshooting

Design Theory


Wiki markup with complex tables

Uses only Wiki markup, but uses more complex table code to add sections and different color possibilties. Some of the markup could be templated fairly easily.


Getting Started

Css.gif Counter-Strike: Source

Intermediate Topics

Hl2px16.gif Half-Life 2

Advanced Techniques

Hammer Editor

Abstract Mapping

Ammunition | Animals | Animated Clouds | Animated Sky | Antlions | Beams | Bushes | Cables | Color | Combat | Combine | Creatures | Doors | Dust | Elevators | Environmental Lighting | Explosions | Fire | Fog | Foliage | Glass | Grass | Headcrab | Health | Ladders | Lasers | Lighting | Moving Clouds | Music | Optimization | Outdoors | Physics | Retinal scanners | Ropes | Smoke | Sound | Special effects | Sun | Terrain | Trains | Trees | Turrets | Water | Weather | Windows | Zombie

Objects

Troubleshooting

Design Theory

Wiki markup with dual complex tables, multiple sections and colours

Uses only Wiki markup, but uses more complex table code to add sections and different color possibilties. Some of the markup could be templated fairly easily. As above, uses only Wiki markup and table code. Utilises two nested tables in order to allow independant sections for each column. Each section can be coloured, e.g. the Hammer box (yellow) and the Troubleshooting box (red). Each section also alternates between white and light grey for the background (aside from those boxes with a different colour).

Issues:

  • If more sections were added (especially if in the middle), can be confusing to swap around all the background colours.
  • Two nested tables could be an issue in the name of simplicity.


Getting Started

Css.gif Counter-Strike: Source

Intermediate Topics

Hl2px16.gif Half-Life 2

Advanced Techniques

Hammer Editor

Abstract Mapping

Ammunition | Animals | Animated Clouds | Animated Sky | Antlions | Beams | Bushes | Cables | Color | Combat | Combine | Creatures | Doors | Dust | Elevators | Environmental Lighting | Explosions | Fire | Fog | Foliage | Glass | Grass | Headcrab | Health | Ladders | Lasers | Lighting | Moving Clouds | Music | Optimization | Outdoors | Physics | Retinal scanners | Ropes | Smoke | Sound | Special effects | Sun | Terrain | Trains | Trees | Turrets | Water | Weather | Windows | Zombie

Objects

Troubleshooting

Design Theory

Wiki markup with sub-tables

Based on design #2, but uses divs to display the right-hand column instead of relying on rowspanning.

Problems:

  • Needs conversion into a template system


Getting Started

Css.gif Counter-Strike: Source

Intermediate Topics

Hl2px16.gif Half-Life 2

Advanced Techniques