Educational Technology Department
IT Master Plan Training Modules
Notes for
(1) Web Design and Layout Guide
• Interface Design
- For maximum functionality and legibility, web page and its design should be built on a consistent pattern, sharing the same basic layout. This enables readers to quickly adapt to your design and confidently predict the location of information and navigation controls across the pages.
- Always inform the students who is the publisher for this piece of information. - All activities in the Learning Plan need clear titles to capture students’ attention. - Indicate the publishing date and when the document is updated. This not only
ensures students that they are reading the most recent content but also ease maintenance.
• Information Organization
- Cognitive psychologists have known that most people can only hold about four to seven discrete chunks of information in short-term memory.
- The way people seek out and use information suggests that smaller, discrete units of information are more functional and easier to navigate through than long, undifferentiated units. It is also easier to scanned and locate what you want to look for quickly.
- The four basic steps in organizing information are to divide it into logical units, establish a hierarchy of importance and generality, use the hierarchy to structure relationships among chunks, then analyze the functional and aesthetic success of your system.
- A logical site organization allows users to make successful predictions about where to find things. Consistent methods of grouping, ordering, labeling and graphical arranging information allow users to extend their knowledge from pages they have visited to pages they are unfamiliar with.
- The goal to organizing information is to produce a well-balanced hierarchical tree that facilitates quick access to information and helps users understand how you have organized things.
• Navigation Design
- Build clear navigation aids. Especially for pages where there are links to other pages in previous activities or to external web sites.
- The “Next” and “Previous” buttons would allow students to navigate within the website they are currently at. The “Forward” and “Back” button would allow them to return to the previous web site which is external to where they are currently at.
Use “Forward” or “Back” button
To navigate between pages within a web site, use “Next” or “Previous” button
• Text
- Avoid all-uppercase headings or words, they are more difficult to read. To place emphasis on word(s), just use bold and/or capitalize the initial letters.
- Beware of using too many styles of typeface and type color.
- Write your text in a good word processing program that comes with spell-check. - Write sentences as you normally would and place link anchor on the most relevant
word in the sentence.
E.g. 1 Click here for more information as to how to place links within your text. E.g. 2 Web links are powerful, but they might also cause problems if placed wrongly.
Comparatively, E.g. 2 would be better than E.g. 1.
• Graphics
- Put in alternate text, in place of graphics, for users who are not able to view the graphics. This will allow them to still understand the function of those graphics. - In page layout, the top of the page is always the most dominant location to catch
the attention of your users.
- Keep the size of graphics file small and such that it should not be spread beyond the display screen in width.
- Recommended web graphics formats are JPEG (Joint Photographic Experts Group) and GIF (Graphic Interchange Format). The GIF file format uses a basic form of file compression that squeezes out inefficiencies in the data storage without causing a loss of any data but it is only limited to 256 colors. JPEG images are full-color images of 24-bit or “true color”. It uses a very sophisticated
mathematical technique to produce a sliding scale of graphics compression. Thus, the more you squeeze, the more you degrade the image quality. So, use GIF format for graphical designs and JPEG format for photographs and other types of images where the compression artifacts of the JPEG process do not severely degrade image quality.
• Multimedia
- Provide users with status information and controls when presenting multimedia elements. Allows users to adjust the volume of a movie, play and stop a sound clip and also provides information about the download status.
- Ensure that users download the required plug-ins or any specific browser program by informing them the requirements to play a particular piece of multimedia and the steps to download.
- To deliver video using the web, compromises have to be made. The image size must be small, the frames rate low, and the sound compressed. Otherwise, another alternative would be to make use of still images and pair them with a good quality narration. If you must definitely use true video, keep away from wide shoots so that the detail of the image will be distinguishable at small sizes. Avoid shooting video that includes much action as the low frame rates and small viewing size will not effectively display motion.
- For creating web audio, take note to
ð Record audio in the best possible setting with the best available equipment. ð Downsample the audio files to 22kHz, 8-bit.
• Links
- Don’t confuse users by offering many links away from your central information area. Sometimes, this can be a distraction, leading students further and further away from your site.
- For certain form of learning, there is a need to restrict links to only “Next” and “Previous”. This is to guarantee that students would go through the information in the sequence the trainer would want them to follow, within the website only.
(2) HTML
2.1
What does HTML stand for ?
HTML stands for HyperText Markup Language
2.2
Explanation of Tags
An element is a fundamental component of the structure of a text documents. Some examples of elements are heads, tables, paragraphs, and lists. To get your browser to recognize the different elements, we will have to use HTML tags.
HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g. <H1> and </H1>) to start and end the tag instruction. The end tag looks exactly like the start tag except for the slash that precedes the text within the bracket.
Some elements may include an attribute, which is additional information that is included inside the start tag. For example, you can specify the alignment of images (top, middle or bottom) by including the appropriate attribute with the image source HTML code.
HTML is not case sensitive, that is, <title> is equivalent to <TITLE> or <Title>.
2.3
Markup Tags
• HTML
This element tells your browser that the file contains HTML-coded information. The file extension. Html also indicates this is a HTML document and must be used.
• HEAD
The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window.
• TITLE
The title element contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself. The title is also what would be displayed on viewer's bookmark list, so choose something descriptive, unique, and relatively short. A title is also used to identify your page for search engines. Generally you should keep your titles to 64 characters or fewer.
• BODY
The second and largest part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document.
- Background Graphics
Newer versions of Web browsers can load an image and use it as a background when displaying a page. Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the image.
However you only have to create a small piece of the image. Using a feature called tiling, a browser takes the image and repeats it across and down to fill your
browser window. In sum you generate one image, and the browser replicates it enough times to fill your window. This action is automatic when you use the background tag shown below.
The tag to include a background image is included in the <BODY> statement as an attribute:
<BODY BACKGROUND="filename.gif">
- Background Color
By default browsers display text in black on a gray background. However, you can change both elements if you want. Some HTML authors select a background color and coordinate it with a change in the color of the text.
Always preview changes like this to make sure your pages are readable. In general, try to avoid using high-contrast images or images that use the color of your text anywhere within the graphic.
You change the color of text, links, visited links, and active links (links that are currently being clicked on) using further attributes of the <BODY> tag. For example:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> This creates a window with a black background (BGCOLOR), white text (TEXT), and silvery hyperlinks (LINK).
The six-digit number and letter combinations represent colors by giving their RGB (red, green, blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of red, green, or blue as a hexadecimal value in the range 00-FF. For example, 000000 is black (no color at all), FF0000 is bright red, 0000FF is bright blue, and FFFFFF is white (fully saturated with all three colors).
These number and letter combinations are generally rather cryptic. Fortunately an online resource is available to help you track down the combinations that map to specific colors and there is software available for you to do this on your
workstation:
http://www.hidaho.com/colorcenter/
- Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>.
The syntax of the heading element is: <Hy>Text of heading </Hy>
where y is a number between 1 and 6 specifying the level of the heading. Do not skip levels of headings in your document. For example, don't start with a level-one heading (<H1>) and then next use a level-three (<H3>) heading.
- Paragraphs
Unlike documents in most word processors, carriage returns in HTML files aren't significant. In fact, any amount of whitespace -- including spaces, linefeeds, and carriage returns -- are automatically compressed into a single space when your HTML document is displayed in a browser. So you don't have to worry about how long your lines of text are. Word wrapping can occur at any point in your source file without affecting how the page will be displayed.
For example, a paragraph of text is coded as <P>Welcome to the world of HTML.
This is the first paragraph.
No matter how short it is, it is
still a paragraph!</P>
Important: You must indicate paragraphs with <P> elements. A browser ignores any indentations or blank lines in the source text. Without <P> elements, the document becomes one large paragraph. (One exception is text tagged as "preformatted," which is explained below.) For example, the following would produce identical output as the example given above:
<H1>Level-one heading</H1>
<P>Welcome to the world of HTML. This is the
first paragraph. No matter how short it is,
it is still a paragraph! </P> <P>And this is the second paragraph.</P>
To preserve readability in HTML files, put headings on separate lines, use a blank line or two where it helps identify the start of a new section, and separate
paragraphs with blank lines (in addition to the <P> tags). These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces because it has its own set of rules on spacing that do not depend on the spaces you put in your source file).
NOTE: The </P> closing tag may be omitted. This is because browsers understand that when they encounter a <P> tag, it means that the previous paragraph has ended. However, since HTML now allows certain attributes to be assigned to the <P> tag, it's generally a good idea to include it.
Using the <P> and </P> as a paragraph container means that you can center a paragraph by including the ALIGN=alignment attribute in your source file.
<P ALIGN=CENTER>
This is a centered paragraph.
</P>
This is a centered paragraph.
It is also possible to align a paragraph to the right instead, by including the ALIGN=RIGHT attribute. ALIGN=LEFT is the default alignment; if no ALIGN attribute is included, the paragraph will be left-aligned.
- Lists
HTML supports unnumbered, numbered, and definition lists. Unnumbered Lists
To make an unnumbered, bulleted list,
1. start with an opening list <UL> (for unnumbered list) tag
2. enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed
3. end the entire list with a closing list </UL> tag Below is a sample three-item list:
<UL>
<LI> apples <LI> bananas
<LI> grapefruit
</UL>
The output is: • apples • bananas • grapefruit
Numbered Lists
A numbered list (also called an ordered list) uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. The following HTML code:
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
produces this formatted output: 1. oranges
2. peaches 3. grapes Definition Lists
A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>). Web browsers generally format the definition on a new line and indent it.
The following is an example of a definition list:
<DL>
<DT> Introduction to ITE
<DD> ITE, the Institute of Technical Education, is a statutory board which comes under the charge of the Ministry of Education, Singapore.
<DT> Role and Function
<DD> ITE takes the role and function of the Vocational and Industrial Training Board. It is the national authority for the setting of skills standards in Singapore.
</DL>
The output looks like:
Introduction to ITE
ITE, the Institute of Technical Education, is a
statutory board which comes under the charge
of the Ministry of Education, Singapore.
Role and Function
ITE takes the role and function of the
Vocational and Industrial Training Board. It
is the national authority for the setting of skills
standards in Singapore.
The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P> paragraph tags), lists, or other definition information.
Nested Lists
Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.
Here is a sample nested list:
<UL>
<LI> A few New England states: <UL>
<LI> Vermont
<LI> New Hampshire <LI> Maine
</UL>
<LI> Two Midwestern states: <UL>
<LI> Michigan <LI> Indiana </UL>
</UL>
The nested list is displayed as • A few New England states:
• Vermont • New Hampshire • Maine
• Two Midwestern states: • Michigan
• Indiana
Preformatted Text
Use the<PRE> tag to generate text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant -- multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file. This is useful for program listings, among other things. For example, the following lines:
<PRE>
#!/bin/csh
cd $SCR < abc > &
cfs get mysrc.f:mycfsdir/mysrc.f cfs save myoutfile:mycfsdir/myoutfile rm * </PRE> display as: #!/bin/csh cd $SCR < abc > & cfs get mysrc.f:mycfsdir/mysrc.f cfs save myoutfile:mycfsdir/myoutfile rm *
Note that because <, >, and & have special meanings in HTML, you must use their escape sequences (<, >, and &, respectively) to enter these characters. See the section Escape Sequences (Refer to page 9) for more information.
- Forced Line Breaks/Postal Addresses
The <BR> tag forces a line break between lines. For example, with Institute of Technical Education<BR>
10 Dover Drive<BR>
Singapore 138683<BR>
The output is:
Institute of Technical Education 10 Dover Drive
Singapore 138683
- Horizontal Rules
The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is useful to separate major sections of your document.
You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are satisfied with the presentation. For example:
<HR SIZE=4 WIDTH="50%"> displays as:
-
Escape Sequences
Character entities have two functions: • escaping special characters
• displaying other characters not available in the plain ASCII character set. Three ASCII characters--the left angle bracket (<), the right angle bracket (>), and the ampersand (&)--have special meanings in HTML and therefore cannot be used "as it is" in text. (The angle brackets are used to indicate the
beginning and end of HTML tags, and the ampersand is used to indicate the beginning of an escape sequence.)
To use one of the three characters in an HTML document, you must enter its escape sequence instead:
<
the escape sequence for < >
the escape sequence for > &
the escape sequence for &
NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for instance, use < instead of <.
- Linking
The chief power of HTML comes from its ability to link text and/or an image to another document or section of a document. A browser highlights the identified text or image with color and/or underlines to indicate that it is a hypertext link (often shortened to hyperlink or just link).
HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document:
1. start the anchor with <A (include a space after the A)
2. specify the document you're linking to by entering the parameter HREF="filename" followed by a closing right angle bracket (>)
3. enter the text that will serve as the hypertext link in the current document
4. enter the ending anchor tag: </A> (no space is needed before the end anchor tag) Here is a sample hypertext reference in a file called LearningPlan.html:
<A HREF="sdlact1.html">SDL Activity</A>
This entry makes the words SDL Activity the hyperlink to the document
sdlact1.html, which is in the same directory as the document LearningPlan.html. Relative Pathnames versus Absolute Pathnames
You can link to documents in other directories by specifying the relative path from the current document to the linked document. For example, a link to a file
sdlact1.html located in the subdirectory WorkingPlace would be:
<A HREF=" WorkingPlace/sdlact1.html">The Management</A> These are called relative links because you are specifying the path to the linked file relative to the location of the current file. You can also use the absolute pathname (the complete URL) of the file, but relative links are more efficient in accessing a server. They also have the advantage of making your documents more "portable" -- for instance, you can create several web pages in a single folder on your local computer, using relative links to hyperlink one page to another, and then upload the entire folder of web pages to your web server. The pages on the server will then link to other pages on the server, and the copies on your hard drive will still point to the other pages stored there.
In general, you should use relative links whenever possible because:
1. it's easier to move a group of documents to another location (because the relative path names will still be valid)
2. it's more efficient connecting to the server 3. there is less to type
However, use absolute pathnames when linking to documents that are not directly related. This way if you move the document to a different directory, none of the links would have to be updated.
- URLs
The World Wide Web uses Uniform Resource Locators (URLs) to specify the location of files on other servers. For example, to include a link to this primer in your document, enter:
<A HREF="http://www.ite.edu.sg/">ITE's Homepage</A> This entry makes the text ITE's Homepage a hyperlink to this document.
Links to Specific Sections
Anchors can also be used to move a reader to a particular section in a document (either the same or a different document) rather than to the top, which is the default. This type of an anchor is commonly called a named anchor because to create the links, you insert HTML names within the document.
This is useful when you have one (long) document, it can be time-consuming to move through when all you really want to know about is one bit of information about HTML. These hyperlinks move you from one location in the document to another location in the same document
You can also link to a specific section in another document. That information is presented first because understanding that helps you understand linking within one document.
Links Between Sections of Different Documents
Suppose you want to set a link from document A (documentA.html) to a specific section in another document (MaineStats.html).
Enter the HTML coding for a link to a named anchor:
documentA.html:
In addition to the many state parks, Maine is home to
<a href="MaineStats.html#ANP">Acadia National Park</A>. Think of the characters after the hash (#) mark as a tab within the MaineStats.html file.
Next, create the named anchor (in this example "ANP") in MaineStats.html: <A NAME="ANP"></A>
With both of these elements in place, you can bring a reader directly to the Acadia reference in MaineStats.html.
Links to Specific Sections within the Current Document The technique is the same except the filename is omitted.
For example, to link to the ANP anchor from within MaineStats, enter:
...More information about
<A HREF="#ANP">Acadia National Park</A>
is available elsewhere in this document.
Be sure to include the <A NAME=> tag at the place in your document where you want the link to jump to (<A NAME="ANP">Acadia National Park</A>).
Named anchors are particularly useful when you think readers will print a document in its entirety or when you have a lot of short information you want to place online in one file.
- Mailto
You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink. The format is:
<A HREF="mailto:emailinfo@host">Name</A> For example, enter:
<A HREF="mailto:[email protected]"> Lim Siew Leng</A>
to create a mail window that is already configured to open a mail window for the
- Inline Images
To include an inline image, enter:
<IMG SRC=ImageName>
where ImageName is the URL of the image file.
The syntax for <IMG SRC> URLs is identical to that used in an anchor HREF. Image Size Attributes
You should include two other attributes on <IMG> tags to tell your browser the size of the images it is downloading with the text. The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) for the images as it downloads the rest of the file. (You can get the pixel size from your image-processing software, such as Adobe PhotoShop.)
For example, to include a self portrait image in a file along with the portrait's dimensions, enter:
<IMG SRC=SelfPortrait.gif HEIGHT=100 WIDTH=65>
NOTE: Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers.
Aligning Images
You have some flexibility when displaying images. You can have images
separated from text and aligned to the left or right or centered. Or you can have an image aligned with text.
Aligning Text with an Image
aligned with the following text, as shown in this paragraph. You can align images to the top or center of a paragraph using the ALIGN= attributes TOP and CENTER.
image (<IMG SRC = "BarHotlist.gif" ALT="[HOTLIST]"
ALIGN=TOP>). Notice how the browser aligns only one line and then jumps to the bottom of the image for the rest of the text.
(<IMG SRC = "BarHotlist.gif" ALT="[HOTLIST]" ALIGN=CENTER>). Again, only one line of text is centered; the rest is below the image.
By default the bottom of an image is
This text is aligned with the top of the
Images without Text
To display an image without any associated text (e.g., your organization's logo), make it a separate paragraph. Use the paragraph ALIGN= attribute to center the image or adjust it to the right side of the window as shown below:
<p ALIGN=CENTER>
<IMG SRC = "BarHotlist.gif" ALT="[HOTLIST]"> </p>
which results in:
The image is centered; this paragraph starts below it and left justified. Alternate Text for Images
Some World Wide Web browsers cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a mechanism to tell readers what they are missing on your pages if they can't load images.
The ALT attribute lets you specify text to be displayed instead of an image. For example:
<IMG SRC="UpArrow.gif" ALT="Up">
where UpArrow.gif is the picture of an upward pointing arrow. With graphics-capable viewers that have image loading turned on, you see the up arrow graphic. With a text-only browser or if image loading is turned off, the word Up is shown in your window in place of the image.
You should try to include alternate text for each image you use in your document, which is a courtesy for your readers.
Images as Hyperlinks
Inline images can be used as hyperlinks just like plain text. For example, the following HTML code:
<A HREF="hotlist.html"><IMG SRC="BarHotlist.gif" ALT="[HOTLIST]"></A> means that reader on clicking the image BarHotlist, will lead them to the HTML document hotlist.html.
- External Images, Sounds, and Animations
You may want to have an image open as a separate document when a user activates a link on either a word or a smaller, inline version of the image included in your document. This is called an external image, and it is useful if you do not wish to slow down the loading of the main document with large inline images. To include a reference to an external image, MyImage.gif, enter:
<A HREF="MyImage.gif">link anchor</A>
You can also use a smaller image as a link to a larger image. Enter:
<A HREF="LargerImage.gif"><IMG SRC="SmallImage.gif"></A> The reader sees the SmallImage.gif image and clicks on it to open the
Use the same syntax for links to external animations and sounds. The only difference is the file extension of the linked file. For example,
<A HREF="AdamsRib.mov">link anchor</A> specifies a link to a QuickTime movie.
- Tables
Tables are very useful for presentation of tabular information.
Think of your tabular information in light of the coding explained below. A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In the following table, the first column contains the header information, each row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function.
Table Elements
Element Description
<TABLE> ... </TABLE>
Defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border.
<CAPTION> ...
</CAPTION>
Defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption. <TR> ...
</TR>
Specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information.
<TH> ... </TH>
Defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.
<TD> ... </TD>
Defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.
Table Attributes
NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>.
Attribute Description
ALIGN (LEFT,
CENTER, RIGHT) Horizontal alignment of a cell. VALIGN (TOP,
MIDDLE, BOTTOM) Vertical alignment of a cell.
COLSPAN=n The number (n) of columns a cell spans. Applies to <TD> and <TH> only.
ROWSPAN=n The number (n) of rows a cell spans. Applies to <TD> and <TH> only.
General Table Format
The general format of a table looks like this: <TABLE>
<!-- start of table definition --> <CAPTION> caption contents </CAPTION> <!-- caption definition -->
<TR>
<!-- start of header row definition -->
<TH> first header cell contents </TH> <TH> second header cell contents </TH> <TH> third header cell contents </TH> <TH> last header cell contents </TH>
</TR>
<!-- end of header row definition --> <TR>
<!-- start of first row definition -->
<TD> first row, first cell contents </TD> <TD> first row, second cell contents </TD> <TD> first row, third cell contents </TD> <TD> first row, last cell contents </TD>
</TR>
<!-- end of first row definition --> <TR>
<!-- start of second row definition -->
<TD> second row, first cell contents </TD> <TD> second row, second cell contents </TD> <TD> second row, third cell contents </TD> <TD> second row, last cell contents </TD>
</TR>
<!-- end of second row definition --> <TR>
<!-- start of last row definition -->
<TD> last row, first cell contents </TD> <TD> last row, second cell contents </TD> <TD> last row, third cell contents </TD> <TD> last row, last cell contents </TD>
</TR>
<!-- end of last row definition --> </TABLE>
<!-- end of table definition -->
You can cut-and-paste the above code into your own HTML documents, adding new rows or cells as necessary. The <TABLE> and </TABLE> tags must surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined by the <TR> and </TR> tags. Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. Each row of a table is, essentially, formatted independently of the rows above and below it. This lets you easily display tables like the one above with a single cell, such as Table Attributes, spanning columns of the table. Tables for Nontabular Information
Some HTML authors use tables to present nontabular information. For example, because links can be included in table cells, some authors use a table with no borders to create "one" image from separate images. Browsers that can display tables properly show the various images seamlessly, making the created image seem like an image map (one image with hyperlinked quadrants).
2.4
Troubleshooting
•
Avoid Overlapping Tags
Consider this example of HTML:<B>This is an example of <I>overlapping</B>
HTML tags.</I>
The word overlapping is contained within both the <B> and <I> tags. A browser might be confused by this coding and might not display it the way you intend. The only way to know is to check each popular browser (which is time-consuming and impractical).
In general, avoid overlapping tags. Look at your tags and try pairing them up. Tags should be paired without an intervening tag in between. Look again at the example above. Try matching your coding up like this to see if you have any problem areas that should be fixed before you release your files to a server.
•
Embed Only Anchors and Character Tags
HTML protocol allows you to embed links within other HTML tags:
<H1><A HREF=”Destination.html”>My heading</A></H1> Do not embed HTML tags within an anchor:
<A HREF=”Destination.html”> <H1>My heading</H1>
</A>
The official HTML specifications do not support this construct and your file will probably not work with future browsers, though it might work on some browsers now. Remember that browsers can be forgiving when displaying improperly coded files.
Character tags modify the appearance of the text within other elements:
<UL>
<LI><B>A bold list item</B> <LI><I>An italic list item</I>
</UL>
Avoid embedding other types of HTML element tags. For example, you might be tempted to embed a heading within a list in order to make the font size larger:
<UL>
<LI><H1>A large heading</H1>
<LI><H2>Something slightly smaller</H2>
</UL>
Although some browsers handle this quite nicely, formatting of such coding is unpredictable (because it is undefined). For compatibility with all browsers, avoid these kinds of constructs.
What’s the difference between embedding a <B> within a <LI> tag as opposed to embedding a <H1> within a <LI>? Within HTML the semantic meaning of <H1> is that it’s the main heading of a document and that it should be followed by the content of the document. Therefore it doesn’t make sense to find a <H1> within a list.
•
Do the Final Steps
- Validate Your Code
- Dummy Images
When an <IMG SRC> tag points to an image that does not exist, a dummy image is substituted by your browser software. When this happens during your final review of your files, make sure that the referenced image does in fact exist, that the hyperlink has the correct information in the URL, and that the file permission is set appropriately (world-readable).
- Update Your Files
If the contents of a file are static, no updating is probably needed. But for documents that are time sensitive or covering a field that changes frequently, remember to update your documents!
Updating is particularly important when the file contains information such as a weekly schedule or a deadline. Remove out-of-date files or note why
something that appears outdated is still on a server.
- Browsers Differ
Web browsers display HTML elements differently. Remember that not all codes used in HTML files are interpreted by all browsers. Any code a browser does not understand is usually ignored though.
You could spend a lot of time making your file “look perfect” using your current browser. If you check that file using another browser, it will likely display (a little or a lot) differently. Hence these words of advice: code your files using correct HTML. Leave the interpreting to the browsers and hope for the best.
- Commenting Your Files
You might want to include comments in your HTML files. Comments in –the text you enter is not used by the browser in any formatting and is not directly viewable by the reader. The comments are accessible if a reader views the source file, however.
Comments such as the name of the person updating a file, the software and version used in creating a file, or the date that a minor edit was made are the norm.
To include a comment, enter:
<!--your comments here-->
(3) Dreamweaver
Dreamweaver is a visual editor for creating and managing web pages.
3.1
System Requirements
The following hardware and software is required to run Dreamweaver. For Microsoft Windows:
• An Intel Pentium@ 90 or equivalent processor running Windows 95, Windows 98 or Windows NT version 4.0 or later.
• 16 MB of random-access memory (RAM) plus 20 MB of available disk space. • A color monitor of 800 x 600 pixel resolution.
• A CD-ROM drive.
3.2
Installing Dreamweaver
These are the steps to install Dreamweaver on Windows:
• Insert the Dreamweaver CD into the computer’s CD-ROM drive.
• Choose Start > Run. Click Browse and choose the Setup.exe file on the Dreamweaver CD. Click OK in the Run dialog box to begin the installation.
• Follow the on-screen instructions. • If prompted, restart your computer.
3.3 Introduction to Dreamweaver
• The Document window
- The title bar of the Document window displays the page title, and in parentheses, the filename and an asterisk if the file contains unsaved changes.
- The estimated document size and download time of the page, including all linked elements such as images and movies, appear to the left of the Mini-Launcher. - The set of the buttons at the bottom right of the Document window is called the
Mini-Launcher.
• The Property inspector
- The Property inspector displays properties for the selected object.
- For information on particular options, select an object and then click on the Help icon in the upper right corner of the Property inspector.
- The Property inspector initially displays only the commonly used properties. Click on the expander arrow in the lower right corner to see more properties.
The window size pop-up menu
Mini-Launcher Document size and
• The Launcher
- The launcher has buttons to open and close various palettes, windows and inspectors.
• The Object palette
- The Object palette contains buttons for inserting objects such as tables, layers and images. Click any button or drag the object into the Document window to create the specified object.
- There are four panels in the Object palette: Common, Forms, Head and Invisibles. Use the pop-up menu to switch between panels.
- The Common panel contains the most commonly used objects, such as Image, Table and Layer.
- The Forms panel contains buttons for creating forms and forms elements. - The Head panel contains objects for adding various HEAD elements, such as
META, TITLE and BASE tags.
- The Invisibles panel contains buttons for creating objects that are not visible in the Document window.
3.4
Using Dreamweaver
To make use of the template provided, these are some of the features of Dreamweaver that Training staff would need to know for courseware development.
• To create a local site
You should create a local site for each web site you work on. And these are the steps to go about it:
- Click on File > New Site.
- In the Site Definition dialog box, make sure that Local Info is selected in the Category list.
- Fill in the name of your site at Site Name.
- Type in your Local Root Folder (the folder where the graphics files and the templates to be used are stored).
- Click Ok then click Create when asked if you would like to create a cache file for the site.
The Site window then displays a list of all the folders and files that your specified Local Root Folder contains.
• Applying a template
Making use of templates to create documents will ensure a common structure and appearance. This is important, as it will make sure that all of the pages in a site share certain characteristics and consistency.
- From the Site window, double-click on the name of the template provided. - Close the Site window.
• To define the title of a web page
The title of an HTML page identifies the page in history and bookmark lists. To define it:
- Go to the menu bar, click on Modify > Page Properties to open the Page
Properties dialog box. Put the title of your page under the Title field, and then click OK.
The title bar on the top left-hand corner of your site window updates to reflect the name you have given to the file.
- Choose File > Save to save the changes you have just made.
• To add text to your page
You can type text directly into the Document window; or copy text from another application and then position the cursor in the Document window and choose Edit > Paste as Text.
- To change font characteristics
ð Select the text. If no text is selected, the change applies to subsequent text you type.
ð Choose from the following options:
V To change the font, choose a font combination from the Property inspector or from the Text > Font menu.
V To change the font style, click Bold or Italic in the Property inspector or choose Bold, Italic, Underline, etc from the Text > Style menu.
V To change the font size, choose a size (1 through 7) from the Property inspector or from the Text > Size menu. Sizes 1 or 2 will appear smaller while sizes 4 through 7 will appear larger.
V To increase or decrease the size of selected text, choose a relative size (+ or – 1 to + or – 7) from the Property inspector or from either the Text > Size Increase or Text > Size Decrease menu. The numbers indicate a relative difference from the BASEFONT size, which is valued at 3. Thus a +2 value results in a font size of 5.
- To change the color of text ð Select the text.
ð Choose from the following options:
V Choose a color from the palette of browser-safe color by clicking the color box in the Property inspector.
V Choose Text > Color. The system Color Picker dialog box appears. Select a color and click OK.
- To align text and elements ð To align text:
V Select the text you want to align.
V Click an alignment option (Left, Right, or Center) in the Property inspector, or choose Text > Alignment and choose an option.
ð To center elements:
V Select the desired element (image, plugin, table or other page element). V Choose Text > Alignment > Center (or Left or Right).
ð To indent text and remove indentation: V Select the desired text.
V Click the Indent or Outdent button in the Property inspector, or choose Text > Indent or Outdent.
- To create lists
ð To create a new list:
V Position the cursor on the line where you want to add a list of new items. V Click the Bulleted or Numbered List buttons on the Property inspector, or
choose Text > List and select the type of list desired – Unordered (Bulleted) List, Ordered (Numbered) List, or Definition List. V Begin typing the list, pressing Enter to begin another list item. V To complete the list, press Enter twice.
ð To create a list using existing text:
V Select a series of paragraphs to make into a list.
V Click the Bulleted or Numbered List buttons on the Property inspector, or choose Text > List and select the type of list desired – Unordered (Bulleted) List, Ordered (Numbered) List, or Definition List. ð To create a nested list:
V Select the list items that you want to nest.
V Click the Indent button in the Property inspector or choose Text > Indent. - Spell Check
ð By default, the spell checker uses the US English spelling dictionary. To change the dictionary, choose
V Edit > Preferences > General.
V Select a different dictionary from the pop-up menu. ð To perform spell check on the document,
V Use the following Text > Check Spelling commands to check the spelling, Add to Personal: Adds the unrecognized word to your personal
dictionary.
Ignore: Ignores this instance of the unrecognized word. Ignore All: Ignores all instances of the unrecognized word.
Change: Replaces this instance of the unrecognized word with text that you type in the Change To box or with the selection in the
Suggestions list.
- Search and replace text
You can search the current document, selected files, a directory, or an entire site for text, text surrounded by specific tags or even HTML tags and attributes. ð To initiate a search:
V From the document or Site window, choose Edit > Find or Edit > Replace. V Use the Find In option to specifies which files to search,
Current Document: Confines the search to this current document. This option is available only from the Document window.
Selected Files: Confines the search to the files and folders that are currently selected in the Site window. This option is available only from the Site window
Current Site: Expands the search to all the HTML documents, library files and text documents at the current site. The site name appears to the right of the pop-up menu.
Folder: Confines the search to a specific group of files. Click the folder icon to browse and select the directory you want to search.
V Use the Find What option to specify the kind of search you want to perform.
Text: Let you search text strings in the Document window.
HTML Source: Lets you search the specific text strings in the HTML source code.
Text (Advanced): Lets you search for specific text strings that are either within or not within a tag or tags.
Tag: Let you search for specific tags, attributes and attribute values. V Use one of the following options to expand or limit the search,
Match Case: Limits the search to text that matches the case of the text you want to find.
Ignore Whitespace Differences: Treats all whitespace as a single space for the purposes of matching.
Use Regular Expressions: Causes certain characters (for example, ? *, \w, and \b) in your search string to be interpreted as regular
expression operators. - Creating hyperlinks
Links can be created using the Property Inspector or the Modify menu. ð Creating links from an image or a range of text in the current document to
another document
V Select text or an image in the Document window.
V Open the Property Inspector (Window > Properties) and do one of the following:
Type a path in the Link box, or,
Click on the folder icon to browse and select a file. The file’s path appears in the URL field. Use the Relative To option to make the path document-relative or site root-relative. Then click Select, or,
Drag a file from the Site window into the Link field of the Property Inspector.
Note:
(1) Absolute paths Are complete paths that include the server protocol. For example, http://www.ite.edu.sg/~iteet2/. Absolute paths remain accurate regardless of the location of the source document, but they do not link correctly if the target document is moved. You must use an absolute path when creating a link to a file outside the current site.
(2) Root-relative paths Always begin at the root of the current site. All files on the site that are visible to the public are contained within the site root. Root-relative paths begin with a slash that tells the server to start from the root.
A root-relative path is usually the best way to link files in an environment where content must be moved frequently. When root-relative paths are used, links continue to work even if the document is moved within the site.
When working with Dreamweaver on a local disk, define a local site by choosing a folder to serve as the equivalent of the document root on a server. Dreamweaver uses this folder to locate all links to local files specified as root-relative URLs. Root-relative links don’t work until you save the document in a local site.
(3) Document-relative paths Are relative to the folder containing the current document. For example, document.htm specifies a document in the current folder; ../document.htm specifies a document in the folder above the current folder; and
webdocs/document.htm specifies a document in a folder named webdocs which is inside the current folder. Document-relative paths are often used for links to files that will always be in the same folder as the current folder.
** Always save a new file before creating a document-relative path, since the
document-relative path is not valid without a definite starting point. If you create a document-relative path before saving the file, Dreamweaver uses an absolute path beginning with file:// until the file is saved.
ð Creating a link to a named anchor
Named anchors mark specific positions in a document. Use named anchors to jump to a marked position in the current document or to link to a marked position in a different document.
V To create a named anchor:
In the Document window, place the cursor where you want the named anchor. Do any of the following.
Choose Insert > Named Anchor, or,
Choose Window > Objects, select Invisible from the pop-up menu at the top of the Object palette, and click the Anchor button. Enter a name for the anchor in the dialog box that appears. If the anchor marker doesn’t appear at the cursor location, choose View > Invisible Elements. V To link to a named anchor
Select text or an image in the Document window.
In the Property Inspector, enter a pound sign (#) and the name of the anchor in the Link box. For example,
To link to an anchor named “apple” in the current file, type #apple. To link to an anchor named “apple” in a different file in the same folder, type filename.html#apple.
ð Creating e-mail links
E-mail links open new message windows whenever the user clicks them. The To field in the Message window is automatically filled in with the address specified in the link.
V Select text or an image in the Document window.
V In the Property Inspector, type mailto: followed by an e-mail address in the Link box.
- Inserting images
For images to appear in a Dreamweaver document, the image files must be within a defined local site. If you choose a file outside a local site, Dreamweaver will ask if you want the file copied to a folder within the local site.
ð Inserting an image:
V Place the cursor where you want the image to appear on the page and then choose Insert > Image or click the Insert Image button on the Common panel of the Object palette.
V In the dialog box that appears, type the path for the source file or click Browse to choose a file.
V Set image properties in the Property Inspector.
When an image is selected, choose from the following properties in the Property Inspector (Click the expander arrow in the lower right corner to see all properties):
Image Lets you name the image.
W and H Reserve space for the image on the page as the page is loading. Dreamweaver enters the image’s original size automatically. Default values are pixels. You can also enter a number follow by “in” for inches, “pc” for picas, “pt” for points, “mm” for millimeters, “cm” for centimeters. Dreamweaver converts the values to pixels in the source HTML. Changing these values scales the display size of this instance of the image. To restore the original values, click the field labels. Changing the width and height does not reduce download time because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of the image appear at the same size, use an image-editing application to scale the image first. ** Bitmap elements such as GIF, JPEG and PNG images may become distorted if you
reset their WIDTH and HEIGHT attributes. It is recommended that you visually resize these elements in Dreamweaver only to determine the layout. Once you have determined the ideal size for your image, edit the file in an image-editing application. Editing the image may also reduce its file size and thus the time it takes to download.
To resize an element:
Select the element in the Document window. Resize handles appear at the bottom and right sides of the element and in the bottom right corner. If no resize handle appears, other elements are selected in addition to the element you want to resize. Click away from the element and select it again.
Drag the right side selection handle to adjust to the width of the element.
Drag the bottom selection handle to adjust the height of the element. Drag the corner selection handle to adjust both the width and height of the element at the same time.
Shift-drag the corner selection handle to preserve the element’s aspect ratio (its width : height ratio) as you adjust its dimensions. Elements can be visually resized to a minimum of 6 pixels by 6 pixels. To adjust further to a smaller size, use the Property Inspector. To return a resized element to its original dimensions, click the W and H labels in the Property Inspector.
Src Specifies the source file for the image. Type the path or click the folder icon to browse and select the source file.
Link Specifies a hyperlink for the image. Type the URL, or click the folder icon to browse and select a document on your site.
Align Aligns an image and text on the same line.
The following Align options in the Property Inspector are associated with certain selected elements, such as images and plugins.
Browser default Depends on the browser but generally specifies a baseline alignment.
Baseline and Bottom Align the text baseline to the bottom of the object. Absolute bottom Aligns the absolute bottom of the text, (as in the letter “g”) with the bottom of the object.
Top Aligns the top of the tallest character in the text line with the top of the object.
Text top Aligns the tallest character in the text line with the top of the object.
Middle Aligns the text baseline with the middle of the object.
Absolute middle Aligns the middle of the object with the middle of the text.
Left Places the object on the left margin, wrapping text around it to the right. If left-aligned text precedes the object on the line, it generally forces left-aligned objects to wrap to a new line. Any text following the object on the line then wraps to the former line, appearing above the objects.
Right Places the object on the right margin, wrapping text around the object to the left. If right-aligned text precedes the object on the line, it generally forces right-aligned objects to wrap to a new line. Any text following the object on the line then wraps to the former line, appearing above the object.
Alt Specifies alternative text that appears in place of the image for text-only browsers. In some browsers, this text also appears when the pointer is over the image.
V Space and H Space Add space, in pixels, around the top and bottom, and left and right of the image, respectively.
Target Specifies the frame or window in which the linked page should load. (This option is not available if there is no link on the image.) The names of all the frames in the current document appear on the list. If the specified frame does not exist when the current document is opened in a browser, the linked page loads into a new window that has the name you specified. Once this window exists, other files can be targeted to it.
Low Src Specifies the image that should load before the main image. Most designers choose to use a 2-bit (black and white) version of the main image because it loads quickly and give viewers an idea of what they are waiting for, but you can use any image with the same
dimensions as the main image.
Border Sets the width of the link border around the image in pixels. Enter 0 for no border.
Map Enables you to create image maps.
Refresh Resets the W and H values to the original size of the image. Edit Launches the image editor you specified in External Editors
preferences and opens the selected image. When you save your image file and return to Dreamweaver, Dreamweaver updates the Document window with the edited image.
To choose an external image editor: Choose Edit > Preferences.
Select External Editors from the Category list on the left. Click Browse next to the Images box and select your preferred image editor.
To launch the external image editor,
Select the image you want to edit and click Edit Image in the Property Inspector.
ð Creating a rollover:
A rollover is an image that changes when the cursor moves across the image. A rollover is actually two images – the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the cursor rolls over the primary image).
V Place the cursor in the Document window where you want the rollover to appear.
V Choose Window > Objects to open the Object palette and click the Rollover button, or,
Choose Insert > Rollover Image
V In the dialog box that appears, enter the following information:
Type the path and filename of the original image in the Original Image field, or browse and select an image.
Type the path and filename of the rollover image in the Rollover Image field, or browse and select an image.
To create link, replace the # sign in the Link field with a path and filename, or browse and select a file.
To get Dreamweaver to preload the images in the browser’s cache, select the Preload Images option.
V Click Ok.
V To test a rollover:
Choose File > Preview in Browser.
In the browser, roll the cursor over the primary image. The display should switch to the rollover image.
ð Creating image maps
An image map is a single image with different hyperlinks assigned to defined regions of the image. When a viewer clicks a hotspot on the image, the associated URL is activated.
V To create an image map:
Select the image and click the Map button in the Property Inspector. You may need to click the expander arrow in the lower right corner of the Property Inspector to see the Map button.
Type the name for the map in the Map Name box.
This name appears as the NAME attribute of the MAP tag and as the USEMAP attribute of the IMG tag.
Select the circle or square tool and drag over the image to create a hotspot in the shape of a circle or rectangle, or select the polygon tool and define as irregularly shaped hotspot by clicking once for each corner point and twice to close the shape.
Type the URL for the hotspot in the Link box or click the folder icon to browse and select a file.
To make the linked document appear somewhere other than the current window or frame, enter a window name in the Target box or choose a frame name form the pop-up menu.
In the Alt box, type alternative text that is displayed for the hotspot in text-only browsers.
Some browsers display this text as a tooltip when the viewer pauses the mouse over the hotspot.
Repeat the above steps until you have defined all hotspots then click Ok.
- Creating tables
Use the Object palette or the Insert menu to create a new table. ð To insert a table:
V Place the cursor where you want the table to appear on the page and click the Table button on the Common panel of the Object palette or choose Insert > Table.
V In the dialog box that appears, enter the following information: Rows and Columns Specify the number of table rows and columns. Cell Padding Specifies the amount of spacing between the cell content and the cell boundary.
Cell Spacing Specifies the amount of spacing between each table cell, not including the border.
Width Specifies the width of the table in pixels or as a percentage of the browser window. Tables specified in pixels are better for precise layout of text and images, while tables specified in percentages are good choice when the proportions of the columns are more important than their actual widths.
Border Specifies the width of the table border. ð Filling a table with content
V To add text to a table:
Click in any cell and begin typing to enter text into the table. Table cells expand as you type.
Press Tab to move to the next cell or press Shift-Tab to move to the previous cell. Pressing Tab in the last cell of a table automatically adds another row. You can also use the Arrow keys to move between cells. V To add a graphic to a table:
Click in the cell where you want the graphic to appear.
Click the Insert Image button in the Common panel of the Object palette or choose Insert > Image.
In the dialog box that appears, choose an image file. ð Selecting table elements
With a single gesture, you can select the entire table, row, column or a
contiguous range of cells within the table. Once the table or individual cells are selected, you can:
V Modify the appearance of selected cells or the text contained in them, that is, format the tables;
V Copy and paste contiguous cell regions.
V You can also select multiple discontiguous cells in a table and modify the properties of those cells. You cannot copy or paste discontiguous cell selections.
V To select the entire table, you can either:
Click the top left corner of the table or anywhere on the right or bottom edge, or,
Click once in the table and choose Modify > Table > Select Table, or, Click once in the table and choose Edit > Select All, or,
Position the cursor anywhere inside of the table and select the <table> tag at the bottom left corner of the Document window.
Selection handles appear around the table when it is selected. V To select rows or columns, you can either:
Position the cursor at the left margin of a row or at the top of a column. Click when the selection arrow appears, or,
Click in a cell and drag across or down to select multiple rows or columns.
V To select one or more cells, you can either:
Click in a cell and drag down or across to another cell, or,
Click in one cell and then Shift-click another cell. All of the cells within the rectangular region are selected.
V To select multiple discontiguous cells, you can either:
Press Control and click in the table to add cells, rows, or columns to the selection, or,
Select multiple cells in the table and then press Control and click cells, rows, or columns to deselect individual cells.
ð Formatting tables
The appearance of tables can be changed by setting properties for the table and table cells or by applying a preset design to the table.
V Setting table properties: Select the table
Choose Window > Properties to open the Property Inspector. Click the expander arrow in the lower right corner to see all properties.
To name the table, type a name in the Table Name field. Choose from the following table layout options:
Rows and Cols Set the number of rows and columns in the table. W and H Set the width and height of the table, specified as a
percentage of the browser window or as an absolute value in pixels. It is not common to set the height of a table.
Align Aligns the table to the browser’s left, right or center. To center a table, select the table and choose Text > Alignment > Center. V Space and H Space Specify the amount of space (in pixels) to leave around the top and bottom and the left and right of the table, respectively.
Clear Row Heights and Clear Column Widths Buttons delete all table row height and column width values, respectively, from the table. Use Modify > Table > Clear Cell Heights or Clear Column Widths. Convert Table Widths to Pixels Button converts the table width from a percentage of the browser window to its current width in pixels; click the Convert Table Widths to Percent button to convert the current width in pixels to a percentage of the browser window. Use Modify > Table > Convert Widths To Pixels.
Choose from the following cell layout options:
CellSpace Sets the amount of space between a table’s cells. CellPad Sets the amount of space between a cell’s contents and its edges. When cell spacing and cell padding are not assigned specific values, the default cell spacing will be set to 2 and cell padding will be set to 1.
Set these options to format borders:
Border Sets the width of the border around the table in pixels. Most browsers display the border as a 3-dimensional line. If you are using the table for page layout, specify a border value of 0. To view cell and table boundaries when border is set to 0, choose View > Table Borders.
Light Brdr and Dark Brdr Set border colors that have a highlight and shadow effect, respectively, to give a 3-dimensional appearance to the border. To return to the default gray shades, remove the color values and leave the boxes blank.
Brdr Sets the border color for the entire table.
Use the Bg options to set the background image or background color for the table.
V To format a row, column or cell:
Select any combination of cells in the table.
Choose Window > Properties to open the Property Inspector, and click the expander arrow in the lower right corner to see all properties. Choose from the following appearance options:
Horz Sets the horizontal alignment of the cell’s contents to either the browser’s default (usually left for regular cells and center for header cells), left, right or center.
Vert Sets the vertical alignment of the cell’s content to either the browser’s default (usually middle), top, middle, bottom or baseline.
Bg (bottom) Sets the background color for the cells. Background color appears inside the cells only – that is, it does not flow over cell spacing or table borders. This means that if your cell spacing and cell padding are not set to 0, there will be gaps between the colored areas even if the border is set to 0.
Border Sets the border color for the cells. Choose from the following layout options:
Merge and Split Combine or divide contiguous cells. Use Modify > Table > Merge Cells or Split Cell.
No Wrap Prevents word wrapping, so that cells expand in width to accommodate all of the data. Normally, cells expand horizontally to accommodate the longest word and then expand vertically.
Header Formats each cell as a table header. The contents of table header cells are bold and centered by default.
V To format a table with a preset design:
Use the Format Table command to quickly apply a preset design to a table and then select options to further customize the design.
To use a preset design:
Select the table and choose Commands > Format Table.
In the dialog box that appears, choose a design scheme from the list on the left. The table updates to display a sample of the design.
To further customize the design, make changes to the Row Colors, Top Row, and Left Col options.
To modify the border width, enter a value in the border box. Enter 0 for no border.
ð Sorting tables
Table can be sorted based on the contents of a column. Tables that contain merged cells cannot be sorted.
V To sort a table:
Select the table and choose Commands > Sort Table.
In the dialog box that appears, choose from the following options: Select the column to sort in the Sort By option.
Select whether you want to sort the column alphabetically or numerically in the Order option. This option is important when the contents of a column are numerical. An alphabetic sort applied to a list of one- and two-digit numbers will result in an alphanumeric sort (such as 1,10, 2, 20, 3, 30) rather than a straight numeric sort (such as 1, 2, 3, 10, 20, 30).
Select Ascending (A to Z or low to high) or Descending for the sort order.
Check the Sort Includes First Row option to include the first row in the sort. If the first row is a heading that shouldn’t be moved, leave this option unchecked.
Click Apply or Ok to sort the table. ð Resizing tables and cells
You can resize the entire table or individual rows and columns. When you resize the entire table, all of the cells in the table change proportionally. V To resize the table:
Select the table.
Drag one of the selection handles to resize the table along that dimension. Dragging the corner handle resizes both dimensions.
V To change the size of a row or column, you can either: To change the row height, drag the bottom row border, or, To change the column width, drag the right column border.
