Tutorial 2a: Activating a ship in an index page

From NavalCoverMuseum
Revision as of 23:39, 5 July 2006 by NCMSysop (talk | contribs) (page creation)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

For this tutorial, you are going to practice on a test version of an index page that lists ships in alphabetical order - as opposed to an index page that lists ships by designation and hull number. However, the process is very similar for editing either type of index page.
 

  1. In order to do any editing, you must be logged in. If you are not logged in, then there will be a link called "Create an account or log in" at the very top right of any page. Click this link and then enter your userid and password. Click the "Remember me" checkbox and then click the "Log in" button. If you have any trouble, contact the Curator.
     
    LogInLink.png
    << Image showing link for "Create an account or log in"


     

    LogInPage.png
    << Image showing the page for logging in


     

  2. Right-click on this link and open the "Test Ship Index Page" in a new window or tab.
     
    TestIndexPage.png
    << Image showing "Test Ship Index Page"


     

  3. If you are logged in, you will see an "edit" tab along the top left part of the page. Click on the edit tab and the index page will be displayed in edit mode.
     
    EditTab.png
    << Image showing the "edit" tab


     

    EditMode.png
    << Image showing the page in edit mode


     
    While in edit mode, there is a scrollable edit section in the middle. This edit section contains the HTML and Wiki tags for the page being edited. This is where you will make your changes. Below the edit section, you will see several buttons. The two most important buttons are "Save page" and "Show preview". Remember them for later.
     

  4. To activate a ship, we need to find the line of code with its name. Scroll down within the edit section and look for a line starting with a <table> tag. Just below that line are the lines for the ships. They will look something like the following:
    <tr><td>[[SHIP1_DD_1 | SHIP1 ]] </td><td>DD 1</td></tr>
    <tr><td><!-- [[SHIP2_DD_2 | -->SHIP2<!-- ]] --> </td><td>DD 2</td></tr>
    

    Notice the difference between the two lines. In the first line, the ship is activated (ie, it's name is a link). In the second line, the ship is not activated. Why isn't the second line an active link? Because the code that makes it a link is commented out with HTML comment tags
     
    An HTML comment starts with a tag that looks like <!-- and ends with -->. Everything between these two tags is ignored by the web browser. For example:

    <!-- this text is commented out -->
    
    ShipTable.png
    << Image showing lines of code with ship names


     

  5. To activate a ship, all you have to do is remove the comment tags. There are two sets of them for a total of four tags. Make sure you get them all. For example, to activate SHIP2, you need to change its line from this:
    <tr><td><!-- [[SHIP2_DD_2 | -->SHIP2<!-- ]] --> </td><td>DD 2</td></tr>
    

    to this:

    <tr><td>[[SHIP2_DD_2 | SHIP2 ]] </td><td>DD 2</td></tr>
    

    by doing the following:

    1. Remove the opening comment tag (<!--) that is just before "[[SHIP2_DD_2 |"
    2. Remove the closing comment tag (-->) that is just after "[[SHIP2_DD_2 |"
    3. Remove the opening comment tag (<!--) that is just before "]]"
    4. Remove the closing comment tag (-->) that is just after "]]"


     

    CommentTagsRemoved.png
    << Image showing comment tags removed for SHIP2


     
    Note that we used SHIP2 for our example but you should use a ship that has not already been activated.
     

  6. The next thing to do is view the modified page in Preview mode. Earlier, we pointed out the "Show preview" button at the bottom of the page. Click it. You will see a preview of what the modified page will look like if you were to save it.
     
    ShowPreviewButton.png
    << Image showing "Show preview" button


     

  7. In Preview mode, you see what the page looks like with your modifications. This gives you a chance to verify that everything looks like it is supposed to before you make those modifications permanent. Also notice that at the bottom of the page is the edit section. This means if you want to make new changes, you can do it from this page and you don't have to back up. You can change...preview...change...preview... as many times as necessary until you feel the page looks right.
     
    For the tutorial, you will notice that SHIP2 is now a link (you could click on it) and that the letters are red. A red link means that there is no page defined yet for that link. We will take care of that in Part 2.
     
    PreviewPage.png
    << Image showing modified page in Preview mode


     

  8. Finally, after you have finished making changes, you have a choice. If you are satisfied with the changes, you should click the "Save page" button. If you are not happy or have changed your mind, click the "Cancel" link. You will find both of these at the bottom of the Preview mode page. If you click the "Save page" button then the changes you made will become permanent and the page will be redisplayed with those changes. If you click the "Cancel" link, then the changes you made are discarded and the page reverts back to what it looked like before you started editing it.
     
    For the tutorial, you will want to save the changes. Before you click the "Save page" button, add a short description of the changes you made in the "Summary" text box just above the "Save page" button. Make it something simple like "Activated ship2". This description will appear in the Recent changes page (there is a link to this page in the left hand navigation bar).
     
    Now go ahead and click the "Save page" button. The page is redisplayed and the ship's name appears as a red link. You have successfully activated the ship.
     
    SavePageButton.png
    << Image showing "Summary" text box, "Save page" button and "Cancel" link


     

    ShipActivated.png
    << Image showing index page after changes are saved


     

    RecentChanges.png
    << Image showing "Recent changes" page


     

Now that you have activated the ship, you must create the page that the link points to. Proceed to Tutorial 2b: Creating the ship's main page

 

Return to Tutorials Main Page

 


Copyright 2021 Naval Cover Museum