Jump to Content

Authoring an ezine in HTML

Authoring an HTML ezine is quite different from the recommendations outlined for authoring corporate web pages.

 


Setting up the ezine

Create a folder and URL for your ezine

As the ezine is authored using HTML, make a blank page (not based on the corporate web templates) within the website that the ezine is going to link to for further information:

  1. In SharePoint Designer, go to File/New... and select the HTML option
  2. This will open a page called 'new_page_1.htm' or similar
  3. Go to File/Save As... and save this page in a folder created for your ezine, giving it an appropriate name (e.g. 'august11' if there will be more) using the usual naming conventions
  4. Your page should now be called 'name.htm' or 'name.html' (NOT 'name.asp' as with the corporate web templates).

Writing the code

If you are creating an ezine from scratch, use the following as guidelines so your ezine will be viewed intact by a maximum number of people.

See how other ezines have been authored (see some examples) by right clicking on them and selecting View Source in your browser. Seeing how another ezine was created may help you write your own ezine in HTML code.

You need to author your ezine using inline coding. See examples below.

Use tables for layout

We recommend not having a table any wider than 550 pixels which is the same width used in the UniSA corporate left-hand menu template.

Create styles for the ezine

Paragraph styles

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000066;">Don&rsquo;t miss out on UniSA&rsquo;s Open Day on Sun 20 Aug. Attend info sessions, see student exhibitions, talk to staff and students, and enjoy live local bands from Nova919&rsquo;s HomeBrew segment.</p>

This would look appear in the ezine looking like this:

Don’t miss out on UniSA’s Open Day on Sun 20 Aug. Attend info sessions, see student exhibitions, talk to staff and students, and enjoy live local bands from Nova919’s HomeBrew segment.

Note the code used for apostrophes (see below for the code to use for quotes).

Link within a paragraph
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000066;">Don&rsquo;t miss out on UniSA&rsquo;s <a style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000066; text-decoration: underline" href="http://www.unisa.edu.au/openday/">Open Day</a> on Sun 20 Aug. Attend info sessions, see student exhibitions, talk to staff and students, and enjoy live local bands from Nova919&rsquo;s HomeBrew segment.</p>

This would look appear in the ezine looking like this:

Don't miss out on UniSA's Open Day on Sun 20 Aug. Attend info sessions, see student exhibitions, talk to staff and students, and enjoy live local bands from Nova 919's HomeBrew segment.
 

Link heading style
<a style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #000066; text-decoration: none" href="http://www.unisa.edu.au/openday/">UniSA Open Day.</a>

This would look appear in the ezine looking like this:
UniSA Open Day.

Quote/apostrophe styles
For using right or left single or double quotes, or an apostrophe, you will need to use special code so they appear in the ezine correctly.

Right single quote/apostrophe - use this code   &rsquo;
Left single quote - use this code  &lsquo;
Left double quote - use this code  &ldquo;
Right double quote - use this code  &rdquo;

Add images

All images need to be located on the production server and referenced as absolute URLs. For example:
<img src="http://www.unisa.edu.au/savvy/ezine/images/choose.jpg" alt="Choose your direction" width="283" height="102" />

You will need to create the HTML page with absolute image references on www.newdev to view the ezine as a whole, then publish the page and the images to the production server. You will then need to change the images references within the code to remove the newdev. part within the image source.

Note: all images must have the size (height and width) specified.

top^

top^