Identify the types of users you need to communicate with
Identify what each user type needs to be able to do
Organize your content semantically
Compose appropriate layouts for your content
Create visual hierarchies for your content with type
Apply design principles to emphasize relationships between elements
Create mood and enhance your visual hierarchies and element relationships using color
Breath life into your design with behavioral feedback
Test, rinse & repeat!
Basic HTML
Try creating a page for each of the pages on your sitemap
Try linking the pages together using anchor tags we talked about above
Add a link to the W3C HTML Validator at the bottom of each page you create
Upload your pages to your TCNJ web account
When you're finished, point your favorite web browser to your new pages to see how they look
Try validating each page using the W3C Validator
Serving Pages on a Web Server
In order for the rest of the world to be able to see and interact with your web pages, you'll need to serve them through a web server with an internet address.
It just so happens your TCNJ web accounts let you do this pretty easily.
FTP
FTP is an acronym for "File Transfer Protocol", and allows us to upload our web pages from our local computer to a web server.
Execise
Fire up you FTP client
Log into your TCNJ web account at beauty.tcnj.edu using your email username & password
Find your local copy of your web page in the local filesystem pane of your FTP client
Navigate to your home directory on your TCNJ web account filesystem in the remote server pane of the FTP client
Double-click your web page to upload it to your TCNJ web account
Open your web browser and point it to http://www.tcnj.edu/~username where username is your email username
You should now see your web page listed on your TCNJ account
The Document Object Model
When the browser loads an HTML document, in creates an internal representation of the HTML in memory. This internal representation is called the Document Object Model, DOM for short.
This DOM allows us to reference specific HTML elemts in the page, associating styling information with Cascading Style Sheets, or events with Javascript.
Cascading Style Sheets
Cascading Style Sheets allow us to define how we want our HTML to appear on screen. The HTML gives our content structure, CSS presents it. Proper web design separates
content (HTML) from presentation (CSS). Separating content and presentation gives us several benefits:
helps us organize our projects - we can keep our HTML and CSS seperateand more accessible
we can work on each separately, which is easier in a team environment
simplifies the creation of swappable “Themes”
Including Styles
Link external stylesheets using the <link> tag, e.g. <link rel="stylesheet" href="mystyles.css">
External stylesheets should be saved with the .css file extension, e.g. mystyle.css
Embed them using the <style>...</style> tag
Use them inline with the style="..." HTML element attribute
What does “Cascading” mean?
We can apply our styles in sequence, selectively overriding previously defined styles, by “cascading&rquo; a new style on top of it.
set your base styles using linked stylesheets
cascade override styles using the <style> tag
avoid inline styles because they break our ability to separate content and presentation
CSS Selectors
the wildcard, applies to all elements on the page, i.e * {...}
tag names, applies only to that tag, i.e. h1 {...}
ids, applies only to the element with that id assigned as an attribute, i.e. #myid {...}
classes, applies to all elements with that class assigned as an attribute, i.e. .myclass {...}
CSS Rules
CSS rules are the collection of properties and values you are assigning to your CSS Selectors. For example, to apply a font-family to all elements on your page (in essence setting the default font family), try this:
Type is the most basic mode of communication in web design – we use words to communicate first. Good design presents our ideas quickly & simply,
making it easy for our audience to understand what we're communicating. Typestyles are specific letter forms that have been developed for presenting text on different media
(stone, paper, computer screen, etc). A font is a packaged typestyle that includes additional specifications, including sizes, weights, styles (normal, italic, oblique) & spacing information.
Serif & Sans-Serif Fonts
There are two main font families used on the web:
Serif
Sans-Serif
Using Type with CSS
There are a number of properties you can use to control typestyles using CSS:
In the HTML pane, create a few html elements including an <h1>, a <p>, and an anchor tag <a>
In the CSS pane, create a few CSS selectors (one for each of your HTML elements), and try changing the font-family, font-size and font-style for all of them & each individually.
After you have completed the reading assignment, revisit the HTML pages you created and create a type treatment for them.
Create new HTML pages for the remaining pages from your site map (hint: copy and paste one of the pages you made in class, change the title).
Make sure you create anchor tag links for each of the pages so you can navigate around your site.
Pick a font or two (remember smaller text should probably be sans serif for reading on the web, headings could be a serif font, but choose carefully according to the guidelines in Appendix A in Design for Hackers
Create a new stylesheet using your favorite text editor, or edit the stylesheet you created in class. Remeber to name it with the .css file extension like mystyle.css
Using the various font properties, create a type treatment for your web pages.