1 / 12

Enhanced Web Site Design Stanford University Continuing Studies CS 22

Enhanced Web Site Design Stanford University Continuing Studies CS 22. Mark Branom branom@alumni.stanford.edu 650.224.1728 Course Web Site: http://www.stanford.edu/group/csp/cs22/. Course Description.

reece-oneill
Download Presentation

Enhanced Web Site Design Stanford University Continuing Studies CS 22

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. Enhanced Web Site DesignStanford University Continuing Studies CS 22 Mark Branom branom@alumni.stanford.edu 650.224.1728 Course Web Site: http://www.stanford.edu/group/csp/cs22/ Week 1

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

  3. Administrivia Grading 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

  4. More Administrivia • Course Website • http://www.stanford.edu/group/csp/cs22/ • How to reach me: • branom@alumni.stanford.edu • markb@stanford.edu • markbranom@gmail.com • 650-224-1728 Week 1

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

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

  7. Week 1 Agenda • HTML Review • Using Dreamweaver • Top 10 Biggest Misteaks! Week 1

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

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

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

  11. In-Class Exercises • Set up a Freezoy account Week 1

  12. The top ten biggest misteaks… • Next week: Finish discussing The Biggest Mistakes in Web Design! Week 1

More Related