Web Design: Creating a Website - Colors, Fonts, Images, and HTML Code, Study Guides, Projects, Research of Design Patterns

Download Web Design: Creating a Website - Colors, Fonts, Images, and HTML Code and more Study Guides, Projects, Research Design Patterns in PDF only on Docsity!

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)

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.

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.

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

_

Hypertext Markup Lnguage

HTML

Hypertext Markup Language

Monday Tuesday

10 12

_

HTML Source Code for the web page in the screenshot above

_

Hypertext Markup Lnguage

HTML

Hypertext Markup Language

MondayTuesday

1012

This is a link

_

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

Defines the document type STF

Defines an anchor STF

Defines an abbreviation STF

Defines an acronym STF

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

Deprecated. Defines an embedded applet TF

Defines an area inside an image-map STF

Defines bold text STF

(^) Defines a default address or a default target for all links on a page STF

(^) Deprecated. Defines a default font, color, or size for the text in a page TF

Defines the text direction STF

Defines big text STF

Defines a long quotation STF

Defines the document's body STF

Defines a single line break STF

Defines a push button STF

Defines a table caption STF

Deprecated. Defines centered text TF

(^) Defines a citation STF

Defines computer code text STF

Defines attribute values for one or more columns in a table STF

Defines a group of columns in a table for formatting STF

Deprecated. Defines a directory list TF

Defines a section in a document STF

Defines a definition list STF

Defines a term (an item) in a definition list STF

Defines emphasized text STF

(^) Defines a border around elements in a form STF

(^) Deprecated. Defines font, color, and size for text TF

Defines an HTML form for user input STF

Defines a window (a frame) in a frameset F

Defines a set of frames F

to Defines HTML headings STF

Defines information about the document STF

Defines a horizontal line STF

Defines an HTML document STF

Defines italic text STF

Defines an inline frame TF

Defines an image STF

Defines an input control STF

Defines inserted text STF

Deprecated. Defines a searchable index related to a document^ TF

Defines keyboard text STF

Defines a label for an input element STF

(^) Defines a caption for a fieldset element STF

Defines a list item STF

Defines the relationship between a document and an external resource STF

Defines an image-map STF

Deprecated. Defines a menu list TF

Defines metadata about an HTML document STF

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

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

Defines an embedded object STF

Defines an ordered list STF

Defines a group of related options in a select list STF

Services Page (services.html)

HTML Source Code for the web page in the screenshot above

Wed Design

Home Services Client Contact Links

Our Services

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.

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.

I will outline the various functionality options in the "build process" in the sections below.

Pride Design can cater for whatever your needs might be from Content Management, eCommerce, Blogging to Real Estate Management solutions.

Raymund O'Connor

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.

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