Establishing a Dreamweaver CC and WordPress Workflow

I grew up a chemistry nerd and still vividly remember the thrill of sprinkling iron filing over my mini Bunsen burner to view the sparkling fireworks. The idea that two elements could combine to such a spectacular effect was mind-blowing to me. I experienced the same synaptic joy when I discovered how WordPress and Dreamweaver were made for each other.

 

hero

 

WordPress is, undeniably, the most popular CMS in use today. With the lion’s share of the market (47.5% of the top 10k sites, according to BuiltWith.com), vast array of templates and plug-ins, not to mention an ever-evolving ease-of-use, WordPress offers a direct route to a wide spectrum of site destinations. But what if you don’t want to go exactly where a WordPress template says you should? What if your client—or your own personal design sense—requires a custom online presence? Then let me introduce you to the best design and coding partner WordPress never knew it had: Dreamweaver CC.

I’m a huge fan of the Dreamweaver / WordPress workflow and having combined these two elemental power tools for years to construct sites for clients who need content management capabilities along with a personalized look-and-feel. Dreamweaver is, I believe, well-suited to the task, not only as a design engine to perfect the front-facing site, but also as an efficient coding environment for handling custom, inevitably necessary, PHP functions.

New Dreamweaver CC Starter Templates Make Responsive Design a Snap!

One of the great new features in the October 2014 release of Adobe Dreamweaver CC 2014 is the addition of five starter templates: About page, Blog post, eCommerce, Email, and Portfolio. Each of these templates provides a responsive structure to build a new web page that will look great whether it is opened on a mobile device, a tablet, or a PC. The About page, Blog post, and eCommerce templates are built with media queries. The Email template is built with tables, and the Portfolio template is built with Fluid Grids. This is a very positive step toward simplifying the process for those less comfortable with building a responsive design from scratch.

You can create a new page based on one of the Starter Templates by using either the File menu or the Welcome Screen. Although the screens are different, the results will be the same.

Web Designs We’re Falling For This Valentine’s Day

The possibilities for web design are endless. The industry is evolving and designers are looking beyond the frame to incorporate the narrative and visual components of film and television into their designs. Never before have so many beautiful websites existed, doubling as works of art and fully immersive user experiences.

We talked to three designers from award winning studios around the world to find out which websites they’re loving right now, and to learn how other web designers can incorporate these innovations into their own designs.

Valentine #1: Warsaw Rising

warsaw

A great example of incorporating film, says Clayton Kemp, creative director at Zen Den Web Design in San Francisco, is Warsaw Rising. Kemp’s portfolio includes highly visual sites such as Terra Gallery and Events, Alta Mira Recovery, and Humanity United – Performance Report.

“I really love how the overall aesthetic principles of the site lend themselves to an old film or map from the era,” he says. “They have combined a perfectly matched vintage color palette with just enough subtle graininess to create an awesome product. The site seamlessly blends modern technology with archive WW2 footage to craft a very unique and memorable experience for their users.”

Designed by Warsaw’s Bright Media, Kemp says Warsaw Rising’s main goal is to educate through entertainment, a trend he expects will be huge in the coming years.

Designers can learn a lot from this site, Kent says.

  • The stylish and contemporary UI does not detract from the vintage theme
  • The design invites users to walk through the narrative, rather than having to flip from page to page
  • It’s also been optimized for web flawlessly, loading quickly despite being visual and interactive

“All of these elements make this piece remarkable,” Kemp says.

5 Things to Do In 2015 to Make You A Better Web Designer

It takes talent, time and innovation to turn someone’s vision into something tangible, to take an idea down from the clouds and translate it into an experience. While practice will certainly make you a better web designer, there are things you can start doing right now that will immediately help you improve your designs.

1. Take out a pen and a pad of paper.

Web designers spend a lot of time building things in applications such as Dreamweaver and Photoshop, but sometimes the best way to hash out an idea is the good old-fashioned way. Don’t be afraid to write notes and organize information on paper beforehand so you have a better idea of how to approach the design later. Drawing or sketching your ideas can help you pull together concepts, layout ideas, and experiment with styles, all while simultaneously allowing you to see your designs through the lens of a different medium. And if you use smart technology like the Creative Cloud connected notebook you can save time by importing your sketches directly into the program using an app.

Is Flat Design a Web Design Standard That’s Here to Stay? 10 Designers Chip In

These days, the number one thing that’s required of web designers working on anything (that’s anything) is to make sure that their creation “has this flat feel about it.” In other words, the term “flat design” has become almost synonymous with “good design.”

But is flat design just a temporary trend, or is it here to stay and we’ll be designing flat websites for years to come? Can it be, perhaps, the new standard of web design?

Let’s find out.

To help me solve this mystery, I’ve invited 10 designers and web design experts to share their input on one big question:

  • Is flat design something that’s here to stay, or will it fade to make room for another, completely new trend?

Leverage Creative Cloud Files For Your Dreamweaver Code

Creatives create files, and files take up space. Luckily, Adobe Creative Cloud subscribers are covered. With Creative Cloud Files, subscribers have access to 20 GB of file storage that can be used for backups, link sharing, folder collaboration, and more.

In this post, I will show how you can upload your code to Creative Cloud Files and sync to it from anywhere – work or home – with ease.

Get started:

  1. Locate the ‘Creative Cloud Files’ folder on your computer.Creative Cloud File
  2. Create a folder inside the ‘Creative Cloud Files’ folder. Let’s call this new folder ‘SampleProject’.
  3. Copy all source code (HTML, CSS, PHP, JS, etc.) to the ‘SampleProject’ folder.
  4. Create a new Site in Dreamweaver with Local Site Folder path set to ‘SampleProject’ folder.New Site Dialog
  5. Your project files and subsequent changes will now automatically be synced in your Adobe Creative Cloud Files.

Your Questions Answered: How do I create a horizontal, center-aligned CSS menu in Dreamweaver?

We have received a number of requests from Dreamweaver users about creating menus, and we’re here to help! In this ‘Your Questions Answered’ post we’re tackling the basics of creating a menu in Dreamweaver. We’ll get more advanced in later posts, exploring how to create drop down menus and responsive menus, but for now let’s get started with a solid foundation to build off of.

If you are new to Dreamweaver, see our previous ‘Your Questions Answered’ post which walks you through setting up a site in Dreamweaver. Once you have a site set-up, you’re ready to rock this tutorial.

Let’s get coding!

Using The CSS :target Selector To Create JavaScript-less UI Effects

Instead of linking to new pages, sometimes links (<a> elements) reference sections, fragments or other elements of the same page. These kind of links are prevalent in one-page website navigation.

The CSS :target pseudo-class selector is used to select and style the target of an internal link in a document, the fragment of the page referenced in a link’s href attribute.

For example, if you have an anchor tag linking to a "further reading" section of an article…

<a href="#further-reading" title="Further reading resources" />

<!– … –>

<section id="further-resources" >

<!— … —>

</section>

…you can use the :target selector to highlight this section when the link is clicked to guide the reader’s eye to it. This highlighting technique is known as the yellow fade technique and was first introduced by 37 Signals.

#further-resources:target {

animation: highlight .8s ease-out;

}

@keyframes highlight {

0% { background-color: #FFFF66; }

100% { background-color: #FFFFFF; }

}

Your Questions Answered: How do I center align a web page in Dreamweaver?

We regularly get asked questions on our forum, on Twitter and on Facebook about how to do different things in Dreamweaver CC, and we’re happy to help! We want to make sure you have the know-how to make your ideas a reality using our tools, so this is the first post in a series we’ll be publishing where we’ll answer your how-to questions. Have a burning question you’d like answered? You can always go through the channels mentioned above, or feel free to leave a comment below.

Today, we’ll be talking about how to create a web page in Dreamweaver and center-align its contents. If you are looking for the code to center your page, dive directly to the section ‘Center the Content.’ However, if you are new to web design and are getting started with Dreamweaver, it’s wise to go through every step of this tutorial.