On This Page
advertisement

Overview

This page provides step-by-step directions for adding an image, a heading, and some text to a page. The steps are very similar for adding any other content item to a page.

In these steps, the content items are added to the Main Page. The steps are the same for any other page, as explained in step 3.

We'll add an image, a heading, and some text. We want the image on the left, and the heading and text to flow to the right of the image.

screenshot of HTML page with image on left and heading and text on the left
The goal.

Steps

  1. Start with GedSite running and your .gsfile open.

  2. Go to the User Items section by clicking User Items in the list on the left-hand side of the main GedSite window.

    screenshot of User Items Section
    User Item Section
  3. Click the Main Page item once to select it.

    Do not double-click the item; that will open a new window to edit the item. Click only once on the item to select it.

    In these instructions, we are modifying the Main Page. To modify some other page, click once on the desired page to select it, rather than clicking the Main Page item.

    screenshot of User Items Section with Main Page selected
    User Items Section after clicking the Main Page to select it.
  4. Click the [+] button beneath the list. That will reveal a long list of items you can add to your site.

    screenshot of User Items Section showing plus-button submenu
    The [+] button submenu.
  5. Click the Image item in the submenu. That will open the Add Image Item window.

    screenshot of Add Image Item window
    The Add Image Item window.
  6. Click on the Title textbox and key a title.

    The title is for your use only. The title identifies the Image User Item in the list of User Items. It does not appear on the page.

    screenshot of Title textbox with wagon.jpg
    The title we keyed.
  7. Click on the [Image...] button. This will open a standard Open file dialog window.

  8. Navigate to the folder that contains the image you want to add to the page. Click the desired image file, then click the [Open] button.

    screenshot of Open file dialog window with wagon.jpg selected
    The Open file dialog window.
  9. GedSite will open the image and add it to the Add Image Item window.

    screenshot of Add Image Item window showing image of a wagon
    The Add Image Item window showing the image we selected.
  10. If we saved the Image User Item at this point, then made the site, the image would be larger than what we want. We'll use the Thumbnail sub-section of the Image User Item to reduce the size of the image.

  11. Click Thumbnail in the list of sub-sections on the left of the Add Image Item window.

  12. Change the Option pull-down menu from "None" to "Thumbnail".

    screenshot of Thumbnail sub-section of Add Image Item window showing Option pull-down menu choices
    Changing the Thumbnail Option.
  13. The default thumbnail size is 200px wide by 200px tall. GedSite will adjust the actual dimensions to maintain the aspect ratio of the original image. If you want a different size, adjust the Width and Height properties.

    screenshot of Thumbnail sub-section of Add Image Item window showing default width and height values
    Thumbnail option with default Width and Height.
  14. Click Image in the list of sub-sections on the left of the Add Image Item window to return to the Image sub-section.

  15. By default, the Use Lightbox checkbox will be checked. You can read about the Lightbox feature to learn more about it. For this example, we'll turn it off. Uncheck the Use Lightbox checkbox.

    screenshot of Add Image Item window showing Use Lightbox unchecked
    Use Lightbox is unchecked.
  16. You may want a caption, or you may want the image to be a link where clicking the image navigates to a different page. You can control such things by further edits to the Image User Item. You can read about those on the Image User Item help page.

  17. Click [OK] in the Add Image Item window to close the window and save the item.

    GedSite will return to the User Items Section and the Main Page will now have a child item.

    screenshot of User Items Section
    User Item Section with wagon image item under Main Page item.

If you stop here and make the site, the Main Page would include an image. Let's continue and add a Heading and some paragraphs of text.

  1. Click the Main Page item once to select it.

    Do not double-click the item; that will open a new window to edit the item. Click only once on the item to select it.

    In these instructions, we are adding items on the Main Page. To modify some other page, click once on the desired page to select it, rather than clicking the Main Page item.

  2. Click the [+] button beneath the list. That will reveal a long list of items you can add to your site.

  3. Click the Heading item in the submenu. That will open the Add Heading Item window.

    screenshot of Add Heading Item window
    The Add Heading Item window.
  4. Click on the Heading textbox and key the heading text.

    The heading identifies the Heading User Item in the list of User Items, and the heading text will appear on the page after you make the site.

    screenshot of Add Heading Item window with heading text set to 'Introduction'
    The Add Heading Item window after keying the Heading text.
  5. Click on the Text textbox.

    From here you have two choices. You can either (1) key the HTML text you want using the Text Editor, keying HTML tags, etc., or (2) you can use the HTML Editor. Please read one or both of those help pages to decide which you want to use and how to use it.

    You may leave the text empty, and that will create a heading only. If you key any text, that will create both and heading and the text that follows it. Here's how the Add Heading Item window appears after adding some text.

    screenshot of Add Heading Item window with text in the Text textbox
    The Add Heading Item window after adding text.
  6. Click [OK] in the Add Heading Item window to close the window and save the item.

    GedSite will return to the User Items Section and the Main Page will now have two child items.

    screenshot of User Items Section
    User Item Section with multiple child items under the Main Page item.
  7. Choose File > Save from the GedSite menu or key [Ctrl+S] to save the .gsfile file.

    We've made a few changes and it's a good idea to save your work periodically when making changes.

  8. Choose File > Make Site from the GedSite menu or key [Ctrl+M] to make the site.

  9. Choose File > Browse Site from the GedSite menu or key [Ctrl+B] to open the site.