Adobe TV Tue, 08 Feb 2011 13:53:23 +0000 Sat, 05 May 2012 05:00:15 +0000 http://tv.adobe.com/show/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5 Adobe platform evangelist Paul Trani takes you through a basic step by step guide for creating your first website with Adobe Dreamweaver CS5 using HTML, CSS and more. 2011 Adobe Systems Inc. http://thumbnails.tv.adobe.com/441FE589-1C23-D1F3-EF58569665DE0D20.jpg http://tv.adobe.com/show/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5 60 adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:17:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-01-introduction/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-01-introduction/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:16:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-02-creating-your-1st-web-page/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-02-creating-your-1st-web-page/ adobetv@adobe.com (Adobe TV) In this step of the tutorial, you can find out how to use the files panel in Dreamweaver to organize and set up 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. Wed, 02 Feb 2011 12:15:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-03-local-site/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-03-local-site/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:14:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-04-creating-and-importing-images/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-04-creating-and-importing-images/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:13:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-05-linking-to-websites/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-05-linking-to-websites/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:12:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-06-changing-visual-properties-of-html-content/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-06-changing-visual-properties-of-html-content/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:11:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-07-understanding-and-using-css/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-07-understanding-and-using-css/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:10:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-08-website-navigation/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-08-website-navigation/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:09:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-09-using-prebuilt-templates/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-09-using-prebuilt-templates/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:08:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-10-creating-multiple-pages/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-10-creating-multiple-pages/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:07:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-11-adding-flash-content/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-11-adding-flash-content/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:06:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-12-adding-embedded-media/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-12-adding-embedded-media/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:05:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-13-adding-advanced-interactivity-with-spry/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-13-adding-advanced-interactivity-with-spry/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:04:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-14-testing-and-troubleshooting-the-site/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-14-testing-and-troubleshooting-the-site/ adobetv@adobe.com (Adobe TV) 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. Wed, 02 Feb 2011 12:03:00 +0000 http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-15-uploading-the-site/ http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-15-uploading-the-site/