Slide 1 of 54 Warm up Question: Question: Match the following images to the correct file format:...

of 54

Warm up Question:Warm up Question:Question: Match the following images to the

correct file format:1. GIF

2. PNG

3. JPG

Question: What are the chunks of data that are sent over the internet called?

Question: True or false, the Internet and the World Wide Web are the same thing?

Question: Give an example of a valid IP address. Question: True or false, www.csd.uwo.ca/courses is a

domain name?

WEB SITE DESIGNWEB SITE DESIGNComputer Science 1033 – Week 6

“The Internet: where men are men, women are men, and children are FBI agents.” Anonymous

of 54

Overview of Today’s TopicsOverview of Today’s TopicsAnnouncementsPreparing to build a websiteGood Website DesignWhat is a webpage Introduction to htmlHow to organize you files within your

website, file extensions, types of web pages

Dreamweaver:◦Page Title◦Formatting◦ Images◦Links

Review

of 54

Announcements Announcements Assignment 2 should be marked by

Monday, Nov 5…DO NOT EMAIL ME BEFORE THAT DATE TO SEE WHY YOURS IS NOT MARKEDnd a breakdown of your mark.

Assignment 3 should be posted within 2 or 3 days. I will give you hints/help on this next week during class.

Final Exam TENTATIVELY is Sunday, December 9th at 7pm (2 hours, multiple choice and true/false, 150 questions)◦BRING A PENCIL and YOUR STUDENT CARD◦No calculators or electronic devices, do not

bring ipods or hats!

of 54

Okay, I have the Domain Name, Okay, I have the Domain Name, what is next? what is next? Stage 1: Stage 1: Planning and DesignPlanning and DesignDefine the Business

Requirements◦Meet with the client:

Be prepared Ask questions LISTEN TO THE ANSWERS Learn as much as you can about their

business Ask for all the reports they generate, the

forms they fill in, their printed brochures, etc…

of 54

What questions should you ask What questions should you ask your clients?your clients?Who will their primary audience be?What is the company’s image?Do they have a company logo (this

will help you with colours and a theme)? How about some other graphics/images?

Will the company’s focus change over the next year or so?

What content will be on the page? This might help you figure out how to organize the material!

of 54

What is the best thing you can What is the best thing you can do when designing a new do when designing a new website? website? Look at other websites!

◦Look at the competitors websites What are some of the great ideas they have?

◦Look at websites that you think are: Beautiful Easy to Use Effective in getting the message across Using a great colour scheme Hideous Hard to Use Annoying

of 54

Questions:Questions:Think of some of your favourite

websites, what is it about those websites that you like?

Think of some websites you avoid, why do you avoid them?

of 54

What do you think of these What do you think of these sites?sites?http://www.avanttravel.com http://www.cusli.org/index.html http://www.gizishotel-santorini.comhttp://www.brescia.uwo.ca http://www.mandywebster.com http://www.justwine.ca http://www.derekmclarty.com/index.as

p

http://www.margarethe-vanderpas.com/

of 54

How about these sites?How about these sites?http://www.lingscars.com http://csszengarden.com/?

cssfile=http://www.brucelawson.co.uk/zen/sample.css

http://www.alovelyworld.com/ http://hosanna1.com/ (all of the above from: http://www.manolith.com/2009/08/25/worst-

website-designs/ )

of 54

Good Website Design TipsGood Website Design TipsHave something valuable to offer

provide something useful or interestingDon’t distract with blinking, animated

GIFs, autoloading sound, too much scrolling

No popups!Don’t use images on the background

unless you know what your doingPut a lot of thought into the organization

of your pageMinimize clicking (no more than 3 clicks

to get to a page)

of 54

More TipsMore TipsHave a way to get to the home page on

every pageInclude a menu on every page (in the

same location on every page)Compress your imagesDon’t let multimedia files bog down

your websiteNo line of text should be more than 600

pixels wideDon’t make your page too wide (around

800 pixels), user should NEVER have to do horizontal scrolling. Vertical scrolling should be kept to a minimum

of 54

More TipsMore TipsUse contrasting colors or simple

backgrounds to make text easy to readMake text large enough to readUse ALL CAPITAL LETTERS sparingly,Never use more than one exclamation

pointSpell CheckNever underline words that are not linksPut contact info or a link to it on every

page

of 54

More TipsMore TipsTest your linksRemove dead linksInclude a “Last Modified” date

◦Keep up to date, update your “What’s New” section frequently

Don’t steal content (I stole this content is from: http://websitehelpers.com/design )

of 54

More TipsMore TipsThink about how the user will navigate

through your website and remember the 3-click rule.

Have a consistency throughout your pages◦Colours◦Menu placement◦Layout◦Fonts◦Buttons

Think about the layout, have white space, clean alignment and balance on your pages

of 54

Some things you will see on Some things you will see on “Bad” Web Pages:“Bad” Web Pages:Navigation confusing, menus in different spotsUgly design: no color continuity or white

spaceScrolling horizontally to see whole page widthSlow when loadingBroken linksText hard to readSpelling mistakesStale contentUseless informationToo many popups, adsBlinking, animation

of 54

How to start your design:How to start your design:Decide on where you want the menu, in

general it should go along the left side or at the top, WHY?◦ What will the navigation structure look like?◦ What will the pages be besides the home page?◦ Will there be submenus under the menus? (this

will affect your folder layout)Pick a colour scheme you likeThink about your banner:

◦ What should it focus on◦ Will the menu be part of the banner?◦ Think about the colours◦ Make it about 800 pixels wide, don’t make it too

tall.Sketch it out on paper

http://usability.coi.gov.uk/themes/page-layout/assets/images/1a-1.jpg

https://www.microsoft.com/mspress/books/sampchap/6403/0-7356-18607-04.gif

of 54

Things to Remember, Things to Remember, especially for Assignment 3 especially for Assignment 3 and Assignment 4!and Assignment 4!Keep the menu in the same place on

every page. (either the top or the left, it is up to you)

Should not have to scroll horizontallyKeep the colours consistent on every

pageKeep the layout fairly consistent on

every pageShould always have a way to get homeLong pages should have a “Back to

Top” button

of 54

Decide on what web pages you Decide on what web pages you will need.will need.

Each web page is normally an html file, a file that has the extension .html or .htm◦ .html .htm

Very basic page, just has clickable links, images, sometimes forms

The .html file is just a file with html codes that is displayed in a browser to make it look pretty for the client (IE, Safari, Firefox)

CS1033 just covers .html & .htm pages◦Other extensions for web pages include:

.shtml Server Side Includes: add some extra stuff from the server before displaying the page to the client”

.php, .asp, .cgi extra stuff that is brought in also from the server, allows for use of data in a database on the server, more complex form manipulation. asp is a Microsoft technology

of 54

Web Pages and Web SitesWeb Pages and Web SitesA Web Site is a collection of related

web pages stored in a folder. The folder may or may not contain sub folder.

The web site folder should contain a sub folder called images which holds the image files (.jpg, .gif, etc) that will be displayed on the page.

The home page for the website, the “starting page” should have the file name index.html

of 54

Web Pages and Web SitesWeb Pages and Web SitesQuestion: On panther.uwo.ca, what

is the main folder for your: http://publish.uwo.ca/~userid

Question: Does that folder contain a file called index.html?

CHECK IT OUT USING SECURE FTP (WINSCP, FUGU, FILEZILLA)

of 54

Folder Structure for a Simple Folder Structure for a Simple SiteSiteDecide on the pages you will needCreate a top level folder. Use lowercase

lettersGive the home page the name index.html

◦Must be all lowercase!◦Index.html is invalid

Give the other pages appropriate lowercase names with the .html extension

Create a subfolder called images (lowercase) and put all your images in that folder

of 54

Example of a simple websiteExample of a simple websiteAssume we are making a website

about Polar Bears. The folder structure (folder is called H:\polarbears) might look like this:

of 54

Links for the simple Links for the simple structurestructure

Assume the domain name for this site is: ArcticAnimals.org

Thus the website would be:◦http://www.ArcticAnimals.org

To get to the polar bear web site, you could type:◦http://www.ArcticAnimals.org/polarbears OR◦http://www.ArcticAnimals.org/polarbears/

index.html To get to the habitat page you would type:

◦http://www.ArcticAnimals.org/polarbears/habitat.html

of 54

Something to trySomething to tryGo to your panther page and type each of

the following:◦ http://publish.uwo.ca/~lreid2 ◦ http://publish.uwo.ca/~lreid2/index.html ◦ http://publish.uwo.ca/~lreid2/assign1 Question: Why don’t we see a webpage when

we type the last choice?

Now UWO Computer Science page and type each of the following: ◦ http://www.csd.uwo.ca◦ http://www.csd.uwo.ca/index.html ◦ http://www.csd.uwo.ca/index.shtml

of 54

More complicated siteMore complicated siteSometimes websites have many

submenus and have lots of web pages.

In this case we need a more complicated folder structure◦BUT it is not really that much more

complicated, just one main folder with subfolders that contain “sub websites”

◦Each sub website is a sub folder that contains it’s own index.html and images subfolder

of 54

Example of a Example of a more more complicated complicated site:site:Westerns

Computer Science Site might be set up like this

of 54

Web ServerWeb ServerYou will likely build your site on your own

machine. When the web site is completed you will need to move it to a Web Server

Web Server the computer that runs software which holds the web pages and serves up (delivers) web page to the client. This computer must be connected to the Internet. The software delivering the web pages is also called a web server

Question: What is the software we use to move the web pages we have built on to the web server?

Question: What is the name of the web server machine at Western?

of 54

Web BrowserWeb BrowserOnce you have moved your web site onto the

web server you MUST test your web site by opening it in a Web Browser

Web Browser software/program that displays formatted web pages to the client.

Question: What is the input we give a web browser?

Question: What is the output from the web browser program?

Question: Can you name 3 web browser programs?

Question: Does anyone know how you look at the html that was used to create the page currently displayed in the browser?

of 54

HTML and Web BrowsersHTML and Web Browsers<html><title>Sample Web Page</title><body>Here is some <b>text</b> and a picture: <img src="sunset.gif">and a link to <a href="http://www.uwo.ca">Western</a></body></html>

Input to Web Browser

Output from Web Browser

of 54

BreakBreakSlideshows of your

work for assignment 1:◦http://

www.csd.uwo.ca/~lreid/cs1033/assignment1

Laura loved this one

of 54

What is HTML?What is HTML?History:

◦ In the late 1980s, Tim Berners Lee proposed a way of sharing research papers using the Internet and hypertext (immediate links to other documents)

◦ In 1990 Berners Lee set the specifications for the HTML language and wrote a browser to read HTML files and output linkable papers

◦He proposed html tags Example of some tags <html>, </html>, <b>,

</b>,<ol>, </ol> Tag always start with “<“ and end with “>” Most tags come in twos: opening tag and a closing

tag, for example <title>This is the title of the web page</title>

◦Originally we made html files (web pages) with simple text editors like Notepad

of 54

History of HTML History of HTML Question: Can you guess at some

of the tags do you think we would need in a web page?

of 54

Types of HTML tagsTypes of HTML tagsSection tags

◦<html>, <body>, <head>, …Formatting tags

◦<b>, <ul>, <i>,<p>,<h2>,</b>,</h2>, …

Link tags◦<a href=“http://www.msn.com”>, <a>, …

Placeholder tags (standalone or unpaired tags)◦<img src=“ “>, <hr>

of 54

Lets make a web page the Lets make a web page the Old Old Fashioned Way!Fashioned Way!Open NotepadSave your file as myfirstpage.htmlType in some tagsSave the file againClose the fileDouble click on it, it should now open in

IEIn IE, from the menu select View>SourceEdit the tags some more and save the

fileGo back to IE and hit the refresh button

of 54

It is way to hard to remember It is way to hard to remember all the tags, so…all the tags, so…Dreamweaver to the rescue! Dreamweaver creates the tags for

us so that we don’t have to remember the syntax for each tag!

Similar programs include:◦Microsoft FrontPage◦HTML Kit (free)

Question: Can you still see the tags in Dreamweaver? If so, how?

of 54

Dreamweaver TipsDreamweaver TipsWeb pages will NOT format as precisely as

something like a MS Word document to be printed because everyone’s resolution is different and screen size is different.

Design a template and then save it and make copies for each page in your site and add the content to the copies

Don’t forget to make an images folder! Put your images in the folder BEFORE you start adding them to your page.

Try previewing your page in more than one browser

It is easier to create the top level folder and subfolders first and then point Dreamweaver to that folder

Always use lower case names with no spaces for all folder and all file names

of 54

Page TitlePage TitlePage title is very important, when you

print a web page, the title appears at the top of printed paper

Search engines look at page titleAlways set the page title on all your

pagesStart with the site name, then hyphen

and the page description◦Examples:

The Department of Computer Science – Undergraduate InformationLaura K. Reid Online Resume – Work Experience

of 54

Google Does It Right!Google Does It Right!

of 54

Formatting TextFormatting TextHeaders H1, H2, H3, H4, H5, H6

◦H1 is the largest◦All are bolded

Should use pixels rather than points for text size, Use ems or % when the audience might need to enlarge the text Header

sText Color

Text Size

Font type

Special Effects

of 54

Changing Background and Link Changing Background and Link ColoursColoursIf you decide to use a background

image, make sure it is not too busy and the image file size is small.

Don’t forget about your links colours either! Try to pick colours that work with your site palette

of 54

GraphicsGraphicsUse common universal formats such as jpg,

gif and png files that will work in any browserResize and compress the image as much as

possible in Photoshop (or other graphics package) BEFORE putting it in with Dreamweaver.

Any resizing you do within Dreamweaver will not affect the download speed

ALWAYS set the alternative tag and title tag:◦ Meet Barriers Free Access Requirements◦ Shows when page is loading◦ Shows when mouse hovers over◦ Shows up when using a text browser

of 54

Graphics continuedGraphics continuedConsider dial up usersThe site must not take more than

25-30 seconds for a 56K modem user!

Dreamweaver allows you to check this:◦Edit>Preferences>Status Bar

Set the connection speed to 56 Kilobits Look at the bottom status bar on the

Document Window to see download speed

of 54

Links – Type 1Links – Type 15 Basic Types of Links you can create:TYPE 1: Links to other pages

within your site:◦For Example:

Link from index.html to contactinfo.html Link from contactinfo.html back to index.html

of 54

Links – Type 2Links – Type 2TYPE 2: Link to a different website◦For example

Link from index.html to http://www.utoronto.ca

of 54

Links – Type 3Links – Type 3TYPE 3: Link to an email address◦For example:

Link to [email protected] Clicking on the link brings up default emailer

like Outlook

of 54

Links – Type 4aLinks – Type 4aTYPE 4a: Link on a image

◦On the whole image: Link to http://www.canada.gc.ca

of 54

Links – Type 4bLinks – Type 4bTYPE 4b: Link to the parts of an image◦On the parts of an image, for example

the provinces:

of 54

Links – Type 5Links – Type 5TYPE 5: Link to particular spot within a page◦The spot is called the bookmark or the

named anchor◦Find the spot you want to jump to and then

select Insert>Named Anchor◦Give the spot a name you make up, for

example: middleofpage◦Go to where you want the link and add a

link with # in front of it and the name of the anchor:

of 54

Links – Type 5Links – Type 5Named anchors can link to any spot

within the current page OR you can link to the middle of another page, for example:◦http://en.wikipedia.org/wiki/

Jpg#Sample_photographs Use named anchors to make Back

to Top buttons or jump from a list to another area of the page

Named Anchors used on this page

of 54

Next WeekNext Week

Tables to layout out your pagesHow to upload your web siteHow to attract search enginesHow Google worksA little bit more Internet History

of 54

ReviewReviewQuestion: What is the file name of the

home page (first page that is displayed) for every web site?

Question: Who come up with the html tags?

Question: (b) and (/b) are valid html tags, TRUE or FALSE

Question: Resizing your image inside Dreamweaver to make it smaller will make your page download faster, TRUE or FALSE?

Question: Name the 5 types of links

Slide 1 of 54 Warm up Question: Question: Match the following images to the correct file format:...

Documents

Transcript of Slide 1 of 54 Warm up Question: Question: Match the following images to the correct file format:...