Intermediate Web Design

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.

DOWNLOAD THE FILES WE WILL USE TODAY
I 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/

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)

CSS
Intended to simplify HTML
Clean up messy code
Unify style

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 1 Content 2 Content 1 Content 2
style style VS.

style

OLD WAY
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

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.

HOW IT’S ORGANIZED

Html file includes reference to External stylesheet (CSS) in the <head> tag

<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<title>sample title</title>
</head>

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.

TABLE-LESS WEB DESIGN
CSS is also used for layouts:
<table id="header">
<tr>
<td>
this is a header
</td>
</tr>
</table>
…
<div> elements:
<div id="header">
this is a header
</div>
…

Look at how much space is saved!
General rule: don’t use a table unless you’re specifically displaying
spreadsheet type info

<DIV> ORGANIZATION CONT.
Side by side columns using the float property, rather than tables and columns

<div id=“div1”>menu</div> <div
id=“div2”>content</div>

menu content

<DIV> ORGANIZATION CONT.
HTML:

<div id=“div1”>menu</div> <div
id=“div2”>content</div>
CSS:

#div1 { #div2 {
Width:33%; Width:67%;
Float:left; Float:right;
} }

LINKING HTML AND CSS

HTML CSS
<div class=“class1”> .class1 {
</div>
}
<div id=“id2”> #id2 {

</div> }

Use “#” to style ID designators and “.” To style classes

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.

BASIC TEMPLATE
Index.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>

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>

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>
…

PREPARE OUR CSS FILE
Main.css

.bodytext {

}

.menubar {

}

ADD SOME STYLE
Main.css

.bodytext {
color:blue;
font-size:200%;
}

.menubar {
font-family:arial;
}

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.

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

SERVER SIDE INCLUDES (SSI)
HTML inserted into web page where you want the include to appear:

Entire contents of (example) include file:

copyright 2012, <a href="mailto:netid@illinois.edu">your
name</a>

In-line PHP call:
<?php include('includes/footer.php'); ?>

<footer id="contentinfo" class="body">
<br><div align="center">
<p>copyright 2012, <a href="mailto:netid@illinois.edu">your name</a></p>
</div>
</footer>

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

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>

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)

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 <<--… ## //

SCRIPT LIVES IN TWO PLACES
<html>
<head>
<head> includes full code
(full script goes in the <head>)
<body> includes call to the
</head>
code
<body>
(call to script goes in the <body>)
<script language="JavaScript" class="bg">
showImage();
</script>
</body>
</html>

A LOOK AT THE CODE <BODY>
<script language="JavaScript" class="bg">
showImage();
</script>

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

BROWSER VIEW (FIREFOX)

Menu created using PHP
includes

Text styled with
CSS

Random image generated with
Javascript

WHAT IF I WANT TO LEARN SOMETHING ELSE?
Use the Google
Stack Overflow w3schools, are a great resources
Codeyear and other guided lessons

QUESTIONS & COMMENTS
help@support.lis.illinois.edu
@gslis_help_desk

Intermediate Web Design

More Related Content

What's hot

Viewers also liked

Similar to Intermediate Web Design

Recently uploaded

Intermediate Web Design

Editor's Notes