Menu
Adobe is the leading developer for application and software that act as primary tools for many designers, or for photographers and film-makers. The Adobe Creative Suite has an impressive lineup with software such as Adobe InDesign, Illustrator, After Effects, Photoshop, etc. And while they may be the market leader, a lot of alternative products have also made their mark for people who want to tread a different path. Whether it is someone who is looking for a free product, or for someone who is willing to premium, but wants a different UI and a host of different features, everyone has their own reason. Here, we shall show you some of the alternatives that are available for Adobe Dreamweaver.
We think the current best free macOS/Mac OS X WYSIWYG HTML Editor is SeaMonkey, part of the lovely free and open source Mozilla Project. First, it’s a completely free WYSIWYG editor and is part of a larger suite that includes its composer, an Internet browser, email & newsgroup client with an included web feed reader, HTML editor, IRC chat. BlueGriffonis an open source WysiwygHTML editor. There are downloads for Windows, Mac and Linux. You can edit content the same way you would in a word processor. You can then toggle views quickly to see the source and what HTML markup and the CSS styling looks like, making BlueGriffon beneficial tool for learning HTML and CSS. Firefox Developer Edition. Firefox Developer Edition brings you latest features, fast performance. BlueGriffon is an intuitive application that provides Web authors (beginners or more advanced) with a simple User Interface allowing to create attractive Web sites without requiring extensive technical knowledge about Web Standards. Because Gecko lives inside BlueGriffon, the document you edit will look exactly the same in Firefox.
Dreamweaver is a very popular application amongst developers who use it for website development. It is available for PC or for MAC, and it can be used as a WYSIWYG or as a direct code editor. It has a feature to display a split view for both the modes on-screen. Dreamweaver has the capability to handle site management, active content right from Flash to Javascript, in addition to XML, CSS2, etc.
The created pages can be previewed using the built-in browser provided. Some of the features that help with coding are auto-completion of the code during entry and color-coded highlights for simplified and easy visual debugging of code.
However, Dreamweaver works only with the Windows operating system and doesn’t compatible with Linux, UNIX operating systems that are available.
Also, since it is considered an expensive tool (now Adobe introduced monthly subscription plan, for Dreamweaver and other applications too), there are many alternative applications that are free, or not so heavy on the pocket.
Alternatives to Adobe Dreamweaver
When it comes to choosing the best alternatives to Dreamweaver which are free, then the below list may help you out to choose your favorite one. I personally like KompoZer which is perfect for new users and advanced users as well. Let’s have a look:
KompoZer
For a non-coder, KompoZer is the best free alternative for Dreamweaver. It comes with several features that are available in Adobe Dreamweaver software. The best part is KompoZer is a free of cost, open-source software which is compatible with all platforms like Windows, Mac, Linux, and also BSD.
It contains a WYSIWYG editor which is just like that of Dreamweaver, and you can also choose to edit by hand. However, the software does not support some features, like server-side scripting, shared editing, frames, XSLT, MathML, SVG, XForms, Atom, RSS, or XPath.
You can edit multiple pages using Kompozer in a different tab and it comes with built-in FTP, and also includes a color picker which is a very useful tool for a web designer.
KompoZer is very much similar to Dreamweaver and has almost all features.
Pros
- It has Design, Split and Source tab
- Has inbuilt FTP feature
- Can add Image, Hyperlink, Table, Form etc
- Has HTML and CSS front end settings
- Justify, Paragraph alignment, Bold, Italic, Font size settings
Cons
Adding Flash objects into Kompozeris definitely not as easy as it is with Dreamweaver and it also does not accept Dreamweaver templates.
You may also like to know the alternatives to Photoshop available for Windows.
Download here: https://sourceforge.net/projects/kompozer/
System Support: Windows
System Support: Windows
Brackets
Brackets is a source code editor mainly developed keeping web developers in mind. It has been created by Adobe Systems. It is open-source software that is licensed under the MIT license. It is available for free, and it is maintained on the platform GitHub by Adobe in collaboration with other open-source developers. It is written in JavaScript, HTML, and CSS. Brackets provide easy live HTML, CSS, and JavaScript editing functionality and it is available for multiple platforms like Windows, macOS and most of the popular Linux versions.
Brackets can support codes in multiple languages, recognizing file types from:
- C++
- C
- VBScript
- Java
- JavaScript
- Perl
- HTML
- Ruby and
- Python
This provides a comfortable option of working on various files simultaneously so that the user is efficient, and can flexibly work on the project.
Since Brackets is built with HTML, CSS, and JavaScript, users have the option to provide additional functionality to Brackets by creating extensions. Many existing extensions can be found and installed by using the software’s built-in extension manager. Other such extensions can be found online using the Brackets Extensions registry.
Download here: http://brackets.io/
System Supports: macOS, Windows, and Linux
System Supports: macOS, Windows, and Linux
Microsoft Expression Web
Microsoft Expression used to be a paid application but it is now completely free. It is available only for Windows, and it has editor features similar to that of Dreamweaver, with a likewise user interface, and with WYSIWYG included and hard code panes. It includes support for W3C for designing for people with disabilities.
However, Microsoft Expression does not support XForms or SVG. It is said to be not as helpful to those new to CSS or AJAX, as it lacks drag-and-drop features, drawing tools, any help wizards, or drop-down menus.
But if you already using Dreamweaver and have some decent coding knowledge, then Microsoft Expression Web is for you.
Download here: https://www.microsoft.com/en-in/download/details.aspx?id=36179
Supports: Windows XP SP3, Windows Vista, Windows 7, Windows 8 and Windows 10
Supports: Windows XP SP3, Windows Vista, Windows 7, Windows 8 and Windows 10
Aptana
Aptana is open-source software that has been built on Java platforms and is completely free. It is compatible with platforms like Windows, Mac, Linux and also BSD. Aptana supports many common web coding languages and applications for iOS can also be developed. However, there is no WYSIWYG editor, no spell check, and there is no support for RSS, Atom, or Xpath.
In addition, Aptana is not as capable in JavaScript debugging or in PHP development, because the inbuilt autocomplete does not recognize objects. One other shortcoming is that there is no Internet Explorer preview for Mac or Linux users.
Features:
- It supports a wide range of coding languages like HTML, CSS, JavaScript, PHP, and Ruby
- It has inbuilt FTP, SFTP, FTPS thus allow to upload files directly on your server, thus you don’t require additional software like Filezilla or mRemoteNG.
- It has inbuilt debuggers that allow identifying code error
Cons
- It doesn’t support WYSIWYG, thus good for a professional coder
Download here: http://www.aptana.com/
Supports: Linux, Windows, and macOS
Supports: Linux, Windows, and macOS
BlueGriffon
BlueGriffon is a free and open-source WYSIWYG editor. It is compatible with many OS platforms such as Windows, Mac, and Linux. In this, FTP is available but only if you install an add-on. It has features for page preview, spell checking, various templates, popular fonts, and also includes an SVG editor for designing graphics within the application.
This software may require the purchase of some features, such as a project manager, or a CSS style-sheet editor, and a full-screen viewer, but most of the features are free. Its interface is similar to a word processor, very much like that of Kompozer’s.
Features:
- Support WYSIWYG interface
- Support HTML, CSS, Form etc
- Free version support CSS, CSS Grids, Stylesheet manager
- Support 20 languages
- It has inbuilt Spell-checker tool
Download here: http://bluegriffon.org/
File Size: 263 Mb (approx)
Supports: OS X, Linux, and Windows
File Size: 263 Mb (approx)
Supports: OS X, Linux, and Windows
Sea Monkey
SeaMonkey is an internet application suite that was mainly popularized by the browsers Netscape and Mozilla. It has an Internet browser, an email & newsgroup client, along with an inbuilt HTML editor and other several web development tools, all inbuilt into the software bundle.
SeaMonkey is built on the open-source Mozilla Gecko engine, and it has the same code that forms the foundation of Thunderbird and is the main base for the Firefox browser. Hence, whenever there are advances in the other two soft wares, SeaMonkey also benefits by gaining similar new features and ongoing security updates. SeaMonkey is especially popular amongst passionate users, web developers and also corporate users.
Download here: https://www.seamonkey-project.org/releases/
Supports: Windows x64, Windows x86, macOSx64, Linux x64, and Linux x64
Supports: Windows x64, Windows x86, macOSx64, Linux x64, and Linux x64
Conclusion
Hope the above-provided list helps you to choose the best alternatives available for Dreamweaver so that you can do your website designing and coding with peace of mind. Do let me know if you are aware of any other good application which is not listed here.
Bluegriffon Mac
Chapter 6: Inserting Buttons into Your Side Column
by Christopher Heng, thesitewizard.com
Many websites sport a navigation menu on all their pages. The menu typically has buttons or text that linkto the important pages on the site. This chapter shows you how to insert such a menu into a web page.
Goal of This Chapter
By the end of this chapter, you will have inserted a navigation menu with buttons linking to the other pagesof your website. You will also find out how to add or remove buttons from it so that you can adjust the menuas the site develops.
Obligatory note (for those who have arrived here from outside thesitewizard.com): this is the sixth chapter ofthe BlueGriffontutorial. I will assume that you know all the things covered earlier. If you are completely newto designing a website, please start at the beginning, withHow to Create a Website.
Bluegriffon Macos Big Sur
Planning What Goes Into a Navigation Menu
If you were to compare the complete list ofpages on thesitewizard.com with the items actually placed on its navigation menu (which you can see by looking atthe buttons in the left column of this very page you're reading), you will notice that I don't list everyarticle in the menu. In fact, if you had actually bothered to look at mysite map (don't worry if you didn't),you will realise that it's neither practical nor useful to put buttons pointing to every article, since, at the timeI write this, thesitewizard.com has more than 400 pages.
Unless you plan to have only a few pages for the entire life of your website, chances are that you will end uphaving to do the same thing I did when I created thesitewizard.com: decide which pages go into the navigation menu,and which to leave out.
One way to do this is to take your inspiration from other sites. Many of them only put links to the importantpages of their site (eg, the order form, the products page, etc) and various administrative pages (eg, thesite map, the feedback/contact form, the 'About' page, etc).
If it's too early for you to tell what pages you want on your site, or you simply cannot decide, createa menu with buttons linking to at least these three pages: your home page, your site map and your feedback (or contact)form. If you want to have an 'About' page (where you give some information about your company), you should create a buttonfor that too. You can always extend your menu later when you have a clearer idea of the other things you want on it,since this chapter will also show you how to insert additional buttons.
How to Create the Navigation Menu
Since the navigation menu is essentially just a list of links, it's possible to just to type your owntext links and put them into the left column. If that's what you want, you can probably skip thischapter, since you have already learnt ('learned' if you don't useBritish English)how to do that in chapter 5. (Or, if you are afraid you'll misssome information that I give in the course of the article, you can just skim through it.)
On the other hand, if you want your menu to appear as a series of buttons, like what you see in theside column of many sites, including thesitewizard.com, read on.
- Go to the Navigation Menu Wizardin your web browser. (That is, click the link in the previous sentence to go there.) You will see something similar tothe picture below.Yes, it's another of the thesitewizard.com's wizards. Don't worry. Like the Layout Wizard you used in chapter 1, it'sfree too.
- Scroll down the page till you see the 'Step 1 of 2' section.Make sure that radio button for 'Create a vertical menu bar' is selected, as it should be by default, thenclick the down arrow button on the box for 'How many menu buttons do you want?' and select the number of buttonsyou need. As mentioned earlier, if you can't decide, just select '3'. If you need more than 20 buttons, choose 20.You can always add more buttons (or delete buttons that you don't want) later using BlueGriffon, so there's no needto get stuck here mulling over how many buttons you will ultimately need.Then click the 'Next» Go to Step 2' button.
- You can now choose the colours ('colors') for your menu. There are only a few preset choices, but the'Your Own Colour Scheme (for Advanced Webmasters Only)' section allows you to use any colour you like.Move your mouse over each of the buttons of the preset colour schemesto see the colours they change to when a mouse pointer hovers over them. At the time I write this, the 'Blue 1'colour scheme is the one currently used on thesitewizard.com and the 'Orange' colour scheme is used for thefreecountry.com.If you can't find a colour scheme that suits your fancy, or one that matches your design, you will have tocreate your own colour scheme. You can do that by changing the colours in the various fields in the'Your Own Colour Scheme (for Advanced Webmasters Only)' section. This can be done by clicking the colourfor each field (see the picture below, which shows the fields after I clicked the 'Blue 1' scheme). Each colournext to the description is actually a clickable button. A colour picker specific to your browser will appearwhen you do this, allowing you to choose a new colour.On the other hand, if you see text for each field, like that shown in the picture below, it means thatyour browser does not support the colour picker. In such a case, you will have to manually enter the numericvalues for the colours you want. Although you may see letters of the alphabet in those fields, they are actuallynumbers, since the numerals are not in decimal (base 10), but hexadecimal (base 16), that is, 0 to 9 followed byA to F.Since it's unlikely that you will know the numeric values of the colours by heart,you will probably need to refer to a list of colours and their associated values. One possible reference isWikipedia's list of colours.Look for the colour you want, then copy the value given in the 'Hex (RGB)' column and paste it into therelevant field in the Wizard. Do not use the colour names or the HSL values, only the hexadecimal RGB ones.If all this is too much trouble (or too hard), just choose one of the stock colour schemes by clicking it.
- Scroll down the page and enter '90%' (without the quotation marks) into the 'Width of the button' field,replacing the default of '180px'. Do not insert any space between '90' and the '%' sign.
- In the 'Button Text and URLs' section, enter the label for each of the buttons, along with theURL the button should link to.For example, the following can be entered for the Home, Site Map and Contact buttons. (Remember to substituteyour own domain name inplace of 'www.example.com' below.)
- Text on Button 1: 'Home' (without the quotation marks); URL: 'http://www.example.com/' (without the quotation marks).
- Text on Button 2: 'Contact' (without the quotation marks); URL: 'http://www.example.com/feedback.html'(without the quotation marks).
- Text on Button 3: 'Site Map' (without the quotation marks); URL: 'http://www.example.com/sitemap.html'(without the quotation marks).
Important: I suggest that you use the filename of 'feedback.html
' foryour Contact or Feedback Form as mentioned above. This will make things easier for you when youcreate it in the final chapter, since that is the name that I will assume you used. Type whatever you wantfor the 'Text on Button 2' field (eg, 'Support' or 'Feedback' or 'Comments' if you don't like the word 'Contact'),but make sure that the URL field uses a filename of 'feedback.html
'. For example, if your domainis 'www.example.com', the URL field can either say 'http://www.example.com/feedback.html' (if youwant an absolute URL) or 'feedback.html' (if you prefer relative URLs). - Ignore the 'Target frame' field.
- Read the terms of use in the 'Conditions for Use (Required)' section, and if you agree to them,click the associated checkbox.
- Click 'Generate buttons'. The Wizard will create the code according to your specifications andpresent you with the Results page.
- Start up BlueGriffon or switch to it if it's already running. Do not close your web browser. Youare not done with it yet.
- Click 'File | Close current tab' to close any page that you have currently open. If you have multiple pages openat the same time, repeat this until all of them are closed and you are staring at the empty BlueGriffon window.
- Click 'File | New' in BlueGriffon to open a new blank page.
- Click the 'Source' button found near the bottom of the BlueGriffon window to switch to the Source view.You will see that the page isn't really blank.
- Click somewhere on the page to put the text cursor there.
- Select everything with Ctrl+A (or Cmd+A on the Mac) on your keyboard and delete the highlighted text by hitting the delete keyon your keyboard. (For those who have forgotten, Ctrl+A means to hold the Ctrl key down while typing the letter 'a'.)The document should now be blank.If you are feeling a sense of déjà vu, it's because you have done the above procedure before in chapter 1.Twice, in fact.
- Switch back to the browser and click somewhere in the box in the 'Cascading Style Sheet (CSS) Code'section. The text in the box will automatically be highlighted. Click your right mousebutton while its pointer is hovering somewhere in the box to bring up the context menu. Click the 'Copy' linein that menu.
- Immediately switch back to BlueGriffon and hit Ctrl+V on the keyboard (Cmd+V on the Mac). The CSS code should appearon the page.
- Click 'File | Save As...' from the menu.
- In the 'Save Page As' dialog box that appears, navigate to the same directory (ie, folder) as your'
index.html
' file. Then type 'tswnavbar.css
' (without the quotation marks) into the'File name' field. Make sure you type it exactly as I stated without any spaces or capital (uppercase) letters. - Click the 'Save as type' field and select 'All files (*.*)'.
- Click the 'Save' button.
- Click 'File | Close current tab' from the menu. This closes the CSS file so that you don't accidentally modify itlater.
- Open your home page in BlueGriffon.
- Click 'Panels | Stylesheets'. Notice that I said 'Stylesheets' and not 'Style Properties'.
- The 'Stylesheets' panel will appear. At the bottom of the panel, you should see a '+', a '-' and a gear icon (seepicture below). Click the '+' icon.
- A dialog box with the title 'Stylesheet properties' will appear.Click the 'Linked to the document' radio button.
- Click the folder icon for the 'Href' field.
- A dialog box with the title 'Select a stylesheet file' will appear. Click '
tswnavbar.css
' once toselect it. - Click the 'Open' button.
- Important: click the 'Make URL relative to page location' checkbox to put a tick in it. The 'Href' field should nowsay '
tswnavbar.css
' without any 'file:///
' prefix. - Click the 'OK' button to dismiss the 'Stylesheet properties' dialog box.
- The 'Stylesheets' panel should now list two style sheets:
styles.css
andtswnavbar.css
. InBlueGriffon 2.3.1, both of them should have ticks on their left to show that the style sheets are currently enabled.You may not see any ticks in 3.0.1. - Click 'Panels | Stylesheets' to get rid of the panel. (You can leave it there if you want, but then you will have tobe careful not to accidentally click anything in the panel, thus changing something.)
- Click to put your text cursor in the side column, somewhere among the words 'Placeholder content for the side column:please replace this with your real stuff.'
- Delete the placeholder sentence.The status bar after deleting should (still) show the following.If it doesn't, you may have deleted more than you should. In such a case, click 'Edit | Undo' from the menu toundo your deletion, and delete again, this time being careful to only delete the sentence.
- Click the 'Source' button at the bottom of the page to switch to the Source view.
- Switch back to the browser, and scroll down the page till you see the 'HTML Menu Button Code' section.(Yes, skip the 'HTML Code for the <HEAD> Section' part, because you have alreadydone the equivalent using the Stylesheets panel.)
- Click somewhere in the box for that section. The code in the box should be automatically highlighted.
- Click your right mouse button while the pointer is hovering over the highlighted text. Click'Copy' from the menu that pops up.
- Switch back to BlueGriffon.
- You should see the blinking text cursor, probably in the centre ('center') of a line thatsays '
<p> </p>
' in BlueGriffon 2.3.1, orjust somewhere on a line that says '<p><br>
' followed immediately by one that says'</p>
' in BlueGriffon 3.0.1.Delete '<p> </p>
' (BlueGriffon 2.3.1) or'<p><br>
' and the line saying '</p>
' immediately below that (BlueGriffon 3.0.1),leaving your cursor on a line that should now be blank (see picture below). - Click 'Edit | Paste' from the menu. (Or just use Ctrl+V from the keyboard as before.) The code you saw earlierin the browser should appear.
- Click the 'Wysiwyg' button to switch back to the Wysiwyg view.
- The menu that you pasted should appear.
- Save the page. You can also close the browser window or tab containing the Navigation Menu Wizard if you wish. Youdon't need it any more.
How to Add a Button to the Navigation Menu
You do not have to go back to the Navigation Menu Wizard every time you want to add a new button.It can be done from within BlueGriffon.
- Click to put your cursor on the button that is just above the new one that you want to create.
- Hit the ENTER (or RETURN) key. A new line will appear. The line will not have the appearance of a button at the moment.This will be fixed when you complete the next 2 steps.
- Type the text that you want the button to show. For example, if you want to create an 'About Us' page, type'About Us' (without the quotes).
- Drag your mouse over the words to select it. Click 'Insert | Link'.When the 'Links' dialog box appears, enter your URL into the 'Target' field. If you use a relative URL, rememberto put a tick in the 'Make URL relative to page location' box. Then click the 'OK' button.By default, if you use BlueGriffon 3.0.1, the 'Target' field will show a lot of miscellaneous text taken from thesurrounding HTML. This is just a bug. Delete it all before typing your URL.The new line will now take on the appearance of the other buttons in the menu. BlueGriffon will automaticallyadd another blank line under the button. Ignore it. It will disappear when you save the file.
- Save the file with 'File | Save' from the menu.
How to Delete a Button from the Navigation Menu
You can delete a button the usual way you delete any piece of text on your web page.Just position the cursor on the button in question, and use the Delete or Backspace key on the words until the entire lineis gone. Yes, it's that simple.
Preliminary Test
Since the navigation menu is just a list of links, test it the same way you did in chapter 5.
Next Chapter
You will create the restof your site (except the feedback form, which will be done in chapter 9) in the next chapter.
Copyright © 2017-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top »Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide »List of All BlueGriffon Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.
Bluegriffon Mac Os
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
Copyright © 2017-2018 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 8 February 2018.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 8 February 2018.