De opvolger van MijnMaffia is er.
Maak mijn spel!
 
 

Spel-eigenaar login

Vergeten? Inloggen
MijnMaffia.nl
200.266
1.129.969
146
 
 
MaMafia.fr
57.281
404.686
167
MeineMafia.de
74.228
398.762
88
MojeMafie.cz
27.529
274.357
58
MojaMafia.pl
53.543
352.117
23
MafiaCreator.ro
22.148
241.946
21
MafiaCreator.com
66.549
223.853
7
MinMaffia.se
15.025
60.510
6
MiMafia.com
12.365
33.669
3
MafyaKur.com
49.008
287.476
2
MoyaMafia.ru
2.718
5.071
0
MinMafia.no
6.707
30.395
0
 

Guide: Layout maken

Landviz9/Aug | 18:12 


MafiozoCrimez
109 leden
Ik was een paar weken begonnen met het schrijven van een guide om layouts te maken. De guide is niet af, ik heb besloten te stoppen mijn tijd te verdoen op MM. Ik zal deze guide dus hoogstwaarschijnlijk niet afmaken. Naar mijn idee zijn er vast een paar mensen die alsnog baat hebben bij een half afgemaakte guide.

Onder sommige alinea's staat een link, dit is een screenshot van hetgeen wat er boven uitgelegd staat


Hey,

Dit is een guide voor het maken van een lay-out met de "Eigen lay-out" update, basis van design en HTML/CSS. (Bereid je vast voor, het word een lange guide met een spoedcursus HTML & CSS)

Voordat je überhaupt begint:

Ik raad je aan om je CSS extern te hosten, het duurt even voordat je aanpassingen worden verwerkt als je het via MM doet. (Als je geen idee hebt waar ik het over heb met deze aanrading, maak je er geen zorgen over.)

Ik raad voor het testen van een lay-out Mozilla Firefox aan, Chrome heeft soms problemen dat oude CSS bestanden worden geladen in plaats van nieuwe.

Gebruik een relatief modern programma om je HTML/CSS bestanden te bewerken, gebruik NIET de editor die in het systeem van MM zit, dit is vreselijk verouderd en moeilijk(er) om te lezen.

Aangeraden programma's:
-Notepad++ (Gratis)
-Sublime (Gratis proeftijd, vervolgens af en toe een pop-up dat je geen licentie hebt)
-Atom (Gratis)

(Dit zijn editors die ik heb gebruikt, als je een andere editor fijner vind, ga gerust je gang en gebruik die)

Voor fotobewerking:
-Gimp (Gratis)
-Paint.net (Gratis)
-Photoshop (Kost rond de €200, gebruik dit niet als je alleen van plan bent een layout te maken voor op MM)

(Zelf gebruik ik Gimp, als je een ander programma weet dat redelijk/goed is, ga gerust je gang en gebruik die. Gebruik GEEN MS Paint, als je dit van plan bent kan je net zo goed de hele guide overslaan)

Er zijn 2 manieren om een lay-out te maken met de "Eigen layout" update:
-Een daadwerkelijke lay-out maken
-De CSS die standaard voor je klaarstaat bewerken (Afgeraden, op deze manier maakte ik 4 jaar geleden lay-outs op MM die er verschrikkelijk uitzagen.)

We kunnen eindelijk een keer beginnen, een goed begin is het halve werk

Footnote: HTML is (in de meeste gevallen) niet hoofdlettergevoelig. Je maakt gebruik van tags om HTML te gebruiken.

Ik raad je aan om te beginnen met het maken van de ingame, hangt er van af wat je zelf liever wil. (Ik begin met het verwijderen van wat er standaard staat, ik raad je aan om het zelfde te doen)

Vrijwel iedere webpagina begint tegenwoordig met <!doctype html>, hiermee laat je de browser weten "Hey! Dit is HTML5, succes!". Verder is het niet relevant om te weten wat het doet.

Vervolgens kan je beginnen met gebruik maken van tags, gebruik allereerst <html> om de browser te laten weten welk deel van het bestand moet worden opgevraagd voordat de pagina laad, sluit dit af met </html>

Zover heb je als het goed is 3 regels, over het algemeen probeer je in HTML iedere tag op 1 regel te openen en op een andere te sluiten zodat het makkelijker te lezen is.
http://prntscr.com/fr9q9e

Vervolgens komen we aan bij de head, de tag hiervoor is <head>. Hetgeen wat hier in komt te staan is niet direct zichtbaar voor een normale gebruiker, de head word gebruikt om informatie door te geven aan de browser over het renderen van de lay-out. Vergeet de tag niet af te sluiten met </head>

Als je niet van plan bent om je CSS extern te hosten, is het enige wat je hier in zet {head}, dit is een element dat alleen werkt op MM, het zorgt ervoor dat jouw CSS correct word gekoppeld aan de HTML, maak je er geen zorgen over verder.
http://prntscr.com/fr9tix

Zoals je kan zien heb ik een witruimte tussen de rand en {head}, hierdoor is het later makkelijker om je HTML terug te lezen. Of je een tab gebruikt of meerdere spaties maakt verder niet veel uit. Als je van plan bent spaties te gebruiken gebruik dan minimaal 2 spaties.

Als je wel van plan bent om je CSS extern te hosten, voeg dan ook het volgende toe:
<link rel="stylesheet" type="text/css" href="LINK NAAR JE CSS">
Iedere keer als ik deze regel nodig heb type ik ook nog steeds in op Google “HTML CSS link”, het is niet de moeite waard om het uit je hoofd te leren. Deze regel zegt eigenlijk tegen je browser “Kijk ook even naar dit bestand voordat je verdergaat met het laden van de pagina”.
http://prntscr.com/fr9ybf

We kunnen beginnen aan hetgeen wat de gebruiker daadwerkelijk ziet als hij op de pagina komt, feest!

Vervolgens hebben we de <body> tag nodig, deze moet je wederom ook weer af sluiten met </body> (Vanaf dit punt zal ik niet meer steeds aangeven dat je een tag moet afsluiten, sluit altijd je tags af tenzij ik expliciet aangeef dat dit niet nodig is.)
http://prntscr.com/fra1ds

Vanaf dit punt komt vrijwel tussen de <body> tags in te staan. We beginnen met een wrap, dit doe je met een div, een div is een stukje van een website. Het is afgeleid van het Engelse woord “divide” of “division”. Later in deze guide zullen we pas beginnen met het CSS gedeelte van de site, het is makkelijker om eerst het HTML gedeelte te doen.

Om het mogelijk te maken om je <div> tags te stylen voeg je een class of ID toe aan je tag, dit doe je door id=”wrap” of class=”wrap” in de openingstag te zetten, ofwel <div id=”wrap”>, <div class=”wrap”>. Het verschil tussen een ID en een class is dat een ID maar 1x per pagina kan worden gebruikt en een class meerdere keren.
http://prntscr.com/fra5vn

Het nut van een wrap is om hetgeen wat op je site komt te staan makkelijker te centreren. Dit is niet standaard en stellen we later vast met CSS.

In de wrap zullen we de volgende dingen moeten plaatsen:
-Header
-Topmenu
-Linkerkolom
-Middenstuk
-Rechterkolom
-Footer

Gebruik hiervoor wederom weer <div> met een ID of class. Aangezien er in mijn geval geen tekst en/of andere tags komen in de header heb ik deze op dezelfde regel afgesloten.
http://prntscr.com/frgd6o

Vervolgens moeten we nog wat meer elementen toevoegen die alleen werken op MM.
-{menu_top} in je topmenu
-{content} in je middenstuk
-{tekst_footer} in je footer
-{bottom} net voor het einde van je body tag
http://prntscr.com/frgfj2

Vervolgens moet je de volgende menu’s verdelen over je linker- en rechterkolom:
-{menu_general} dit is het menu “algemeen”
-{menu_personal} dit is het menu “persoonlijk”
-{menu_credit} dit is het menu “creditsmenu”
-{menu_crime} dit is het menu “misdaden”
-{menu_casino} dit is het menu “casino”
-{menu_neighborhood} dit is het menu “omgeving”
-{menu_family} dit is het menu “familie”
-{menu_crew} dit is het menu “crew”

De volgende menu’s zijn optioneel:
-{menu_members} dit is het menu “leden”
-{menu_linkpartners} dit is het menu “linkpartners”
http://prntscr.com/frgkbk

Waar een menu uit bestaat zijn een <ul> tag en meerdere <li> tags, <ul> is het menu en <li> is een onderdeel hiervan.
http://prntscr.com/frgmb5

De <ul> tag heeft voor ieder menu een andere class, deze class gebruik je om ieder menu een ander icoon te geven.
De eerste <li> tag heeft als class “title”, met deze class kan je de titel van het menu apart stylen
De andere <li> tags hebben geen class of ID en worden gelijk behandeld als alle andere <li>, wat we zo meteen zullen veranderen in de CSS.
De <a> tags geven aan dat het een link is, de href waarde die je aangeeft is waar je naar toe gelinkt word, hetgeen wat tussen de <a> tags instaat is waar je op kan klikken.

Op dit moment heb je alle tags die je verplicht moet gebruiken in je ingame staan en kan je ‘m opslaan via de “Eigen layout” update op MM, zorg er ook voor dat je een backup hebt op je eigen PC.

Klik nu bij de “Eigen lay-out” update op stylesheet, dit is waar je CSS wordt opgeslagen. Haal dit helemaal leeg en sla het op. De standaard CSS is naar mijn mening niet handig om te bewerken en limiterend. Je leert er vrij weinig van als je alleen maar de standaard CSS bewerkt, vrijwel iedereen kan dit zonder voorgaande kennis.

CSS basics:
Om een class of een ID te stylen gebruik je een “.” voor classes of een “#” voor ID’s. Bijvoorbeeld .wrap of #wrap, vervolgens start je met stylen door “{ … }” te gebruiken, #wrap { … }. In plaats van de puntjes komt de informatie over het stylen van het element.
Je kan ook meerdere classes/ID’s tegelijk stylen door een “,” te gebruiken.
#topmenu, #wrap { background: #000000; }
Nu zouden het topmenu en de wrap beide een achtergrond hebben met de HEX-waarde van 000000. HEX is een manier om aan te geven welke kleur iets heeft
In Gimp kan je de HEX-waarde van een kleur hier vinden.
In paint.net kan je de HEX-waarde van een kleur hier vinden.
Om te beginnen is het handig om een CSS reset te gebruiken. Een CSS reset haalt alle standaardwaarden van je browser weg, hierdoor is je lay-out beter compatible met andere browsers.
Klik hier voor de CSS reset die ik zal gebruiken, deze is bijna hetzelfde als die in de standaard CSS staat. Dit is het enige wat ik vrijwel direct overneem van het standaard. Zet dit bovenaan in je CSS.

We kunnen nu beginnen het CSS/Design gedeelte van de site. Het is belangrijk dat je ongeveer een idee hebt hoe je wil dat jouw lay-out er uit komt te zien. Het makkelijkst is om een kleur uit te kiezen en dit te combineren met een paar grijstinten.

Voor een achtergrond is het het best om een vloeiend patroon te zoeken of een achtergrond die overvloeit in 1 kleur. Hierdoor ziet de achtergrond er niet verschrikkelijk uit op grotere schermen. Het is vrij makkelijk om zo’n patroon te vinden door op google in te typen “seamless pattern”. Houd er alleen wel rekening mee dat er copyright op kan zitten.
(Hier kan je bijvoorbeeld zien dat de achtergrond op deze site te klein is voor mijn scherm, bij de standaard layout heb je dit probleem niet aangezien hier gebruik word gemaakt van een patroon dat horizontaal vloeiend verloopt en verticaal afloopt naar 1 kleur. Hierdoor is de achtergrond van de standaard lay-out beter geschikt voor verschillende schermgroottes)

Ik zal voor mijn achtergrond deze afbeelding gebruiken


Om deze als achtergrond te gebruiken zal je deze afbeelding ergens moeten uploaden, dit kan via de “Eigen lay-out” update op MM of via een andere host. Als je geen eigen webserver hebt raad ik je aan om het via MM te doen. Er staat bij het kopje afbeeldingen een uitleg hoe je de url van je layout krijgt.

Zodra je de url hebt, begin door in je CSS de body te stylen, hiervoor hoef je alleen maar body {} neer te zetten.
http://prntscr.com/friyke

Tussen { .. } in kan je nu je body stylen. Wat je hier in zet is “background: url(‘AFBEELDING URL’ ;”
http://prntscr.com/frj0cw

Als je een achtergrond hebt die overloopt in een kleur, zet dan neer “background: #(Hex waarde van de kleur waarin de achtergrond overloopt, zonder de haakjes) url(‘AFBEELDING URL’ center top no-repeat;”. Hierdoor word de afbeelding in het midden bovenaan neergezet en niet herhaald. Als je wil dat de achtergrond ook naar beneden/omhoog gaat als je scrolt voeg je achter “no-repeat” “fixed” toe. Zorg er wel voor dat je dit plaatst voor “;”.
http://prntscr.com/frj4qc
http://prntscr.com/frj4xu (met mee scrollende achtergrond)

Na de achtergrond komen we bij de wrap, vrijwel alles op de lay-out zit in de wrap. Deze is dus vrij belangrijk.
Aangezien de wrap een <div> tag is met een ID en niet een aparte tag zoals <body> kan je hem niet stylen door wrap { … } te gebruiken. In plaats daar van gebruik je #wrap { … }, “#” geeft aan dat het over een element met ID=”wrap” gaat en niet over <wrap>.
Wat je wil doen met je wrap is je lay-out centreren. Dit kan je doen met “margin: auto;”, verder moet je ook een breedte geven aan je wrap, ik raad hiervoor een breedte tussen de 980 pixels en 1000 pixels aan. Er zijn nog steeds mensen die een scherm gebruiken met de schermresolutie 1024x768, de scrollbar neemt ook een paar pixels op en je moet het opzij scrollen zoveel mogelijk vermijden. Ook moet het niet te klein worden omdat sommige onderdelen dan niet meer goed kunnen worden gebruikt.
De breedte van je wrap geef je aan met “width: 980px;”.
http://prntscr.com/frwui3

Vervolgens kunnen we de breedte van andere elementen aanpassen. De header, het topmenu en de footer worden even breed als de wrap, in dit geval 980 pixels. De breedte van de linker- en rechterkolom kan je zelf bepalen, Ik raad je aan om iets te kiezen tussen de 180 en 200 pixels.
Voor het middenstuk moet je ook een breedte bepalen, deze moet je afstemmen met de breedte van de linker- en rechterkolom. Denk er ook aan dat het handig is om een klein beetje ruimte te hebben tussen je kolommen.
[Linkerkolom] [middenstuk] [rechterkolom]
Reken hiervoor ongeveer 15 pixels aan beide kanten.

Ik heb gekozen voor mijn linker- en rechterkolom gekozen voor een breedte van 200 pixels. 980-200-200-15-15=550. Mijn middenstuk word dus 550 pixels.
http://prntscr.com/frx2kv

Nadat je dit hebt opgeslagen zal je zien dat er niks is veranderd sinds de aanpassing aan de wrap. Dit komt aangezien <div> tags standaard onder elkaar komen te staan en niet naast elkaar. Dit is op te lossen door gebruik te maken van “float: left;”, voeg dit toe bij je linker-, rechterkolom en je middenstuk.
http://prntscr.com/frx4ze

Hierna zal je zien dat je middenstuk, linker- en rechterkolom naast elkaar staan. Nog steeds is er geen ruimte te zien voor de header en staat de footer op een vreemde plek en niet onderaan de pagina waar hij hoort.
Voor de header is het op te lossen door een hoogte aan te geven, dit doe je met “height: 200px;”, je kan zelf bepalen hoe hoog hij wordt, zorg er wel voor dat hij niet te groot word.
De footer kan je oplossen door “clear: both;”, met clear kan je bepalen hoe een element omgaat met andere elementen die float gebruiken. In dit geval heb je “clear: both;” nodig. Ook zal je in de meeste gevallen de tekst in de footer gecentreerd willen hebben, dit kan met “tekst-align: center;”, je kan in plaats van center ook left & right gebruiken als je dit liever wil.
http://prntscr.com/fs284t

Ook is de er nog geen witruimte tussen het middenstuk en de linker- en rechterkolom. Dit kunnen we oplossen met margin. Met margin kan je aangeven hoeveel witruimte je om een element heen wil hebben. Je kan “margin-left: 15px;” & “margin-right: 15px;” gebruiken maar dit is niet de meest effieciente manier, “margin: 0px 15px;” is efficienter. Zet dit neer bij het middenstuk.
http://prntscr.com/fs28gv

We zijn nu op het punt waar we zullen moeten beginnen met het design van de lay-out. Ik vind zelf niet dat ik goed genoeg ben om een guide te maken hoe het wel zou moeten. Klik hier voor een guide over design.

Om deze achtergrond als header in te stellen gebruik je “background: url(‘header.png’ ;” (gebruik de url die bij jou van toepassing is, er staat een uitleg op de afbeeldingen pagina van de “Eigen lay-out” update. Ook heb ik een schaduw toegevoegd met box-shadow.
http://prntscr.com/ftn1hu

Voor het topmenu ben ik van plan om 1 kleur te gebruiken, indien je hiervoor wel een afbeelding wil gebruiken gaat dit op dezelfde manier als bij de header. Vergeet niet om je topmenu een vaste hoogte te geven.
http://prntscr.com/ftna2v

Het zal je misschien al zijn opgevallen dat de links in het topmenu onder elkaar staan en niet naast elkaar. Dit komt omdat de meeste HTML elementen standaard onder elkaar komen te staan, dit is net zoals bij het middenstuk, de linker- en de rechterkolom te fixen met “float: left;”. Hetgeen wat zo restylet moet worden is een “li” in een “ul” in een div met een ID “topmenu”.
http://prntscr.com/ftn72a

Vervolgens zal je zien dat de links direct naast elkaar staan zonder ruimte tussen in. Dit is op te lossen door als er 2 <li> tags naast elkaar komen te staan een margin-left te gebruiken. In css geef je dit aan met “#topmenu ul li+li {margin-left: (hoeveelheid witruimte)px;}”.
http://prntscr.com/fu20b4

Nu zal je waarschijnlijk gezien hebben dat de links bovenaan in je topmenu staan, om het verticaal te centreren is het het makkelijkst om line-height te gebruiken, zet bij je #topmenu “line-height: (hoogte van je topmenu)px;” neer.

Verder om de linkjes in het topmenu aan te passen kan je dit doen met “#topmenu a {…}”, & “#topmenu a:hover {…} voor wanneer iemand over een link heen gaan met zijn/haar muis. Kleur kan je aanpassen met “color: #(… ;”. Onderstreept kan je weghalen met “text-decoration: none;”. Ook kan je het lettertype aanpassen met “font-family: … ;”. Klik hier voor web-safe fonts

Laatst gewijzigd door Landviz op 2017-08-09 7:17 PM.