Topics Search

Adobe Dreamweaver

  • Page 1 of 16
  • »
 

Creating Forms in Dreamweaver CC

Creating Forms in Dreamweaver CC Icon
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.
 
Advertisement:
 

Add Video to Your Website with Dreamweaver CC

Add Video to Your Website with Dreamweaver CC Icon
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.
 

Copy css: convert shapes & text effects to css

Copy css: convert shapes & text effects to css Icon
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.
 

HTML Email? Dreamweaver CC Delivers!

HTML Email? Dreamweaver CC Delivers! Icon
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?
 

Rolling Animate CC Projects into Dreamweaver CC Web Pages

Rolling Animate CC Projects into Dreamweaver CC Web Pages Icon
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.
 

Use the Extract panel with Artboards

Use the Extract panel with Artboards Icon
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.
 

18 Dreamweaver Tips in Celebration of 18 Years

18 Dreamweaver Tips in Celebration of 18 Years Icon
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!
 

Develop a Responsive Design with the Visual Media Queries Bar

Develop a Responsive Design with the Visual Media Queries Bar Icon
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.
 

Integrating jQuery UI components in Live view

Integrating jQuery UI components in Live view Icon
The promise of jQuery—a fast, flexible JavaScript framework—is beautifully realized through jQuery UI, a series of consistent, themeable, highly-interactive page widgets, complete with interactions and effects. As you’ll see in the article, Dreamweaver CC brings the jQuery UI promise front-and-center in Live view. Before we dive into working with the various components, let me quickly cover the differences between jQuery and jQuery UI. jQuery is the world’s most popular JavaScript framework in use by millions of sites and is fully supported by Dreamweaver. jQuery UI is a code library that extends jQuery to create a wide range of widgets with associated effects and user-oriented capabilities.
 

How to create a simple responsive website

How to create a simple responsive website Icon
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.
 

Use the DOM Panel to Rearrange HTML Elements

Use the DOM Panel to Rearrange HTML Elements Icon
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.
 

Incorporating Advanced Bootstrap Media with Dreamweaver CC

Incorporating Advanced Bootstrap Media with Dreamweaver CC Icon
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.
 

Faster Coding with Emmet in Dreamweaver CC

Faster Coding with Emmet in Dreamweaver CC Icon
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.
 

Making an existing site responsive with new capabilities in Dreamweaver CC

Making an existing site responsive with new capabilities in Dreamweaver CC Icon
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.
 

Create Text Filling with Water Effect

Create Text Filling with Water Effect Icon
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…
 

Create a Responsive Website from Scratch

Create a Responsive Website from Scratch Icon
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.
 

Installing extensions for Dreamweaver CC 2015

Installing extensions for Dreamweaver CC 2015 Icon
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...
 

Use Resizable Live View to Lay Out a Responsive Website

Use Resizable Live View to Lay Out a Responsive Website Icon
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.
 

Build Responsive Websites with Built-in Bootstrap Templates

Build Responsive Websites with Built-in Bootstrap Templates Icon
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.
 

Tips for Mobile and Responsive Design

Tips for Mobile and Responsive Design Icon
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.
  • Page 1 of 16
  • »