Dinamic Template

Objective: Develop a CMS modulo write in php for online template edition To maker easy the project we want use the open source software HTML-BASED CSS EDITOR. See the demo: http://htmlcsseditor.sourceforge.net/demo/index.html An code example that shall be generated is in 1. An interface suggestion is in 2 •

Description:

The user create or edit the blocks of his site thru the interface. The new block are created by pressing Add. The result of this action is the new block that appears in the site visualization. There are 5 block types (specified in 3). The only diference is the php function inside the block. So: the blocks creation include in the index.php file a new div. This div can be created inside other div. Automatic is create a class in the style.css file with same name of div The user cans manager the block also. The action are Edit, Del, Up, Dow. Edit > When the user selection the block to edit, it block shall have it border changed to solid red with 2px for 2 seconds. The class elements of this block shall be configured thru the css editor (yellow interface) Del > delete the div (in the index.php) and the class (in the style.css) Up > the div is moved above Down > the div is moved below

•

The code generated thru this module is salve in the index.php and style.css

1 The code below is an example that shall be generated by system: index.php style.css body { background:#4d4d4d url(imagens/bg_body.gif) top left repeatx; } #container { width:785px; height:400px; margin:0 auto; } #header { width:782px; height:279px; background:url (imagens/header.gif) no-repeat; } #menu { width: 782px; height:59px; background:url (imagens/menu_bg.gif) no-repeat; } #menu ul { width:782px; background:#4c4c4c; float:left;} #menu ul li { float:left; margin:0 auto; border-right: 2px solid white; padding:0 0 0 10px; } #menu ul li a { font:bold 11px Verdana, Arial, Helvetica, sans-serif; color:white; display:block; padding:5px 15px; background: url (imagens/list-button.gif) no-repeat center left; } #content { width: 772px; background:#e2e2e2; clear:both; padding: 5px; font-family: Verdana, Arial, Helvetica, sans-serif; } #content a:hover { color: #52b57c;} #content a{ color: #000000;} #content * { font: Arial; } #rodape { width:783px; height:105px; background:url (imagens/rodape.gif) center center; }

2

Add a block : Type: Localization:

design block

V

Root

V Add

Block Manager Action:

Block: Search Block

V

Edit

Up

Del

Down

Design Block

Menu Block Search Block Login Block

Design Block

Content Block

3 Design Block Content Block

Menu Block Login Block

Search Block