
Collect all project files for this course here.
Learn to build a complete Dreamweaver CC website from scratch, including a haunted house mockup, logo, underlined navigation, content boxes, and publishing to a live server.
Explore the roles of HTML and CSS in web design, distinguishing HTML for page structure and hyperlinks from CSS for text formatting and layout, with practical, beginner-friendly explanations.
Create new documents in Dreamweaver CC with the new document dialog, choosing page type, fluid grid layouts, and technologies such as HTML, CSS, PHP, and JavaScript.
Navigate the Dreamweaver interface and simplify your workspace by closing the extract panel, docking the properties panel, and exploring key panels like files, assets, cssa designer, and code inspector.
Define a Dreamweaver site to create a local folder and a remote server copy for your project. Name it, pick the local folder, and save to view the files panel.
Expand the files panel, create subfolders like images and assets in your local root, drag files into them, and refresh to reflect changes.
Preview your Dreamweaver CC work in a real web browser to see live results, then save, refresh, and verify in the address bar.
Learn how to build a modern web layout in Dreamweaver CC from scratch using div elements and CSS rules, including id and class selectors.
Configure a css rule in Dreamweaver CC to style a div with a hexadecimal background color and set width 960px and height 150px, then preview in Chrome.
Explore the CSSA designer panel in Dreamweaver, including the sources, selectors, and properties panes, and distinguish internal and external stylesheets while learning ID versus class selectors and applying properties.
Create the main content area in Dreamweaver CC by inserting a div via the insert panel, then define a #content CSS rule with 960x400 and a light gray background.
Master how to float feature boxes left to align them on one row and clear floats to keep the footer visible in Dreamweaver CC.
Wrap the entire layout in a master div, set a 960px width, and center it with automatic left and right margins to achieve a centered Dreamweaver CC layout.
Refine page layout by nesting divs in Dreamweaver CC, creating a logo div inside the header, defining a logo css rule, and setting dimensions and a temporary background color.
Master nesting layout objects in Dreamweaver CC by placing large containers, inserting nested divs into feature boxes, and using class rules with code and design views to refine layouts.
Fine-tune spacing by adjusting margins and padding, shifting content down by 10 pixels, and adding 10-pixel bottom margins to the menu, content, and footer.
Apply final touches in Dreamweaver CC by removing the content div background, setting a page background, adding borders and padding to the master, and zeroing body margins.
In Dreamweaver CC, insert lorem ipsum text from a plain text file in the assets folder into the main content div and feature boxes.
Insert a top level heading and a subheading to structure content and boost SEO in Dreamweaver CC, using the format menu to assign h1 and h2.
Override browser defaults with CSS to redefine how headings render in Dreamweaver. Create a custom h1 rule, adjust font, size, color, margins, and extend to paragraphs and images.
Learn how to redefine paragraphs and headings in Dreamweaver CC using css designer panel, create compound selectors, adjust font family, size, and line height, and duplicate heading styles for h2.
Apply font family and font size at the global body level in Dreamweaver to streamline CSS workflow and reduce repeated code.
Learn to format text with CSS class rules in Dreamweaver CC by creating a reusable emphasis class to apply font style, bold, and color to selected words.
Create and format unordered and ordered lists in Dreamweaver CC, switch between bulleted and numbered lists, and explore the underlying HTML with li, ul, and ol to build navigation menus.
Create a main navigation menu from an unordered list in Dreamweaver CC, using CSS selectors to style horizontal items with no bullets, centered text, color, and spacing, ready for linking.
Learn to insert images in Dreamweaver CC using drag-and-drop, the assets panel, or insert image dialog, and understand the graphic formats jpeg, gif, and psg.
Learn to control and format images with CSS by creating a reusable image controller class, applying borders, and using float for text wrapping.
Insert the site logo into the header with Dreamweaver CC, remove the sample image, and fine-tune spacing by adjusting left margin and top padding via CSSA.
Insert and style a home page image using css via a class rule, resize to 930px, add a border, and center it with block display in Dreamweaver CC.
Insert feature box titles above each image, create a simple feature box title CSS rule, and tune absolute positioning and margins to achieve overlapping, drippy text on Dreamweaver CC.
Create placeholder pages in Dreamweaver CC by adding empty pages (home, experience, tickets and rates, contact) and organizing them in a subfolder for later template overwrite.
Set up the internal hyperlink structure in Dreamweaver CC by linking the main navigation items to their pages, and connect the logo to home using the harpoon drag method.
Use Dreamweaver cc to convert the layout into a reusable template, replace placeholders with real pages like the experience and tickets and rates, and apply css for links.
Test and finalize your Dreamweaver CC site by validating navigation across index template pages, adjusting link colors, and syncing internal and external CSS before uploading to a live server.
Connect Dreamweaver to your live web server by defining a site, adding a server, and testing the connection. Then upload your local site with the Files panel.
Connect dreamweaver’s files panel to the live server, select all project files, and use put to upload a complete, exact copy of your local site, then test in the browser.
Explore getting started with Dreamweaver CC, build a functional website from scratch using divs and the CSS designer panel, then publish with an external style sheet to a live server.
Delve into the world of web design and Dreamweaver with this hands-on, step-by-step course hosted by award-winning software trainer and designer, Geoff Blake. First, Geoff will run you through the basics, getting you comfortable in the Dreamweaver interface, working with documents, and defining new websites. Then, it's on to building a fully functional web layout from the ground up. You'll learn how to construct your design, insert navigation menus, and test your work for usability. Handling text, graphics, and setting up a well-built set of site-wide CSS rules to control it all brings your site together; and Geoff even takes you through the process of rolling out your website, and taking your site live by uploading it to a live web server. Roll up your sleeves and delve into this practical, task-oriented look at building contemporary websites in Dreamweaver CC!