Web Design Course Outline

Duration: 18 hrs

This course covers the important aspects in the design of web pages using Dreamweaver or Open source equivalents if Adobe Dreamweaver is not available. Topics include web layout and design, user interface principles, web interactivity and integration of multimedia elements. The training is usually held at DLSU's multimedia laboratory.

Course content prepared by Rey Mendoza,Jr.

Day one

Introduction to the Internet (30 mins)

This will provide the participant with an understanding on how the Internet began and grew to what it is today.

Learners will also learn basics of email, browsing and searching skills required to use the Internet as an effective

business tool. An overview of current web technologies will also be discussed.

Web Development Process ( 2 hours)

This is a pre-planning , structured to offer insight into the many thought processes involved in developing a

website. Our goal here is to help you realize what is viewed in today's online industry as professional and

standards compliant as well as an understanding of usability and accessibility in design. This will provide you

with the steps required to have you thinking about your design, layout and development of your online presence.

Web Graphics (1 hour 30 mins)

This will teach participants how to use web graphics in the web, what resolution to use, what formats to use for

specific purposes and what tools are available for these applications

Programming Languages (1 hour)

An overview of what programming languages participants need to know to be able to provide solutions to specific

problems and situations . From Javascript to XHTML and the ubiquitous AJAX, all these will be tackled.

Web Design Tools (1 hour)

A discussion of available tools for web design, both commercial and free ware versions will be compared,

highlighting the pros and cons of using each tools.

Day Two

If Dreamweaver is not available, Amaya, HTML Kit or Firefox with web developer extension will be used. For MAC users Amaya will be your choice.

For CSS editor - Topstyle Lite is a free option for beginners, Dreamweaver has an integrated CSS editor

Using Dreamweaver (5 hours)

Lesson 1: Introducing the Interface

Lesson 2: Creating Your First Website

Lesson 3: Adding Images & Links

Lesson 4: Creating Sites Using Templates

Lesson 5: Designing with Tables

Lesson 6: Creating Online Forms

Lesson 7: Saving Time with Libraries, Assets, & More

Lesson 8: Creating Websites with Frames

Lesson 9: Dreamweaver Tips & Tricks

Web Site Marketing Strategies (1 hour)

In this course you will learn how to build effective keyword phrases that you will implement as part of your web

marketing strategy. Search Engine rankings play a key role in the success of online businesses, therefore, a heavy

emphasis is placed on these strategies in this course. Topics include: basics of search engine optimization (SEO)

and search engine marketing (SEM); how search engines work; how to build your keywords; how to implement

those keywords strategically; factors influencing ranking; SEO info and guidelines of Google, MSN and Yahoo;

analyzing your competition.

Day Three

If Dreamweaver is not available, Amaya, HTML Kit or Firefox with web developer extension will be used. For MAC users Amaya will be your choice.

Using Dreamweaver , continued (5 hours)

Lesson 1: Rollovers & Other Image Tricks

Lesson 2: Saving Time with Templates

Lesson 3: Designing with Cascading Style Sheets

Lesson 4: Creating Precise Designs Using Layers

Lesson 5: Using Behaviors to Add Interactivity

Lesson 6: Adding Audio, Video, & Flash to a Page

Lesson 7. Testing Your Website

Lesson 8. Publishing & Managing Your Website

Lesson 9. Working in the Code

Lesson 10. Building a Dynamic Website: Getting Started

Lesson 11. Building a Dynamic Website: Setting Up Pages

Lesson 12. Troubleshooting Your Website

The Business side of Web Design (1 hour)

This will discuss what you need in building a web design business. From web development questionnaire to

preparing a contract and following up on your balance of professional fees.

========================================================

Detailed course outline

Day one

Introduction to the Internet

This will provide the participant with an understanding on how the Internet began and grew to what it is today.

Learners will also learn basics of email, browsing and searching skills required to use the Internet as an effective

business tool. An overview of current web technologies will also be discussed.

Web Development Process

This is a pre-planning , structured to offer insight into the many thought processes involved in developing a

website. Our goal here is to help you realize what is viewed in today's online industry as professional and

standards compliant as well as an understanding of usability and accessibility in design. This will provide you

with the steps required to have you thinking about your design, layout and development of your online presence.

● Web Development Process

● Web Development Questionnaire

● Usability

● Accessibility

● Web Standards

● W3C - World Wide Web Consortium

Web Graphics

This will teach participants how to use web graphics in the web, what resolution to use, what formats to use for

specific purposes and what tools are available for these applications

● Jpeg - Joint Photogrpahers Expert group

● Gif - Graphic Interchange Format

● PNG - Portable network graphics

● TIFF - Tagged Interchange File Format

● PSD - Photoshop

Programming Languages

An overview of what programming languages participants need to know to be able to provide solutions to specific

problems and situations . From Javascript to XHTML and the ubiquitous AJAX, all these will be tackled.

● AJAX, Web 2.0

● ASP, ASP.net

● PHP

● HTML, XHTML

● Javascript Frameworks – Jquery, Ruby on Rails

● CSS, XSLT

● CMS

Web Design Tools

A discussion of available tools for web design, both commercial and freeware versions will be compared,

highlighting the pros and cons of using each tools.

● Dreamweaver

● Photoshop

● Flash

● Gimp

● Nvu

● Portable Apps

● Server2Go

Day Two - details

Lesson 1: Introducing the Interface

1. Getting Started

2. The Insert Bar & Properties Inspector Panel

3. The Menu Bar

4. The Status Bar

5. Preferences

Lesson 2: Creating Your First Website

1. Setting Up a New or Existing Site

2. Creating a New Document

3. Adding & Formatting Text

4. Setting Fonts for a Web Page

5. Creating Lists, Indenting, & Changing Text Color

Lesson 3: Adding Images & Links

1. Saving Images for the Web

2. Inserting & Aligning Images on a Web Page

3. Creating Links & Previewing in a Browser

4. Creating an Email Link

5. Creating a Jump Link & Testing Links

Lesson 4: Creating Sites Using Templates

1. Browsing Templates

2. Creating a Website from a Template

3. Adding Images to a Starter Page

4. Updating Files & Changing Background Colors

Lesson 5: Designing with Tables

1. Creating Tables on a Web Page

2. Altering Tables Using the Properties Inspector

3. Creating a New Site

4. Placing Images & Graphics into Tables

5. Aligning Text & Graphics in Tables

6. Adding a Background Color

7. Using Tracer Images in Layout Mode

8. Building Pages over Tracer Images

9. Inserting Text from Other Files

10. Tweaking Layouts to Create Perfect Pages

Lesson 6: Creating Online Forms

1. Setting Up an Online Form

2. Adding Radio Buttons & List Menus

3. Creating Text Fields & Areas

4. Adding Checkboxes & Submit Buttons

5. Setting Properties for Form Submission

Lesson 7: Saving Time with Libraries, Assets, & More

1. Getting Started with Site Setup & Linking

2. Creating & Using Library Items

3. Editing Library Items

4. Using the Assets Panel

5. Using the Find and Replace Command

6. Checking Spelling & Editing a Dictionary

Lesson 8: Creating Websites with Frames

1. Introducing Frames & Framesets

2. Creating Frames & Framesets

3. Saving Framesets

4. Tricks for Inserting Images & Setting Scroll Bars

5. Using Tables with a Frameset

6. Linking Thumbnail Images with Full-Size Images

7. Dos & Don'ts about Using Frames

Lesson 9: Dreamweaver Tips & Tricks

1. Integrating Photoshop® with Dreamweaver

2. Setting Display Options

3. Saving Features as Favorites

4. Organizing Files & Folders

5. Targeting Links

6. Adding Metatags

7. Using the History Panel

8. Adding PDFs to Web Pages

9. Using Rollovers for Fun & Games

10. Using Animated GIFs

11. Backing It Up

Web Site Marketing Strategies

In this course you will learn how to build effective keyword phrases that you will implement as part of your web

marketing strategy. Search Engine rankings play a key role in the success of online businesses, therefore, a heavy

emphasis is placed on these strategies in this course. Topics include: basics of search engine optimization (SEO)

and search engine marketing (SEM); how search engines work; how to build your keywords; how to implement

those keywords strategically; factors influencing ranking; SEO info and guidelines of Google, MSN and Yahoo;

analyzing your competition.

● SEO in General

● Google Rankings

● SEO Tools

● SEO Tips and Tricks

Day Three

Lesson 1: Rollovers & Other Image Tricks

1. Creating & Inserting Rollover Images

2. Drawing Image Maps

3. Cropping Images on a Page

4. Resizing & Slicing Images in Fireworks®

Lesson 2: Saving Time with Templates

1. Creating a Template from an Existing Page

2. Setting Editable & Uneditable Regions

3. Setting Repeating & Optional Regions

4. Creating New Pages Based on Templates

5. Placing Links in a Template

6. Altering & Updating Templates

7. Nesting, Exporting & Using Contribute

Lesson 3: Designing with Cascading Style Sheets

1. Introducing Cascading Style Sheets

2. Creating a New Class Style

3. Creating an External Style Sheet

4. Applying External Style Sheets

5. Modifying External Style Sheets

6. Editing Style Properties

7. Defining Rules for Styles

8. Working with Predefined Styles

Lesson 4: Creating Precise Designs Using Layers

1. Loading & Organizing Images

2. Creating a Tracing Image

3. Drawing Layers & Inserting Images

4. Inserting Text & Using Styles

5. Sizing & Aligning Layers Precisely

6. Using Tables within Layers

7. Stacking Multiple Layers

8. Adding Background Images

9. Arranging Layers Using the Z Index

Lesson 5: Using Behaviors to Add Interactivity

1. Introducing Behaviors

2. Using the Behaviors Panel

3. Applying & Changing Behaviors

4. Creating a Pop-Up Window

5. Creating Status Bar Text

6. Combining Image Maps & Behaviors

7. Getting More Behaviors

Lesson 6: Adding Audio, Video, & Flash™ to a Page

1. Viewing a Website Made in Flash

2. Inserting & Embedding a Flash Site

3. Exploring the Flash Properties Panel

4. Inserting Flash Buttons & Text

5. Learning about Streaming Media File Formats

6. Creating Links to Video Files

7. Embedding a QuickTime™ Video in a Page

8. Using the QuickTime Parameters

9. Embedding a Windows Media® Video into a Page

10. Adding Audio to a Web Page

11. Changing the Audio Parameters

Lesson 7. Testing Your Website

1. Setting Up Your Site for Testing

2. Checking Links

3. Identifying & Dealing with Orphaned Files

4. Changing Links Sitewide

5. Using the Check Accessibility Function

6. Testing Your Work with the Site Reports Option

7. Recreating Site Cache

8. Visualizing Your Site in Map View

9. Using the Locate in Site Feature

10. Checking for Browser Compatibility

Lesson 8. Publishing & Managing Your Website

1. Setting Up a Site

2. Setting Up the Server Information for FTP

3. The FTP File Panel Options & Viewing Remote Files

4. Transferring Files to & from a Server

5. Working with the Synchronize Button

6. Alternative Dedicated FTP Programs

7. Activating Team Management Features

8. Using the File Check In & Check Out Features

9. Working with Design Notes

10. Setting Options in the File View Columns Dialog Box

11. Enabling Cloaking

12. Using the Compare with Remote Function

Lesson 9. Working in the Code

1. Introducing HTML

2. Previewing Code in a Browser

3. Editing HTML

4. Exploring Code View Options

5. Setting Preferences

6. Using Code Hints

7. Editing Tags & Creating Snippets

8. Using the Code Inspector & Cleaning Up HTML

Lesson 10. Building a Dynamic Website: Getting Started

1. Introducing Database Websites

2. Installing Internet Information Services (IIS)

3. Installing a Testing Server

4. Setting Up a Data Source Name (DSN)

5. Selecting Security Options

6. Preparing to Create a Dynamic Website

7. Creating an ASP JavaScript™ Page

Lesson 11. Building a Dynamic Website: Setting Up Pages

1. Viewing Database Structures

2. Accessing Dynamic Content Data Sources

3. Adding Server Scripts & Reusable Code

4. Creating Record Sets

5. Inserting Record Sets into Tables

6. Creating & Formatting Repeating Regions

7. Adding a Dynamic Image

8. Binding a Dynamic Image

9. Adding Navigation to a Dynamic Page

Lesson 12. Troubleshooting Your Website

1. Using Layers & Tables Appropriately

2. Converting Layers to Tables

3. Linking Images to Pages

4. Setting Up the Check Browser Behavior

5. Replacing HTML Code Using Find and Replace

The Business side of Web Design (1 hour)

This will discuss what you need in building a web design business. From web development questionnaire to

preparing a contract and following up on your balance of professional fees.

● What you need to know

● Web Development Questionnaire

● Creative Briefs

● Contracts

● Scope Creep

● What goes around comes around

● You just need to be good, not necessarily the best to satisfy clients.