Web Design Training by ExplorNet
Download
Report
Transcript Web Design Training by ExplorNet
Web Design Training
Multimedia and Webpage Design
Essential Standard 4.00
Multimedia and Webpage Design
How the Web Works
Viewing Source Code
What’s in all that mess??
Content
Structure
Look
and layout
Directions to other resources
(pictures, webpages, stylesheets, scripts)
Code: HTML, CSS, JavaScript, XML, Java, php, client-side, server-side, etc.
First Time Learning
Video – How to Open a Book
First time learning must be…
Accurate
Complete
Connected to the real world
Instruction will involve different qualities of
learning.
Level 1 – exposure learning
Level 2 – “use it or lose it” learning
Level 3 – remains in memory and easily accessed
What is HTML?
What is XHTML?
What is CSS?
How Web Design is Like Building a House
HTML
creates and
defines the
structure.
How Web Design is Like Building a House
CSS
gives us the
tools to make it
look the way
we want.
How Web Design is Like Building a House
Other
Technologies
are needed to
make it more
‘livable.’
Basics of HTML
Some HTML Terminology
TAGS
Tags separate or contain content and information. They set a structure for
the browser to follow. Most tags are ‘container tags’ which come in pairs an opening tag and, later, a closing tag.
<h1> </h1>
Some tags are self-contained and stand alone.
<br />
Basics of HTML
Some HTML Terminology
ELEMENTS
Elements are the tags WITH the content they are separating or modifying.
For example:
<h1>This is the headline.</h1>
There are block elements (like <p> or <h2>)
and inline elements (like <img>).
Key (X)HTML Tags
Primary HTML Structure Tags
o<html> </html>
o<head> </head>
o<title> </title>
o<body> </body>
Key (X)HTML Tags
Some Key HTML Container Tags
o<p> </p>
(paragraph)
o<h1> </h1> (header)
o<h2> </h2> (subhead – through h6)
o<div> </div> (division – key in CSS)
Key (X)HTML Tags
Some Key HTML Format Tags
o<b> </b>
(bold)
o<i> </i>
(italics)
o<font> </font>
(OLD style - deprecated)
Key (X)HTML Tags
“Empty” Tags
o<br />
(break)
o<hr />
(horizontal rule)
o<img>
(image)
oNeeds “src” and “alt” attributes
<img src=“picture.jpg” alt=“picture” />
Key (X)HTML Tags
Other Key Tags
o<a> </a>
(link)
oNeeds href attribute
<a href="http://www.cnn.com">CNN</a>
Key (X)HTML Tags
The STYLE Attribute:
<h1 style=“text-align:left; font-family: georgia,serif”>
The DOCTYPE Declaration
What is a Doctype?
What is an HTML Document?
We will build our html document in a text
editor, but we’ll view our work and the
changes we make in a browser.
Keyboard Control Key Shortcuts
These will make your life
easier! Make sure students
know them:
CONTROL-C
CONTROL-V
CONTROL-X
CONTROL-S
CONTROL-Z
CONTROL-Y
COPY
PASTE
CUT (DELETE)
SAVE
UNDO
REDO
Building Our Website
Let’s build our simple
house. Three ‘rooms’.
A home
page (big family room on
the main floor)
Two other pages, in a subfolder
(think of these as two rooms in the
basement)
We’ll also have a separate space in
the basement: a ‘closet’ for images and it’ll have a box for some of the
images.
HTML Guided Practice Part 1
Building a Simple Web Page
Find the folder on your flash drive called “web site project. ”
Find the basic file.
Open it in Notepad2 or Notepad++
On your flash drive, find “portable apps/notepad++.exe”
and double-click it. Install UNLESS it’s already available.
Save the file as “index.html”.
Open “Build Your Site Project” in Activities folder.
Put the two windows side-by-side and follow along with the
instructor as we complete Part Two.
Let’s Build!
Let’s build Part ONE of the Build Your Site Project together.
Web Site Files and Folders
Web Page Components
oHome Page (Index Page)
Use
Characteristics
Index is the default home page
Don’t need index.html in
the URL.
Root Folder –
contains
index page
Images
Pages
Web Site Organization
Web Site File Management
oRoot Folder
index.html file is default homepage
oFolders are denoted by / in URL
www.teachercentral.org/careertech
oAbsolute Hyperlinks
oLinks require “http://www....”
oRelative Hyperlinks
oLinks require a file path
Note: Always use lowercase letters for folder and file names!
Look for the “.html” document you are editing and trace the path to the file you are
linking. family.html
If you are moving UP out of that folder, add ../ (meaning “go up one level”)
Once you’ve gone up a level, if you are going down into a subfolder, name the
folder you are going into. ../images
Then, if going down into another subfolder, name the subfolder you are
going into. ../images/photos
Once you are in the correct folder, add the file name. ../images/photos/index.jpg
Cascading Style Sheets
Three Types of Styles
1. In-Line
2. Embedded or Internal
3. External Style Sheets
Cascading Style Sheets
Some CSS Terminology
ATTRIBUTES – style, id, etc.
The ‘style’ attribute is a cornerstone of creating styles. Its use
replaces many ‘deprecated’ direct formatting tools like <font>.
•PROPERTIES – “color” or “font-size” or “text-align” etc
Always followed by a colon then the value
Then by a semi-colon if more properties/values follow.
<h1 style=“color: red; font-family: arial”>
•VALUES – “red” or “small” or “centered” etc.
Cascading Style Sheets
In-Line Styles
In-line styles use the style attribute to set properties and values.
These are laid out within an opening tag such as <h1> or <p>.
Note that all the style components are listed within a single pair of quotes.
Each set contains a PROPERTY (like ‘text-align’ or ‘font-family’) and a VALUE (like
‘center’ or ‘verdana’).
Properties are separated from values by a colon.
Pairs of properties and values are separated by a semicolon.
In-Line Styles
Inline Styles are
included in tags
throughout the web page.
Cascading Style Sheets
Common CSS Properties
Here are examples of common style properties:
font-size, font-family, font-style, font-variant, font-weight
color, background-color, background-image
text-align, text-indent, line-height
margin-top, margin-right, padding-top, padding-right
Border-color, border-top-width, border-style
Properties and possible values:
http://htmlhelp.com/reference/css/properties.html
Cascading Style Sheets
Internal
Style Sheet
Tags
You would begin
creating one by
placing <style> tags
within the <head> of
the document. Style
info goes within the
<style> tags.
Cascading Style Sheets
Creating Internal Styles
Next, you would create rules within the style sheet to govern the
look of various elements within the page – from existing tags like
<h1> or <p> to new ones that you might create and name.
Cascading Style Sheets
Internal Style Sheets
In-line styles can become cumbersome – every style applied has to
be applied repeatedly! For example, if you want to make all your
paragraphs a certain size, color and font, you would have to apply
an inline style with EVERY PARAGRAPH!
The use of an internal style sheet can simplify things. By creating a
‘style sheet’ within the document <head>, we can create a rule for
paragraphs (and another rule for h1 elements, and h2, and so on)
and only have to spell out the stylistic components one time.
Cascading Style Sheets
Creating Internal Styles
Cascading Style Sheets
Creating Internal Styles
The rules created in an internal style sheet automatically impact
text that lies within existing elements like <h1> or <p> that have
been styled. But you must APPLY “class” or “id” styles that you
have created where you want those styles (like “navbar”) to apply.
The newly added attribute defines “copyright” as a “unique
identifier” on the page to which a specific style will be assigned
Cascading Style Sheets
Creating Internal Styles
When creating a new “class” or “id” in a style
sheet, the “unique identifier” that you invent is
named after a period (for a “class” that may
apply several times within the page) or # sign (for
an “id” that appears only once in a page).
After an opening bracket, properties and values
to be applied to that selector are listed, followed
by a closing bracket.
The style information is then removed
from the tag within the page.
Cascading Style Sheets
External Style Sheets
When you think of ALL the many pages that might make up your website, the
idea of keeping multiple internal style sheets becomes overwhelming.
This is where EXTERNAL STYLE SHEETS come in.
Rather than repeating the styles on every page, every page will LINK to an
external sheet that stores the current version of site-wide styles.
Cascading Style Sheets
Creating an External Style Sheet
Cut the styles from inside the document…
…and paste them into a new text file with
the .css extension
(example: styles.css)
Cascading Style Sheets
Linking to an External Style Sheet
In each document, the STYLE tag is replaced with a LINK tag
that points to the CSS document.
It includes a rel attribute that tells the browser we’re linking to
a style sheet.
It also includes an href attibute that
defines which file in our site we are pointing to.
Cascading Style Sheets
CSS Play Time
oCSS Zen Garden (www.csszengarden.com)
This fun site illustrates how the content in a single HTML
page can be made to look radically different through the
use of different CSS style sheets and graphics.
oSEO Friendly (in “activities” folder on flash)
This cool tool can be a personal ‘home page.’
Manipulate the CONTENT by editing the HTML page.
Change the PRESENTATION by editing the CSS page.
The Webmaster’s Toolkit
Web Page Development Tools
oText Editors
Notepad, Notepad2, Notepad++, Browsers
oSoftware Packages
Free, Open Source WYSIWYG Editors
Blue Griffon, W3CSchools HTML Editor (Amaya)
Professional WYSIWYG Editors
Adobe Dreamweaver, Microsoft Expression Web2
WYSIWYG Editors - Dreamweaver
Dreamweaver:
Makes creating and
editing web pages easier
Writes most of the code
for you
Allows editing in
WYSIWYG mode
Still works with same
HTML and other files
Knowledge of HTML, CSS
still important
WYSIWYG Editors - Dreamweaver
Web Technologies
JavaScript
•An object based scripting
language that allows creation
and execution procedures within
a web page
•Does not require plug-ins
(additional programs for the
user to install)
•Widely supported by most
browsers
JavaScript example displays
this dialog box in the
browser window:
<html>
<head>
<title>JavaScript Example</title>
<script type="text/JavaScript">
var foo="Greetings,
visitor!"alert(foo);
</script>
</head>
<body>
</body>
</html>
What is Java?
Three Types of Styles
1. In-Line
2. Embedded or Internal
3. External Style Sheets
http://java.com/en/java_in_action/
What is Java?
Three Types of Styles
1. In-Line
2. Embedded or Internal
3. External Style Sheets
Web Technologies
Web browsers
What they do
Browser extensions
HTML5 and browsers
Why stay current?
Security
Functionality
Downside: compatibility with older sites, tools
Extended URL - for security with secure sites https:
http://www.20thingsilearned.com/en-US/identity/2
http://www.20thingsilearned.com/en-US
Web Design Workshop
Publishing a Web Site
2. Name Server connects
domain name to IP address
of the host computer:
205.178.145.65
1. URL typed in browser:
www.qtlcenters.org
4. Web page is displayed
on the user’s screen.
3. Web page information is
pulled from the
host computer.
Publishing a Web Site
Process for Publishing
oChoose a web host
oRegister domain name(s)
(ideally, with same company)
oConnect domain name you registered to the IP
address of the server
oUpload your site if you haven’t already…
oIf you move your site, must notify registrar AND
web host if they are different.
Publishing a Web Site
Domain Name
Register
domain
name(s)
with a
recognized
registrar.
Web Host
Sign up with
web host
and obtain
login info.
Name Servers
Connect
your
domain
name to
your
IP address.
Copyright 2007 QTL™
Multimedia and Webpage Design
Five Top Tips for Student Achievement
oStudents learn by seeing, hearing, and doing.
oCapitalize on creativity, but set specific goals.
oUse vocabulary terms constantly!
oSimple tasks first, then build on those
oTeach effective use of the Internet
THANK YOU!
[email protected]
[email protected]