• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Fav Books
  • Tools
  • Journal
  • Hire Me
  • Contact
Small Biz Geek

Small Biz Geek

Small Business Design, Marketing & Technology Journal

Website design services

A Journal on Small Business Design, Marketing and Technology

  • The Internet
  • Marketing
  • Graphic Design
  • Web Dev
  • Web Design
  • Social Media
  • Technology
  • Miscellaneous

Adobe Dreamweaver – WYSIWYG Code Editor

You are here: Home / Darren’s Small Business Tools / Adobe Dreamweaver – WYSIWYG Code Editor

Dreamweaver

For general web design Dreamweaver has been my bread and butter over the years. It is an industry standard WYSIWYG editor and a tool I use daily.

As a regular user I feel I haven’t even scratched the surface of the software because I tend to stick to HTML, CSS, PHP and the occasional bit of Javascript.

If you look at the features of Dreamweaver there’s other programming languages including .ASP and ColdFusion but I’m not involved with these.

The Adobe Creative Suite fits my workflow preferences and I’m pleased Dreamweaver is a part of it. If you’re new to website coding, it’s what I recommend you use.

Experience with Dreamweaver

I fondly remember an early version of the software called Dreamweaver MX. It was originally owned by Macromedia.

This would have been when I was about 16 years old and starting my I.C.T. course in 6th form. I managed to get hold of a trial version and played around with it, developing some admittedly crap websites that used inline CSS HTML tables instead of display block CSS. I wasn’t interested in web design back then.

While studying graphic design at degree level (2003 – 2006) I had a brief, unsatisfactory skirmish with Apple Mac’s Quark Express.

I didn’t like it and resented being coerced onto the Mac. Quark’s  weird naming conventions, unfamiliar back end and frustrating FTP methods robbed me of enjoyment and creativity.

I hated the MAC and really wanted to be able to use something Windows based.

Dreamweaver was acquired by Adobe in 2005 and I began playing with it in 2006 and have continued to do so until now.

Coding Interface

Dreamweaver has both the code view and WYSIWYG which can be split into two panes.

More often than not code view is all I require. You can have Code view, Design view or a combination of the two.

Stylesheets can be attached to HTML documents so you can quickly access everything you need.

Dreamweaver Split Pane

It’s nice to be able to look at the containers you’re working on and see what is what. For a true representation of your design you need to test it with trial and error.

Viewing the web pages in your internet browser and accessing the code from there is the way I design most websites. Most browsers have an interface allowing you to inspect the code of each design element.

Browser Element Inspector

The “Element Inspector” feature of most major browsers is used to identify/isolate/target specific HTML containers and analyse the code. It lets you adjust things on the fly and see how it looks. If you’re satisfied with the adjustments, you go ahead and make the changes in your code within Dreamweaver before saving it.

As a WordPress user it is not possible to edit your site in WYSIWYG mode since the site uses PHP includes and not traditional webpage documents. In other words, you cannot really see what you’re doing to the front end of the website.

The Mozilla add on FireBug is one such method for “inspecting” a webpage. You right click the area of the page you want to examine and choose Inspect Element.

Browser Right Click Inspect Element

Then, you can make superficial tweaks to the stylesheet as a preview. Until you actually edit the stylesheet and save it, it remains unaffected.

The screenshot below is an example of how I would inspect a webpage. By selecting different containers you get to see the CSS code responsible for the design.

Browser Element Inspector

I select different containers and examine the code shown in the bottom pane.

You can alter the values and see how it affects the design.

If you like what it has done to the page, you would need to go into Dreamweaver, find the corresponding code and edit it.

Stylesheet CSS

This is probably the favourite way to design among developers/designers. Of course, you can use any web editor for this, even Notepad if you’re an inverted snob (just kidding! Haha).

Notepad Web Editor

Colour Coded Code

I like Dreamweaver because it is colour coded and will very quickly show bad syntax. If you screw up, the colour highlights will disappear as an indicator of there being a problem.

The screenshot below demonstrates code without problems.

Colour Code

Dreamweaver Server FTP

There is an option for smooth integration with a web server for file transfer. It’s possible to configure Dreamweaver so that your edits are made to the website live.

However, I do not use this feature since I do not like editing files live or on the fly. One false move and you could cause damage to a website visitors are in the middle of using. Not a good idea.

FTP SetUp

It’s much safer (in my opinion) to manually copy the files to my server with something like the free FileZilla after testing your web design offline.

WAMP & Dreamweaver

If you’re working on/building static sites (as opposed to WordPress) you will most likely be working with all aspects of the site including HTML, CSS, PHP and Javascript, and if you wanted you could consider setting up a virtual server such as WAMP (Windows, Apache, MySQL, PHP) to emulate a web server on your local machine. WAMP is free to use.

Dreamweaver together with WAMP is an option if you ever need to design a sandboxed website. It’s particularly useful if you need an Apache server environment or if your site is created using PHP pages. You can also test any special configuration of the .htaccess file.

Instant WP & Dreamweaver

I use the WordPress CMS with Genesis by StudioPress and Dreamweaver to create some very nice sites.

The virtual server I run (InstantWP) works excellently, and the look and functionality of the site really comes down to two files, style.css and functions.php.

This is my preference to WAMP.

Style Functions

Code is Poetry

Looking at the lines of code in the web editor is starting to resemble the code display of the Matrix. Remember in the film how one of the characters says he can look at the code on the screen and understand what it all means?

Code

Do you think code has a poetry to it? I never used to feel that way but now I do, which you might think is a little bit odd!

As someone with a visual arts and illustration background a nicely packaged editor with good visual features suits me very well.

Dreamweaver is like a Swiss army knife. There isn’t anything that it cannot edit. I cannot think of any other editor I would trade it for.

Latest Versions

The latest versions of the Adobe products are the Creative Cloud versions. They are available as free trials: http://www.adobe.com/uk/downloads.html

If it is older versions of Dreamweaver you’re after, you can get those here: http://helpx.adobe.com/download-install.html

Reader Interactions

Add Your Thoughts Cancel reply

Your email address is safe and will NOT be shared with anyone else.

Hateful, spammy or abusive comments will not be tolerated.

For more information please see the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

About the Webmaster

Hello, my name is Darren, a 36-year-old business enthusiast eager to learn and do good work.

I’m a website builder for hire working with small to medium businesses.

Search Website

Let’s Connect

  • LinkedIn
  • Twitter
  • YouTube

Recently Read Book

Don't Make Me think - Steve Krug

“Don’t Make Me Think: Revisited” – Steve Krug (Book Review)

A person of average technical ability must be able to navigate your website easily. This is required reading for anyone wanting to create a better experience for their visitors…

Latest Journal Entries

  • Computer Says No: Does Your Website Work for People with Disabilities?
  • Chinese Tinder Profiles Are Using Photos of Pretty Girls to Scam “Investors”
  • Small Biz Owners “Trapped” Using Email Addresses Belonging to Internet Service Providers
  • In the Pandemic, QR Codes are Finally Proving Worthy in the West
  • Small Businesses Finally Start Marketing and All It Took Was a Global Pandemic
  • Unable to Meet in Person? Communicate Stress-Free with Online Audio/Video
  • UK Contractors Operating Ltd Companies Should Be Mad as Hell with HMRC and IR35
  • 20 Years On and Website Hit Counters are Still a Waste of Pixels
  • Competitors Can Easily Edit Your Google and Facebook Business Listings
  • Waiting on Final Images for a WordPress Website? Use Temporary Placeholders and Design Around Them
  • GoDaddy Loves Spamming Branded Footer Links to WordPress Installatron Sites
  • Dealing with Negative Comments on Your Paid Social Media Posts

Footer

Primary Navigation

Home
About Darren
Good Books
My Tools
Blog Posts
Hire Me
Contact Me

Secondary Navigation

The Internet
Marketing
Graphic Design
Website Development
Website Design
Social Media
Technology
Miscellaneous

Derby & Nottingham Area

Small Biz Geek
Office 897
109 Vernon House
Friar Lane
Nottingham
NG1 6DQ

Telephone

Tel: +44 (0) 115 714 3290
Tel: +44 (0) 7951 897 243

VoIP

Skype: ilkestonwebdesign
WhatsApp: 07519 897 243

Email

[email protected]

Let’s Connect

Twitter
YouTube
LinkedIn
RSS

Subscribe to Blog by Email

Subscribe to Blog By Email

Social Calendar

WordPress Nottingham Meetup
WordPress Derby Meetup
Genesis Framework by StudioPress


Copyright © 2021 · Small Biz Geek · Privacy Policy · Commenting Policy · Website Disclaimer · ICO number: ZA305900


Written and designed by Ilkeston Web Design

This site uses cookies More info