Diploma in Web Designing


I know you’re now excited to see your own website appearing in the internet. Let me then walk you through how to web design. This is now the time for you to make the looks of your website.

But before you start to learn how to web design, you must now decide on what niche you wanted to work on, grab a domain name and have a place to host your site.

First off, I wanted you to know that you don’t have to memorize those HTML things for you to be able to design your site. I myself has zero knowledge in those things when I first designed mine. I can say however that learning the basics as well is a good idea.

Ways on How to Web Design

1. Design You Site Where You Hosted It

If you want to save your self from all the troubles of designing your site then do it where you hosted it. In fact, almost every hosting sites out there has pre-designed templates that you can just use to build your site. You can go to Hostgator, 1&1, or Godaddy and with a little tweaking, you can have your site up and running.

However, if you want a more professional look for your site then I recommend going to Serif. They have more themes to choose from. They also have styles that are more dedicated to the kind of niche you will be working on in your site.

2. Use a Web Designing Software

If you want to make it yourself then that’s also cool. You can use any web designing software like Adobe Dreamweaver (not free), Joomla, or WordPress. You can also go to Serif and grab an easy to use web design from them.

I personally use WordPress and it works well for me. You can even grab a lot of wordpress themes out there for free. Though if you have some extra cash, you can also check out those paid ones if you like.

Choosing A Theme for Your Site

In choosing a theme for your site (or maybe making your own), avoid having a very complicated design. It takes a longer time for a site full of graphics to load so avoid that. Choose also a dark text over a light background for easy reading.

So that’s how simple it is actually on how to web design. Just try to mess around until you come up with the design you like.

When you’re done making the looks for your site, proceed to adding some contents to it.

Diploma in Web Designing

Course Contents

Web Design Fundamentals

1.    Exploring Web Design

 What is web design?
Site design
Information architecture
Interactive design
Scripting and programming
The multidisciplinary approach

2.    Web Terminology

How the web works
What is a URL?
The DNS and why it matters
HTTP and web protocols
How does a browser work?
What is HTML?
HTML document structure
What is a DTD?
What is CSS?
What is XML?
RSS feeds
What is JavaScript?
What is AJAX?
PHP, .NET, JSP, and ColdFusion
Content management systems
What is an API?

3.    Getting Started

What should I learn first?
Getting online quickly
Tools for building sites
Additional tools for building sites
Designing for multiple browsers
Designing for accessibility
Progressive enhancement
Choosing a web host
Registering a domain name
Basic site structure

Adobe Photoshop CS3

1.    Customizing the Interface

Overview of the interface
Arranging panels
Customizing keyboard shortcuts
Saving custom workspaces

2.    Managing Digital Assets with Bridge

Overview of Bridge
The Bridge interface
Customizing Bridge
Organizing assets
Comparing assets with the Loupe
Stacking assets
Rotating, rearranging, and renaming

3.    Layer Basics

Understanding layers
Creating layers
Layer stacking order
Deleting layers
Working with multiple layers

4.    Color Basics

The decline of web-safe color
Using the Color Picker
Using swatches
Creating custom swatches
Recoloring images
Copying color as HTML
Color management

5.    Type Basics

Vector-based type
Creating character type
Creating paragraph type

6.    Creating a Web Graphic from Scratch

Setting resolution, color mode, and bit depth
Combining images of different sizes
Combining images using Layer Masks
Combining images using Blend Modes and Opacity Adding and editing Smart Objects
Creating focus with Layer Styles
Saving source files
Resizing images for the web
Sharpening images for the web

7.    The Save for Web Function

Understanding optimization and web formats
The Save for Web window
Optimizing JPEGs
Selective JPEG optimization
Optimizing GIFs
Locking colors
Selective GIF optimization
Optimizing PNGs

8.    Creating Web Backgrounds

Designing web backgrounds
Defining and previewing
Optimizing and saving
Symmetrical backgrounds
Full-screen backgrounds
Using directional tiles

9.    Creating Navigation

Horizontal navigation bars
Elliptical buttons
Smart Object buttons
Pill-shaped buttons
Tabbed navigation bars
Creating gel buttons
Navigation bars with icons

10. Optimizing Transparent Graphics

Understanding web graphic transparency
Optimizing transparent graphics
Optimizing transparent graphics on a patterned background
Optimizing transparent graphics with shadows and glows
Saving transparent graphics
Starting with a non-transparent image
Simulating transparency with JPEGs

11. Creating Animations

Creating animations from layer visibility
Tweening with opacity
Tweening with position and Layer Styles
Optimizing animated GIFs
Optimizing transparent animated GIFs
Animated slideshows

12. Slicing

Understanding slicing
Creating user slices
Creating layer-based slices
Adding slice options
Optimizing and saving slices

13. Rollover Graphics

Creating rollover graphics with layer comps
Optimizing layer comp rollovers
Installing the lynda.com rollover script
Exporting layer comp rollovers
Creating rollover graphics from layer visibility
Creating graphics for remote rollovers

14.  Automation

Creating a web photo gallery
Creating a collaborative gallery
Creating a Flash-based web photo gallery
Using the Image Processor
Automating actions with the Image Processor
Creating PDF presentations

15.  Integration with Other Adobe CS3 Applications

Photoshop files in Fireworks
Round-trip editing with Dreamweaver
Illustrator to Photoshop
Illustrator to Photoshop using Smart Objects
Layered Photoshop files in Flash

Adobe Illustrator CS3

1.    Vectors Living in a World of Pixels

Using the Web New Document Profile
Basic web preferences
Anti-aliasing and Pixel Preview

2.    Web Color

Color management settings
Web-safe colors and hexadecimal values
Pulling colors from kuler
Using the Color Guide with web-safe colors
Converting art to web-safe or limited colors

3.    Layout and Design

Grid is good grid is great
Working with multiple crop areas
Making life easier with custom views
Making text look good on the web
Adding reflections

4.    Web Slicing

Understanding web slicing
Object-based slicing
Manual slicing
User slices vs. auto slices
Applying settings to slices
Defining an image map

5.    Save for Web and Devices

Optimizing web graphics
GIF JPG PNG and WBMP files
SWF and SVG files
The Color Table Image Size and Layers options
Optimizing to a specific file size
Editing output settings
Automating export with Actions

6.    Creating Flash (SWF) Content

Creating and editing symbols
Specifying Flash text
Creating a simple animation
Exporting a SWF file

7.    Working with Other Applications

Sending layers to Photoshop
Creating interactive PDF files with Acrobat
Moving content to Flash CS3
Moving images and layouts to Dreamweaver

Adobe Flash CS3

1.    Flash Isn’t Just for Animation Anymore

Understanding What Flash Can Do

2.    Getting Started

Bitmap vs. vector graphics
Understanding Flash file types
Exploring the Welcome screen
Creating a new Flash file
Exploring the Flash interface
Exploring the toolbar
Working with panels
Understanding the Flash animation workflow

3.    Using the Drawing and Color Tools

Understanding lines, strokes, and fills
Drawing with the Pencil tool
Using the Oval and Rectangle tools
Using the PolyStar tool
Modifying lines and shapes
Modifying strokes and fills
Selecting lines, strokes, and fills
Using merge and object drawing
Grouping objects
Using the Free Transform tool
Understanding layers
Creating gradients
Drawing with the Pen tool
Using the Brush tool

4.    Animating in Flash

Understanding the timeline
Setting document properties
Understanding keyframes and frames
Creating a frame with frame animation
Modifying the frame rate
Inserting and deleting frames
Using onion skinning
Selecting and moving frames
Copying and reversing frames

5.    Creating Shape Tweens

Understanding shape tweens
Creating a shape tween
Using shape hints
Creating multiple shape tweens
Common shape tween pitfalls

6.    Creating Symbols and Instances

Understanding symbols and instances
Symbol naming conventions
Creating graphic symbols
Editing symbols
Editing symbol instances
Using color styles
Animating graphic symbols

7.    Motion Tweening

Shape tweening vs. motion tweening
Creating a basic motion tween
Applying easing
Using the custom easing controls
Editing multiple frames
Using a motion guide
Using timeline effects
Common motion tween pitfalls

8.    Working with Bitmaps

Understanding the benefits of bitmaps
Importing and compressing bitmaps
Importing bitmap sequences
Converting bitmaps to vectors
Using basic masking
Using animated masks
Animating bitmaps

9.    Working with Text

Understanding text field types
Creating, modifying, and formatting text
Creating fixed and variable-width text fields
Changing the orientation of a text field
Creating a hyperlink in a text field
Working with static text and device fonts
Using small type and aliased text
Animating text

10. Buttons

Understanding button states
Creating rollover buttons
Creating rollover buttons with text
Creating invisible buttons

11. MovieClips

Understanding MovieClips
Creating a MovieClip
Using animated graphic symbols vs. MovieClips
Animating a MovieClip symbol containing a nested animation
Creating an animated rollover button

12. Filters and Blend Modes

Understanding blend modes
Using blend modes
Understanding filters
Applying a filter to a button
Using filters with MovieClips
Colorizing a grayscale image
Animating with a blur filter and static text
Animating with the drop shadow filter

13.  ActionScript 3.0 Basics

Understanding ActionScript 3.0
Stopping a movie from looping
Understanding events
Adding a listener to a button
Understanding functions
Writing a function
Using a button to stop an animation 03s
Using a button to play an animation
Using a button to navigate

14. Working with Sound

Importing sounds
Compressing sound
Creating background sound with sound effects
Modifying sound settings
Setting compression for narration
Synchronizing sound to narration cues
Adding sound to buttons

15. Working with Video

Importing video
Understanding video compression
Controlling playback
Building a custom video player
Using the Flash video encoder
Using the FLVPlayback component
Editing video

16. Publishing and Exporting

Understanding publishing options
Using Flash and HTML
Creating projectors
Modifying projectors
Exporting an animated GIF
Exporting static images
Saving publishing profiles
Optimizing movies

17. Integration

Importing Photoshop content
Importing Illustrator content
Integrating with Dreamweaver CS3

Adobe Dreamweaver CS3

1.    Getting Started


What is CSS?

What is XML?

What is DHTML?

What is JavaScript?

File naming conventions

What is an index page?

2.    The Interface

Setting up your workspace

The Welcome screen

Windows and Mac differences

The Insert bar

The Property Inspector

The Document toolbar

The Document window

Panels and panel groups

Saving workspace layouts

Defining a default browser

3.    Site Control

Defining a site

File and folder management

Understanding path structure

Adding content to a site

Creating a site map

4.    Document Basics

Creating a new blank site

Creating and saving a new document


Inserting images

Inserting text

Aligning text and images

Inserting meta tags

5.    Linking

Link basics

Linking with Point to File

External links

Creating email links

Named anchors

Linking to a file

Image maps

6.    CSS Essentials

About CSS

Anatomy of a style sheet

CSS and page properties

Moving an internal style sheet to an external style sheet

The CSS Styles panel

CSS selectors

Type selectors

ID selectors

Class selectors

Creating rollovers with pseudo-class selectors

7.    Typography

CSS vs. the Font tag

Formatting text with the Property Inspector

What measurement should I use?

Managing white space with margins, padding, and line height

Using font lists

Aligning text

Creating lists

Creating Flash text

8.    Tables

About tables

Tables in Code view

Creating and adding content to tables

Changing table borders with XHTML

Coloring tables with XHTML and CSS

Aligning table content

Sorting tables

Setting table widths

Creating rounded-corner tables

9.    Layout

Dreamweaver’s layout tools

Tracing images

Adding AP div tags

Working with Layout Tables

Adjusting table widths and nesting tables

10. Designing for Devices

What is a device?

Attaching a printer-friendly style sheet

Styling for print

Adobe Device Central

11. Rollovers

Rollover rules

Creating simple rollovers

Creating disjointed rollovers

Creating navigation bars with multiple states

Creating Flash buttons


Viewing the code

Editing in Code view

The Code toolbar

Working with Code Collapse

The Quick Tag Editor

Working with snippets

13. Forms

About forms

Adding text fields

Adding checkboxes and radio buttons

Adding lists and menus

Submitting form results

Styling form elements with CSS

14. Essential Behaviors

Opening a new browser window                      Creating a popup message

Validating text fields

Getting more behaviors

Removing extensions

15. Fireworks and Photoshop Integration

External image editor preferences

Built-in image editing tools

Roundtrip editing from Dreamweaver to Fireworks or Photoshop

Copying and pasting

16. Templates and Library Items

Templates in action

Creating a new template

Applying templates

Modifying a template                                            Adding repeating regions                                             Working with repeating regions

Adding optional regions

Creating a library item

Modifying a library item

17. Automation

Using the History panel

Saving History steps as commands

Using Find and Replace

18. Accessibility

W3C accessibility guidelines                                Accessibility preferences

Inserting accessible images

Inserting accessible tables

Inserting accessible form objects

19.  Inserting Media Objects

About media objects                                              Linking to audio and video files                  Embedding audio and video files                 Setting parameters

Inserting Flash content

Inserting Flash video

20. Getting Your Site Online

Getting site reports

Checking links sitewide

Signing up with Tripod

Entering remote info

Publishing your site

Updating and publishing pages


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s