Beginners Guide to Adobe Dreamweaver CC

Structure a page in Dreamweaver CC by creating div tags with classes and ids at the correct insertion points, then manage paragraph tags in code view.

Learn to add classes and IDs to div tags in Dreamweaver CC using the properties panel, save changes, and avoid duplicating IDs while reusing classes.

Learn to add images to a Dreamweaver CC project by copying them into the root folder, resizing with width and height, and previewing their layout on the page.

Learn to add headings and paragraphs in Dreamweaver CC, convert paragraphs to headings one, two, and three via the properties panel, and apply bold or italic emphasis.

Create and customize tables in Dreamweaver CC by adding rows and columns, setting 100% width and borders, merging cells, and entering data; apply color styles for browser preview.

Learn to insert a figure element in an HTML page with Dreamweaver CC by adding an image, wrapping it in a figure tag with a caption, and previewing in the browser.

Create and switch between unordered and ordered lists, add list items, and attach links with target options in Adobe Dreamweaver CC.

Learn to structure a single-site using HTML5 semantic elements such as nav, aside, article, section, and main, with hands-on code editing in Dreamweaver CC.

Explore header and footer metadata, including description, keywords, and viewport tags, then add scripts and email links via anchor tags to create a responsive, interactive Dreamweaver page.

Insert a video box in Dreamweaver CC, configure autoplay, loop, and mute, set the video source and poster, and preview a loaded video that auto-plays on page load.

Demonstrate how to add HTML5 audio to a Dreamweaver CC document, select an audio source, and use the embedded audio player to play the clip.

Learn to add HTML components in Dreamweaver CC, including video, iFrame, Flash, plugins, and rollover images, and control layout with date formats and line breaks in design and code views.

Learn to create and configure forms in Dreamweaver CC, using the form tag, action, and get or post methods for data submission.

Learn to work with text fields in Dreamweaver CC, adding a TextField and label, and configuring disabled, read-only, autofocus, placeholder, and required options.

Create a Dreamweaver CC form by building a two-column table, adding input fields for first name, email, password, phone, and search, configuring placeholders, required fields, and focus.

Explore built-in input types in Dreamweaver CC, including number, range, color, date, time, and text area. Learn to configure min/max values and common controls like buttons, selects, radios, and checkboxes.

Set up a basic website in Dreamweaver CC by creating a new project folder, adding an index page, linking a CSS file, and previewing in Chrome.

Explore how to style the body tag in Dreamweaver CC using the CSS Designer, adjusting margins, applying a background color, and saving changes for immediate browser preview.

Create a better navigation header by applying a class, then style padding, a bottom border, and a subtle box shadow with a background color.

Create a header container in Dreamweaver CC to hold logo, navigation, and banner content, then apply a 1000-pixel fixed width and center it, and add a logo and minibar inside.

Create a logo holder in Dreamweaver CC, add the logo image, and float left. Apply a clear fix, link the logo to the index page, and preview.

Create a navigation menu in Adobe Dreamweaver CC by adding a new navigation div with items like home, about, services, products, and blog, then tune display, padding, color, and font.

Create a banner by adding a background image, setting parallax and padding, then build a container with headings, lorem ipsum text, and a call-to-action button using an anchor tag.

Create the body content area in Dreamweaver CC, building a banner, a two-column container for image and text, then style with padding, shadows, and rounded corners.

Create and style a footer section in Dreamweaver CC by building a four-box footer with social links, white text on a dark background, padding, and a copyright area.

Explore how to bootstrap a Dreamweaver CC project, create a bootstrapped site with a pre-built layout, attach custom Bootstrap CSS, and preview responsive designs across breakpoints in live view.

learn how to add custom CSS to Bootstrap in Dreamweaver, create a new CSS file, link it to your document, and style a demo page using classes.

Explore Bootstrap's grid system by adding containers, rows, and three-column layouts; learn responsive breakpoints, content nesting, and spacing to optimize layouts across devices.

Customize the navigation bar in Dreamweaver CC by creating a new custom class and applying changes to background, text and dropdown colors, borders, and gradients, then preview and save.

Customize bootstrap navigation by choosing container or full-width layouts, and explore navbar types such as fixed top, fixed bottom, and inverted, with examples of brand color changes.

Build and customize a Bootstrap carousel in Dreamweaver CC by configuring the container, row, and column, replacing placeholder images, and ensuring slides use 100% width and height auto.

Explore Bootstrap image classes to create circular and rounded thumbnail images in a four-column grid with placeholders and responsive styling, while editing images and saving changes in Dreamweaver.

Create and customize thumbnails in Dreamweaver CC by applying a card class, removing padding, and duplicating columns to build multiple identical thumbnails.

Explore how to use media items and glyph icons in Dreamweaver CC to build a two-column layout, implement a commenting system, and apply spacing.

Learn to embed a responsive video in a Dreamweaver page by configuring nested columns, using offsets and centering to auto-adjust video size across devices.

Explore creating a Bootstrap jumbotron as a hero header, apply a banner background image with bold text and a button, then build a two-column banner with a custom banner class.

Learn to apply Bootstrap button styles to links in Dreamweaver CC, using default, primary, success, info, warning, and danger variants, with small and large sizes.

Explore button groups in Dreamweaver CC by building a four-column layout, testing basic button groups, toolbars, vertical groups, dropdowns, and split buttons, with active and disabled states.

Learn to build form layouts in Dreamweaver CC using input groups, panels, and wells, including basic and small input groups, labels, list groups, and customizable panel content.

Explore tabs, pills, accordions, and pagers in Dreamweaver CC, building three-column layouts with nested navigation, dropdowns, and pagination plus breadcrumb features.

Create a new site and folder in Dreamweaver CC, then build a basic html page named index.html with a header and footer, and preview it on mobile without bootstrap.

Demonstrates creating and configuring a jQuery mobile list in Dreamweaver CC, including adding items, choosing list type, text bubbles, and split buttons with back arrows, then previewing.

Create a layout grid in a jQuery mobile page, adding header, photo, and content blocks. Add a division, configure rows and columns for mobile, then populate grid blocks with content.

Discover how to add and manage collapsible blocks in a liquidy mobile page within Dreamweaver CC, including a collapsible header, grid anchor, and expandable content that toggles on click.

Explore jQuery mobile form components in Dreamweaver CC, adding and arranging sliders, switches, email, search, time, number, date, and calendar options to build interactive mobile forms.

Learn to create a jQuery UI tabs panel inside a container in Dreamweaver CC, save the file, and preview the tabbed content in the browser.

Explore jQuery UI widgets in Adobe Dreamweaver CC, including date picker, progress bar, slider, and modal dialog. Build and customize boxes, duplicates, and effects with animation, overlay, and show-hide options.

Explore jQuery UI form components in Dreamweaver CC, including autocomplete sources, sliders with min, max, steps and animation, button sets, checkboxes, and radio buttons, all demonstrated inside a box.

Create an EMS web app project using bootstrap, including a login screen, employee management page, job and employee management, and a dashboard; set up the project folder and a stylesheet.

Create a login page in Adobe Dreamweaver CC by building a panel with a username and password form, adding a login button, and styling with a background and shadows.

Create a dashboard page by configuring a fixed top navigation, personalizing the user display, and building a responsive layout with a container, row, and panels for employees and jobs.

Create the employee page within the Dreamweaver CC dashboard by building a two-column layout, adding list group items and anchors, marking active items, and previewing the sidebar in the browser.

Create an employees table on the InfoSpace page with id, name, and email columns plus edit, details, and delete actions; add three rows and styling with table classes.

Create an add employee form in adobe dreamweaver cc using a panel and input groups for name, email, phone, and a job dropdown.

Create or update an employee page by building a form with predefined values and a phone input, update the panel to final, and preview in the browser.

Learn to build an add job form by configuring text inputs for job name and salary, removing unused phone fields, and labeling pay scale clearly.

Update a job page in Dreamweaver CC by saving with a date-based file name, entering predefined values such as graphic designer and 35,000, and linking pages for navigation.

Learn to link multiple Dreamweaver pages—home, login, dashboard, employee and job sections—creating navigation, forms, and a simple post-based login with authentication notes.

Create a single data page in Dreamweaver by building an employee detail and linked job record, using tables, IDs, and simple styling to deliver a functional front-end.

Set up a WordPress blogging project in Dreamweaver, outlining required pages such as front page, index, post, pages, categories, and archives, using a minimal templating approach.

Create a blog home page in Adobe Dreamweaver CC with a two-column layout, navigation bar, list group of posts, images, read more, and a gradient background.

Create a sidebar widget in Dreamweaver CC by adding divs, a panel heading, and archives, test in the browser, and duplicate panels to add multiple widgets.

Create a static page template with a sidebar and no comments, save it as a page, and reuse it for contacts, about, terms, privacy policy, or a homepage showing posts.