Website Design Tutorials

These Website Design Tutorials are for beginners who want to learn the basics of web design.

All-in-One Website Building Packages

Website Building Tutorial
Learn the basics involved in building a website.

• Overview: Components of a successful website
• Step 1: Determine the Website's Niche
• Step 2: Choose Website Building Tools
• Step 3: Hosting Server - decide on where you are going to host the site
• Step 4: Buy domain name
• Step 5: Plan the site
• Step 6: Design the layout
• Step 7: Convert the layout into an html template
• Step 8: Create the pages as per the site plan
• Step 9: Install any additional scripts on the server
• Step 10: Link the pages
• Step 11: FTP the files to the hosting server
• Step 12: Submit to search engines and promote the site
• Step 13: Website Monetization
• Step 14: Maintain the site

Best Website Building Software
Recommended software for website building.

Fireworks CS5 Tutorial

• 1. Fireworks CS5 Tutorial
• 2. Best Web Design Graphics Software
• 3. Fireworks Templates
• 4. Create New Fireworks Document
• 5. Fireworks Tools
• 6. Website Layout Design
• 7. Logo Design
• 8. Masthead Design
• 9. Fireworks Menu
• 10. Inserting Images – Fireworks CS5
• 11. Text Styles- Fireworks CS5
• 12. Web Slices – Fireworks CS5
• 13. Drop Down Menus – Fireworks CS5
• 14. HTML/ CSS – Fireworks CS5

Fireworks CS4 Tutorial

• 1. Fireworks CS4 Tutorial
• 2. Create a New Document in Fireworks CS4
• 3. Fireworks CS4 Tools
• 4. Create a website design in Fireworks CS4
• 5. Fireworks Website Templates
• 6. Logo Making with Fireworks
• 7. Fireworks Designs
• 8. Fireworks Tips
• 9. Fireworks Web Ready Images

Adobe Fireworks CS3 Tutorial for Beginners
Fireworks is a fantastic software to create the graphics for websites. Learn the basics involved in designing a website layout using Fireworks.

• Step 1: Create a new Fireworks document
• Step 2: Insert images and text
• Step 3: Create the layout
• Step 4: Slice and export the images
• Project: Create a simple layout
• Tips: Fireworks Tips and Tricks

Adobe Photoshop CS3 Tutorial for Beginners
Photoshop is an advanced image editing software. Learn the basics involved in designing a website layout using Photoshop.

• Step 1: Create a new Photoshop document
• Step 2: Insert images and text
• Step 3: Create the Photoshop website design template
• Step 4: Slice and export the images
• Project: Create a simple layout
• Tips: Photoshop Tips and Tricks

Dreamweaver CS5 Tutorial

• 1. Dreamweaver Cs5 Tutorial
• 2. Define Site
• 3. Dreamweaver CS5 Template
• 4. Dreamweaver Website Layout
• 5. CSS Layout – Dreaweaver CS5
• 6. Dreamweaver CS5 Website Header
• 7. Dreamweaver DIV/ CSS Layout
• 8. Dreamweaver Menu
• 9. Editing Styles in Dreamweaver
• 10. Editable Regions in Dreamweaver Template
• 11. Webpages in Dreamweaver
• 12. Linking to webpages in Dreamweaver
• 13. Styles for text links in Dreamweaver
• 14. Web Page Content
• 15. Text Styles in Dreamweaver
• 16. Heading Styles | Dreamweaver
• 17. Contact Forms | Dreamweaver
• 18. Form Styles | Dreamweaver
• 19. Test Website | Dreamweaver
• 20. FTP/ Upload Files to Hosting Server | Dreamweaver

Dreamweaver CS4 Tutorials

• 1. Dreamweaver CS4 Tutorial
• 2. Define a New Site in Dreamweaver CS4
• 3. Create a template in Dreamweaver CS4
• 4. Design your template in Dreamweaver CS4
• 5. Design the CSS Style Sheet in Dreamweaver CS4
• 6. Insert Images in Dreamweaver CS4
• 7. Creating the Menu in Dreamweaver CS4
• 8. Content in Dreamweaver CS4
• 9. Insert Editable Regions in the Dreamweaver Template
• 10. Dreamweaver CS4 Template Based Web Pages
• 11. Formatting Headings in Dreamweaver CS4
• 12. Formatting Images in Dreamweaver CS4
• 13. Linking pages in Dreamweaver CS4
• 14. Forms in Dreamweaver CS4
• 15. Dreamweaver CS4 Form Validation Tutorial
• 16. Tables in Dreamweaver CS4
• 17. Testing the Website in the Browser
• 18. Upload your site with Dreamweaver CS4
• 19. How to validate your Contact PHP form in Dreamweaver CS4

Adobe Dreamweaver CS3 Tutorial for Beginners
Dreamweaver is a fantastic software to create websites. Once you have designed your layout in Fireworks you are ready to create the website. Learn the basics involved in creating a website using Dreamweaver.

• Step 1: Define a new site in Dreamweaver
• Step 2: Create a Dreamweaver Template
• Step 3: Create the Page Layout in the Dreamweaver Template
• Step 4: Create the CSS Style Sheet
• Step 5: Insert Common Elements into the Dreamweaver Template:Text & Images
• Step 6: Create Libraries or Server Side Includes
• Step 7: Define the Editable Regions of the Template
• Step 8: Create the HTML Pages of the Site with Content/ Forms
• Step 9: Link the Pages
• Step 10: Test the Site Locally and Upload Online to the Hosting Server
• Project 1: Table Based Layout Website
• Project 2: DIV/ CSS/ Tableless Layout Based Website
• Project 3 : Website with Server Side Includes

Flash CS3 Tutorial for Beginners

This free Flash CS3 Animation tutorial is for beginners who want to learn the basic concepts of Flash.

• Step 1: Create a new Flash CS3 document
  
• Step 2: Add text
  
• Step 3: Graphic Symbols
  
• Step 4: Layers
  
• Step 5: Draw Shapes (Rectangle)
  
• Step 6: Draw Shapes (Oval)
  
• Step 7: Draw Lines
  
• Step 8: Reuse Symbols
  
• Step 9: Resize and Rotate objects
  
• Step 10: Paste in Place
  
• Step 11: Align
  
• Step 12: Change colors of symbols
  
• Step 13: Transform Options
  
• Step 14: Movie Clip Symbols
  
• Step 15: Keyframes
  
• Step 16: Motion Tweens
  
• Step 17: Lock Layers
  
• Step 18. Import an Image
  
• Step 19: Publish the Flash file

Flash Photo Gallery Tutorial

Flash CS3 Quiz Tutorial

Flash CS3 Website (ActionScript 3.0) Tutorial for Beginners
Learn to build a simple Flash based website with ActionScript 3.0.

• Step 1: Create a New Flash CS3 ActionScript 3.0 Document
  
• Step 2: Buttons in Flash CS3
  
• Step 3: Labels for Website Pages in Flash CS3
  
• Step 4: ActionScript 3.0 in Flash CS3
  
• Step 5: URL Link in Flash CS3 (ActionScript 3.0)
  
• Step 6: ActionScript 3.0 Code for Label Link

Flash Catalyst Tutorial

• 1. Flash Catalyst Tutorial
• 2. Create a New Project
• 3. Flash Catalyst Workspace
• 4. Flash Catalyst Tools
• 5. Flash Catalyst Webpage
• 6. Logo Design in Flash Catalyst
• 7. Webpage Layout in Flash Catalyst
• 8. Buttons in Flash Catalyst
• 9. Pages/ States in Flash Catalyst
• 10. Interactivity in Flash Catalyst
• 11. Transition Effects in Flash Catalyst
• 12. Publish the Flash Catalyst Website

Web Course Design

• 1. Web Course Design
• 2. Web Course Analysis
• 3. Learning Design
• 4. Interface Design
• 5. Storyboarding
• 6. Web Page, Graphics, Flash Development
• 7. Integration of Assets onto Web Platform
• 8. Web Course Testing
• 9. Web Course Implementation
• 10. Web Course Evaluation
• 11. Ongoing Maintenance & Promotion

Website Checkup

More Website Design Resources >>

WEBSITE DESIGN TUTORIALS

Website Building Tutorial
Photoshop CS3 Tutorial
Fireworks CS3 Tutorial
Fireworks CS4 Tutorial
Fireworks CS5 Tutorial
Dreamweaver CS3 Tutorial
Dreamweaver CS4 Tutorial
Dreamweaver CS5 Tutorial
Flash CS6 Tutorial NEW!
Flash CS3 Animation Tutorial
Flash CS3 Website Tutorial (ActionScript 3.0)
Flash Catalyst Tutorial
Web Course Design Tutorial

Best Website Building Software
Website Templates Tutorial
All-in-one Website Tools
Web Design
Website Check Up
Blogging with Wordpress

Website Traffic
Website Traffic Tactics
Making Friends with the Search Engines
Article Marketing
Web 2.0 Business Networking
Successful Email Marketing