Web Site Design - Lecture Overview

What will you get after completing this course? What do you need to do in the coming 8 months? How about the course contents and their organization? Do you need to buy a textbook for the course study? What will you do in tutorial class? Are there any practical and laboratory exercises for you? Do you need to do assignments or projects?

World War 3 and the birth of the Internet - What is HTML? - Create stylish sites with CSS - Introducing Javascript - The magic of multimedia - Domain names & servers - Database-driven websites - Should I hire a web designer?

Introduction to HTML - Body copy - Headings - Hyperlinks - Images - Lists - Tables - Forms - Header & footer - Navigation - Search box - scrolling areas

Three different ways to apply CSS to HTML - CSS Selectors, Properties, and Values - How to use color - How to manipulate text - How to space things out - How to make a border around an element - Class and ID Selectors - Grouping and Nesting

Setting a goal for your site - Understanding your visitors - Check out the competition - What to include on your site - The 3 click rule - 4 types of web page - Creating a sitemap - The essential information - Planning your look-and-feel - 7 steps to a great site

What is page layout? - Page layout is related to web page size and screen resolution - Fixed page layout or fluid page layouts? - Some other options in page layouts - Organizing page content - Table-based page layouts - CSS-based page layouts - Using grids in page layouts - Using color - Typography: typeface and fonts - Other elements in layout design

Functions of web gaphics - Choosing image for your site - Ways to get images for your site - Using thumbnails - Using illustrations and icons - Web graphics formats - Optimizing your website images - Writing useful ALT text - Background images

Linking to other web pages - Linking to an email address - Adding image links - Adding a navigation bar - Why be conventional? - Navigation on large sites - Using a drop-down menu - Breadcrumb trails - Adding a site search - Adding a sitemap

What are web forms? - How forms work - Basic form elements - Adding a contact form - Error checking - Designing easy to use forms - Forms: top design tips

This lecture explains the benefits of using web standards. It uses the presentation by Max Design (http://www.maxdesign.com.au/presentation/benefits/) as the major learning materials.

Introduction to Web accessibility - 23 steps to a more accessible website - top accessibility tips - Web accessibility standards - readings and resources for Web accessibility

What is HTTP? - Structure of HTTP Transactions - What are HTTP Headers? - HTTP Request Structure - HTTP Request Method: GET - HTTP Request Method: POST - HTTP Response Structure - HTTP Status Codes - HTTP Headers in HTTP Requests - HTTP Headers in HTTP Responses

Sliding Panel - Tabs - Scroll to Anchor - Accordion - Tooltips - Content Popup - Image popup - Image zoom - Image gallery/slideshow - Carousel - Form Styling - Form Validation - Password strength - Charts and Graphs - Maps - Flash and Image Text Replacement - CSS Stylesheet Switcher - Calendars and Datepicker

Sound formats - Video formats - Browser supports for multimedia - Object Elements - Use Flash object to embed MP3 - Use JavaScript to embed multimedia

Check Content and Style - Standards and Validation - Functionality Check - Performance Issues - Security and Risk - Search Engine Visibility - Set-up Web Analytics and Metrics - Some finishing touches

Search engine optimization - Submitting your site to Google - Keywords: what they are and how to use them - Inside the mind of Google - 3 search engine myths - Why web standards matter - Blogging & podcasting - Advertise with Google AdWords - The 5 worst SEO mistakes - 4 cheap ways to market your site - Getting 'real world' exposure - Promoting your site with email - Who's visiting your website? - The dark side of SEO

SQL Injection - Cross Site Scripting (XSS) - Path Traversal - Cross-Site Request Forgery - Remote File Inclusion (RFI)

Make Fewer HTTP Requests - Use a Content Delivery Network (CDN) - Add Expires or Cache-Control Header - Gzip Components - Put Stylesheets at the Top - Put Scripts at Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Minify JavaScript and CSS - Avoid Redirects - Remove Duplicate Scripts - Flush the Buffer Early - Reduce the Number of DOM Elements - Split Components Across Domains - Reduce Cookie Size - Use Cookie-free Domains for Components - Choose <link> over @import - Optimize Images - Don't Scale Images in HTML - Avoid Empty Image src

HTML5 - CSS3 - Microformats

What makes a good business website? - Defining your brand - Standing out from the crowd - Content Management Systems (CMS) - How CMS Works? - Web Databases - Ecommerce - Accepting payment

This lecture gives you an overview of web technologies you need to understand as a Web developer. It also gives you a real-time demonstration of every steps in launching a simple web-based application in a new domain. It also suggests Web developer's toolbox.