Subtitles of the Movie

The focus of this tutorial is to illustrate how to make life very easy for the Web designer who is up against time. Sometimes it's just not practical or financially viable to spend a lot of time creating a site from scratch, and having to think of all the time consuming considerations of getting the CSS Styles in place alongside regular HTML. So, to your rescue comes CSS Sculptor from WebAssist. It's a commercial extension and can be purchased directly from WebAssist at www.webassist.com. Once you've installed it you'll wonder how you got along without it when you need a quick and easy, fully conversant CSS styled site. This is how it works. Here in our Design View we go to Insert, drop down to WebAssist, across to CSS Sculptor, and across again to New Page. At a stroke you can see the wealth of options you can use to create a fully functioning, totally compliant CSS Web page that you can subsequently use as a Dreamweaver Template to design the full site. OK, to start, from the tabs across the top here we'll remain on Layout to design and commit to the general CSS style rules for the page. And now we can choose a Preset Layout from the Layout Field here. WebAssist provides a massive amount of styles to choose from so have a look through them to decide which layout suits your site best. I'll choose this 3-column layout. I'll just click on it to progress to the next stage. If you look here in the Preview section you can see the layout so far. I'll now choose a more specific design by using this drop down menu that reveals around 10 presets. I'll choose Slate. Notice the preview updates to reflect this. To have a closer look, just click on the Preview to open the design so far in your browser. OK, I like the look so far so let's go back to the Design View to customize further. You can make further changes to the page structure in this section. For example, the Width and Position of the site's elements on the page can be customized. I'll revert back to the default of 900 pixels for this layout and design, but do explore these well indicated tick boxes to make it suit your Web page. For example, do you want the page elements positioned on the Left, Center, or Right of the page? I'll leave it at Center. Moving down to the Layout Components section lets you include a Header and a Footer on the page as desired. Furthermore, you can instruct to make these elements Stretch Across the Width of your page, or Revert to Normal across the Width of the elements that make up the site. I'll do the same for the Footer. Note, you get more options here with the Footer. I've also ticked the top navigation box to see if this works for the design. I'll Preview in Browser to see it better. As you can see an area has been created to allow you to insert navigation at the top of the design. Back to the Design View now, I'll untick the top navigation box to remove it and click Apply. See? It's gone. Wow! This is how easy it is to sculpt your page. Back to the top of the Interface. Remember there are all these other options available. I'll show you them, but leave the defaults full speed. As you know, CSS functions predominantly as what's known as the Box Model, and this tab allows manipulation of this. The scope of this VTC MasterClass! tutorial doesn't allow me to analyze the intricacies of the box model, but here in the Layout Components Section you can adjust the settings to suit your design. If you know what you're doing explore these, but if you're unsure I'd recommend leaving the Presets until you've spent some time understanding the power of CSS. You can still create great sites without changing the Presets. OK, we'll move down to the Margin and Padding area where you can adjust, obviously enough, the position of the main elements on your page. Again, we'll leave it at the default settings for the sake of speed, and move to the Type tab where you declare the CSS you require to improve the look of your text. Use the drop down menus to select a font family. Choose normal, italic, or oblique. Choose your font Size, and Color. Wow! You can just about do anything you like to make a bespoke site with CSS Sculptor. Even your h1 through to h6 elements can be individually adjusted by clicking these tabs. I'll change h1 to another font and click Apply and click to Preview. The h1 Main Content has now updated to take on this CSS Rule. Back to our Design View. Before proceeding, notice you can now make changes to your links, etcetera, all from this simple Interface. I've said it before and I'll say it again Ð Wow! The amount of time you'll save in one site is worth the admission fee alone. And it gets better when you go to the Design tab where you can adjust the Background of your page, change the Color, add a Background image, choose to repeat it, etcetera. Wow! There's that word again. I won't be printing the page so I'll move over to Output but it's there if required. Note the Help Hint below the tab states you can modify CSS properties for print here. OK, here at Output you finally choose where to store your CSS code for Screen and Print. If you save as a Preset you can use this as a Starter Template for further websites you create. Just tick the radio buttons and tick boxes appropriately for your future preset. When you're done click Finish to create your fully working CSS Sculpted page to use as a Dreamweaver Template. You can now adjust further in Dreamweaver by adding Navigation and Images as you see fit. So, to recap, CSS Sculptor allows you to very quickly and precisely create a CSS page to use as the base page of a website. Using Dreamweaver's Template function means you'll be up and running in no time. Fantastic!