intermediate web design
DESCRIPTION
Intermediate web design. Introductory CSS, Javascript and PHP. Huh?. Instructor: Miles, TA/GA in Instructional Technology Please ask questions. I will try my best to answer them. If I can’t, I will get back to you. - PowerPoint PPT PresentationTRANSCRIPT
INTERMEDIATE W
EB
DESIGN
I NT R O D U C T O R Y C
S S , JA V A S C R I P
T AN D P
H P
HUH?
Instructor: Miles, TA/GA in Instructional TechnologyPlease ask questions. I will try my best to answer them. If I can’t, I will get back to
you.Ask questions via chat, microphone, whatever you’re most comfortable. You can raise
your hand to get my attention if I miss something.I hope to keep this under an hour, but this is the trial run, so I can’t promise anything.
Everything done in this workshop was tested on the Idrive space available to all GSLIS students. Other web hosts may vary.
Don’t get hung up on details. Look for connections and build on what you know.
CRASH COURSESee applications of common web technologiesGet comfortable interacting with things you don’t necessarily
knowLearn basic structures, how to ask questions
• CSS• PHP• Javascript
Keep it simple. We are not producing a beautiful, finished web site. That takes more than an hour.
DOWNLOAD THE FILES WE WILL USE TODAYI recommend following along with the slides, and then looking
at the actual files later.Download link:
http://courseweb.lis.illinois.edu/~mlincol2/workshop.zipYou can upload these files to your Idrive to test them yourself,
or look at the copy I have hosted at: http://courseweb.lis.illinois.edu/~mlincol2/workshop/
Software I use in the screenshots Cyberduck (SFTP Client) (Windows alternative: WinSCP) TextWrangler (Text Editor) (Windows alternative: Notepad++(?)) Firefox (Web Browser) with Firebug Extension (CSS Tool)
GETTING STARTEDThe files we will create today index.php style.css menu.php
CSS• Intended to simplify HTML• Clean up messy code• Unify styleDesignating individual style elements like font, size and color
for every HTML element wastes time and is difficult to manage
CSS simplifies this problem by letting you designate a style once, and link to that style multiple times
Content 1style
Content 2style
Content 1
Content 2
style
VS.
HTML <font size="6"><span style="font-family: Arial; color: rgb(255, 0, 0);">This text is Arial, large. and red</span></font>
display This text is Arial, large. and red
Con: Must be repeated for every element
AKA in-line CSS
OLD WAY
NEW WAYHTML <p class=“newspaper”>Paragraph text will be
gray and Helvetica.</p>CSS p.newspaper {
color: gray;font-family:”helvetica”;}
display Paragraph text will be gray and Helvetica.
HOW IT’S ORGANIZED
Html file includes reference to External stylesheet (CSS) in the <head> tag
Denotes a text file named style.css stored in the subdirectory “css” within the main directory
Later, we will return to the <head> tag to include Javascript.
<head><link rel="stylesheet" href="css/style.css" type="text/css" />…
TABLE-LESS WEB DESIGNCSS is also used for layouts:<table id="header"><tr><td>this is a header</td></tr></table>…
<div> elements:
Look at how much space is saved!General rule: don’t use a table unless you’re specifically
displaying spreadsheet type info
<div id="header">this is a header</div>…
<DIV> ORGANIZATION CONT.Side by side columns using the float property, rather than tables
and columns
menu content
<div id=“div1”>menu</div> <div id=“div2”>content</div>
<DIV> ORGANIZATION CONT.HTML:
CSS:
#div1 {Width:33%;Float:left;}
#div2 {Width:67%;Float:right;}
<div id=“div1”>menu</div> <div id=“div2”>content</div>
Great CSS templates here: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
LINKING HTML AND CSS
HTML CSS<div class=“class1”></div>
<div id=“id2”>
</div>
.class1 {
}#id2 {
}
Use “#” to style ID designators and “.” To style classes
WHY CSS?Can be applied to any HTML elementAllows for flexible stylingEdit once, change all
Where you might see this: Modifying blog/CMS templates:
Wordpress, Tumblr, Drupal, etc.
BASIC HTML TEMPLATEIndex.php<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><html><head><link rel="stylesheet" href="css/style.css" type="text/css" /><title>css example page</title></head><body>(this is where we will put our menubar with some links)
(here is some text we will style using css.)</body></html>
ADD <DIV> TAGSIndex.php<html><head><title>css example page</title></head><body><div>this is where we will put our menubar with some links</div>
<div>here is some text we will style using css.</div></body></html>
GIVE THE <DIV> TAGS A CLASSIndex.php…<div class=“menubar”>this is where we will put our menubar with some links</div>
<div class=“bodytext”>here is some text we will style using css.</div>…
PREPARE OUR CSS FILEMain.css
.bodytext {
}
.menubar {
}
ADD SOME STYLEMain.css
.bodytext {color:blue;font-size:200%;}
.menubar {font-family:arial;}
USEFUL TOOL: FIREBUGFirefox extension that tells you which stylesheet is determining
an element’s style
Useful for complicated setups with multiple stylesheets or when multiple styles are applied to the same element.
PHPServer-side scripting language Installed on the server Processes code embedded in your site
PHP Includes:Similar to CSS, allows you to create something once, use it
anywhere.Useful for areas that repeat on every page like headers,
footers, menubarsAdding a new link to the menubar is a one step process.
• CSS: centralizes style• PHP Includes: centralize content
SERVER SIDE INCLUDES (SSI)HTML inserted into web page where you want the include to
appear:
Entire contents of an example include file:
In-line PHP call:<?php include('includes/footer.php'); ?>
copyright 2012, <a href="mailto:[email protected]">your name</a>
<footer id="contentinfo" class="body"> <br><div align="center">
<p>copyright 2012, <a href="mailto:[email protected]">your name</a></p>
</div></footer>
CREATE OUR INCLUDE FILEMenu.php<ul><li>home link</li><li>about link</li><li>contact link</li></ul>
If I were creating a real site, these would be <a href=“link.com”>link</a>, but I truncated them to save space
CALL THE INCLUDE FILEIndex.php…<div class=“menubar”><?php include(‘includes/menubar.php’); ?></div>
<div class=“bodytext”>here is some text we will style using css.</div></body></html>
REPEATThe include file will appear on any page you call it.If you need to modify your menu, there is one central file to
change (the include file), and the changes will appear in every HTML page where that include is called (version control)
JAVASCRIPTWriting your own code is hardRecycling someone else’s code is simple!We are using some Javascript from http://jscode.com/
js_random_image.shtmlLook for implementation examples, read code comments <<--… ## //
SCRIPT LIVES IN TWO PLACES<html><head>(full script goes in the <head>)</head>
<body>(call to script goes in the <body>)<script language="JavaScript" class="bg">showImage();</script></body></html>
<head> includes full code<body> includes call to the code
A LOOK AT THE CODE <HEAD><script language="JavaScript">// Set up the image files to be used.var theImages = new Array() // do not change this// To add more image files, continue with the// pattern below, adding to the array. Remember// to increment the theImages[x] index!theImages[0] = '200.jpeg'theImages[1] = '300.jpeg’// ======================================// do not change anything below this line// ======================================var j = 0var p = theImages.length;
var preBuffer = new Array()for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i]}var whichImage = Math.round(Math.random()*(p-1));function showImage(){document.write('<img src="'+theImages[whichImage]+'">');}</script>
200.jpeg
300.jpeg
Comments!
TW
A LOOK AT THE CODE <BODY><script language="JavaScript”>showImage();</script>
IN REVIEWWe used CSS to style text on our website, and we can use it to
change the look of a large amount of content easily.We used PHP Includes to control content on our websiteWe used Javascript we found on the web to do a very simple
task
BROWSER VIEW (FIREFOX)
BROWSER VIEW (FIREFOX)
Menu created using PHP includes
Text styled with external CSS
Random image generated with Javascript
WHAT IF I WANT TO LEARN SOMETHING ELSE?Google is your best friendStack Overflow and w3schools, are great resourcesCodeyear and other guided lessons
