intermediate web design
DESCRIPTION
A crash courseTRANSCRIPT
![Page 1: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/1.jpg)
INTE
RMEDIATE
WEB
DESIGN
I NT
RO
DU
CT
OR
Y C
SS
, J A
VA
SC
RI P
T A
ND
PH
P
![Page 2: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/2.jpg)
CRASH COURSE
See a few applications of common web technologies
Get comfortable interacting with things you don’t necessarily know
Learn basic structures, how to ask questions
• CSS
• PHP
• Javascript
Keep it simple. We will not produce a beautiful, finished web site. That takes time.
![Page 3: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/3.jpg)
DOWNLOAD THE FILES WE WILL USE TODAYI recommend following along with the slides, and then looking
at the actual files later.
Download link:
You 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/
![Page 4: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/4.jpg)
GETTING STARTED
The files we will create today index.php style.css menu.php
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)
![Page 5: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/5.jpg)
CYBERDUCK SFTP CLIENT
![Page 6: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/6.jpg)
CSS
Intended to simplify HTML
Clean up messy code
Unify style
![Page 7: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/7.jpg)
CSS (CONTINUED)
Designating 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.
![Page 8: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/8.jpg)
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
![Page 9: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/9.jpg)
NEW WAY
HTML <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.
![Page 10: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/10.jpg)
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" /><title>sample title</title></head>
![Page 11: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/11.jpg)
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>…
![Page 12: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/12.jpg)
<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>
![Page 13: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/13.jpg)
<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>
![Page 14: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/14.jpg)
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
![Page 15: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/15.jpg)
WHY CSS?
Can be applied to any HTML element
Allows for flexible styling
Edit once, change all
Where you might see this: Modifying blog templates:
Wordpress Drupal Tumblr Etc.
![Page 16: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/16.jpg)
BASIC TEMPLATEIndex.php
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><html><head><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>
![Page 17: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/17.jpg)
TEXTWRANGLER
![Page 18: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/18.jpg)
ADD <DIV> TAGS
Index.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>
![Page 19: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/19.jpg)
GIVE THE <DIV> TAGS A CLASS
Index.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>…
![Page 20: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/20.jpg)
PREPARE OUR CSS FILE
Main.css
.bodytext {
}
.menubar {
}
![Page 21: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/21.jpg)
ADD SOME STYLE
Main.css
.bodytext {color:blue;font-size:200%;}
.menubar {font-family:arial;}
![Page 22: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/22.jpg)
USEFUL TOOL: FIREBUG
Firefox 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.
![Page 23: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/23.jpg)
PHP
Server-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, menubars
Adding a new link to the menubar is a one step process.
CSS: centralizes style
PHP Includes: centralize content
![Page 24: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/24.jpg)
SERVER SIDE INCLUDES (SSI)
HTML inserted into web page where you want the include to appear:
Entire contents of (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>
![Page 25: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/25.jpg)
CREATE OUR INCLUDE FILE
Menu.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
![Page 26: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/26.jpg)
CALL THE INCLUDE FILE
Index.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>
![Page 27: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/27.jpg)
REPEAT
The include file will appear on any page you call it.
If you need to modify your menu, there is only one file to change, and the changes will appear everywhere (version control)
![Page 28: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/28.jpg)
JAVASCRIPT
Writing your own code is hard
Recycling someone else’s code is simple!
We are using some Javascript from http://jscode.com/js_random_image.shtml
Look for implementation examples, read code comments <<--… ## //
![Page 29: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/29.jpg)
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
![Page 30: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/30.jpg)
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!
![Page 31: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/31.jpg)
TW
![Page 32: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/32.jpg)
A LOOK AT THE CODE <BODY>
<script language="JavaScript" class="bg">showImage();</script>
![Page 33: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/33.jpg)
IN REVIEW
We 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 website
We used Javascript we found on the web to do a very simple task
![Page 34: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/34.jpg)
BROWSER VIEW (FIREFOX)
![Page 35: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/35.jpg)
BROWSER VIEW (FIREFOX)
Menu created using PHP includes
Text styled with CSS
Random image generated with Javascript
![Page 36: Intermediate Web Design](https://reader036.vdocuments.us/reader036/viewer/2022070304/54c5d70f4a7959e2408b4647/html5/thumbnails/36.jpg)
WHAT IF I WANT TO LEARN SOMETHING ELSE?Use the Google
Stack Overflow w3schools, are a great resources
Codeyear and other guided lessons