Pre-built Layouts

from: Learn Adobe Dreamweaver CS4 by Video

Buy now

About this lesson

Dreamweaver helps you build web pages, offering a host of pre-built layouts with CSS that you can customize to realize your creative vision.

From: Learn Adobe Dreamweaver CS4 by Video

This complete training program published in partnership with Peachpit Press offers 12 hours of video instruction and a 120-page printed guide to teach you the fundamentals of Adobe Dreamweaver CS4 as well as the basic principles of web design. You’ll master the program’s interface and learn how to use essential commands and tools to design websites that combine type and images with rich media. Quizzes round out each chapter to reinforce what you’ve learned.

$59.99

12 hrs

Buy now

Similar Courses

This section provides a crash course in HTML. Even if you are already familiar with it, you might find it worthwhile to check it out anyway.

HTML Refresher
- Understanding what a URL is made up of is key to understanding HTML and Dreamweaver.
  
  URL Overview
  
  01:53
- The purpose of Dreamweaver is to write HTML code. Learn what HTML is, take a look at a few HTML tags, and learn that different browsers may read HTML tags slightly different.
  
  HTML Introduction
  
  01:38
- Dreamweaver has an HTML reference built into it. This section tells you how to use it. It also introduces some basic HTML tags.
  
  Basic HTML Tags
  
  07:52
This set of videos is all about Dreamweaver's core functionality and user interface.

Dreamweaver Introduction
- What is an WYSIWYG HTML editor anyway? This video not only provides the answer to this question but also tells you about Dreamweaver's powerful Design, Code, and Split views.
  
  WYSIWYG HTML Editor
  
  01:18
- Learn everything you need to know about the handy Welcome Screen, which is a good starting point for every Dreamweaver session.
  
  The Welcome Screen
  
  01:42
- Dreamweaver's interface is full of powerful tools and features, yet organized and easy to use. In this video, you'll learn about important UI elements, such as the Document window, the menu bar, the Files and Properties panels, and the Tag Selector area.
  
  The Dreamweaver Interface
  
  05:36
- Working with Dreamweaver means working the way you want to. Learn more about the software's workspaces and how to arrange and save your own.
  
  The Workspace Switcher
  
  02:41
Learn how to use a pre-built web page layout from Dreamweaver to create HTML files and CSS styles easily.

Getting a Quick Start
- Dreamweaver helps you build web pages, offering a host of pre-built layouts with CSS that you can customize to realize your creative vision.
  
  Pre-built Layouts
  
  05:06
- This video tells you how to choose a layout and learn the many CSS options the software offers.
  
  Choosing a Layout
  
  03:38
- In this lesson, you'll learn how to add images to a web page and to modify styles.
  
  Adding Images
  
  09:06
- Good and easy navigation makes or breaks a website. Learn how to add a navigation bar to your web layout and apply CSS to make it look the way you want.
  
  Adding a Navigation Bar
  
  04:39
- Learn how to include and format content into your web page using CSS.
  
  Adding Main Content
  
  05:27
- Learn how to add links that feature CSS formatting to match them to the look and feel of your site.
  
  Adding Links
  
  09:23
- CSS is a very flexible tool for laying out web pages. In this video, you'll learn how to modify HTML tags and the background color using CSS.
  
  Modifying Styles
  
  07:31
To realize your creative vision, you need to have a good plan. Learn the nuts and bolts of planning so your project runs as smoothly as possible.

Planning Your Website
- Project management covers many aspects. This set of videos will help you get your project off to a good start-and a successful completion.
  
  Project Management
  - This video focuses on the big picture of managing a website project.
    
    Project Overview
    
    03:30
  - Each project starts with a questionnaire that helps define the scope and milestones.
    
    Design Questionnaire
    
    06:22
  - This lesson deals with the design document, which defines your website's purpose and target audiences. It will also help you determine what technology to use to implement your plan.
    
    Design Document
    
    03:55
  - The project plan is the heart of every website project, specifying all project requirements and details. Watch this video to learn more!
    
    Project Plan
    
    08:40
  - Learn more about the many ways Adobe offers to simplify communication at each stage of a project.
    
    Project Communication
    
    03:45
- This set of videos covers the key aspects of site development to make sure you don't miss anything important.
  
  Site Development
  - Planning a website project involves a lot of prep work. Learn more about important aspects, such as usability, copyright permissions, and accessibility.
    
    Site Definition & Planning
    - Copyright law may vary from country to country, but it is one of the most important aspects of website development. Learn the basics of copyright law.
      
      Copyright
      
      04:56
    - You want to make sure your website can be used by people with disabilities. So let's take a look at the WCAG guidelines 1.0 and 2.0, as well as screen readers.
      
      Accessibility
      
      07:55
    - Learn how to maintain consistency on your website in terms of design and navigation.
      
      Maintaining Consistency
      
      05:54
    - Separating content from design, what does that mean? Content is based on HTML or databases, and design is mainly CSS. This video also tells you about absolute vs. relative positioning.
      
      Separating Content from Design
      
      04:56
    - This video explains why you can't pick just any font for your website and which one is right for you.
      
      Using Standard Fonts
      
      06:17
    - Learn what web-safe colors are and what role they play in today's web design.
      
      Web-safe Colors
      
      02:59
    - If it weren't for web browsers, no one could view your website. Learn why you always need to keep an eye on browser renditions when designing for the web.
      
      Browsers
      
      04:02
    - Do design principles really apply to web design? They do! Here's what you need to know and why you shouldn't go without them.
      
      Design Principles
      
      08:47
    - Beauty is one thing, usability another. Learn why an engaging website should be both nice to look at and easy to use.
      
      Usability and Readability
      
      04:13
  - This set of videos takes a look at essential elements of web design planning.
    
    Information Architecture
    - A sitemap is very helpful to reflect the visual structure of your website. Learn how to create one and use it.
      
      Visual Hierarchy
      
      03:20
    - This video explains what wireframes are for and why they are useful for designing a website.
      
      Wireframes
      
      03:07
    - Website processes, such as the login, require careful panning in order to function efficiently. Flowcharts are a great way to assist you in documenting these processes.
      
      Flowcharts
      
      04:03
    - There are many types of storyboards. Here we look at two different ways to storyboard the design of a site.
      
      Storyboards
      
      01:58
- When it's over, it's never really over! Before you launch your site, you need to test it thoroughly. Dreamweaver offers tools that make testing reliable and easy.
  
  Site Testing
  - When testing a website prior to launch, there are many things to consider. Learn which elements should be tested and how Dreamweaver can assist you.
    
    Site Testing Overview
    
    07:31
  - One key aspect of the testing process is usability. See what makes it so important and how you can test a site's usability successfully.
    
    Usability Testing
    
    05:12
Learn why defining a site in Dreamweaver is essential and which steps you need to take to get it done.

Defining a Site in Dreamweaver
- This video provides an introduction to site definition using Dreamweaver and tells you about the benefits.
  
  Introduction and Benefits
  
  01:15
- Get yourself prepared by specifying a folder on your computer that stores all assets for your website.
  
  Preparation
  
  01:34
- Dreamweaver's Site Definition dialog box consists of two tabs, Basic and Advanced. In this video, you'll learn how to define a site using the Basic tab.
  
  Using the Basic Tab to Define a Site
  
  07:00
- Dreamweaver's Site Definition dialog box consists of two tabs, Basic and Advanced. In this video, you'll learn how to define a site using the Advanced tab.
  
  Using the Advanced Tab to Define a Site
  
  04:25
- The Files panel in Dreamweaver serves as a hub for your assets. See what features the panel offers to keep file handling simple and efficient.
  
  Using the Files Panel
  
  03:56
Everything starts with a page. Here's what you need to know about creating, naming and saving web pages in Dreamweaver.

Creating a New Web Page
- You can create a web page by using the Welcome Screen or via the File menu. Here's how.
  
  Creating a Web Page
  
  01:27
- Saving pages is easy in Dreamweaver. This video will show you how and what you need to take into account when specifying a name for your pages.
  
  Saving a Web Page
  
  05:15
- Why should every page have a proper title? This video has the answer.
  
  Assigning a Title to a Web Page
  
  03:35
- So you have a file name and a title. What else? This video shows you what metatags are and why they matter too.
  
  Inserting Metatags
  
  05:02
This set of videos will give you an insight into the tools and options Dreamweaver offers for adding and formatting text.

Adding Text Content
- Dreamweaver supports three ways of adding text to your website: Enter text in Design mode, copy and paste it from other applications, or import text from files.
  
  Typing, Copying/Pasting, or Importing Text
  
  03:33
- To structure your text for a better reading experience, you can define headings. This video shows you how easy that is using Dreamweaver.
  
  Setting Headings
  
  03:06
- Dreamweaver supports three types of lists for web pages: unordered lists, ordered lists, and definition lists. This video tells you what each type looks like and what options you have.
  
  Creating Lists
  
  06:41
- Among the many ways of highlighting text, bold and italicized style are most common. Watch this video to learn how to apply these formatting features.
  
  Bold and Italics
  
  01:34
- Learn how to properly place special characters, such as the copyright symbol or a trademark bug, in your text.
  
  Special Characters
  
  03:14
When it comes to controlling the appearance of web text, turn to Cascading Style Sheets (CSS). This set of videos will tell you how CSS will help you make your text stand out.

Formatting Text with CSS
- This video is a must if you're not familiar with Cascading Style Sheets.
  
  Introduction to CSS
  
  02:23
- Watch this lesson to get an overview of the numerous text formatting options that come with Cascading Style Sheets.
  
  Overview of CSS Properties
  
  05:19
- Creating styles is one thing, managing them another. Learn where you can safely store the styles for your site.
  
  Places to Store Styles
  
  05:49
- Learn how to create a .css file and how to link your web pages to it.
  
  Creating and Linking to a .CSS File
  
  06:26
- Learn how to create styles for the HTML tags in your web pages.
  
  Creating a Style for an HTML Tag
  
  14:11
- Class styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. Watch this video to learn how to create them.
  
  Creating a Class Style
  
  05:27
- Class styles let you apply style properties to any element on a page. This video shows you how to apply them.
  
  Applying a Class Style to a Tag
  
  05:27
- Watch this video to learn how to edit a style in an external .css file, unlocking the power of CSS.
  
  Editing a Style
  
  06:22
- The box model serves as a visual design aid. This video provides details on this helpful feature.
  
  Understanding the Box Model
  
  07:09
- This video introduces a special feature in Dreamweaver. If you use Modify > Page Properties to change settings, the software will create embedded styles.
  
  Styles Created by Page Properties
  
  04:15
- It's new in Dreamweaver CS4, and it's impressive! The Code Navigator displays a list of code sources related to a particular selection on your page.
  
  Using the Code Navigator
  
  04:45
A website would be nothing but a sea of type if you weren't able to add imagery and animations. Using Dreamweaver, you can turn your website into an engaging experience.

Images and Rich Media
- There are many file formats available for online use. Here's how to pick the right one for your purposes.
  
  Web Image File Formats
  
  04:33
- Learn the many options Dreamweaver offers for inserting images into a web page. Equally important, watch why you always should add alternate text.
  
  Inserting Images and "Alt" Text
  
  07:45
- This video explains why understanding the path from your HTML page to your image file is important and why the path must remain the same when you upload your content to a web server.
  
  Image File Path
  
  02:57
- Dreamweaver's Assets panel is an essential tool for placing images. Here's how to use it and how to add and manage favorites.
  
  Working with the Assets Panel
  
  05:21
- Even though Dreamweaver is a web editor, it supports a number of image-editing features. For example, you can crop, optimize, and sharpen images. For more complex tasks, you can turn to a professional graphics application. Watch how!
  
  Modifying Images
  
  08:19
- You're probably familiar with the Smart Object feature from Photoshop. Let this video show you that you can also work with Smart Objects in Dreamweaver to establish a live connection to a PSD file.
  
  Photoshop Smart Objects
  
  04:53
- The web would be much less entertaining without Flash. Watch this video to learn what Dreamweaver has to offer to make your website a rich-media experience.
  
  Flash Files
  
  11:10
- Learn how easy it is to take advantage of one of the most common video formats on the web, Flash Video (FLV).
  
  Flash Video
  
  06:35
This batch of videos provides expert knowledge on links and everything you need to know about Dreamweaver to create and edit them, how to define image maps, how to create rollovers, and how to insert a Fireworks navigation bar.

Creating Links
- Learn about where you can put hyperlinks, commonly referred to as links, as well as the different types of links that you can create using Dreamweaver.
  
  Introduction
  
  04:12
- Watch this video to learn how to link a web page to a resource on the Internet.
  
  Linking to a Page on the Internet
  
  07:04
- Watch this video to learn how to create a local link, i.e. a link from one document to another on the same site.
  
  Linking to a Web Page in the Same Site
  
  07:26
- Watch this video to learn how to link a web page to a Microsoft Excel or Word file.
  
  Linking to a Word or Excel File
  
  04:29
- Watch this video to learn how to create a named anchor link, which jumps to a specific location within the same document.
  
  Linking within a Document
  
  08:02
- Watch this video to learn how to create an e-mail link, which creates a new e-mail message with the recipient's address already filled in.
  
  E-mail Links
  
  04:17
- Watch this video to learn how to create a clickable hotspot on an image and link that hotspot to another resource.
  
  Images and Image Mapping
  
  08:29
- Dreamweaver lets you create and edit rollovers, which change when the pointer moves across them. Watch how!
  
  Creating a Rollover Image
  
  07:31
- Navigation bars help viewers move between pages and files on your site. This video tells you how you create a nav bar in Fireworks and insert it into your Dreamweaver website.
  
  Inserting a Navigation Bar
  
  04:20
This set of videos will tell you all that's important about CSS and the best way to use it to enhance your web layout.

Page Layout with CSS
- CSS gives you great flexibility and control over the exact appearance of all elements on your page. Start here for important background information on CSS and what makes it ideal for web page layout.
  
  Why CSS for Page Layout
  
  02:46
- Watch this video to master the mechanics of CSS for precise web page layout.
  
  How to Use CSS for Page Layout
  
  03:07
- You can use div tags to create CSS layout blocks and position them in your document. Dreamweaver enables you to quickly insert a div tag and apply existing styles to it. Here's how!
  
  Inserting <div> Tags
  
  05:43
- Learn how to set your page's content width by defining the width of the CSS style for a div tag that "wraps around" all page content.
  
  Creating a Style for a <div> Tag
  
  08:25
- See how easy it is to edit a CSS style for a div tag.
  
  Editing a Style for a <div> Tag
  
  02:51
- To increase efficiency, you can define a CSS style and create a div tag at the same time. Watch how!
  
  Inserting a <div> Tag with a Style
  
  04:43
- This video shows you what other options you have when creating div tags.
  
  Creating More Styles
  
  12:57
- To hone your CSS skills, you can see how to fine-tune the sample website Double Identity in this video.
  
  More Practice with Styles
  
  04:59
- CSS styles are also ideal for customizing links. This video tells you how to make them look both nice and consistent on your site.
  
  Creating a Style for Links
  
  05:52
- With Dreamweaver, you can use AP elements to lay out your page, including text, images, or any other content. This video provides the details.
  
  Creating AP Layers
  
  08:18
Tables are an important way to display data within a web page. Learn how to build a table from scratch; edit table properties using CSS; merge and split cells; modify rows and columns; and let Dreamweaver create table structure for content from a spreadsheet or any delimited text file.

Tables
- To start using tables on your website, you need to create one. This lesson shows you how easy it is in Dreamweaver.
  
  Creating a Table
  
  05:44
- HTML offers a large selection of options to modify a table. Watch this lesson to learn more!
  
  Using Properties for Formatting
  
  04:29
- Learn how to take advantage of CSS to match text in a table to the rest of your website.
  
  Using CSS for Formatting
  
  05:05
- Learn how Dreamweaver can easily create the perfect table structure for content from a spreadsheet or any delimited text file.
  
  Importing Tabular Data
  
  06:06
- This video shows you how to merge and split cells to make your table look the way you want.
  
  Merging and Splitting Table Cells
  
  05:04
- Dreamweaver allows you to work on rows and columns. Here's how!
  
  Modifying Rows and Columns
  
  04:56
- Learn more about working with tables including table alignment, cell alignment, border and background colors.
  
  Aligning Tables
  
  10:42
Forms are a great way to collect data from users of your website. Learn how to create a form and add form elements, such as text fields, text areas, radio buttons, checkboxes, list menus, and a submit button. Also learn how to make sure that user input is transmitted correctly.

Forms
- When it comes to using forms on a website, the HTML form tag is key. Watch this lesson to master the basics of form creation.
  
  Creating a Form
  
  10:17
- Lists, menus, radio buttons and checkboxes are common HTML form elements. This video tells you how to use them.
  
  Form Elements
  
  10:35
- In this lesson, you'll learn the steps you need to take to ensure that user input gets back to you.
  
  Transmitting Form Data
  
  06:19
- How do you make sure users enter the data you need? Use form validation! This lesson tells you what it is and how you implement it into your form.
  
  Validating Form Behavior
  
  05:23
- Spry is an exciting way to implement Ajax on your website. Watch why Dreamweaver's Spry features make it easy to add form validation with user-friendly messages.
  
  Using Spry for Form Validation
  
  09:47
Before you push your website live, you need to test it thoroughly to make sure everything works the way you want. Dreamweaver provides a number of test tools to help you create a reliable web experience.

Testing
- Dreamweaver has a built-in spell-checker that helps you eliminate mistakes on your pages before you publish them. See how!
  
  Spell-checking
  
  05:04
- Nothing is more frustrating for a visitor of a website to click a link and get an error message. Watch this lesson to learn how to search your site for broken links and fix them.
  
  Checking for Broken Links
  
  06:33
- Learn how to preview your site in a web browser and how to add a browser to Dreamweaver's browser list.
  
  Previewing Pages in the Browser
  
  05:18
- There are a number of web browsers, and each one has its own way of rendering web pages. In this video, you'll learn how Dreamweaver can help you identify and fix issues concerning browser compatibility.
  
  Checking Browser Compatibility
  
  04:45
- The sample website needs to be optimized because the nav bar is rendered differently in Internet Explorer and Firefox. This video shows you how to get it right.
  
  Browser Issues
  
  08:49
- It's important to run your own tests, but it's just as important to allow users to test your site. Here's how you can gather valuable feedback.
  
  Gathering User Feedback
  
  01:24
Dreamweaver offers great tools to facilitate and speed up site maintenance: templates and libraries. This set of videos tells you how to use them.

Reusable Content
- This video has all you need to know about templates and library items in Dreamweaver.
  
  Template & Library Overview
  
  09:10
- Learn how to use libraries, a special Dreamweaver file containing a collection of assets that you can place in your web pages.
  
  Creating a Library Item
  
  08:48
- A template is a special type of document that you use to design a "fixed" page layout. Here's how you convert an HTML page to a template.
  
  Converting a Page into a Template
  
  05:16
- Once you have a Dreamweaver template in your website files, learn how to create additional pages based on that template file.
  
  Creating a Template Page
  
  08:12
- When working with templates, you can define regions as "editable" to control which page elements template users are allowed to edit. This lesson tells you how.
  
  Working with Editable Regions
  
  06:02
- Once a template has been created within your site, learn how to apply that template to an existing page.
  
  Applying a Template
  
  08:25
Learn how to publish your site to a web server and prevent overwriting one another's edits when working on a team. And check out the video on a great new Adobe service called InContext Editing which allows non-technical users to conveniently edit web pages.

Publishing & Maintenance
- When it comes to managing files, Dreamweaver's Files panel is your place to be. Here's how easily you can move, rename and delete project files.
  
  Managing Files
  
  04:40
- Set up your web server information so you can upload and download files for your website directly from within Dreamweaver.
  
  Entering Web Server Information
  
  06:58
- Learn how to expand the Files Panel so you can view your web files and your local files on the web server at the same time.
  
  Expanding the Files Panel
  
  04:05
- Learn how to publish your website files so they can be viewed in a browser directly from your web server.
  
  Publishing Files
  
  06:00
- Web projects often involve a lot of teamwork. This is why Dreamweaver provides great collaborative features to check files in and out. This video also tells you how to ensure proper versioning.
  
  Checking in/Checking out
  
  07:01
- InContext Editing is a new CS4 feature that allows non-technical users to edit web pages directly through their browser. Learn more about this new service by Adobe.
  
  InContext Editing
  
  06:50
You've come a long way, but there's even more! This training package has a few bonus videos you shouldn't miss!

Bonus Videos
- Instead of using graphics for your navigation menu, learn how to create a lightweight CSS-based menu.
  
  Creating a CSS-based Menu: Part 1
  
  08:21
- Instead of using graphics for your navigation menu, learn how to create a lightweight CSS-based menu.
  
  Creating a CSS-based Menu: Part 2
  
  05:12
- CSS provides a host of design possibilities. In this video, you'll learn how to create a CSS-based submenu.
  
  Creating a CSS-based Submenu
  
  19:44
- Learn to jumpstart your project using Fireworks. The software is ideal for prototyping websites with HTML, CSS and imagery.
  
  Exporting Fireworks to CSS
  
  10:37
- See how you can use Dreamweaver and JavaScript to create pop-up windows. The sample shows popups for some amazing underwater creatures.
  
  Creating a New Window through Behaviors
  
  08:25
- Spry is an exciting new web technology. Learn how to take advantage of it by inserting a tabbed panel.
  
  Inserting a Spry Tab Interface
  
  07:19
- Spry HTML datasets are one of the many new features of Dreamweaver CS4. Watch how easy they are to work with, even within a Spry tabbed panel.
  
  Spry HTML Datasets
  
  07:52