The form is a direct gateway to your online visitors and necessary for any site-based communication. Dreamweaver CC has a great many form options and possibilities, from basic to advanced. In this post, I’ll walk you through the process of creating functional, tasty forms. No french dressing required.
Video content is an essential part of web page design today. Many people prefer to watch a short video rather than read content, such as learning how to refinish a table. With the evolution of HTML5 video tags, it is much easier to insert video on a page than it was previously. One large advantage of the HTML5 format is that it does not require a plug-in to run a video.
In this tutorial, we’ll talk about the somewhat ill-advised “Copy CSS” feature of Photoshop and how it works. We’ll take code for text and a button that we’ve created and move it over into Dreamweaver and adjust and tweak the CSS code until it creates a graphic similar to what we had in Photoshop. You will see some of the pros and the cons of using this method for creating web design elements or entire web pages.
A recent industry study named Dreamweaver CC the overwhelming favorite HTML editor for designing and developing HTML emails. And not by a little: Dreamweaver was preferred by greater than twice as the nearest competitor. Why is this venerable web development tool the number one choice for designing HTML emails?
Sure, animations bring web pages to life. But for far too long, you needed to virtually channel Victor Frankenstein (pronounced Frahnk-en-steen) just to juggle all the elements necessary for handling a proper integration across browser platforms. The recently released, re-engineered and rebranded Animate CC provides an all-in-one package that Dreamweaver CC can easily incorporate—with or without a lightening Flash. Pun so very much intended.
One of the new features Adobe Photoshop 2015 introduced is a new type of layer group called an artboard. An artboard is a container that can hold several layer stacks within a layer group, then clip any elements placed on the artboard to the artboard boundaries. You can use artboards to design comps for web pages, then use the content within the artboard layers to build your pages in Adobe Dreamweaver with the Extract panel.
WOW, Dreamweaver is 18! Our baby is all grown up. From a precocious start that took the web-building world by storm, Dreamweaver has flourished by continually innovating to keep apace with modern trends in design and code. To celebrate, I’ve compiled 18 tips that highlight Dreamweaver’s power and finesse. While this collection includes a few oldies-but-greaties (better than just goodies), most are culled from recent Dreamweaver innovations which you may have overlooked. Let’s party!
Learn how to use the Visual Media Queries bar to create pages that will look great on every device. The implementation of responsive design in standard website development is accepted practice today. The tools for designing responsive website have improved dramatically over the last several years. Adobe Dreamweaver led the charge, introducing Fluid Grid Layouts, then Bootstrap and Starter Templates to serve as guides for creating responsive pages. Regardless of the tools you use or the approach you take, you must first understand media queries, the backbone of responsive design.
In this video tutorial, you will learn how to use div tags and css to create a simple responsive website using Dreamweaver. For this illustration, I have used Adobe Dreamweaver CS6 as my html editor, you can use any editor you have.
Many times you may have a good start on a page design, but would like to experiment with reordering some of the page elements. This is very easy to do with the DOM panel and Live view. The DOM panel is an interactive tree representation of the HTML elements that provide the structure for a page. DOM stands for Document Object Model. It is an outline of sorts that begins with the opening html element, then lists each element as it appears in order on the page. The elements are grouped under either the head or the body tag. Elements nested under other elements are called child elements. Elements that contain nested elements are called parent elements. Dragging an element to a different location on the tree moves it to the corresponding location on the page.
Optimizing your web page or app layout for the exact screen in use is, by now, part and parcel of the web designer’s workday. Bootstrap (and notably, Dreamweaver’s implementation of same) does a fantastic job adjusting column widths—and the enclosed content—as needed. Media of all types needs to be handled responsively as well as text and, happily, both Bootstrap and Dreamweaver are up to that task. And then some.
Even though I love Dreamweaver for its visual design capabilities and use them as much as I can, there are times when I hand code. It’s inevitable. And, inevitably, I get frustrated entering the same basic code for the upteenth time. How often can you create an unordered list for a nav bar and not go crazy with the repeated <li> elements? There’s gotta be a better, faster way to code.
Keeping current website clients happy is just as important as securing new ones. And, in today’s multiple device world, happiness is a responsive site. Dreamweaver CC 2015 includes very powerful tools for creating responsive sites from scratch—which can also be leveraged to convert non-responsive web pages into Bootstrap-driven multi-device ready ones. In this post, we’ll run through the retrofit process, step-by-step.
In this post, I’ll show you how to make a ‘text filling with liquid’ effect. It can be used for preloaders, titles and such, but overall it’s a neat study of SVG effects in general. Before we delve into the code, let’s take a look at how the effect works. First, we need to make the wavy water effect. This can be accomplished by making a wavy graphic…
Responsive websites, optimized for different screens, are an absolute must. Over half the number of everyday visitors come from devices other than a desktop computer. To reach your market—any market—you need responsive design. In this tutorial, I’ll show you how to create a responsive website from the ground up using the new device-savvy power tools in Dreamweaver CC 2015.
The extension manager is no longer available to install extensions and Add-Ons for Creative Cloud version 2015 and later. This article discusses how to install extensions and Add Ons for Dreamweaver CC 2015 and later versions. Third-party extensions can be installed through ZXP files using the Exman command line tool...
Dreamweaver’s Live View does double duty as both a live preview of an open page and a live edit mode. It is no longer necessary to switch between Design and Live Views to edit and preview page elements. This tutorial will explore a few of the Live View tools: the Visual Media Queries bar, the Live View Scrubber, the DOM panel, and Device preview.
Dreamweaver now has several Starter Templates to give you a jump start toward creating web pages that will look great on any size device. These templates are divided into two categories: Bootstrap Templates and Responsive Starters. This tutorial will show you how to create a page based on a Bootstrap Template.
Digital UX prototyping tools are evolving rapidly. The release of Photoshop CC 2015 brought exciting news of Preview CC which allow designers to preview their artboards and layer comps on devices. Seeing work in context on devices is an invaluable way to evaluate and improve concepts. Getting work on to the relevant device screens is also key to content first approaches.