This tutorial will show you how to make prototype pages. In this lesson, we will be using the UEF public page template--but the principles apply to any of the page templates within Genesys.
Ensure the Genesys folder is open. If you don't see GENESYS
in the editor's Explorer pane:
- Select File > Open Folder...
- Navigate to your
Genesys
directory. - Press Select Folder.
- Select the
projects
directory. - Select the New Folder icon. (It appears next to
GENESYS
). - Type the name of your project. Let's use the name
First Prototype
for this lesson.
-
Create a new page.
- Navigate to your
First Prototype
directory. - Select the New File icon. (It appears next to
GENESYS
). - Type the name of your file. Let's use the name
home.html
.
- Navigate to your
-
Select your template.
- Indicate that your new file is a HTML file by selecting the language mode in the lower right of the bottom status bar. Select
HTML
. - Place your cursor at the top of your page and type
!
or!!
to select either a plain HTML page template or one of the predefined design system templates.
- Indicate that your new file is a HTML file by selecting the language mode in the lower right of the bottom status bar. Select
- Select your new
home.html
file. It will open in the editor. - Start adding page content. Let's add a UEF Basic Container to show how this is done.
- Type
uef-
. As you start typing, the DesignSense Snippet dropdown will appear showing all the UEF snippets. You can scroll through the list to find the snippet you want, or just type it directly to enter it on the page. Select theuef-container-basic
snippet, press Enter, and then let's view your page.
- Let's make sure we save the page first, so we see all of our latest updates. Select File > Save or press CTRL+S.
- Right-click on
home.html
. - Select View in Browser.
In later lessons, we'll show you how to automatically see changes appear in your browser as you work on your pages.