Getting Started with Dreamweaver and CSS

Step-by-Step Basics to Get You on Your Way

Web design isn’t really that difficult, but taking those first steps can be intimidating. In this straight-to-the-point workshop, Adobe Certified Expert Chad Chelius teaches you the fundamentals of web design with Dreamweaver and CSS in a series of clear, easy-to-follow lessons. Beginning with an overview of how the web works, Chad moves on to teach you how to create web pages, tables, lists, and links in Dreamweaver. Then you’ll learn how to improve the appearance of your website by adding graphics and controlling formatting with cascading style sheets (CSS). Finally, after learning how to test and upload a website, you’ll be ready to get started on your own projects!

Trainer: Chad Chelius

August, 2011

Duration: 3 hrs 30 min

Ready for iPad, Android, and HTML5

Powerful, Feature-Rich Interface

HD Video

CSS

Dreamweaver

Add to Cart Downloads

“ I thought that this course was very helpful and extremely easy to follow along with. Both HTML and CSS are explained in a real world context; a hypothetical website. ... ” — Gregg V.

Similar Courses

Welcome to Getting Started with Dreamweaver and CSS

In order to be an effective web designer, you need to know some fundamentals of the web. This chapter walks you through some key concepts that are important to know when creating files for the web.

Understanding the Web
- Understanding how the web works will help you to make decisions that can affect important aspects of your website. This video provides a high-level overview of how the World Wide Web functions.
  
  How the Web Works
  
  02:14
- The preliminary setup of a website has two important elements: domain registration and hosting. In this video, you'll learn what these are and what role they play in making your website work properly.
  
  Domain Registration and Hosting
  
  03:18
- There are very few hard-and-fast rules on the web, but there are some general guidelines you can follow to help things run smoothly. In this video, you'll get some suggestions for naming your files as well as best practices for working with files on a web server.
  
  Naming Conventions and Best Practices
  
  05:44
- There are so many acronyms used in discussions about the web that it's easy to get confused. XHTML and CSS are two acronyms that you definitely need to know and understand thoroughly, and you'll learn all about them in this video.
  
  What Are XHTML and CSS?
  
  03:19
- Before you dive in and start writing code, it's a good idea to map out your website. In this video, you'll see one approach to this and get a general overview of what a website looks like.
  
  Before You Begin
  
  01:37
Dreamweaver's job is to create and edit XHTML files for you. This chapter walks you through the various ways that Dreamweaver simplifies the process of working with XHTML files.

Creating Web Pages with Adobe Dreamweaver
- To use Dreamweaver effectively, you'll need to become familiar with the interface. In this video, you'll get a tour of the interface, then learn how to customize the appearance of Dreamweaver and save that customization for later use.
  
  The Dreamweaver Workspace
  
  07:00
- Defining a site helps you stay organized when building your website in Dreamweaver. In this video you'll learn how to define a site and see the benefits of doing so.
  
  Defining a Site
  
  04:51
- The building block of any website is the web page. In this video you'll see how easy it is to create your first web page with Dreamweaver.
  
  Creating Your First Web Page
  
  07:25
- It's important to give each and every page of your website a descriptive title. In this video, you'll learn how to change the title of your document through the Dreamweaver interface.
  
  Adding or Changing a Title
  
  04:06
- It's important to mark up content on your web page logically, and Dreamweaver makes it easy to do so. In this video you'll learn how to tag content on your web page through Dreamweaver's interface.
  
  Creating Structured Markup
  
  07:51
- Meta tags add descriptive information to your web pages that helps search engines rank you in search results. In this video, you'll learn how to use Dreamweaver to add meta tags to your documents.
  
  Adding Meta Tags
  
  02:59
- XHTML elements fall into one of two categories: block and inline. In this video you'll learn the difference between the two and, more importantly, how to apply them in an XHTML file.
  
  Block vs. Inline Elements
  
  06:36
- Dreamweaver's list feature makes creating lists quick, easy, and powerful. In this video, you'll learn the structure of lists and how to quickly change from one list type to another using Dreamweaver's Property Inspector.
  
  Creating Lists
  
  04:22
- Dreamweaver provides a simple, visual means of working with tables. In this video, you'll see how easy it is to insert a table into your web page.
  
  Creating Tables
  
  07:21
- Dreamweaver's Tag Inspector is a powerful tool for navigating the hierarchical structure of your document. In this video, you'll learn several techniques that allow you to work faster with the Tag Inspector.
  
  The Tag Inspector
  
  04:10
- Entities are unique characters that need to be represented correctly in web pages. Dreamweaver deals with most entities automatically. In this video, you'll learn what entities are and how to insert them using Dreamweaver.
  
  Entities
  
  06:58
- Comments and design notes are ways of reminding yourself about something or collaborating with other users. In this video we'll add both items to a web page so you can see how each one works.
  
  Working with Comments and Design Notes
  
  07:39
- It can be challenging to remember and understand what all of the tag names in XHTML stand for. In this video you'll learn where to find the HTML reference guide so you can look up the meaning and use of a tag at any time.
  
  The XHTML Reference
  
  03:26
- It's important to preview your website in as many browsers as possible to make sure it looks right. In this video you'll learn several ways of previewing in Dreamweaver.
  
  Previewing Your Web Pages
  
  08:19
Links are the backbone of the web. Without links, surfing the web would be a mundane and time-consuming process. This chapter walks you through the process of creating links in Adobe Dreamweaver.

Creating Links
- Relative links are probably the most common type of link that you'll create in your web pages. In this video, you'll learn several ways to create relative links in Dreamweaver.
  
  Relative Links
  
  08:22
- Absolute links are a necessity when linking to web pages that do not reside on your server. In this video, you'll learn how to create an absolute link in Dreamweaver as well as how to change the target of the link.
  
  Absolute Links
  
  07:01
- Email links are a great way to provide an easy line of communication between yourself and your customers. In this video you'll learn how to create an email link so your viewers can email you quickly and easily.
  
  Email Links
  
  07:12
- When you are creating a page that contains a lot of content, your page can become very long in the vertical direction. This can be cumbersome to navigate. In this video, you'll learn how to use named anchors in Dreamweaver to simplify navigation of long pages.
  
  Creating Text Anchors
  
  08:56
There are many graphics file formats that you can use to save your images. Only a few of them, however, are suitable for web use. This chapter explains the file formats available for web use and shows you how to insert and resize graphics in your web pages.

Working with Graphics
- It can be tricky to determine which web format is right for the particular graphic that you want to put on your web page. In this chapter, you'll learn about the different web formats and which ones are best for certain types of graphics.
  
  Graphic Formats for the Web
  
  07:02
- Dreamweaver makes inserting graphics into your web page easy. In this video, you'll learn how to insert and resize images in Dreamweaver.
  
  Inserting and Resizing Graphics
  
  08:10
- Image placeholders allow you to represent the location of a graphic when the graphic is not yet available. In this video, you'll learn how to create an image placeholder and then replace it with a graphic in Dreamweaver.
  
  Using Image Placeholders
  
  04:45
- Dreamweaver allows you to make basic edits to images placed on your web page. This video shows you how to use this powerful feature.
  
  Editing Graphics
  
  07:31
- Smart Objects in Dreamweaver streamline the process of placing images into your web pages. In this video, you'll learn how you can place a Photoshop document directly into Dreamweaver while optimizing the graphic on the fly.
  
  Dreamweaver Smart Objects
  
  07:42
Cascading style sheets (CSS) control the formatting aspects of any web page. In this chapter you'll gain a well-rounded understanding of the capabilities of CSS.

Formatting with CSS
- CSS can be a bit daunting when you're just getting started. In this video, we'll break down a CSS rule into its basic components and look at how Dreamweaver makes creating and editing CSS a lot easier.
  
  Anatomy of a CSS Rule
  
  05:10
- Dreamweaver includes an extensive reference that provides an easy way to get information about CSS properties. In this video, you'll be introduced to the CSS reference in Dreamweaver.
  
  The CSS Reference
  
  02:10
- Tag selectors are quite powerful because they format existing tags in the structure of your document. In this video you'll get started by creating your first tag selector with Adobe Dreamweaver.
  
  Tag Selectors
  
  07:07
- CSS inheritance is an important principle to understand when working with CSS in your web pages. In this video, you'll learn what inheritance is and see how it works first-hand.
  
  CSS Inheritance
  
  06:43
- CSS provides great control of the text in your web pages. In this video, you'll fine-tune the text on a web page using CSS in Dreamweaver.
  
  Text Properties with Tag Selectors
  
  06:51
- Margin collapsing is a CSS phenomenon that can be incredibly frustrating - that is, until you watch this video and learn how to deal with it.
  
  Margin Collapsing
  
  07:40
- Class selectors provide fine control of text formatting in a document. In this video you'll learn different ways to use class selectors to format elements in your XHTML document, including how to wrap text.
  
  Class Selectors
  
  09:00
- DIV tags are the best way to incorporate structure and dimension into a document. In this video, you'll learn how to use Dreamweaver to insert DIV tags into your document.
  
  Setting Up Structure with DIV Tags
  
  06:13
- Formatting DIVs on a web page is where the magic starts to happen. In this video you'll learn how to take existing DIVs on a page and turn them into the site structure that you're looking for.
  
  Formatting DIVs with ID Selectors
  
  08:25
- In order to position DIVs effectively, you need to utilize floats with CSS. In this video, you'll learn how to float DIVs into the correct position and how to clear them as well.
  
  Formatting DIVs with Floats
  
  08:32
- Not only can CSS format content on your web page, it can also present graphics without actually inserting the image into your page. In this video you'll learn how to use Dreamweaver and CSS to control where an image appears on your website.
  
  Using CSS to Display Graphics
  
  08:06
- With compound selectors, you gain great control over the formatting of each individual area of your web layout. In this video, you'll learn how to use compound selectors to format different areas of your web page.
  
  Compound Selectors
  
  07:57
- Pseudo-class selectors are a great way to add some visual interest to your web page. In this video, you'll learn how to add pseudo-class selectors to the navbar of your web page using Dreamweaver.
  
  Pseudo-Class Selectors
  
  06:55
- External style sheets provide an easy and efficient means of updating your entire site at one time. In this video, you'll learn how to move your CSS rules to an external file for easy updating.
  
  External CSS and the Cascade
  
  10:00
- Disabling the CSS of your page allows you to evaluate your content and see just what CSS is doing to the formatting of your page. In this video you'll learn how to toggle the display of CSS in Dreamweaver so you can evaluate your pages.
  
  Toggling the Display of CSS
  
  04:12
Once your site is created, you need to test your pages and then make them available on a public server. You'll see how it's done in this chapter.

Going Live with Your Website
- No one can access your site until you upload your files to a server. Dreamweaver makes this easy, as you'll see in this video.
  
  Uploading Your Files to a Server
  
  09:06
- It's important to test your site to make sure that it's working correctly and is valid according to W3C (World Wide Web Consortium) standards. Dreamweaver provides tools for doing this, and you'll learn about them in this video.
  
  Testing Your Site
  
  06:45

Welcome to Getting Started with Dreamweaver and CSS

This workshop takes the quickest path to getting you started creating websites with Dreamweaver and CSS. Along the way you’ll learn the basics of how the web works and the fundamentals of web design. The contents of this course include:

Understanding the Web
In order to be an effective web designer, you need to know some fundamentals of the web. This chapter walks you through some key concepts that are important to know when creating files for the web.

Creating Web Pages with Adobe Dreamweaver
Dreamweaver’s job is to create and edit XHTML files for you. This chapter walks you through the various ways that Dreamweaver simplifies the process of working with XHTML files.

Creating Links
Links are the backbone of the web. Without links, surfing the web would be a mundane and time-consuming process. This chapter walks you through the process of creating links in Adobe Dreamweaver.

Working with Graphics
There are many graphics file formats that you can use to save your images. Only a few of them, however, are suitable for web use. This chapter explains the file formats available for web use and shows you how to insert and resize graphics in your web pages.

Formatting with CSS
Cascading style sheets (CSS) control the formatting aspects of any web page. In this chapter you’ll gain a well-rounded understanding of the capabilities of CSS.

Going Live with Your Website
Once your site is created, you need to test your pages and then make them available on a public server. You’ll see how it's done in this chapter.

The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn.

System Requirements

    •    Broadband internet connection
    •    Up-to-date browser with Flash plug-in
    •    Screen resolution 1024x768 or higher
    •    Sound card with speakers or headphones attached
    •    Pentium 4 2.6 GHz or higher, or Apple Mac G5
    •    512 MB RAM

Ready for iPad, Android, and HTML5

It's easy to watch this course from your Android device, iPad, or iPhone (4 or later). Access videos straight from your browser, or, for Android devices or iPads, use this course in one of our free apps.

Project Files (Downloadable Feature)

Project files are included with this course so you can practice what you learn and work right along with the videos.

Powerful, Feature-Rich Interface

This course features video2brain’s interactive interface. As you navigate the course, rolling over a chapter or video brings up text describing that item.

Full-Screen mode provides a hi-def, immersive experience. And Watch-and-Work mode puts the video into a resizable window that you can shrink so you can watch the lessons on one side of your screen while you’re following along and applying what you’ve learned on the other.

HD Video

This course comes in crisp 1280 x 720 high definition video.

Bookmarks (Downloadable Feature)

Available in the downloadable version of our courses, this feature makes it easy to create a custom bookmark in any lesson to mark where you left off or to make note of something you want to refer back to later. You can even add a name or short note to remind yourself what the bookmark is for.

Getting Started with Dreamweaver and CSS

Carlos Bolivar

This comment was made on the following lesson: The XHTML Reference

I have taken other similar courses about CSS and this is the first one i understand the most and everything is clear, thanks again

A well styled course

Gregg V.

This comment was made on the following lesson: Using CSS to Display Graphics

I thought that this course was very helpful and extremely easy to follow along with.
Both HTML and CSS are explained in a real world context; a hypothetical website. Dreamweaver's unique features are shown off in relevant and logical sequence, and there is just enough repetition, which I find helpful when trying to grasp a new interface or workflow.
The presenter has a very good style; articulate, animated and patient.

Recommended Courses

Getting Started with Dreamweaver and CSS

Step-by-Step Basics to Get You on Your Way

About this lesson

Welcome to Getting Started with Dreamweaver and CSS

System Requirements

Welcome to video2brain!

Other sites. Andere Seiten. Otros sitios. Autres sites.