Strana 1 z 1
Vytvorenie sablony z existujucej webstranky
Napísané: So Feb 18, 2012 3:08 pm
od používateľa websmart
Zdravim,
potrebujem pomoc s vytvorenim sablony existujuceho webu
www.horovce.sk ...tesim sa na podrobny navod
Re: Vytvorenie sablony z existujucej webstranky
Napísané: So Feb 18, 2012 6:45 pm
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š.
Re: Vytvorenie sablony z existujucej webstranky
Napísané: Ne Feb 19, 2012 11:19 am
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/
Re: Vytvorenie sablony z existujucej webstranky
Napísané: Po Feb 20, 2012 3:23 am
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.