Intro to Web DesignTAIT0524 RAYVN MANUEL
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 1
AgendaPart I
Practical Exercise
Welcome & Attendance
Part II
HTML Review
Usability Discussion
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 2
Part III
Introduction to Tables
Part IV
Introduction to FTPs
Open Lab
Review of the Elements
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 3
Heading Elements – the h*=> h1…h6
Content Elements - <p>, <div>
“Design” Elements - <br />, <hr />
Phrase Elements - <strong>, <em>
List Elements - <ol>, <ul>, <dt>
Special HTML Entities
© ©
< <
> >
& &
 
® ®
More on Hyperlinks Absolute link
Link to other websites
<a href="http://yahoo.com">Yahoo</a>
Relative link Link to pages on your own site Relative to the current page
<a href="index.html">Home</a>
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 4
Opening a Link
The target attribute on the anchor element opens a link in a new browser window or new browser tab.//in new browser window
<a href="http://yahoo.com" target="_blank">Yahoo!</a>
//in same frame [default]
<a href="http://yahoo.com" target="_self">Yahoo!</a>
//in parent window
<a href="http://yahoo.com" target="_parent">Yahoo!</a>
//in same window
<a href="http://yahoo.com" target="_top">Yahoo!</a>
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 5
Email Hyperlinks
Automatically launch the default mail program configured for the browser
If no browser default is configured, a dialog box is displayed
<a href="mailto:[email protected]">[email protected]</a>
<a href=“tel:2125556641">212-555-6641</a>
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 6
HTML5 Structural Elements
Header Element<header></header>Contains the headings
Nav Element<nav></nav>Contains the main navigation
Main Element<main></main>Contains the main content
Footer Element<footer></footer>Contains the footer
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 7
main
Proper Nesting
CODE:
<p><i>Call for a free quote for your web
development needs: <strong>888.555.5555
</strong></i></p>
BROWSER DISPLAY:
Call for a free quote for your web development needs: 888.555.5555
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 8
Writing Valid HTMLCheck your code for syntax errors
◦Benefit:◦ Valid code
more consistent browser display
W3C HTML Validation Tool◦ http://validator.w3.org
Additional HTML5 Validation Tool◦ http://html5.validator.nu
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 9
Basics of Web Design
CHAPTER 3WEB DESIGN BASICSKEY CONCEPTS
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ10
Learning Outcomes
Describe the most common types of website organization
Describe principles of visual design
Design for your target audience
Create clear, easy-to-use navigation
Improve the readability of the text on your web pages
Use graphics appropriately on web pages
Apply the concept of Universal Design to web pages
Describe web page layout design techniques
Describe the concept of responsive web design
Apply best practices of web design
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ11
Design for Your Target Audience
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ12
Consider the target audienceof these sites.
Web Page DesignBrowser Compatibility
Web pages do NOT look the same in all the major browsers
Test with current and recent versions of: ◦ Internet Explorer◦ Firefox, Mozilla◦ Opera◦ Safari
Progressive Enhancement: Website functions well in browsers commonly used by your target audience Add enhancements with CSS3 and/or HTML5 for display in modern browsers
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ13
Web Page DesignScreen Resolution
Test at various screen resolutions◦ Most widely used: 1024x768, 1366x768, and 1280x800
Design to look good at various screen resolutions◦ Centered page content ◦ Set to either a fixed or percentage width
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ14
Website OrganizationHierarchical
Linear
Random (sometimes called Web Organization)
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ15
Hierarchical Organization
A clearly defined home page
Navigation links to major site sections
Often used for commercial and corporate websites
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ16
Hierarchical: Too Shallow
Be careful that the organization is not too shallow.
Too many immediate choices a confusing and less usable website.
Group, or “chunk”, related areas
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ17
Hierarchical: Too Deep
Be careful that the organization is not too deep.
◦ This results in many “clicks” needed to drill down to the needed page.
◦ User Interface “Three Click Rule” A web page visitor should be able to get from
any page on your site to any other page on your site with a maximum of three hyperlinks.
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ18
Linear Organization
A series of pages that provide a tutorial, tour, or presentation.
Sequential viewing
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ19
Random Organization Sometimes called “Web” Organization
Usually there is no clear path through the site
May be used with artistic or concept sites
Not typically used for commercial sites
COPYRIGHT © 2016 PEARSON EDUCATION, INC.,
HOBOKEN NJ20
HTML Table
Tables are used on web pages to organize tabular information
Composed of rows and columns – similar to a spreadsheet.
Each individual table cell is at the intersection of a specific row and column.
Configured with table, tr, and td elements
21Copyright ©
2016
Pearson
HTML Table Elements
<table> Contains the table
<tr>Contains a table row
<td>Contains a table cell
<caption> Configures a description of the table
22Copyright ©
2016
Pearson
The Table Element<table>
<table> ElementContains the table
<tr> ElementContains a table row
<td> ElementContains a table data cell
<th> ElementContains a table header cell
<caption> ElementConfigures a description of the table
23 Copyright ©
2016
Pearson
HTMLTable Example
<table border="1"><caption>Birthday List</caption>
<tr>
<td>Name</td>
<td>Birthday</td>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>
24
Birthday List
Copyright ©
2016
Pearson
HTMLTable Example 2
<table border="1">
<tr>
<th>Name</th>
<th>Birthday</th>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>
25
Using the <th> Element
Copyright ©
2016
Pearson
HTML border Attribute
Indicates the table is specifically not used for page layout◦ Optional◦ border=“1”
Visible browser default border
◦ border=“”No visible browser default border.
26 Copyright ©
2016
Pearson
HTMLcolspan Attribute<table border="1">
<tr>
<td colspan=“2”>Birthday List</td>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
</table>
27 Copyright ©
2016
Pearson
HTMLrowspanAttribute
<table border="1"><tr>
<td rowspan="2">This spans two rows</td><td>Row 1 Column 2</td>
</tr><tr>
<td>Row 2 Column 2</td></tr>
</table>
28 Copyright ©
2016
Pearson
Accessibility and TablesUse table header elements (<th> tags) to indicate column or row headings.
Use the summary attribute on the table element to provide an overview of the purpose and organization of the table.
Use the caption element to provide the title/caption for the table.
Other attributes that provide for accessibility:◦ headers & id◦ scope
Copyright ©
2016
Pearson
29
Accessibility:headers & id Attributes
<table>
<caption> Word Schedule</caption>
<tr>
<th id="day">Day</th>
<th id="hours">Hours</th>
</tr>
<tr>
<td headers="day">Monday</td>
<td headers="hours">4</td>
</tr>
<tr>
<td headers="day">Tuesday</td>
<td headers="hours">3</td>
</tr>
<tr>
<td headers="day">Total</td>
<td headers="hours">7</td>
</tr>
</table>
Copyright ©
2016
Pearson
30
BREAK!
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 31
Online Resources | To Learn Stuffo Online Tutorials (Free & other than Utoobs)
o W3C Schools - http://www.w3schools.com/ (the ULTIMATE resource)
o Tizag Tutorials - http://www.tizag.com/
o Lynda.com
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 32
Online Resources | Prototyping Toolso Gliffy - http://www.gliffy.com/
o MS Office Suite - MS Word and PowerPoint
o AxureRP [not free]
o https://getlorem.com/
o http://ipsum.com
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 33
Online Resources | Colorso https://color.adobe.com/create/color-wheel/
o http://visibone.com/colorlab/big.html
o http://www.webpagefx.com/web-design/color-picker/
o http://www.w3schools.com/tags/ref_colorpicker.asp
o http://www.colorpicker.com/
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 34
Usability | Krug’s First Law
Don’t make me think!
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 35
KRUG’S FIRST LAW OF USABILITY(Krug)Krug, Steve. Don't Make Me Think, Revisited, 3rd Edition.
New Riders PTG, 20131223. VitalBook file.
Usability | Design for your visitors
Scanning, Satisficing
& Muddling
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 36
KRUG’S FIRST LAW OF USABILITY(Krug)Krug, Steve. Don't Make Me Think, Revisited, 3rd Edition. New Riders PTG, 20131223. VitalBook file.
Usability | Design for Scanning
Conventions & Billboarding
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 37
KRUG’S FIRST LAW OF USABILITY(Krug)Krug, Steve. Don't Make Me Think, Revisited, 3rd Edition. New Riders PTG, 20131223. VitalBook file.
Usability | Mindless Choices
Think for me…
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 38
KRUG’S FIRST LAW OF USABILITY(Krug)Krug, Steve. Don't Make Me Think, Revisited, 3rd Edition. New Riders PTG, 20131223. VitalBook file.
Brief: The smallest amount of information that will help me
Timely: Placed so I encounter it exactly when I need it
Unavoidable: Formatted in a way that ensures that I’ll notice it
Usability | Needless Worlds
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 39
KRUG’S FIRST LAW OF USABILITY(Krug)Krug, Steve. Don't Make Me Think, Revisited, 3rd Edition. New Riders PTG, 20131223. VitalBook file.
o It reduces the noise level of
the page.
o It makes the useful content
more prominent.
o It makes the pages shorter,
allowing users to see more of
each page at a glance without
scrolling
Using FTP
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 40
Intro to Web DesignTAIT0524 RAYVN MANUEL
COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 41