Vytvorenie sablony z existujucej webstranky

V tejto téme sa nachádzajú šablóny (templaty, vzhľady) pre Etomite.

Moderátor: Moderators

websmart
Thief
Thief
Príspevky: 2
Dátum registrácie: Pi Feb 17, 2012 3:35 pm

Vytvorenie sablony z existujucej webstranky

Príspevok od používateľa websmart »

Zdravim,

potrebujem pomoc s vytvorenim sablony existujuceho webu www.horovce.sk ...tesim sa na podrobny navod
R - stick
Moderator & CLT
Moderator & CLT
Príspevky: 215
Dátum registrácie: Pi Sep 23, 2005 10:59 am
Bydlisko: Vysoké Studnice (u Jihlavy)
Kontaktovať používateľa:

Re: Vytvorenie sablony z existujucej webstranky

Príspevok od používateľa R - stick »

Nejrychlejší budeš mít, když použiješ jakoukoliv templatu - dokonce i tu základní která v Etomite je To co je na tom webu je staré jako Metuzalém - ty stránky jsou dělané v rámech (Iframe) - což se používalo někdy v polovině 90 let a pak velmi rychle zmizelo. Být tebou, tak Etomite napřed nainstaluji, pak do něj přes CTRL+C a CTRL+V přetahám všechny články z původního webu ( je jich tam pár, většina odkazů vede na neexistující stránku) - a až to budeš mít rozchozené na Etomite, tak pak bych teprve řešil nějakou novou templatu. Pokud ji tam pak budeš mít, tak velmi snadno ji u všech stránek změníš.

Případně si nějakou už hotovou templatu najdi a do Etomite si ji nainstaluj. Samozřejmě jde vytvořit i templata na základě nějakého webu, nebo úplně nová - to ti ale doporučuji až se s Etomite seznámíš trochu lép, protože to předpokládá alespoń trochu znát HTML a CSS - protože bez toho tu templatu nenapíšeš.
Používateľov profilový obrázok
puschpull
Expert
Expert
Príspevky: 112
Dátum registrácie: Št Mar 19, 2009 9:31 am
Bydlisko: Czech Republic - Most
Kontaktovať používateľa:

Re: Vytvorenie sablony z existujucej webstranky

Príspevok od používateľa puschpull »

websmart:
jak již odpověděl R - stick

Pro ukázku, jak zpravidla postupuji třeba já. Stránku si rozdělím do "bloků" (element div).
K CSS souboru použiješ svou cestu,( zde použitou mám v redakčním systému modx).

Kód: Vybrať všetko

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <base href="[[!++site_url]]" />
  <meta http-equiv="Content-Type" content="text/html; charset=[[++modx_charset]]" />
  <meta name="robots" content="index,follow" />
  <link rel="stylesheet" type="text/css" href="[[++base_url]]assets/templates/pp1/css/default.css" />
  <!--[if IE]><link rel="stylesheet" type="text/css" href="[[++base_url]]assets/templates/pp1/css/ie.css" /><![endif]-->
  <title>[[++site_name]] - [[*pagetitle]]</title>
</head>

<body>
<div id="full_page">
    
  <h1>[[++site_name]]</h1>

<div id="header">    
  [[$menu_horiz]]
</div> <!-- end header -->

<div id="page">

	<div id="menu">
	  [[$menu_vert]]
	</div> <!-- end menu -->

	<div id="content">
		<h2>[[*pagetitle]]</h2>
		[[*content]]
	</div> <!-- end content -->

</div> <!-- end page -->

<div id="footer">
    [[$footer]]
</div> <!-- end footer -->

</div> <!-- end full_page -->
</body>
</html>
"Ostyluješ" každý element podle své potřeby.
např:

Kód: Vybrať všetko

/*
 * nazev stylu
 * autor (http://autor.net)
 *  2012
 */

/* GENERAL */

* {
	margin: 0;
	padding: 0;}

body{
background-color: #c0c0c0;
background: #222 url("../img/background.gif") top left repeat ;
color: #EEE;
font-family: "Trebuchet MS",arial,"bitstream vera sans",sans-serif;
font-size: 80%;
padding: 36px 8% 2% 8%;
text-align: center;
margin-left: auto;
margin-right: auto;
}

/* FULL_PAGE */

#full_page{
float: left;
position: relative;
left: 0px;
top: 0px;
width: 96%;
margin-top:20px;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
}

/* HEADER */

#header{
position: relative;
left: 0px;
top: -28px;
width: 90%;
height: 40px;
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/*border: 1px solid lime;*/  /*každý element div si můžeš orámovat pro představu kde je a jak je velký, když zrušíš to /* */
}

/* PAGE */

#page{
float: left;
position: relative;
left: 0px;
top: 0px;
width: 100%;
}

/* MENU */

#menu{
float: left;
position: relative;
left: 0px;
top: 0px;
list-style: none;
text-align: left;
width: 15%;
min-width: 128px;
font-size:125%
font-family: verdana, sans-serif; 
font-weight: bold;
/*border: 1px solid white;*/
}

/* CONTENT */

#content{
clear: right;
float: left;
position: relative;
left: 0px;
top: 0px;
width: 75%;
min-width: 590px;
min-height: 590px;
text-align: left;
overflow: hidden;
margin-left: auto;
margin-right: auto;
padding: 2em;
/*border: 1px solid yellow;*/
}

/* FOOTER */

#footer{
float: left;
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 2em;
text-align: center;
font-size: 80%;
color: orange;
font-style: italic;
list-style: none;
padding-top: 1em;
padding-bottom: 10px;
/*border: 1px solid lime;*/
}
Nakonec to postupným laděním souboru CSS nastavíš podle svých představ.

V redakčním systému už pak jen píšeš další a další stránky, a pokud to máš nastavené, objevují se nové stránky v menu, styl celého webu je jednotný a je radost s tím pak pracovat ..
:-)

P.S.:
jinak, hodně zajímavých nápadů a šablon, stylů atd .. se dá najít třeba zde:
http://www.dynamicdrive.com/
----------------------------
http://puschpull.org
:-)
Používateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať používateľa:

Re: Vytvorenie sablony z existujucej webstranky

Príspevok od používateľa _rasel^ »

Ahoj websmart, z dôvodov o ktorých písal R - stick bude časovo jednoduchšie použiť existujúcu šablónu, ktorú bude potrebné upraviť tak, aby sa ti páčila. Čiže len farebne naštýlovať, prispôsobiť/poohýbať, pridať logo a podobne.

Ak sa ti niečo z nižšie spomínaných šablón pozdáva (ako kostra návrhu, na ktorej sa dá stavať), tak mi napíš tvoju predstavu - a potom napíšem podrobnejší návod čo je potrebné urobiť, aby to bežalo v Etomite.

Podľa rozloženia webu má k nemu najbližšie šablóna 1024px od Andreasa Viklunda, ak chceš vertikálne menu na ľavo. A ako náhrada menu by sa použilo napr. jQuery menu, demo je na webe, pretože nevýhodou toho, ktoré je na pôvodnom webe je priame odkazovanie na JavaScript. Alebo jednoduché Drop-Down Menus, Horizontal Style, demo.

Ak by si dal prednosť horizontálnemu menu, tak celkom schopná je šablóna Internet Business z webu Free CSS Website Template, kde je rozbaľovacie menu už implementované.

Na Slovensku používa Etomite CMS ako stránku obce napr. obec Martinček, kde trocha upravili pôvodu šablónu AlexisPro Redux.
..:: Etomite CMS → Rulezzz !.!.!. ::..
Napísať odpoveď