Web

Authoring

Tutorial

By Ray O’Connor
1 Presentation

Mark Class Register

Allocate each student with username and password (available from course director/I.T. Staff

Refer students of I.T. rules & regulations in CSN diary

Instruct students to save all work to their folder on the server. Ensure students are familiar with basic file management
skills. For example a separate folder should be created for each module. Note: all folders/files must be backed up
regularly to students USB Memory stick

Show students past students projects which were handed up for assessment

Refer to Web Authoring module

Refer to Web Authoring brief (1 project is divided into 3 briefs)

 Designing a Website

Research

• Research similar sites/businesses on the net (note: take screenshots of webpages and paste in Word)
• Examine the purpose/aim of the site and get ideas from similar businesses online
• Look at colour schemes available on the internet (eg company logo)
• Consider target audience

Planning

• Brainstorming notes/ideas
• Planning should be done with the target audience in mind
• Look at existing company logo
• Colours (web safe), colour schemes
• Screen settings (monitor) 800 x 600, 1024 x 768
• Font/font sizes to be used (use standard family of fonts)
• Sketches illustrating designs
• Arrange for photographs to be taken
• Gather photos/pictures for scanning
• Images gathered (www.google.com - images link)

Implementation

• Meta tags (for registering with search engines and directories)

• Graphics prepared in Photoshop (photographs, animations, flash movies, etc)
• Page titles, link colours and background colours set
• Website design in Dreamweaver

Marketing

• Registering with search engines

• Advertisements
• Listing on company documentation
• Evaluate and maintain website
• Ensure site is up-to-date
 Steps in Research Process

This list of steps is a guideline for you to use.

1. Select the business of you wish to design the site for.

2. List key words to help you look up information about the topic using www.google.com or other search engine.
3. Go to an encyclopedia, or other reference source, to get an overview of the topic.
4. Make source cards for whatever sources you will use for information.
5. Using the general overview, begin to focus the topic into something you can cover well.
6. Write a statement of purpose about the focused topic.
7. Brainstorm questions about the focused topic.
8. Group questions under similar headings.
9. Add any new questions you can think of under those headings.
10. Repeat step 2, listing more key words from your newly focused topic and questions.
11. Make a list of possible sources that can answer your questions. Identify the best sources to use.
12. Find the sources in the library, on the computer, etc.
13. Begin making notecards. Use your brain stormed questions to guide your note taking.
14. Change your statement of purpose into a draft thesis statement.
15. Write the body of your paper from your notes.
16. Write your introduction and conclusion.
17. Take snapshots of sites used in your research and paste in Word (similar to a bibliography with URLs included).
18. Evaluate your work.

Assessment

Your research should include some evidence of the following:

• 3 or more snapshots of sites used in the research process along with URLs (eg. www.bmw.com)
• A few paragraphs detailing your observations and remarks to accompany the research screenshots
• Any notes/brainstorming notes/sketches
• Details of any web design questionnaire used in discussions with client
• Company house style such as letterheads, business cards, compliment slips
• Company documentation
• Details of any discussions with the people you are designing the website for
• Any other relevant research documentation
 Website Design Questionnaire

Business Name: Business Address:

Phone:: Phone:
Email: Fax:
Contact Name: Contact Email:
Present URL: Present web host:
Domain Names owned by business: Server type: Unix NT Other
Website Username: Website Password:
1. Describe your company and the industry you are involved in. How does your company differ from others in the
industry?

2. What is the mission or purpose of the organization? Please state your mission statement if you have one, as well as
any additional information to assist us in understanding your business purpose.

3. Who are your main competitors? Do they have websites and if so, what are their addresses? What do you like and
dislike about their sites? What do their sites have that you do or don’t want on yours?

4. What are the short-term goals of the site? What are your main reasons for building a site? What do you see as the
goals for the next year?

5. What are the site’s long-term goals? What are your future needs on the site 1-5 years from now?

6. How will you measure this websites success?

7. What are your scheduling requirements? What are your reasons for that schedule?

8. What is your website budget? Please list both the financial limits and the time-commitment limits from your business
towards this project.

9. What is your budget for maintaining your website? Please list a budget for domain name registration (annual), web
hosting (monthly), and updating.

10. What information do you want to be sure to include on your website?

11. Do you have any specific graphics you wish to be included on your site? Please add which of these graphics you will
supply & which will need to be created for the site.

12. Why will people come to your site? What tasks will they want to perform on your site?

13. Who are the intended audiences? Who do you plan on using or seeing your site?

14. What goals do you have for each of your intended audiences? What are the most important functions you wish to
provide for each type of user?

15. What kinds of customers do you cater to? Please describe each type of customer.

16. What services can you not provide now that your website can assist you with?

17. Where will your website content come from? Who will be providing the basic text? What print materials do you
presently have?

18. How often do you see your site needing updating? How do you plan to accomplish this? Who will update for you?

19. If this were a magic website where anything was possible, what would you like your website to do? Please list any
ideas you have remembering that this is a magic website in a perfect world.
 Website Evaluation

When evaluating a website, it is important to examine the following aspects of a website.

1 Appearance and Layout

• Consistency: the web pages that go to make up the website should look as if they belong together. They
should have common:
o Text colours and fonts
o Backgrounds
o Illustrations (if applicable)

The website should have a consistent and easy-to-use navigation system, i.e. anyone should be able to
move around the website with ease using hyperlinks. A navigation bar is often used for this purpose. This is
a bar of icons or buttons with hyperlinks to other pages on the website

• Readability: As it is more difficult to read on-screen as opposed to printed text, short paragraphs are better
for web pages (no longer that 5 sentences)
• Placement: Text and graphic elements must not appear as if they were thrown onto the page. They should
have a common alignment; it is not a good idea to centre, left-align and right-align different elements on
the same page. A common alignment does not mean that all elements must be placed along the same
invisible vertical line in the margin of the page. Indenting of elements, using the same alignment, may suit a
particular web page.
• Closeness: Headings, subheadings, body text or graphic elements that belong to each other should be
placed close together. A subheading separated by blank lines from text to which it belongs does not look
right.
• Contrast: Most students know the importance of colour contrast on websites. A bright colour on a dark
background (or vice versa) is much easier to read. Contrasting elements also show priorities. Text that is in
a different colour, point size or font can indicate that it is a heading or subheading. Note it is much easier to
read light coloured text on a dark background. When you are looking at a website you are looking at light.
Therefore its best to avoid bright luminous type colours.
• Page size: The entire website homepage should fit in the browser window. Wherever possible, horizontal
scrolling should be eliminated on every web page in the site.
• Site map: On larger websites, one web page should include a site map or index. A site map shows how the
various pages in the site are linked.

2 Appropriate use of graphics

• Overuse of graphics: Some websites can have too many images or animations, which can detract from the
overall look of the site.
• Large images: Some websites contain graphics that do not fit on the screen. They have not been scaled to
suit the particular pages.
• File size: A large graphics file can take a considerable length of time to download. Thumbnails, smaller
versions of the same file, are recommended. If the user wishes to see a larger version of the image, he/she
may click on the thumbnail that should have a hyperlink to a file containing the larger image.
• Alt labels: Graphic images without alt labels are not advisable. An alt label is a text alternative for an image.
If an individual has disabled the graphics mode in his/her browser, he/she will be at a loss if there is no alt
label displayed instead of the image.
3 Technical considerations

• Working links: It is of the utmost importance that all of the hyperlinks in the website work properly.
Sometimes when you click on a hyperlink, you can get the message: “URL not known”. This is evidence of a
“broken” link or a missing web page.
• Browser compatibility: A website should be tested at using at least two different browsers. For example, a
site may appear fine when viewed using Internet Explorer but may not look right in Netscape or vice versa.
Versions of web browsers should also be given consideration; some websites may not appear as they should
when viewed using an older version of a browser.
• Necessity of plug-ins: Some websites require the use of at least one plug-in program in order to be viewed
successfully. For example, in order to view a Flash movie, you will need to install the Flash plug in.
• Mega tags: These are used to document web pages and/or provide information that can be used by search
engines to classify or index the page. They are several meta tags, but the most important for search engine
indexing are the description and keywords tags. The description tag summaries the contents of a web page.
The keywords tag provides a selection of words that the search engine can associate with the web page.
Restrict the number of keywords you use and combinations of words is important. (eg college, further
education, …)
• Frames: the browser window can be divided into a number of panes known as frames. Different web pages
in the site can appear in each of the frames. Too many frames in the browser window make it look cluttered
and can convey an unfavourable impression. Very few modern websites use frames as they don’t rank so
well with search engines.
• Image map: Image maps are used for navigation purposes on a website. An image map is a graphic with a
number of hyperlinks on it. For example, a photograph of a map of Ireland with a hyperlink from each
county to a separate page on each county.
• Interactivity: Some sites are interactive. The users enter details onto a web page and these are then
processed. For example, you can order a book from Amazon’s website by simply completing an on-line
form; the order will then be processed and the book dispatched to you. The interactivity of a website
normally depends on programs written in programming languages such as Java, JavaScript or Perl.

4. Linguistic considerations

• Spellings and grammar: Poor grammar and spelling can convey unfavourable impression of the person who
created the website. Great care should be taken to eliminate grammatical and spelling errors.
• Vocabulary range: The range of words used in the website should be appropriate to the target audience. A
website for children should contain words appropriate to they level of development.
• Humour/ Sarcasm: A person from a different cultural or ethic background may access a website and not
understand attempts at humour or sarcasm.
• Colloquialisms or slag. They have no place on a website
 Research & Website Evaluation Exercise

You are required to research at least 2 websites of your choice. These may be your favourite website for example.

In Word list the URL (eg. www.google.com) and Insert a screen shot of each site. To take a snapshot of your screen
press the PRT CSR (print screen key usually top right corner of keyboard) key and paste in Word.

From what you have learned about evaluating websites in class type a few paragraphs outlining your evaluation of the
sites your have chosen.

For Example

www.pridedesign.ie

4 Appearance and Layout

• Consistency: the web pages that go to make up the website should look as if they belong together.
They should have common:
o Text colours and fonts same on all pages
o Background is consistent

• Readability: Its easy to read white text on a black background and text kept to a minimum
• Page size: The entire website homepage should fits the browser window
• Site map: No site map required as the site is compact with few pages

5 Appropriate use of graphics

• Overuse of graphics: Some websites can have too many images or animations, which can detract
from the overall look of the site.
• Large images: Some websites contain graphics that do not fit on the screen. They have not been
scaled to suit the particular pages.
 • File size: A large graphics file can take a considerable length of time to download. Thumbnails,
smaller versions of the same file, are recommended. If the user wishes to see a larger version of the
image, he/she may click on the thumbnail that should have a hyperlink to a file containing the larger
image.
• Alt labels: Graphic images without alt labels are not advisable. An alt label is a text alternative for
an image. If an individual has disabled the graphics mode in his/her browser, he/she will be at a loss
if there is no alt label displayed instead of the image.

6 Technical considerations

• Working links: all links work correctly

• Browser compatibility: The website looks the same on Internet Explorer and Firefox
• Mega tags: the site is titles and meaningful meta tags are included on each page
• Interactivity: Some sites are interactive. The users enter details onto a web page and these are then
processed.

4. Linguistic considerations

• Spellings and grammar: Both grammar and spelling are of a high quality
• Vocabulary range: The range of words used in the website should be appropriate to the target
audience.
• Humour/ Sarcasm: A person from a different cultural or ethic background may access a website and
not understand attempts at humour or sarcasm.
 HTML – Hypertext Markup Language

HTML stands for HyperText Markup Language and comprises of numerous HTML tags which make up a web page. All
tags can be found using Google or www.w3schools.com. All you need is Notepad (or any text editor) and a web browser
(eg. Internet Explorer) to design and view your web page. Before you begin designing your website you should create a
new folder (this is the root folder). You should create an images folder for images/photos/etc. If you require images you
can use www.google.com and click the images link and search. Images should be enhanced, resized, etc in Adobe
Photoshop or similar image editing software (eg Gimp free from www.gimp.org). Larger sites may require additional

folders for sound files, extra web pages, etc. Notepad can be found by clicking the Windows icon then click All

Programs – Accessories – Notepad. To use Internet Explorer click the icon.

Webpage Exercises

HTML Source Code for the web page in the screenshot above

<html>
<head>
<title>
Hypertext Markup Lnguage
</title>
</head>
<body>
<p>HTML</p>
<p>Hypertext Markup Language</P>
<br>
<table border=1>
<tr>
<td>Monday</td>
<td>Tuesday</td>
</tr>
<tr>
<td>10</td>
<td>12</td>
</tr>
</table>
</body>
</html>
HTML Source Code for the web page in the screenshot above

<html>
<head>
<title>Hypertext Markup Lnguage</title>
</head>
<body>
<p><h1>HTML</h1></p>
<p>Hypertext Markup Language</P>
<br><table border=1>
<tr>
<td>Monday</td><td>Tuesday</td>
</tr>
<tr>
<td>10</td><td>12</td>
</tr>
</table>
<br>
<a href="http://www.w3schools.com">This is a link</a>
</body>
</html>
HTML Source Code for the web page in the screenshot above

<html>
<head><title>Hypertext Markup Lnguage</title>
</head>
<body>
<p><h1>HTML</h1></p>
<p>Hypertext Markup Language</P>
<br><table border=1>
<tr>
<td>Monday</td><td>Tuesday</td>
</tr>
<tr>
<td>10</td><td>12</td>
</tr>
</table>
<br>
<a href="http://www.w3schools.com">This is a link</a>
<img src="images/laptop.jpg" width="104" height="142" />
</body>
</html>
 HTML Tags - Ordered Alphabetically

DTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset

Tag Description DTD

<!--...--> Defines a comment STF

<!DOCTYPE> Defines the document type STF

<a> Defines an anchor STF

<abbr> Defines an abbreviation STF

<acronym> Defines an acronym STF

<address> Defines contact information for the author/owner of a document STF

<applet> Deprecated. Defines an embedded applet TF

<area /> Defines an area inside an image-map STF

<b> Defines bold text STF

<base /> Defines a default address or a default target for all links on a page STF

<basefont /> Deprecated. Defines a default font, color, or size for the text in a page TF

<bdo> Defines the text direction STF

<big> Defines big text STF

<blockquote> Defines a long quotation STF

<body> Defines the document's body STF

<br /> Defines a single line break STF

<button> Defines a push button STF

<caption> Defines a table caption STF

<center> Deprecated. Defines centered text TF

<cite> Defines a citation STF

<code> Defines computer code text STF

<col /> Defines attribute values for one or more columns in a table STF

<colgroup> Defines a group of columns in a table for formatting STF

<dir> Deprecated. Defines a directory list TF

<div> Defines a section in a document STF

<dl> Defines a definition list STF

<dt> Defines a term (an item) in a definition list STF

<em> Defines emphasized text STF

<fieldset> Defines a border around elements in a form STF

<font> Deprecated. Defines font, color, and size for text TF

<form> Defines an HTML form for user input STF

<frame /> Defines a window (a frame) in a frameset F

<frameset> Defines a set of frames F

<h1> to <h6> Defines HTML headings STF

<head> Defines information about the document STF

<hr /> Defines a horizontal line STF

<html> Defines an HTML document STF

<i> Defines italic text STF

<iframe> Defines an inline frame TF

<img /> Defines an image STF

<input /> Defines an input control STF

<ins> Defines inserted text STF

<isindex> Deprecated. Defines a searchable index related to a document TF

<kbd> Defines keyboard text STF

<label> Defines a label for an input element STF

<legend> Defines a caption for a fieldset element STF

<li> Defines a list item STF

<link /> Defines the relationship between a document and an external resource STF

<map> Defines an image-map STF

<menu> Deprecated. Defines a menu list TF

<meta /> Defines metadata about an HTML document STF

<noframes> Defines an alternate content for users that do not support frames TF

<noscript> Defines an alternate content for users that do not support client-side scripts STF

<object> Defines an embedded object STF

<ol> Defines an ordered list STF

<optgroup> Defines a group of related options in a select list STF

<option> Defines an option in a select list STF

<p> Defines a paragraph STF

<param /> Defines a parameter for an object STF

<pre> Defines preformatted text STF

<q> Defines a short quotation STF

<s> Deprecated. Defines strikethrough text TF

<samp> Defines sample computer code STF

<script> Defines a client-side script STF

<span> Defines a section in a document STF

<strike> Deprecated. Defines strikethrough text TF

<strong> Defines strong text STF

<style> Defines style information for a document STF

<sub> Defines subscripted text STF

<sup> Defines superscripted text STF

<table> Defines a table STF

<tbody> Groups the body content in a table STF

<td> Defines a cell in a table STF

<textarea> Defines a multi-line text input control STF

<tfoot> Groups the footer content in a table STF

<th> Defines a header cell in a table STF

<thead> Groups the header content in a table STF

<title> Defines the title of a document STF

<tr> Defines a row in a table STF

<u> Deprecated. Defines underlined text TF

<ul> Defines an unordered list STF

 Home Page (index.html)

HTML Source Code for the web page in the screenshot above

<html>
<head><title>Wed Design</title></head>
<body>
<table>
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="services.html">Services</a></td>
<td><a href="client.html">Client</a></td>
<td><a href="contact.html">Contact</a></td>
<td><a href="links.html">Links</a></td>
</tr>
</table>
<h1>Wed Design with HTML</h1>
<p>Web Design Cork are a group of two freelance Website designers and a Web developer, two of us are based in Cork
and one in Wicklow. We mostly work with Cork based SMEs and start-ups but we have also worked very well with
companies all over Ireland.</p>
<img src="images/corkbynite.jpg">
<p>We have grouped together because between us we have a wide skill set which allows us to create websites from
very basic brochure sites, to more complex and powerful Web 2.0 solutions and Content Management Systems (CMS),
such as the award winning Drupal.</P>
<p><h5>Raymund O'Connor</h5></p>
</body>
</html>
 Services Page (services.html)

HTML Source Code for the web page in the screenshot above

<html>
<head><title>Wed Design</title></head>
<body>
<table>
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="services.html">Services</a></td>
<td><a href="client.html">Client</a></td>
<td><a href="contact.html">Contact</a></td>
<td><a href="links.html">Links</a></td>
</tr>
</table>
<h1>Our Services</h1>
<p>Every business has different needs and uses for their Website. The most basic solution, the very least every company
should have, is an online brochure. An online brochure showcases a company's products and services in a clear, logical
way with easy to find contact details.</p>
<img src="images/corkcity.jpg" align=left>
<p>Other businesses need their site to provide much more e.g. the hospitality trade, people now expect to be able to
book their room on-line, any hotel that doesn't have an on-line booking system of some sort on their website is literally
throwing business away.</p>
<p>I will outline the various functionality options in the "build process" in the sections below.</p>
<p>Pride Design can cater for whatever your needs might be from Content Management, eCommerce, Blogging to Real
Estate Management solutions.</P>
<p><h5>Raymund O'Connor</h5></p>
</body>
</html>
 Adobe Photoshop

Launch Adobe Photoshop - New Project

Resolution only needs to be 72 pixels/inch for images used in websites. Resolution would be 300 for printing in
magazines/posters/etc.

Choose the Width, Height and click Ok.

Ensure all images are on different layers. Using the images provided design the banner image as shown above.

Exercise

You are required to design a banner image 1000 x 300 for a web design company. The company name is PROWEB which
needs to be in the banner along with the company telephone number 021 – 4961020. Blue and green are the colours
used in company newsletters, etc which should also be used in your design.

Save your design when finished and show your tutor.

 Stages of setting up a website

Windows Explorer (click folder icon on taskbar)

• Create new folder for the website (root folder)

• Create images folder within this folder (Save all images into this folder)
• Additional folders may be required for sound file or additional website categories required in large sites

Dreamweaver

• Site – New Site

• Type a name for your website and select the folder (in the Local Site Folder textbox) you have created (this is the
root folder)
• Click Create New – HTML in Dreamweaver window

Setup your webpage by giving it a title and set colours for background, links, etc

• Click Modify – Page Properties

• Set colours, title, etc

Always ensure to add meta tags to your web page for registering with search engines

• Click Insert – HTML – Head Tags – keywords (limit these to 6 to 12 words that specifically describe your site
(combinations of 2 or more words may be used also)
• Click Insert – HTML – Head Tags – description (type a description of your site using key words if possible)

Insert a table

• Click Insert – Table

• Columns = 2
• Row = 1
• Width = 1000 pixels for screen width of 1024

Text
Type your text and insert pictures/images from the images folder

Links

• Highlight text or click on images (images may be used to link to other pages)
• In the properties palette, in the link textbox type – index.htm (or the web page name you wish to link to)
• Repeat this process for each word you want to make into a link

Creating more web pages

• Once your webpage is finished after carrying out all of the steps above
• Click File – Save As – index.html (or .htm)
• Repeat File – Save As – about.htm to create more webpages (Note: if you have a mistake on the first page and
save it creating more pages then they will also have the error so ensure your first page is perfect before you
continue

Images

• Add an Alt tag to all images you insert in your webpages.

 Dreamweaver Exercise

1.2.0 Computers folder