1 / 35

Intermediate web design

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.

maree
Download Presentation

Intermediate web design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Intermediate web design Introductory CSS, Javascript and PHP

  2. 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. • 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.

  3. Crash course • See 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 are not producing a beautiful, finished web site. That takes more than an hour.

  4. Download the files we will use today • I recommend following along with the slides, and then looking at the actual files later. • Download link: http://courseweb.lis.illinois.edu/~mlincol2/workshop.zip • 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/ 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)

  5. Getting Started • The files we will create today • index.php • style.css • menu.php

  6. CSS • Intended to simplify HTML • Clean up messy code • Unify style • 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 style Content 2 style Content 1 Content 2 VS. style

  7. Old way Con: Must be repeated for every element AKA in-line CSS

  8. new way

  9. 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.

  10. Table-less web design • CSS is also used for layouts: <div> elements: Look at how much space is saved! General rule: don’t use a table unless you’re specifically displaying spreadsheet type info

  11. <div> Organization Cont. • Side by side columns using the float property, rather than tables and columns menu content

  12. <div> Organization Cont. • HTML: • CSS: #div1 { Width:33%; Float:left; } #div2 { Width:67%; Float:right; }

  13. Linking HTML and CSS Use “#” to style ID designators and “.” To style classes

  14. Why CSS? • Can be applied to any HTML element • Allows for flexible styling • Edit once, change all • Where you might see this: Modifying blog/CMS templates: • Wordpress, Tumblr, Drupal, etc.

  15. Basic HTML template

  16. Add <div> tags

  17. Give the <div> tags a class

  18. Prepare our css file

  19. Add some style

  20. 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.

  21. 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

  22. Server Side Includes (SSI) • HTML inserted into web page where you want the include to appear: • Entire contents of an example include file:

  23. Create our include file

  24. Call the include file

  25. Repeat • The 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)

  26. Javascript • Writing your own code is hard • Recycling someone else’s code is simple! • We are using some Javascriptfrom http://jscode.com/js_random_image.shtml • Look for implementation examples, read code comments <<--… ## //

  27. Script lives in two places

  28. A look at the code <head> 200.jpeg 300.jpeg

  29. TW

  30. A look at the code <body>

  31. 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

  32. Browser view (firefoX)

  33. Browser view (firefoX)

  34. What if I want to learn something else? • Google is your best friend • Stack Overflow and w3schools, are great resources • Codeyear and other guided lessons

  35. Questions & Comments & Feedback • help@support.lis.illinois.edu • @gslis_help_desk

More Related