Layout - Learning about the design layout in Magento

In this tutorial, we introduce the Magento layout. The layout folder contains the XML files that largely dictate what is displayed on the front end of the store. The layout structure is quite complex in Magento, yet this is one of the reasons that makes it so powerful and flexible. Layout of Magento is defined in the “.xml” file in the folder containing /frontend/.../layout/. Layout in Magento is a combination of the default layout and layout updates. Each module in Magento also has a Layout.xml file, which contains different handle cards, include handle which will always be loaded.

Default layout: comprises page.xml and local.xml
- Page.xml: contains a block root that all pages must load:

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml"></block>

+ Page / html: also known as the root block, the other blocks are children in this block.
This block root contains the block structures:
- Block structure will be contained within the sub-blocks, the block is also come by name = "" as = "" from somewhere (layout update for block) contents of the block is shown in the block corresponding “. phtml” file that:
- If a parent block is declared in the file layout, along with the declaration of the sub-block inside , file .phtml template specified content of the parent block would call the function is declared by: <? php echo $ this-> getChildHtml ('named_sub_block')?>

There are some of the Block Structure and their roles here:

<block type="page/html_head" name="head" as="head">
</block> => CSS và JS files are contained.

<block type="core/text_list" name="after_body_start" as="after_body_start" translate="label"></block> => the child blocks in the core/text_list will naturally be loaded without call getChildHTML('block_name');

<block type="page/html_notices" name="global_notices" as="global_notices" template="page/html/notices.phtml" />

<block type="page/html_header" name="header" as="header"></block>

<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

 <block type="core/text_list" name="left" as="left" translate="label"></block>
<block type="core/messages" name="global_messages" as="global_messages"/>
<block type="core/messages" name="messages" as="messages"/>
<block type="core/text_list" name="content" as="content" translate="label">
</block>
<block type="core/text_list" name="right" as="right" translate="label">
</block>
<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"></block>
<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">
</block>
 <block type="core/profiler" output="toHtml" name="core_profiler"/>