Digital Media, Web Design, and Web Development by Ethan Kent | ethanmultimedia.com

ethan -at- ethanmultimedia -dot- com
six one nine - two four six - four one two zero

USKA: Creating A New Interior Page

– 2009-05-07 12:37

Create A New Page Using Template: Inside Page

  1. Click File > New.
  2. Select the Templates tab.
  3. In the left hand panel titled Templates For, select the uska site.
  4. In the center panel the template inside-page will appear. Select it.
  5. Click Create.

Drop Content Into the Page

  1. Click View > Design. You may wish to simplify the design view by un-checking View > Style Rendering > Display Styles
  2. An editable region titled Primary Content will be displayed. You may have to scroll down a bit to get to it. Paste the page content into this editable region.
    • Separate your content with lesser headline tags (h2, h3, and h4) if possible.
    • Use the sample typographical elements (tables, bullet lists, blockquotes) to spice up your copy.
  3. Delete any unused sample copy.

Save

We’re not done yet, but now is a good time to save this page. Save it to the html folder. Choose a good document name, as this will be part of the page’s URL. Generally, the document name should be the same as the page title. Convert all letters to lowercase and replace any other characters (including spaces). with a dash. Now the page can be previewed by clicking File > Preview in Browser > {browser name}.

Add The Page Title

  1. Add the page title to the page headline by pasting it into the Page Headline editable region.
  2. Add the page title to the document’s title tag by pasting it into the Title input (you will find this in the bar at the top of the document window).
  3. Follow the page title with a separator and the section title, add another separator and your site name.
    • eg Staff & Instructors | About Us | United States Karate Academy
    • If you want to shorten the page title drop the site name or section name, but try to be consistent across the site.
    • Try to use a consistent separator across the site: “ | ”, and “ :: ” are considered more modern. “, ”, “: ”, and “ - ” are a bit more traditional.

Add The Page Title To The Primary Navigation

  1. Select Window > Assets. The Files inspector will be visible with the Assets tab selected.
  2. Click the book icon on the left to show the site’s Library Items.
  3. Double click Primary Navigation. This will open a new document with a bulleted list displaying.
  4. Create a new entry by pressing enter on the desired line. Indents to the list are added pressing tab and removed by pressing shift + tab.
  5. Enter the page title here, and select it (a triple click comes in handy for this).
  6. Link the phrase
    1. Select Window > Properties. The Properties Inspector will appear.
    2. Select Window > Files. The Files Inspector will appear. Locate the new page.
    3. In the Properties Inspector you will see an input box titled Link to the right of this you will see cross-hairs. Drag the cross-hairs over the new page located in the File Inspector.
  7. Inside the link the text needs to be wrapped in a span tag.
    1. Click Insert > Tag. The Tag Chooser will appear.
    2. In the left panel select HTML Tags. HTML tags will populate in the right panel.
    3. Select span and click Insert. An editor will pop up, just click OK, and then click Close in the Tag Chooser.
  8. Save. The Update Library Items window will pop up.
    • Click Update. A progress window will appear. Click Close when it has finished.
  9. Close Primary Navigation.lbi. Any open documents that were updated will need to be saved before the update can be previewed.

Add Keywords and A Description

  1. Return to the new page for editing and click View > Code
  2. Replace “Keyword1, Keyword2, Key Phrase” with a comma separated list of keywords
    • You will find this in the tag: <meta name="keywords" content="Keyword1, Keyword2, Key Phrase" /> at around line #8
  3. Replace “This page is about…” with a description/synopsis/teaser. It should be about 250 characters long. This breaks down to 45-50 words.
    • You will find this in the tag: <meta name="description" content="This page is about..." /> at around line #9

Add Article Lead-In To The Homepage

  1. Open the homepage index.html
  2. Click View > Design. You may wish to simplify the design view by un-checking View > Style Rendering > Display Styles
  3. Select Window > Snippets. The Files inspector will be visible with the Snippets tab selected.
  4. Drag the snippet titled Article Lead In – (homepage) to the first bullet in it’s appropriate section ie. About Us.
    • If you have not made this snippet you can do so by clicking the New Snippet button at the bottom of the inspector.
    • Just paste in the “Snippet Code” I have listed below.
  5. Replace “Lorem ipsum dolor sit amet, consectetur adipiscing.” with the title of the new page, and select it (a triple click comes in handy for this).
  6. Link the phrase
    1. Select Window > Properties. The Properties Inspector will appear.
    2. Select Window > Files. The Files Inspector will appear. Locate the new page.
    3. In the Properties Inspector you will see an input box titled Link to the right of this you will see cross-hairs. Drag the cross-hairs over the new page located in the File Inspector.
    4. Right click the title and select Edit Tag <a>…
    5. Click Style Sheet/Accessibility, paste the new page’s keywords into the Title field, and click OK.
  7. Replace “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante erat, hendrerit non, commodo vel, blandit nec, libero.” with the description of the new page.
  8. The link “» Click here to read more.” can be updated in the same fashion as the title, but there is no need to select the whole link. Clicking once anywhere within the link and dragging the cross-hairs will be sufficient.
  9. To keep the Homepage clean and focused you should consider deleting all but the most recent/important article lead-ins. Leaving about 3 is a good rule of thumb.
  10. Save and Close.

Snippet Code

<li>
         <h3>
            <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing.</a>
         </h3>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Sed ante erat, hendrerit non, commodo vel, blandit nec,
         libero. 
         <a href="html/inside.html" class="read-more">
         &raquo;&nbsp;Click here to read more. </a>
</li>

Comment

Textile Help

Previous Article

Next Article

About This Site

The contents, design, and development of this site are all done by me, Ethan Kent.

The contents of my site, ethanmultimedia.com, are for general information only and provided strictly as is. I do my best to be truthful and accurate, but I must expressly disclaim any implied warranties of non-infringement, merchantability and fitness for a particular purpose. Browse this site at your own risk. If you’re looking for safety and assurance you should probably seek the advice of an appropriate professional.

Contact Digital Media and Web Designer Ethan Kent - based in San Diego, CA.