Part 09 - Using Pre-Built Templates

Show:

Classroom: Basic Site Layout and Navigation in Dreamweaver

Products Covered:

Save

Translations

Was this episode helpful?

Yes No

About This Episode

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.

Download sample files

Show More Details

More Episodes

Comments

Episode Title	Runtime	CC	Products Covered	My Library
Part 01 - Introduction Part 01 - 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. Runtime: 00:05:32 Added: February 02, 2011 Views: 135,535	00:05:32
Part 02 - Creating Your First Webpage Part 02 - Creating Your First Webpage 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. Runtime: 00:12:26 Added: February 02, 2011 Views: 136,539	00:12:26
Part 03 - Setting up a Local Site Part 03 - 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 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. Runtime: 00:04:17 Added: February 02, 2011 Views: 69,808	00:04:17
Part 04 - Creating and Importing Images Part 04 - 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. Runtime: 00:06:53 Added: February 02, 2011 Views: 71,026	00:06:53
Part 05 - Linking to Websites Part 05 - 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. Runtime: 00:05:33 Added: February 02, 2011 Views: 52,229	00:05:33
Part 06 - Changing Visual Properties of HTML Conte... Part 06 - 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. Runtime: 00:09:18 Added: February 02, 2011 Views: 63,872	00:09:18
Part 07 - Understanding and Using Cascading Style... Part 07 - 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. Runtime: 00:18:16 Added: February 02, 2011 Views: 74,721	00:18:16
Part 08 - Website Navigation Part 08 - 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. Runtime: 00:09:13 Added: February 02, 2011 Views: 52,111	00:09:13
Part 09 - Using Pre-Built Templates Part 09 - Using Pre-Built 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. Runtime: 00:15:55 Added: February 02, 2011 Views: 61,617	00:15:55
Part 10 - Creating Multiple Pages Part 10 - 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. Runtime: 00:24:27 Added: February 02, 2011 Views: 62,036	00:24:27
Part 11 - Adding SWF Content Part 11 - 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. Runtime: 00:17:59 Added: February 02, 2011 Views: 32,333	00:17:59
Part 12 - Adding Media Part 12 - 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. Runtime: 00:10:17 Added: February 02, 2011 Views: 22,715	00:10:17
Part 13 - Adding Advanced Interactivity with Spry Part 13 - 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. Runtime: 00:12:36 Added: February 02, 2011 Views: 29,981	00:12:36
Part 14 - Testing and Troubleshooting the Site Part 14 - 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. Runtime: 00:10:53 Added: February 02, 2011 Views: 16,586	00:10:53
Part 15 - Uploading the Site Part 15 - 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. Runtime: 00:08:44 Added: February 02, 2011 Views: 24,646	00:08:44