Launched today is an exciting new classroom series from AdobeTV and yours truly: Basic Site Layout and Navigation in Dreamweaver CS5. In it I take you through a step by step guide for creating your first website using Adobe Dreamweaver CS5. Along the way I explain the basic concepts around how the web, HTML and CSS work as well as the basics of website layout, navigation and integrating media such as images, video and Flash SWF content.
The full series is available in the following parts:
- Introduction
Get started learning about some of the key frequently used terms in web design such as URL, web server, HTML and CSS. Â Then get a quick overview of the fundamentals of websites and how they work. Â Explore the provided sample design that serves as the starting point for building the actual site in Dreamweaver. - Creating Your First Web Page
Take a quick tour of the Dreamweaver workspace including various panels and the Code/Design views. Â Begin building your page by starting with a blank HTML page, and then bring in your content from a text document. Â Go on to brush up the page by changing some of its basic properties. - Setting up a Local Site
In this step of the tutorial, you can find out how to use the files panel in Dreamweaver to organize and setup your site on the local hard drive in your computer – while it is still being worked on before it can be published to a web server later. - Creating and Importing Images
Learn how to create and prepare images to incorporate into your website design. Â Save them in web friendly JPG or PNG formats while maintaining a good balance between quality and small file size. Import them into Dreamweaver and make some initial adjustments to layout and alignment. - Linking to Websites
In this lesson, you’ll learn how to create hyperlinks. Hyperlinks allow you to jump from section to section within the same web page or jump to another web page within your site or other external sites on the web as well as link to objects such as email addresses. - Changing Visual Properties of HTML Content
Its time to start customizing the appearance of your website by stylizing the HTML elements. You’ll start by defining the visual properties of the body text such as  the font, color and sizing. Also customize the color of the link text depending on its various states.  Then you’ll learn how to add background images. - Understanding and Using Cascading Style Sheets
In this video you’ll continue to further customize your website using CSS or Cascading Style Sheets. With CSS you can control many visual aspects of the website efficiently and consistently.  Learn the basics of how CSS rules work and how you can easily take advantage of the power and flexibility of CSS in Dreamweaver including creating and editing your own CSS class. - Website Navigation
This part of the tutorial will cover the basic concepts of site navigation. Explore various models of navigation that you can implement to link the multiple pages of the site together. Â Also learn how to integrate your navigation elements to your site architecture using prebuilt layout templates in Dreamweaver. - Using Prebuilt Templates
Use the prebuilt Dreamweaver layout template that you picked in the previous lesson and fill in the actual content from your web page. You’ll also learn how to edit the layout by linking and modifying its CSS and using Live View to preview the changes you make to your code. You’ll also use Inspect Mode to locate where various parts of the page are defined in the code. - Creating Multiple Pages
This lesson covers how to create multiple pages based on the page you have already created earlier.  You’ll then learn how to set up the navigation and how to change the content for each page including adding different background graphics by customizing certain CSS properties while still maintaining the shared CSS scheme across the site. - Adding SWF Content
Using Flash elements can add life to a web page.  In this video you’ll see how to incorporate Flash based (SWF) animation and interactivity components to the header of each of your pages. You’ll also learn how to define alternate content as place holders to be displayed in case the user doesn’t have Flash Player installed or is using a device that doesn’t support Flash. - Adding Media
In this lesson you’ll learn how to add media from other sources using embed code.  Further polish the “Menu†section of your web site by embedding an online video from YouTube.  Also integrate an interactive map showing the location of the restaurant through Google Maps on your “Contact†page. - Adding Advanced Interactivity with Spry
Spry is a JavaScript and XML based framework that you can use to easily create drop-down menus, collapsible panels, and other rich interactive experiences in web design. Dreamweaver comes with many Spry components that you can easily drop into your pages without writing code. In this video you’ll learn how to insert and customize an “accordion†Spry widget that expands and collapses sections of text in the “Menu†page of this project. - Testing and Troubleshooting the Site
Not all browsers work the same.  See how you can use tools found within Dreamweaver such as the browser compatibility panel to check for errors or compatibility issues and look for possible solutions.  You’ll also learn how to use BrowserLab – a CS Live service – that lets you test out how the site renders in various browsers on different operating systems to further investigate potential issues or visual discrepancies. - Uploading the Site
Learn how to publish your site by uploading your files to a web server that is accessible to the public online (For a real project you’d need to have your own service provider.  This lesson only serves as a guide for this final step.) Learn how to configure Dreamweaver to connect to your web server using the login information provided by your web host.  After uploading, you should be able to test out the live site online on the web.
Source files are also available for each lesson. Have fun checking it out and let me know if you have any questions about any part along the way!
