Quick Start Guide (build plain html website)

[droidgoo]

New users evaluating Pinegrow for building their first website face a steep learning curve.

This tutorial walks thru building a very simple 2 page website in plain html with default styling. It is intended to build a familiarity with the operation of Pinegrow while producing a foundational experience with a limited set of html elements.

The Quick Start Guide is in three parts:

• Building a simple webpage from scratch
• Using Master Page to create a second page and how to modify content
• Creating the navigation links to move between the pages

Prerequisites:

• A working copy of the evaluation version or Pro version of Pinegrow
• Understanding of the Pinegrow interface (menus, display area, tool panel names)

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
PART 1
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Quick Start Guide

Create the first page

Start Pinegrow (PG)

New page or project

Plain HTML, new

Projects panel, Open a folder

Make New Folder, type in “QSguide”, OK

The project folder will contain all the files needed for your website

Use CTRL-2 for a small webpage view 768px wide

Library panel, SECTIONS

Drag these four elements and drop them onto the white display area

• Header (for name of website, logo)
• Nav (for links to other pages)
• Main (for content for this page)
• Footer (for about info)

notice how:

• in the Tree panel, all sections will be shown nested under the Body element
• in the Display area, placeholders give each a height of 100 pixels

File, Save

notice PG will save the file new.html in the current project folder QSguide

Hit Save

You have now created your first webpage project in PG and if you look in the project folder you will see the page and a new folder called css where all the webpage styling will be saved.

Right-click on the folder name, choose - Add new folder from the menu

Type in the name “images”, OK

Add an image file of your choosing to the images folder and name it “logo”

Add some content to the page

Library panel, GROUPING ELEMENTS

Drag H1, but this time drop it inside the header element

notice that:

• the header element has changed height to accommodate the size of H1 element
• the H1 element is nested under the header in the Tree panel
• you can edit the text by double clicking on it

Library panel, EXTERNAL CONTENT

Drag Image, but this time before dropping it, hover over different areas of the page and watch for the orange dotted outline in the Tree panel to indicate where it will be inserted.

Drop the image after the H1, but at the same indenture, not nested under it.

notice that:

• a placeholder image has been inserted into the tree and appears under the H1
• you can drag the elements directly into the Tree panel to ensure the element is going to be inserted into the proper place.
• you can drag these and rearrange them later inside the Tree panel.
• you can right-click on the image, or on the image element in the Tree panel and select Properties to change the source url of the image.

Element panel, IMAGE

Choose the Source url and change it to the logo image file saved in the images folder

notice how:

• the header element again adjusts in height to accommodate both the H1 and the logo
• in the Tree panel, you can drag the H1 or the logo to rearrange the order they appear on the page.

Navigation Links

Library panel, GROUPING ELEMENTS

Drag ul, and be sure to drop it into the Nav section by looking at the Tree panel

Drag li, and be sure to drop it indentured under the ul by looking at the Tree panel

Library panel, TEXT

Drag Anchor, and drop it under the li

Properties panel, LINK

Href, type in “#”

Label, type in “HOME”

notice the link appears as underlined blue text but because it is set to point somewhere on the current page (using the href id #), it will not go anywhere

Tree panel click on the li (list item) to highlight it in the tree

Choose Duplicate from the floating tool bar (just under the trash bin)

Change the Label to “Page2” from the Properties panel

notice that you can add as many links as you have web pages in the website

the default styling can be changed using CSS later

Main Content

Library panel, SECTIONS

Drag H2 and place it in the Main section

Library panel, GROUPING ELEMENTS

Drag p and place it under the H2 at the same indenture level

Library panel, TEXT

Drag Anchor and place it under the p but indentured [Append]

Properties panel, LINK

Change the Label to “outside link”

Change Href to an outside website, such as http://duckduckgo.com

notice:

• this is where to place all the content that you want to present in your HOME webpage
• the Anchor appears inline with the text of the paragraph rather than on a new line like everything else so far
• you can edit the text of the p element and place text after the Anchor to have the link flow with your content

Footer

Library panel, GROUPING ELEMENTS

Drag p and place it under the Footer element

Duplicate 2 more times

notice:

• here you can write an About section that tells the visitor about your website, maybe has contact information or an email link
• visitors will often come here if they can’t find what they are looking for in the Nav section

[droidgoo]

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
PART 2
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Quick Start Guide (Page 2)

Set the MASTER page

Tree panel, select the top most element (new.html)

Actions panel, MASTER PAGES, select Master

Components, Update

notice this tells PG to modify the page so it will know to make all subsequent pages exactly like this one.

File, Save

Adding Page 2

Project panel, right-click on project name

Choose - Add new page

notice you may need to go back and choose - Reload project first if prompted

Select the new.html page that is the master page

Name the new page “pg2”, OK

notice:

• a new tab has opened on the display area with a copy of the master page called “pg2.html” and a new page is listed in the project folder
• from now on, any changes made to the master page will also show on pg2 upon update components
• if you try to edit anything on pg2, PG will tell you the element is locked by the master page

Making it editable

Switch tabs back to the main page, new.html

Tree panel, select the H1 element

Actions panel, EDITABLE AREAS , select Editable

notice a dialog pops up to request required input about this edible area, you must give it a unique ID so that subsequent pages created from this master can customize this element

Enter for Field Id “page-title” and leave the others as they default

Update

Switch tabs back to pg2.html

Edit H1 to read “this is page 2”

notice you have now been given permission to make changes to the H1 element on pg2 even though is it still linked to the master page, only this area has been allowed to change

File, Save All

notice that all open pages with outstanding changes have been saved

Switch tabs back to the master page

Tree panel, select the Main element

Actions panel, EDITABLE AREAS , select Editable

Enter for Field Id “main_content”

Update Components … this gets to be reflex after a while

Switch tabs back to pg2

Edit text of H2 to read “page2 content”

notice:

now you will be able to make changes to any part of the Main element so that page2 can present completely different content but still appear to be part of the same website where the logo and footer elements are still the same.

notice elements that are modifiable on pg2 are indicated by the blue pencil icon

File, Save all

[droidgoo]

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
PART 3
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Quick Start Guide (Navigation)

Navigation Setup

Switch tabs to master page (new.html)

Edit text of each li to delete the place holder text “list item”

notice PG is indicating you need to update components because it wants to propagate this change to the other page… ignore for now.

Tree panel, highlight the HOME link element

Actions panel, EDITABLE AREAS , select Editable

1. Field Id type “link-destination”
2. Uncheck Inner Content
3. set Attributes to Href

Repeat these steps for the Page2 link element

Update Components

notice:

• both link elements show as editable with the blue pencil icon
• only the href destination is editable, you cannot delete or change the label of the link element

File, Save All

Making the links work

Switch tabs to master page (new.html)

Tree panel, highlight the Page2 link element

Properties panel, EDITABLE PROPERTIES

Change href to pg2.html

Update Components

notice:

• the Href value under LINK has also changed
• if you ALT-click on the Page2 link, it will take you to the pg2.html tab simulating the browser behavior

Switch tabs to Page2 (pg2.html) if you are not already there

Tree panel, highlight the HOME link element

Properties panel, EDITABLE PROPERTIES

Change href to new.html

notice:

• PG does not prompt you to update components when you make a change to the editable area of a child page
• if you ALT-click on the HOME link, it will take you back to the master page

File, Save All

Congratulations, you have now created a 2 page website with navigation links between them. The same process can be followed to add additional pages and expand the navigation menu to access them

To preview your website, click on the Preview page in browser icon or use CTRL-b

[matjaz]

@droidgoo thank you for this useful tutorial!