crafting store: coding and crafting guide

13
Crafting Store Coding and Styling Guide Stonewall Fleet: Crafting Corp

Upload: nicholasjohn16

Post on 08-Jul-2015

343 views

Category:

Technology


1 download

TRANSCRIPT

Crafting Store

Coding and Styling Guide

Stonewall Fleet: Crafting Corp

Purpose

This guide will endeavor to teach you not only how, but

why and what HTML and CSS tags to use when

entering in descriptions for Store items.

For example, we will be turning the left image into the code on the

right:

To begin:

A basic HTML element has two parts, the opening tag

and the closing tag.

<div> . . . </div>

Div is a general tag that creates a divisional

unit. The first tag is the opening tag, the

second, the one with the slash, is the

closing tag.

Classes

HTML tags can be specialized for styling by the use of

the class attribute.

<div class=“itemFed”>

. . .

. . .

</div>When defining the class, it must include an equal

sign followed by the name of the

class, itemFed, surrounded by quote marks. For

Klingon items, use the class name itemKlink.

Begin and end every entry with these tags.

List, terms and definitions, oh my!

Now that we know about div tags with class

definition, let’s figure out how we’re going to define the

data.Let’s look at our example:

List

What we see is that it’s actually just a list.

Each new line represents a new

term, such a weapon power, or a

definition for the previous weapon

power.

Zoom in

If we zoom in a little, we can see what items are our terms

and which are our definitions.

TermDefinition

Definition

Definition

Definition

Definition

Definition

Now that we know that our data is actually a list of terms

and definitions, we know what HTML tags to use.

New Tags

<dl>

<dt> . . . </dt>

<dd> . . . </dd>

<dt> . . . </dt>

</dl>

For the item description, we will use the <dl>, Define List tag, <dt>, Define Term tag, and <dd>, Define Definition tag.

These three tags work together as a group. <dt> and <dd> tags are nested

inside of the <dl> opening and closing tag.

First, start with your <dl> and </dl> tags to define the list, then define the

term, followed by it’s definitions.

Example:

<div class="itemFed">

<dl>

<dt>Sonic Pulse III</dt>

<dd>Expose Attack</dd>

<dd>PBAoE Damage, Slow, Interrupt and

Knockback</dd>

<dd>30 Physical Damage (1.2

DPS)</dd>

<dd>85% chance: Knocks back +3.2

feet</dd>

<dd>Interrupt</dd>

<dd>-75% Run Speed for 10 sec</dd>

</dl>

</div>

Hint: It’s advisable to first type the opening and closing tag for

an HTML element before beginning the next tags.

More Classes

As you can see, there are several other styles that need to be applied.

For example, the yellow text of Expose Attack or Exploit Attack.

As well, the white text of the type of attack.

This is done with three more classes; expose, exploit, attack-type.

Example:<div class="itemFed">

<dl>

<dt>Sonic Pulse III</dt>

<dd class=“expose”>Expose Attack</dd>

<dd class=“attack-type”>PBAoE Damage, Slow,

Interrupt and Knockback</dd>

<dd>30 Physical Damage (1.2 DPS)</dd>

<dd>85% chance: Knocks back +3.2

feet</dd>

<dd>Interrupt</dd>

<dd>-75% Run Speed for 10 sec</dd>

</dl>

</div>

Special Cases: Span tag

Sometimes, you’ll need to apply special styling to words in the middle of a

sentence. This can be accomplished with the class attribute that you

already know and the span tag.

Span is very similar to the div tag, but instead of creating a whole new division.

It simply spans across a group of inline characters or other elements. Just like

the other tags we’ve seen, span has an opening tag, <span>, and a closing

tag, </span>. This can apply the class just as you have before.

<span class=“dt”> . . . </span>

To apply the same styling to the span as

the other defined terms have, use the “dt”

class.

Example:

<dd>Applies <span class="dt">Hyperonic Radiation III</span> for 10 sec</dd>

Special Cases: Nested Definitions

Sometimes, you’ll notice that a definition has it’s own

definition. To get the proper styling and indentation, you’ll

need to created a second list inside the first list.

In the example to the left, the

three terms are describing the

level 45 Thermal Vent, not the

Thermal Vent II power.

To do this, create <dd> and

</dd> tags and within them

define a new list with <dl>

and </dl>, then create the

defined terms and definitions

as normal.

Example:

<div class="itemFed">

<dl>

<dt>Thermal Vent II</dt>

<dt class="attack-type">AoE Location Fire Damage</dt>

<dd>Creates a level 45 Thermal Vent</dd>

<dd>

<dl>

<dt>Thermal Vent Dissipate</dt>

<dd>After 15 sec. Defeats</dd>

<dt>Thermal Vent II</dt>

<dd>6 Fire Damage each sec</dd>

<dt>Thermal Vent Blast II</dt>

<dt class="expose">Expose Attack</dt>

<dd>20 Fire Damage</dd>

</dl>

</dd>

</dl>

</div>

One last thing: <br/>

Sometimes, you’ll need to make a new blank line

before starting the next term. To do this, use the break

tag.

Unlike the other elements we’ve talked about, the <br/> tag

is not a container, meaning it does not contain any other

information. Therefore, it is open and closed with the

single tag.

<br/>