Как рисовать дизайн для Joomla

()
Joomla 1.5
http://www.joomlaua.com Joomla
.
: http://www.joomlaua.com
, , .
Joomla: Copyright 2007 Joomla Project.
: Copyright 2007 WWW.JOOMLAUA.COM
, , Joomla
. Joomla -
. ,
.
Joomla!
,
,
.
Joomla!

(Corporate Identity CI)
,
.
:
(, , )
( )

( )

. .
, , .
.
HTML/XHTML, CSS, XML

HTML/XHTML, CSS XML
Joomla! W3C (World Wide Web
Consortium).
HTML/XHTML
WWW (World Wide Web ) HTML. HTML
. HTML .
: , , ,
, .. HTML
(tags). . ,
:
<h1> </h1>
()
. HTML ,
. HTML XHTML
1.0
CSS
(Cascading Style Sheets CSS) HTML. CSS
. CSS
HTML .
CSS , , ,
18 , Arial,
1.9 .
HTML. HTML
. ,
.
CSS HTML :
HTML : CSS
HTML :
<head>
<title>title of the file</title>
<style type="text/css">
<!-/* ... css ... */
-->
</style>
</head>
CSS : CSS HTML

, ,
HTML . Joomla!:
<head>
<title>title of the file</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
HTML : CSS HTML :

<body>
<h1 style=" CSS command ...">...</h1>
</body>
CSS .
, CSS , HTML ,
CSS , ,
. , CSS

. , , CSS
.
XML
(Extended Markup Language XML)
-, SGML
(Standardized Generalized Markup Language). XML

. Joomla!, XML
.
(Template Installer) (Template Manager).
XML
. :
<name>Joomla_book</name>
HTML XML .
.

, .
.
.
.
.
.
Adobe Photoshop, Microsoft Paint,
.

. ,
.
: 2048
, .
, ,
,
.
,
, .
, ,
. ,
1400 1050 800 600,
.
, , .
,
(800 600 ). ,
, ,
, 780 .

,
. Joomla!
:
. 1:
1:
1:
2:
3:
2:
4:
5:
6:
3:
7: (footer)
HTML
HTML .
, ,
, HTML
.
Notepad
HTML
,
,
Macromedia
Dreamweaver
(http://www.macromedia.com/software/dreamweaver),
HTML
(http://www.thefreecountry.com/webmaster/htmleditors.shtml).
HTML :
1: HTML
<html>
<head>
<link rel="stylesheet"
href="templates/_system/css/general.css" type="text/css" />
href="templates/{TEMPLATE}/css/template.css" type="text/css" />
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="780" border="1">

<tr>

<td colspan="2" height="89" bgcolor="#F5C228"> </td>

<td width="178" height="120" rowspan="2" bgcolor="#FFCC33">
</td>
</tr>
<tr>

<td colspan="2" height="33" bgcolor="#FFCC33"> </td>
</tr>

<tr>

<td width="197" height="233" bgcolor="#F5EE28"> </td>

<td width="389" height="233"> </td>

<td width="178" height="233" bgcolor="#FFFF33"> </td>
</tr>

<tr bgcolor="#FFCC33">

<td colspan="3" height="40"> </td>
</tr>
</table>
</body>
</html>
2: CSS
body {
font-family: Arial, Helvetica, Sans Serif;
}
, (<head></head>)
XHTML.
( border=1), .

.
index.php, Joomla!
.
, CSS Joomla!
CSS . CSS
, .

Jooomla! , , Joomla!
(Joomla! Installer), .
index.php [Joomla!]/templates/joomla150_book/.
template.css [Joomla!]/templates/joomla150_book/css/ .
.
XHTML , Joomla!
.

- . ,
:
[Joomla!]/templates/[]/
[Joomla!]/templates/[ ]/css/
[Joomla!]/templates/[ ]/images/
- .
,
(Template Installer) .
,
( )
. , , ,
, joomla150_book.
:
: HTML , :
/templates/joomla150_book/index.php. .php,
Joomla!,
PHP.
/templates/joomla150_book/template_thumbnail.png
, (Extensions | Template
Manager) Joomla!
227 162 . ,
.
: /templates/joomla150_book/templateDetails.xml
() ,
(Template Installer).
, .
, Joomla!
.
3, .
, , XML
templateDetails.xml:
<files>
<filename> ... ...
</filename>
<filename> ...
</filename>
</files>
XML .
:
3: templateDetails.xml
templateDetails.xml
<install version="1.5" type="template">
<name>joomla150_book</name>
<version>0.1</version>
<creationDate>28.07.2006</creationDate>
<author>Hagen Graf</author>
<copyright>GNU/GPL</copyright>
<authorEmail>hagen@cocoate.com</authorEmail>
<authorUrl>http://www.cocoate.com</authorUrl>
<description>... </description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>
</install>
CSS : CSS .
CSS .
CSS.
/templates/joomla150_book/css/template.css ( 2).
, : ,
. ,
/images. :
/templates/joomla150_book/images/[user-defined image files].

, [Joomla!]/templates/,
Joomla! (Extensions |
Template). .
. 2: Joomla150_book
. 3:
, . ,
.
.
. 4:
Joomla!
Joomla! , HTML .
Joomla! 1.0.x Mambo 4.5.x,
patTemplate. patTemplate PHP HTML .
, Joomla! jdoc. ,
<title>, index.php ,
,
(Newsfeed symbol):
<head>
<jdoc:include type="head" />
</head>
. 5:
, , Joomla!
, HTML .
RSS ,
(Newsfeeds) ,
(Firefox, Opera ..).
10
4: Joomla!
...
<head>
<title>Joomla 1.5.0 - Home</title>
<meta name="generator" content="Joomla! 1.5" />
<meta name="description" content="Joomla! - the dynamic portal
engine and content management system" />
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link
href="http://localhost/Joomla150/feed.php?option=com_frontpage&
Itemid=1&format=rss" rel="alternate" type="application/rss+xml"
title="RSS 2.0" />
<link
href="http://localhost/Joomla150/feed.php?option=com_frontpage&
Itemid=1&format=atom" rel="alternate"
type="application/atom+xml" title="Atom 1.0" />
<link href="favicon.ico" rel="shortcut ico" rel="shortcut icon"
type="image/x-icon" />
</head>
...
, jdoc.
, <jdoc:include type="modules" name="top" style="-1" />
( modules).
name . (top, right, left, user1 ..).
Joomla! (Extensions | Module Managers,
Position). Extensions |
Templates | Module Positions. style ,
HTML , . , -1
HTML <div>.
-1
<div>
-2
XHTML

-3
1:
index.php jdoc
:
5: index.php jdoc
<html>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css"
type="text/css" />
href="templates/{TEMPLATE}/css/template.css" type="text/css" />
11
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="780" border="1">

<tr>

<td colspan="2" height="89" bgcolor="#F5C228"> </td>


<tr bgcolor="#FFCC33">

<td colspan="3" height="40">
<jdoc:include type="modules" name="footer" style="-1" />
</td>
</tr>
</table>
</body>
</html>
,
, HTML , .
, , :
. 6:
CSS , .
template.css. ,
Arial, ,
.
12
6: template.css
body {
font-family: Arial, Helvetica, Sans Serif;
}
a:link, a:visited {
color: #ff6600;
text-decoration: none;
font-weight: bold;
font-size: 15px;
}
a:hover {
color: #C43C03;
text-decoration: none;
font-weight: bold;
font-size: 15px;
}
.
More About Joomla, :
. 7: CSS
HTML . ,
HTML ,
. ,
. , Joomla!
. .
13

, ,
zip .
(template_thumbnail.png) 227 162 .
(Template
Manager):
. 8: joomla150_book
joomla150_book zip ,
.
[Joomla!]/templates/joomla150_book/ joomla156_book.zip.
.

. ,
joomla150_book,
.
Joomla! Extensions | Template Manager.
(Default).
. Joomla! Extensions |
Install/Uninstall. (Templates).
joomla150_book (Uninstall).
14
. 9:
[Joomla!]/templates/joomla150_book/.
(Template
Installer) Joomla!

( Extensions |
Install/Uninstall).
zip . joomla150_book.zip
(Upload File & Install).
, XML
.
. 10:
15
, ,
.
Dreamweaver
HTML Dreamweaver .
Joomla! ,
Dreamweaver. Dreamweaver MX 2004
, Template Builder Extension.
joomlasolutions1.0.mxp
(http://developer.joomla.org/sf/frs/do/viewRelease/projects.joomlasolutions/frs.dreamweaver_jo
omla_template_exte_joomla_dreamweaver_ext_1_0). Dreamweaver,
| (Commands | Manage
Extensions). (Macromedia
Extension Manager). (Install):
. 11: Dreamweaver
16

Dreamweaver.
(Dynamic page type).
| | | PHP (File | New | Dynamic Page | PHP)
. 12: Dreamweaver
, ,
.
Joomlasolutions1:
. 13:
17
,
. (Code),
, Dreamweaver, Joomla!
. 14:
(Insert Header Code).

, Joomla!
. 15: Joomla!
,
Joomla!, .
18
. 16: , Joomla!

, .
<div>.
. Dremweaver (layout mode),
.
19

Dremweaver,
| (Insert | Table). Dreamweaver
.
. .
. 17:
(.. 5), ,
:
20
. 18
.
Dremweaver: [Joomla!]/templates/joomla150_book_dw.
index.php. css images.
,
, images.
Photoshop Gimp.
21
. 19:
CSS CSS. template_css.

CSS Dreamweaver .
css Dreamweaver,
:
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
, css
tremplates, (.. 5).

CSS Joomla!
CSS rhuk_milkyway
.
22
Joomla!
.
, , ,
(Insert Search).
. 20:
,
HTML JavaScript :
. 21:
Joomla!
23
. 22: Joomla!

Joomla!,
templateDetails.xml. :
<install version="1.5" type="template">
<name>joomla150_book_dw</name>
<creationDate>28.07.2006</creationDate>
<author>Hagen Graf</author>
<copyright>GNU/GPL</copyright>
<authorEmail>hagen@cocoate.com</authorEmail>
<authorUrl>http://www.cocoate.com</authorUrl>
<description>... Description ... Dreamweaver Version </description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>
</install>
XML
(Template Manager) Joomla!
Joomla! .
24
. 23:
. 24:
, Dreamweaver
. Dramweaver
.
Dreamweaver ,
FTP WebDAV ! Dreamweaver
25
Joomla! ,
.
. 25 Dremweaver
<div>
Joomla! 1.5.0 ()
. , Joomla!
. <div>
<table>
<div> , , ,
..
, . <div>
. CSS
. <div> : CSS.
<div> , CSS .
26
, rhuk_milkyway, .
( <table>),
<div>. , ,
. Dreamweaver <div>.

, :
. 26: ,
HTML index.php :
<div id="leftcolumn">
<jdoc:exists type="modules" condition="left" >
<jdoc:include type="modules" name="left" style="-3" />
</jdoc:exists>
</div>
<div> CSS leftoclumn.

<jdocs:exists> </jdocs:exists>
.
(left). ,
, .
27
.
CSS CSS :
#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}
, (
(View Page
Source)), , jdoc Joomla!
.
7: HTML
HTML
<div id="leftcolumn">
<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3><ul class="mainmenu">
<li class="level1 item1 active current">...</li>
<li class="level1 item2"></li>
</div>
</div>
</div>
</div>
<div class="module_menu">
<div>
<div>
<div>
<table ...>
<tr ><td>...</td></tr>
<tr ><td>...</td></tr>
</table>
</div>
</div>
</div>
</div>
HTML
CSS module_menu.
CSS :
div.module_menu {
background: url(../images/mw_box_blue_br.png)
100% 100% no-repeat;
... ...
}
div.module_menu div {
background: url(../images/mw_box_blue_bl.png)
0 100% no-repeat;
}
div.module_menu div div {
background: url(../images/mw_box_blue_tr.png)
100% 0 no-repeat;
}
28
div.module_menu div div div {

background: url(../images/mw_box_blue_tl.png)
0 0 no-repeat;
padding: 10px;
padding-top: 30px;
padding-bottom: 15px;
width: auto;
}
div.module_menu div div div div {
background: none;
padding: 0;
}
CSS <div>.

. CSS ,
(<h3></h3>), .
. , <div>
style (
). -1,
-3.
<div>. , 7 ,
. (Login Module) .
Joomla!
. .
HTML
HTML
, , .
, ,
Joomla! .
Joomla! 1.5.0
(views). views,
. ,
com_content : archive, article, category,
frontpage, section. views
.
tmpl, PHP
, article.php.
29
. 27: (views)
,
. com_content,
content:
[Joomla]/templates/joomla150_book_dw/com_content/.
[Joomla]/components/com_content/view/article/tmpl/default.php
. Joomla!
(views) , ,
.
Web Joomla!
(web accessibility) .
.
, , .
.
.
(accessibility) ,
-, ,
, .
,
. . ,

.
30

, , ,
:
: .
, .
: .
Lynx Linux
OSX, Unix, Windows OS2.
, ,
JavaScript, Flash ..
, ,
. !
:
, .
.
XHTML. !
: ,
.
:
.
.
:
.
http://www.section508.gov.
. ,
. , , .
CMS
.
, , , ,
, .
,
. ,
. .
.
Joomla!
: . , Joomla! 1.5.0 ,
,
.
31
Joomla!
: !
Joomla! 1.5.0 XHTML . ,

. , Joomla!,
. ,
HTML .
XHTML ,
,
, .
.
(Jan
Eric Hellbusch).
, .
.
:
<h1> </h1>
<p> </p>
<p> </p>
, ,
, .
. ,
, .
<span class="heading"> </span>
:
<h1 class="heading"> </h1>
?
, :
OpenOffice.org Microsoft Word.
. WYSIWYG ,
Joomla! .
title longdesc:
<img src="companylogo.png" width="100" height="130" border="0"
alt="companylogo" title="This is our company logo" />
<img src="companylogo.png" width="100" height="130" border="0"
alt="companylogo" longdesc="companylogo.txt" />
longdesc
32
. WYSIWYG
Joomla! .
.
. !
Joomla!
Joomla!, (www.3tc4u.co.uk):
. 28:
, .
Web Accessibility ( )
. !
33

( index.php)
<jdoc>
PHP

<jdoc:tmpl name="loadcss" varscope="document"

type="condition" conditionvar="LANG_DIR">
<jdoc:sub condition="rtl">
<link href="templates/{TEMPLATE}/css/template_rtl.css"
rel="stylesheet" type="text/css" />
</jdoc:sub>
</jdoc:tmpl>
CSS

.
BODY
Joomla!
<jdoc:include type="message" />

<jdoc:include
name="[position]"style="[Style]" />
type="modules"
[position]. [style]: 0
(<td></td>)
1
-1
-2
XHTML
(<div></div>)
-3
.
<jdoc:exists type="modules" condition="left" >

<jdoc:include type="modules" name="left" style="-3" />
</jdoc:exists>
<jdoc:include type="component" />
,

.

URL.
() ?
34
,
. HTML CSS
. , ,
.
:
1
1. ,
.
2. (Media Manager) Joomla!
3. , .
4. img (<img src=) .
2
1. ,
.
2. .
35

Как рисовать дизайн для Joomla

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Как рисовать дизайн для Joomla

Загружено:

Авторское право:

Доступные форматы

()

: Copyright 2007 WWW.JOOMLAUA.COM

HTML/XHTML, CSS, XML

CSS : CSS HTML

HTML : CSS HTML :

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

(Insert Header Code).

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

CSS CSS. template_css.

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

<div> CSS leftoclumn.

: Copyright 2007 WWW.JOOMLAUA.COM

div.module_menu div div div {

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

: Copyright 2007 WWW.JOOMLAUA.COM

Joomla! 1.5.0 XHTML . ,

: Copyright 2007 WWW.JOOMLAUA.COM

<jdoc:tmpl name="loadcss" varscope="document"

<jdoc:include type="message" />

<jdoc:exists type="modules" condition="left" >

: Copyright 2007 WWW.JOOMLAUA.COM

Вам также может понравиться