Differences

This shows you the differences between two versions of the page.

Link to this comparison view

dgsb_wiki:getting_started:create_page [2018/10/03 00:17] (current)
Line 1: Line 1:
 +{{indexmenu_n>​2}}
 +====== Create a Simple Page ======
 +A project like the [[dgsb_wiki:​getting_started:​create_project|one you just created]] contains [[dgsb_wiki:​workspace_and_workflow:​projects_and_files:​about_dg5|pages]]. These steps show you how to design a simple page with a responsive header and body.
 +
 +When you design a page, you customize your page's root component, called the Stage. Then,
 +you add [[dgsb_wiki:​widgets_and_property_inspector:​essentials:​home|components]] to the Stage. Finally, you customize each component’s behavior, layout, and appearance using the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​properties_panel|Property Inspector]].
 +
 +----
 +
 +===== Create Vertical Layout for the Stage =====
 +[[dgsb_wiki:​widgets_and_property_inspector:​layouts:​vertical_layout:​home|Vertical layout]] ensures that the children of the Stage are positioned vertically from top to bottom. In this example, the Stage'​s children will be a header group and a body group.
 +  - In the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​outline|Outline]],​ click the Stage.
 +  - <​WRAP>​In the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​properties_panel|Property Inspector]],​ for the **Layout** property group, use the drop-down menu to change the **Layout** property from **Absolute** to **Vertical**.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_1.png?​direct|}}</​WRAP>​
 +
 +----
 +
 +===== Create a Header Group =====
 +[[dgsb_wiki:​widgets_and_property_inspector:​layouts:​horizontal_layout:​home|Horizontal Layout]] ensures that children of the header group are positioned horizontally from left to right. In this example, the header'​s children will be a logo and a text box.
 +  - In the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​outline|Outline]],​ right-click the Stage. Choose **Insert** > **Components** > **Group**.
 +  - <​WRAP>​In the Outline, double-click the group component and rename it ''​Header''​.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_16.png?​direct|}}</​WRAP>​
 +  - With the header group selected, customize its properties in the Property Inspector:
 +    - <​WRAP>​For **Layout**, select **Horizontal**.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_12.png?​direct|}}</​WRAP>​
 +    - <​WRAP>​Under **Fill and Stroke**, click {{:​dgsb_wiki:​50_icn-pi-fill.png?​nolink|}} **Fill**, then choose {{:​dgsb_wiki:​46_icn-pi-fill-solid.png?​nolink|}} Solid Color, and then select a color.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_13.png?​direct|}}\\
 +{{:​dgsb_wiki:​getting_started:​getting_started_14.png?​direct|}}</​WRAP>​
 +    - <​WRAP>​Under **Position and Size**, hover over {{:​dgsb_wiki:​84_icn-pi-width.png?​nolink|}} **Width** until a blue dot appears.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_24.png?​direct|}}</​WRAP>​
 +    - <​WRAP>​Click the blue dot, and select **Reset**.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_17.png?​direct|}}
 +
 +This sets the header'​s width to **Auto**. ​
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_15.png?​direct|}}
 +    ​
 +Because the Stage'​s **Horizontal Alignment** is set to **Stretch**,​ the header'​s width of **Auto** makes the header expand to follow the size of the Stage.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_2.png?​direct|}}</​WRAP>​
 +
 +----
 +
 +===== Create a Body Group =====
 +  - In the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​outline|Outline]],​ right-click the Header group and select {{:​dgsb_wiki:​59_icn-tool-copy.png?​nolink|}} **Duplicate**.
 +  - <​WRAP>​In the Outline, double-click the new group and rename it ''​Body''​.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_19.png?​direct|}}</​WRAP>​
 +  - With ''​Body''​ selected, customize its properties in the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​properties_panel|Property Inspector]]:​
 +    - <​WRAP>​Under **Fill and Stroke**, click {{:​dgsb_wiki:​50_icn-pi-fill.png?​nolink|}} **Fill** and select a color.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_18.png?​direct|}}
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_23.png?​direct|}}
 +</​WRAP>​
 +    - <​WRAP>​Under **Position and size**, hover over {{:​dgsb_wiki:​151_icn-ns-resize-cursor-icon.png?​nolink|}} **Height** until a blue dot appears.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_20.png?​direct|}}</​WRAP>​
 +    - <​WRAP>​Click the blue dot and select **Reset**.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_21.png?​direct|}}
 +    ​
 +This sets the body's height to **Auto**. When you set **Flex-Grow** in the next step, the body's height will grow to fill available space.
 +</​WRAP>​
 +    - <​WRAP>​Under Position and size, click {{:​dgsb_wiki:​64_icn-advanced-collapsed.png?​nolink|}} **Expand** and then enter a value of 1 for {{:​dgsb_wiki:​getting_started:​flexgrow_icon.png?​nolink&​16|}} **Flex-Grow**.
 +
 +Because the body's height is **Auto** and its **Flex-Grow** is 1, its height grows so that the entire height of the Stage is used.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_22.png?​direct|}}</​WRAP>​
 +
 +----
 +
 +===== Add Content to the Header =====
 +  - Add an image component to the Header group:
 +    - <​WRAP>​Drag the image of your choice from your OS’s file browser to the [[dgsb_wiki:​workspace_and_workflow:​projects_and_files:​project_directories|assets folder]] in the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​project_panel|Project panel]].
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_25.png?​direct|}}</​WRAP>​
 +    - <​WRAP>​When prompted, click OK to upload the image asset.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_26.png?​direct|}}</​WRAP>​
 +    - In the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​outline|Outline]],​ right-click the Header group. Choose **Insert** > **Components** > **Image**.
 +    - In the Outline, select the image.
 +    - <​WRAP>​In the [[dgsb_wiki:​workspace_and_workflow:​panels_and_menus:​properties_panel|Property Inspector]],​ under **Image**, next to **URL**, click {{:​dgsb_wiki:​175_dg_file_folder.png?​nolink|}} **Browse**.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_27.png?​direct|}}</​WRAP>​
 +    - <​WRAP>​In the pop-up, expand the ''​assets''​ directory, and double-click the image asset.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_28.png?​direct|}}</​WRAP>​
 +  - Add a text component to the Header group:
 +    - In the Outline, right-click the Header group. Choose **Insert** > **Components** > **Text**.
 +    - <​WRAP>​In the Property Inspector, under Text and Font, enter some text in the Text property, and customize the [[dgsb_wiki:​widgets_and_property_inspector:​property_inspector:​textbox:​home|Text and Font properties]]. ​
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_29.png?​direct|}}</​WRAP>​
 +
 +----
 +
 +===== Set Header Height to Auto =====
 +You can set the header group'​s height to Auto to make the header group height follow the size of the group'​s content.
 +  - In the Outline, select the Header group.
 +  - <​WRAP>​In the Property Inspector, under Position and Size, hover over the {{:​dgsb_wiki:​151_icn-ns-resize-cursor-icon.png?​nolink|}} **Height** property until a blue dot appears. ​
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_30.png?​direct|}}</​WRAP>​
 +  - <​WRAP>​Click the blue dot, and select **Reset**.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_31.png?​direct|}}
 +  ​
 +This sets the height to Auto, which causes the header height to follow the size of its content.
 +
 +{{:​dgsb_wiki:​getting_started:​getting_started_32.png?​direct|}}</​WRAP>​
 +
 +----
 +
 +===== Learn More =====
 +  * To read about any property, hover over the property until a blue dot appears. Then, click the blue dot, and select **Help**. Or, look at the [[dgsb_wiki:​widgets_and_property_inspector:​property_inspector:​home|Properties Reference]].
 +  * To learn more about Layout, see online references about ''​flexbox'',​ like [[https://​bocoup.com/​weblog/​dive-into-flexbox/​ |this one]]
 +  * To learn more about Flex-Grow, see [[https://​youtu.be/​gfOzReFoydY | this video]].
 +
 +----
 +
 +<WRAP left>​[[dgsb_wiki:​getting_started:​create_project|Previous:​ Create a Project]]</​WRAP>​
 +<WRAP right>​[[dgsb_wiki:​getting_started:​save_files|Next:​ Save a File]]</​WRAP>​