Upload
dale-greene
View
224
Download
0
Embed Size (px)
Citation preview
Week 2: Building a
Simple Website
IMC 320 Web PublishingSpring 2011
HTML elementsThe things that make up an HTML document
Element/attribute syntax (from w3schools.com)
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
Can be nested; not case-sensitive
Key HTML elementsDocument: html
Page head: head
Contains style, meta tags, scripts, and links to files containing these thing
Not visible to page viewer
Page body: body
Contains content of page
Visible
Key HTML elements
Paragraph: p
Headings: h1, h2, h3, etc.
Link: a
<a href=“...” target=“...”>Link text</a>
Image: img
<img src= “...” alt= “...” />
Key HTML elements
Lists
Ordered list: ol (has numbers)
Unordered list: ul (has no numbers, can have bullets or images or ...)
List item: li (the things in the list)
Can be nested
Key HTML elementsLine break: br
<br />
Rule: hr
<hr />
Comment: <!-- -->
<!-- This is a comment -->
Key HTML elements
Tables
table
tbody
tr (table row)
th (table head)
td (table ... data?)
Key HTML tags
Bold: strong
Italics: em
Underline: u
Strikethrough: s
Block quotation: blockquote
Code: code
AttributesProvide additional information about HTML elements
Specified in the start tag
Come in name/value pairs: name=“value”
<h2 class=“entry-title”>First Post!</h2>
Enclose values in quotes
Not case-sensitive (but use lowercase)
Attributes: IDs and classes
ID
Only one of each per page
<h1 id=“site-name”>
h1#site-name or #site-name
Class
Can have many of same per page
<h2 class=“entry-title”>
h2.entry-title or.entry-title
Inline styling
<p style=“...”>
Hard to maintain -> not recommended
Spacing and position
Width
Margin
Padding
Div -> a block of elements
Cascading Style Sheets(CSS)
In page head:
<style type="text/css"> ... </style>
As separate file:
<link type="text/css" rel="stylesheet" href="css/style.css" />
FTP with Dreamweaver
Local folder
Site name (DW)
FTP host (A Small Orange server)your domain name (not subdomain)
Host directory (remote folder)public_html/[subdomain directory]
Login & password
Passive FTP
Lab part 11. Create subdomain
2. Set up Dreamweaver site
3. Download files & unzip
4. Create index.html
5. Insert text
6. Set up folders
7. Style document
8. Upload and view
9. Style some more
Files: http://imc320.bigbigdesign.net/assets/week-2.zip
Site menus/navigation
Make a bunch of links
Use an unordered list
Get rid of bullets
Make the list items display as blocks
Float the list items
Style the hovers and visited links
Consistency across pages
Included files
Various methods depending on server settings and type
PHP:
create file with repeated elements
change filename extension to .php
<?php include 'navigation.php'; ?>
Consistency across pages
Dreamweaver templates
Select what’s editable and what’s fixed
Can have multiple templates per site
Use conditions to determine what’s included
Reduces processing on server
Need to check out and reapply templates to all files to which it applies
List => Flexible photo gallery
Remove list styling
Reset margin and padding
Set width and height of list element
Float list element
Optional:
Set image width and height
Style borders
style captions
Lab part 2
Create a navigation menu
Create a template from the repeatable parts of your page, including menu
Create photo gallery page
Create contact page
Link it all together
ResourcesHTML 4.01 / XHTML 1.0 Reference:http://www.w3schools.com/tags/default.asp
List of CSS properties:http://meiert.com/en/indices/css-properties/
Smashing Magazine:www.smashingmagazine.com
http://www.smashingmagazine.com/2011/01/18/time-saving-and-educational-resources-for-web-designers/