Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:tervezes

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

oktatas:web:tervezes [2019/08/22 20:38] (aktuális)
admin létrehozva
Sor 1: Sor 1:
 +[[oktatas:​web|<​ Web]]
  
 +====== Tervezés ======
 +Csonk
 +
 +
 +
 +===== Lineáris szerkezet =====
 +
 +
 +
 +<​html>​
 +<svg xmlns="​http://​www.w3.org/​2000/​svg"​ version="​1.1"​ width="​400"​ height="​100">​
 +
 +  <rect x="​0"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +
 +  <line x1="​50"​ y1="​30"​ x2="​70"​ y2="​30"​ style="​stroke:​blue;​ stroke-width:​2"​ />
 +
 +  <rect x="​70"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +
 +  <line x1="​120"​ y1="​30"​ x2="​140"​ y2="​30"​ style="​stroke:​blue;​ stroke-width:​2"​ />
 +
 +  <rect x="​140"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +
 +  <line x1="​190"​ y1="​30"​ x2="​210"​ y2="​30"​ style="​stroke:​blue;​ stroke-width:​2"​ />
 +
 +  <rect x="​210"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>  ​
 +  ​
 +</​svg>​
 +
 +</​html>​
 +===== Hierarchikus szerkezet =====
 +
 +<​html>​
 +<svg xmlns="​http://​www.w3.org/​2000/​svg"​ version="​1.1"​ width="​200"​ height="​250">​
 +
 +  <rect x="​0"​ y="​80"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +
 +  <line x1="​50"​ y1="​120"​ x2="​70"​ y2="​80"​ style="​stroke:​blue;​ stroke-width:​2"​ />
 +  <line x1="​50"​ y1="​120"​ x2="​70"​ y2="​150"​ style="​stroke:​blue;​ stroke-width:​2"​ />
 +
 +  <rect x="​70"​ y="​40"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +  <rect x="​70"​ y="​120"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +
 +  <line x1="​120"​ y1="​70"​ x2="​140"​ y2="​30"​ style="​stroke:​blue;​ stroke-width:​2"​ />
 +  <line x1="​120"​ y1="​70"​ x2="​140"​ y2="​110"​ style="​stroke:​blue;​ stroke-width:​2"​ />
 +  <line x1="​120"​ y1="​150"​ x2="​140"​ y2="​110"​ style="​stroke:​blue;​ stroke-width:​2"​ />
 +  <line x1="​120"​ y1="​150"​ x2="​140"​ y2="​200"​ style="​stroke:​blue;​ stroke-width:​2"​ />  ​
 +
 +  <rect x="​140"​ y="​0"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +  <rect x="​140"​ y="​80"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +  <rect x="​140"​ y="​160"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>  ​
 +  ​
 +  ​
 +</​svg>​
 +
 +</​html>​
 +
 +
 +===== Egyoldalas weblap (SPA) =====
 +
 +Az oldal tartalma változik, de maga az oldal sosem töltődik újra. Lásd SPA.
 +
 +<​html>​
 +<svg xmlns="​http://​www.w3.org/​2000/​svg"​ version="​1.1"​ width="​400"​ height="​100">​
 +
 +  <rect x="​0"​ width="​50"​ height="​70"​ style="​fill:​none;​ stroke-width:​1;​ stroke:​rgb(0,​0,​0)"/>​
 +
 +  ​
 +</​svg>​
 +
 +</​html>​
 +
 +
 +Az egyoldalas weblapon az összes tartalom elhelyezkedhet
 +az adott lapon, vagy JavaScript tölti újra és újra a tartalmat.
 +
 +
 +===== Saját honlap ​ =====
 +
 +
 +Kezdetnek elkészíthetjük saját honlapunkat. Lehet a következő felépítésű. ​
 +
 +  * Főoldal
 +    * Magamról
 +    * Ezzel foglalkozom
 +    * Életrajzom
 +    * Családom
 +    * Hobbim
 +    * Sport
 +    * Linkjeim
 +
 +===== Flat design =====
 +Minimális tervezési stílusban, webes és mobil felületeken.
 +Lapos kialakítás. Árnyékolás nélküli felületek.
 +
 +Példa:
 +  * https://​github.com/​designmodo/​Flat-UI
oktatas/web/tervezes.txt · Utolsó módosítás: 2019/08/22 20:38 szerkesztette: admin