Fundamentals of Web Design
Feb 11, 2016
Fundamentals of Web Design . What We’ll Cover. FTP - why it should be the first tool in your web developer toolbox. HTML basics, what's involved in writing it and understanding the basic elements of a webpage. Cascading Style Sheets (CSS) and how they control the presentation of HTML. - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
What We’ll Cover FTP - why it should be the first tool in your web developer toolbox.
HTML basics, what's involved in writing it and understanding the basic elements of a webpage.
Cascading Style Sheets (CSS) and how they control the presentation of HTML.
Javascript and its role in user interaction, how it integrates and why it matters.
Flash and what role it plays in presentation, interaction and the ups and downs of using it.
PHP and ASP will be discussed in very general terms with an eye toward use of dynamic pages and Content Management Systems.
But first, some background...
Basics of how the web works and how your website fits into the big picture.
Host
User
Web Page
DomainRegistry
Domain Name
Resolver
IP address00.00.00.00
InternetServiceProvider
Domain Name Registrars
HTTP request:“www.sitename.com”
HTTP response
Basic HTML pages – ‘flat website’
Advantages: Speed / FlexibilityDisadvantages: Labor-intensive / navigation issues
Host
User
Web Page
DomainRegistry
DNR
IP address00.00.00.00
ISP
Domain Name Registrars
HTTP request:“www.sitename.com”
HTTP response
Database-driven website
PHPScripts
MySQLDatabase
“LAMP”• Linux• Apache• MySQL• PHP
CMS – Content Management System• WordPress• Drupal• Joomla• many more
Advantages: Automation of navigation, easy to change overall site design (‘theme’)Disadvantages: Speed / Server Load / Script conflicts (plugins)
FTP FTP = File Transfer Protocol
This is the method you’ll use to move files to and from your host.
The better the tool integrates with your computer, the easier it will be to publish your site changes.
There are web-based tools but I’ve found them inefficient.
Higher-end tools like Interarchy are blazing fast and support all the special cases you’ll run into. ‘dot’ files being one of them.
Tight integration with your text editor can make editing easier.
Can be used to change file permissions.
Examples of FTP ProgramsFor Mac:
Interarchy(http://nolobe.com/interarchy/)
Cyberduck(http://cyberduck.ch/)
Transmit(http://www.panic.com/transmit/)
For PC:
WS-FTP(www.ipswitchft.com/)
FTP Explorer(http://www.ftpx.com/)
Smart FTP(http://www.smartftp.com/)
HOST
FTP in the scheme of things
HOST
Editor on local PC
Web Page
FTP
Edit/Previewwithin tool
Web Page
FTP
Text editor / freestanding FTP Dreamweaver / IDE
BrowserView
http
GUI EDITORS - WYSIWYG Dreamweaver
Beginners always seem to start with this. It’s a great tool. The preview isn’t quite right, it’s slow, it’s big, it’s expensive.
Has a built-in FTP tool. Tight integration with Adobe CS.
FrontPage Very common starting point on PC. Solid and serviceable.
Deep integration with Windows OS.
Plain-text editor Cheap. Fast. Efficient. Reliable. Trustworthy. Multi-platform. My choice – BBEdit for the Mac.
Downside: not quite as ‘helpful’ as GUI apps.
TEXT EDITORSFor Mac:
BBEdit(http://www.barebones.com)
Text Wrangler(http://www.barebones.com)
SubEthaEdit(http://www.codingmonkeys.de/)
For PC:
NotePad++(notepad-plus.sourceforge.net/)
Crimson (www.crimsoneditor.com)
jEdit (http://www.jedit.org/)
HTML BASICSHTML – Hyper Text Markup Language
HTML is a ‘markup’ language. It consists of TAGS: <b>This is bold</b> - looks a lot like the pre-WYSIWYG wordprocessor ‘WordStar’. Browsers interpret and ‘present’ the markup code.
Tags generally ‘open’ and ‘close’ – except for single-element tags like<img>, <br> and <hr>.
Images and link paths can be ‘absolute’ or ‘relative’ – demo
For many years HTML page design was done using the <table> tag –in the last decade CSS (Cascading Style Sheets) support in browsers has improved to where object-oriented design techniques can be used, separating design from content and allowing site-wide design changeswith minor edits.
HTML PAGE ELEMENTS
DOCTYPE – Rendering rules for HTMLHTML – Beginning of hypertextHEAD – Title / Links / Scripts / MetaBODY – The visible content of the page
Anatomy of an HTML page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Page Title</title> <link rel="stylesheet" href="/resources/my_styles.css" media="all"> <script src="/resources/js/my_script.js" type="text/javascript" language="javascript"></script> <meta name="keywords" content="dog, cat, bird, mouse, platypus"> </head> <body> <div id="pagewidth"> <div id=”banner">Page Banner</div> <div id="wrapper" class="clearfix"> <div id="twocols" class="clearfix"> <div id="maincol">Main Content Column</div> <div id="rightcol”>Right Column</div> </div> <div id="leftcol">Left Column</div> </div> <div id="footer">Footer</div> </div> </body></html>
banner
footer
rightcolmaincolleftcol
wrapper
Two cols
pagewidth
CSS – CASCADING STYLESHEETSDefinitions of STYLES for HTML Elements
Rather than:<p><font size=“3”>Doo Dah</font></p>(as inline style)<p style=“font-size:12px;”>Doo Dah</p>(as line in stylesheet)p { font-size:12px; }
Can also refer to DIVisions of a page.(live demo)
CSS Cheat Sheet
http://www.lesliefranke.com/files/reference/csscheatsheet.html
JavascriptJavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites.
- Wikipedia
JAVASCRIPTCommon uses:• Form validation – check user input before submission• Popups• Hide/show page elements• Image rollover swaps
Javascript can be placed in• A command within a tag (MouseOver)• The <head> portion of a document• The <body> portion of a document• An externally-referenced file
Frameworks – many commons functions are available as ‘frameworks’
FLASHFlash allows the presentation of scalable, vector-based information.It has numerous advantages but is not intended as a primary toolfor constructing general-purpose websites.Here’s a few drawbacks:• How do you bookmark your location? Not supported – all navigation is absolute and programmatic.• Requires an add-on to the browser. Largely supported but can be issue.• Complex animations can run slowly on low-end machines, yielding low framerates and jerky display.
Flash is a great tool to present an animated piece of content but care should be taken to factor in user issues if the entire site will be built in it.
PHP and ASP – the dynamic duo PHP – Hypertext Preprocessor – a
language designed to create HTML using programming logic
ASP – Active Server Pages – the Microsoft version of PHP.
Information Architecture The blueprint that describes how
information is organized and structured.
The relative position of files and folders
The ‘concept’ behind your navigation
Product ...
Product 2
Home
About
Contact form
Products
Map
Staff list
Links
Products Order Form
about.htmlcontact.htmlindex.htmllinks.htmlmap.htmlproduct_list.htmlproducts (directory) product1.html product2.html . . . product-x.htmlstaff.htmlstore (directory) order.html validate.js
LEARNING RESOURCESHTML Tutorial (http://www.w3schools.com/html/)HTML Reference (http://www.w3schools.com/tags/)HTML Validator (http://validator.w3.org/)HTML Cheat Sheet (http://www.webmonkey.com/reference/HTML_Cheatsheet)CSS Tutorial (http://www.w3schools.com/css/)WestCiv CSS Guide (http://www.westciv.com/style_master/academy/css_tutorial/)CSS Cheat Sheet (http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/)CSS Layouts Step-by-step (http://www.webreference.com/authoring/style/sheets/layout/advanced/)Javascript Tutorial (http://www.w3schools.com/JS/default.asp)
TOOLS4096 Color Wheel (http://www.ficml.org/jemimap/style/color/wheel.html)
CSS Creator (http://www.csscreator.com/version2/pagelayout.php)
Layout-o-matic (http://www.inknoise.com/experimental/layoutomatic.php)
Little Boxes (http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
Entity Lookup (http://www.digitalmediaminute.com/reference/entity/index.php)
Stu Nicholls (http://www.cssplay.co.uk/)
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843)
CONTENT MANAGEMENT SYSTEMS
WordPress Blogging Community – set up a free blog and get used to using WordPress in a controlled environment before ‘self-hosting’(http://www.wordpress.com)
WordPress Developer Community – once you have your feet wet, get your own domain name and host, then roll your own look feel(http://www.wordpress.org)
Boulder Digital Arts courses on installing, managing and customizing(http://www.boulderdigitalarts.com/training/details.asp?offering=216)(http://www.boulderdigitalarts.com/training/details.asp?offering=217) (http://www.boulderdigitalarts.com/training/details.asp?offering=235)
Related Documents
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://static.cupdf.com/doc/110x72/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
