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 <body> <div id="container"> <div id="header"></div> <div id="menu"> <div><?php show_menu(); ?></div> </div> <div id="content"><?php page_content(); ?></div> <div id="rodape"></div> </div> </body> 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 Root V

V Add

Block Manager Block: Search Block V Action: Edit Del Up Down

Design Block

Menu Block Search Block Login Block Content Block

Design Block

3
Design Block <div> </div>
Content Block <div> page_content(); </div>

Menu Block <div> show_menu(1,1,-1); </div>
Login Block <div> login(); </div>

Search Block <div> search(); </div>