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.