how to design custom template in socialengine4 framework?

As I开发者_运维技巧 am new to socialengine4 so i am having trouble in designing custom template. I want to convert HTML/CSS template into Socialengine4 module. Example:

Suppose this is the template and i want to design it into socialengine4.

1. how can i create custom layout like above template ?
2. How can i create custom common page elements like header, footer ?

What are the directory structure as well as file structure to get above two points.

Note: I need to create it manually not from the layouts provided default in Admin panel.

Under the article Creating Your Own Theme, SocialEngine documentation provides all the necessary details to create own theme from scratch.