Differences

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

--- dglux5_wiki:getting_started:create_page [2019/07/17 19:17]
+++ dglux5_wiki:getting_started:create_page [2021/09/20 14:43] (current)
@@ Line 1: / Line 1: @@
+{{indexmenu_n>2}}
+====== Create a Simple Page ======
+A project like the [[dglux5_wiki:getting_started:create_project|one you just created]] contains [[dglux5_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 [[dglux5_wiki:widgets_and_property_inspector:essentials:home|components]] to the Stage. Finally, you customize each component’s behavior, layout, and appearance using the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:properties_panel|Property Inspector]].
+----
+===== Create Vertical Layout for the Stage =====
+[[dglux5_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 [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline]], click the Stage.
+  - <WRAP>In the [[dglux5_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**.
+{{:dglux5_wiki:getting_started:getting_started_1.png?direct|}}</WRAP>
+----
+===== Create a Header Group =====
+[[dglux5_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 [[dglux5_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''.
+{{:dglux5_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**.
+{{:dglux5_wiki:getting_started:getting_started_12.png?direct|}}</WRAP>
+    - <WRAP>Under **Fill and Stroke**, click {{:dglux5_wiki:50_icn-pi-fill.png?nolink|}} **Fill**, then choose {{:dglux5_wiki:46_icn-pi-fill-solid.png?nolink|}} Solid Color, and then select a color.
+{{:dglux5_wiki:getting_started:getting_started_13.png?direct|}}\\
+{{:dglux5_wiki:getting_started:getting_started_14.png?direct|}}</WRAP>
+    - <WRAP>Under **Position and Size**, hover over {{:dglux5_wiki:84_icn-pi-width.png?nolink|}} **Width** until a blue dot appears.
+{{:dglux5_wiki:getting_started:getting_started_24.png?direct|}}</WRAP>
+    - <WRAP>Click the blue dot, and select **Reset**.
+{{:dglux5_wiki:getting_started:getting_started_17.png?direct|}}
+This sets the header's width to **Auto**.
+{{:dglux5_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.
+{{:dglux5_wiki:getting_started:getting_started_2.png?direct|}}</WRAP>
+----
+===== Create a Body Group =====
+  - In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline]], right-click the Header group and select {{:dglux5_wiki:59_icn-tool-copy.png?nolink|}} **Duplicate**.
+  - <WRAP>In the Outline, double-click the new group and rename it ''Body''.
+{{:dglux5_wiki:getting_started:getting_started_19.png?direct|}}</WRAP>
+  - With ''Body'' selected, customize its properties in the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:properties_panel|Property Inspector]]:
+    - <WRAP>Under **Fill and Stroke**, click {{:dglux5_wiki:50_icn-pi-fill.png?nolink|}} **Fill** and select a color.
+{{:dglux5_wiki:getting_started:getting_started_18.png?direct|}}
+{{:dglux5_wiki:getting_started:getting_started_23.png?direct|}}
+</WRAP>
+    - <WRAP>Under **Position and size**, hover over {{:dglux5_wiki:151_icn-ns-resize-cursor-icon.png?nolink|}} **Height** until a blue dot appears.
+{{:dglux5_wiki:getting_started:getting_started_20.png?direct|}}</WRAP>
+    - <WRAP>Click the blue dot and select **Reset**.
+{{:dglux5_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 {{:dglux5_wiki:64_icn-advanced-collapsed.png?nolink|}} **Expand** and then enter a value of 1 for {{:dglux5_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.
+{{:dglux5_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 [[dglux5_wiki:workspace_and_workflow:projects_and_files:project_directories|assets folder]] in the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:project_panel|Project panel]].
+{{:dglux5_wiki:getting_started:getting_started_25.png?direct|}}</WRAP>
+    - <WRAP>When prompted, click OK to upload the image asset.
+{{:dglux5_wiki:getting_started:getting_started_26.png?direct|}}</WRAP>
+    - In the [[dglux5_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 [[dglux5_wiki:workspace_and_workflow:panels_and_menus:properties_panel|Property Inspector]], under **Image**, next to **URL**, click {{:dglux5_wiki:175_dg_file_folder.png?nolink|}} **Browse**.
+{{:dglux5_wiki:getting_started:getting_started_27.png?direct|}}</WRAP>
+    - <WRAP>In the pop-up, expand the ''assets'' directory, and double-click the image asset.
+{{:dglux5_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 [[dglux5_wiki:widgets_and_property_inspector:property_inspector:textbox:home|Text and Font properties]].
+{{:dglux5_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 {{:dglux5_wiki:151_icn-ns-resize-cursor-icon.png?nolink|}} **Height** property until a blue dot appears.
+{{:dglux5_wiki:getting_started:getting_started_30.png?direct|}}</WRAP>
+  - <WRAP>Click the blue dot, and select **Reset**.
+{{:dglux5_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.
+{{:dglux5_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 [[dglux5_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>[[dglux5_wiki:getting_started:create_project|Previous: Create a Project]]</WRAP>
+<WRAP right>[[dglux5_wiki:getting_started:save_files|Next: Save a File]]</WRAP>