slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Enhanced Web Site Design Stanford University Continuing Studies CS 22 PowerPoint Presentation
Download Presentation
Enhanced Web Site Design Stanford University Continuing Studies CS 22

Loading in 2 Seconds...

play fullscreen
1 / 12

Enhanced Web Site Design Stanford University Continuing Studies CS 22 - PowerPoint PPT Presentation

  • Uploaded on

Enhanced Web Site Design Stanford University Continuing Studies CS 22. Mark Branom 650.224.1728 Course Web Site: Course Description.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Enhanced Web Site Design Stanford University Continuing Studies CS 22' - derry

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Enhanced Web Site DesignStanford University Continuing Studies CS 22

Mark Branom


Course Web Site:

Week 1

course description
Course Description
  • This class is designed to be the continuation of Stanford's Continuing Studies CS03/CS22. In this class we'll explore some of the enhanced techniques webmasters use to create dynamic web pages.
  • Topics will include using Dreamweaver, a brief review of the Web page creation process, site organization techniques and Web Design issues, Cascading Style Sheets (including CSS3), JavaScript, and incorporating video and sound use in your website.
  • We'll also cover mobile devices and creating content for mobile, creating HTML5 forms and CGI scripting (Perl and PHP), incorporating eCommerce to your site, and creating dynamically-produced web content. In addition, we'll touch on some of the various new Web 2.0 tools like RSS and Content-Management Systems (CMS) like WordPress, Drupal and Joomla!

Week 1



You have the option of taking this course for a letter grade, CR/NC, or as an Audit.

Letter Grade CR/NC NGR

Attendance Required Required Recommended

Homework Required Required Recommended

Project Required Required Not required

By request By Request Default choice

Week 1

more administrivia
More Administrivia
  • Course Website
  • How to reach me:
    • 650-224-1728

Week 1

more administrivia1
More Administrivia
  • You will need:
    • Access to a computer
    • Familiarity with Basic HTML (I assume you have created a web site before)
    • Access to the internet (many free ISPs exist)
    • A freezoy account (we’ll do it in class)

Week 1

course syllabus
Course Syllabus
  • Week 1 - Basic HTML Review; Top Ten Misteaks in Web Design
  • Week 2 - Continue discussing the Top Ten Misteaks
  • Week 3 - The Mobile Web
  • Week 4 - Forms/CGI, PHP Basics, eCommerce, HTML5 Forms
  • Week 5 - Cascading Style Sheets: The Basics (CSS1)
  • Week 6 - Cascading Style Sheets: Advanced Usage (CSS2 & CSS3)
  • Week 7 - Limiting Access to Websites (passwords, etc.)
  • Week 8 - Server-Side Includes, JavaScript and Cookies
  • Week 9 - Content Management Systems (Drupal, etc.)
  • Week 10 - More on CMSs, Embedding sound/video, HTML5 Video

Week 1

week 1 agenda
Week 1 Agenda
  • HTML Review
  • Using Dreamweaver
  • Top 10 Biggest Misteaks!

Week 1

html review
HTML review
  • HTML stands for "HyperText Markup Language"
  • HTML is a collection of text surrounded by tags which modify the text of the document.
  • All tags are encoded in angle brackets (< >).
  • In general, tags work in pairs -- one to turn on the modification, one to turn it off. Stop tags look just like start tags except they have a slash (/) in front.

<tag>affected text</tag>

  • Some tags work on their own. We call these the simple, empty, basic, or "singlet" tags. The Horizontal Rule tag <hr /> is an example.
  • Most tags have attributes which can modify how they function:

<tag attribute="value">

affected text


tag examples
Tag examples

<em>I want this in italics</em>

is processed by the browser to look like:

I want this in italics

<p align="center">I want this new paragraph to be centered</p>

is processed by the browser to look like:

I want this new paragraph

to be centered

using dreamweaver
Using Dreamweaver
  • Fortunately, doing EVERYTHING by hand is no longer necessary.
  • Desktop WYSIWYG editors such as Dreamweaver and FrontPage/Expression Web or web-based tools like TinyMCE and CKEditor make it much easier to create dynamic web pages.
in class exercises
In-Class Exercises
  • Set up a Freezoy account

Week 1

the top ten biggest misteaks
The top ten biggest misteaks…
  • Next week: Finish discussing The Biggest Mistakes in Web Design!

Week 1