COMP SCI – WEEK 6
Warm up questions
• what are the chunks of data that are sent over the internet called?
◦ Packets
• the internet and the WWW are the same thing?
◦ FALSE
◦ internet is hardware
◦ WWW is software
• give an example of a valid IP address
◦ 1.1.1.1
◦ there are 4 parts separated by a dot
◦ each part must be between 0 and 255
• www.csd.uwo.ca/courses is a domain name?
◦ FALSE
◦ www not on a domain
◦ “/” not part of domain
Planning and designing a website
• define the business requirements
◦ meet 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...
What questions should you ask your client?
• Who will their primary audience be?
• What is the company's logo?
• 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
What is the best thing you can do when designing a new website?
• Look at other websites
• Look at competitors websites
Good website design tips
• have something valuable to offer—provide something useful or interesting
• don't distract with blinking, animated GIFs, auto-loading sound, too much scrolling
• no pop-ups!
• Don't use images on the background unless you know what you're doing
• put a lot of thought into the organization of your page
• minimize clicking (no more than 3 clicks to get to a page) • have a way to get to the home page on every page
• include a menu on every page (in the same location on every page)
• compress you images before putting them on dreamweaver
• don't let multimedia files bog down your website
• no line of text should be more than 600 pixels wide
• don'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
• having the menu button across the top is the best
• use contrasting colours or simple backgrounds to make the text easy to read
• make text large enough to read
• useALL CAPITAL LETTERS sparingly
• never use more than one exclamation point
• spell check
• never underline words that are not links
• put contact info or a link to it on every page
• test your links
• remove dead links
• include a “last modified” date
◦ keep up to date, update your “what's new” section frequently
• don't steal content
• think about how the user will navigate through your website and remember the 3-click rule
• have a consistency throughout your pages
◦ colour
◦ menu placement
◦ layout
◦ fonts
◦ buttons
• think about the layout, have white space, clean alignment and balance on your pages
• if you get a long page, have a “back to top” button
Things you will see on bad web pages
• navigation confusing, menus in different spots
• ugly design: no colour continuity or white space
• scrolling horizontally to see whole page width
• slow when loading
• broken links
• text hard to read
• spelling mistakes
• stale content
• useless information
• too many pop-ups, ads
• blinking, animations 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
◦ what will the navigation structure look like?
◦ What will the pages be besides the home page?
◦ Will there be sub-menus under the menus? (this will affect your folder layout)
• pick a colour scheme you like
• think about your banner
◦ what should it focus on?
◦ Will the menu be part of the banner?
◦ Think about the colours
◦ make about 800 pixels wide, don't make it too tall
• sketch it out on paper
Decide on what web pages you 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)
• other extensions for web pages include:
◦ .shtml—server slide 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
Web pages and web site
• web site—a collection of related web pages stored in a folder. The folder may or may not
contain a sub folder
• the web site folder should contain a sub folder called images which holds the image files (.jpgm
.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
• index.html—if in folder, always first page to show up
Folder structure for a simple site
• decide on the pages you will need
• create a top level folder—use lowercase letters
• give the home page the name index.html
◦ must be all lowercase
◦ Index.html is invalid
• give other pages appropriate lowercase name with the .html extension
• create a sub folder called images (lowercase) and put all your images in that folder
• domains are case insensitive—files are NOT
More complicated sites
• sometimes website have many sub menus 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 sub folders that
contain “sub websites”
◦ each sub website is a sub folder that contains it's own index.html and images sub folder
Web server
• you 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 compute
More
Less