Zdravim,
potrebujem pomoc s vytvorenim sablony existujuceho webu www.horovce.sk ...tesim sa na podrobny navod
Vytvorenie sablony z existujucej webstranky
Moderátor: Moderators
-
- 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
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š.
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š.
- puschpull
- 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
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).
"Ostyluješ" každý element podle své potřeby.
např:
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 ..
![Smile :-)](./images/smilies/icon_smile.gif)
P.S.:
jinak, hodně zajímavých nápadů a šablon, stylů atd .. se dá najít třeba zde:
http://www.dynamicdrive.com/
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>
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;*/
}
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 ..
![Smile :-)](./images/smilies/icon_smile.gif)
P.S.:
jinak, hodně zajímavých nápadů a šablon, stylů atd .. se dá najít třeba zde:
http://www.dynamicdrive.com/
- _rasel^
- 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
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.
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 !.!.!. ::..