mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
40f4783ffb
sources/tech/20200726 Dreamweaver Alternatives- 5 Open Source HTML and CSS Editors for Web Developers and Designers.md
204 lines
7.9 KiB
Markdown
204 lines
7.9 KiB
Markdown
[#]: collector: (lujun9972)
|
||
[#]: translator: ( )
|
||
[#]: reviewer: ( )
|
||
[#]: publisher: ( )
|
||
[#]: url: ( )
|
||
[#]: subject: (Dreamweaver Alternatives: 5 Open Source HTML and CSS Editors for Web Developers and Designers)
|
||
[#]: via: (https://itsfoss.com/open-source-html-editors/)
|
||
[#]: author: (Ankush Das https://itsfoss.com/author/ankush/)
|
||
|
||
Dreamweaver Alternatives: 5 Open Source HTML and CSS Editors for Web Developers and Designers
|
||
======
|
||
|
||
Adobe Dreamweaver is a popular tool for professionals to design websites. Even though it enjoyed all its glory in the past decade, it’s no longer the most popular tool out there (at least, as far as I’m aware of).
|
||
|
||
Its expensive subscription plans and the availability of free and open-source alternatives has left an impact to its popularity.
|
||
|
||
Moreover, with the growth of popular [open source CMS][1] options and drag-drop website builders, it’s really easy to build a website when compared to the previous decade.
|
||
|
||
Unless you’re a professional with a specific set of requirements, there’s no reason to use Dreamweaver. So, here, in this article, I’m going to list some of the best free open-source Dreamweaver alternatives that lets you edit HTML/CSS.
|
||
|
||
### Open source HTML and CSS editors for web developers
|
||
|
||
![][2]
|
||
|
||
I understand that some web developers and designers prefer WYSIWYG (What You See Is What You Get) feature. Not all the editors mentioned here offer this feature but when they do, I have highlighted it explicitly.
|
||
|
||
I have used [this website template][3] for testing out the HTML editors. This _**list is in no particular order of ranking**_.
|
||
|
||
#### 1\. Bluefish Editor
|
||
|
||
![][4]
|
||
|
||
**Key Highlights:**
|
||
|
||
* Auto-completion
|
||
* Preview in browser
|
||
* Site upload/download options
|
||
* Code block folding
|
||
* Support for several programming languages
|
||
* Supports WordPress language definition files
|
||
* Cross-platform support
|
||
|
||
|
||
|
||
Bluefish is a feature-rich editor that’s perfectly suitable for both beginners and experienced web designers.
|
||
|
||
Even though it does NOT offer [WYSIWYG][5], the browser preview feature lets you make changes to the coding and see it in action quickly without any special configuration. It’s also a lightweight application – so it isn’t heavy on resources.
|
||
|
||
Try it out to explore more about it.
|
||
|
||
##### How to install it?
|
||
|
||
You may find it listed in your software center. If you don’t, you can follow the [official installation instructions][6] to add the repository and install it on your Linux distribution.
|
||
|
||
Also, there’s a [Flatpak package][7] available in case you prefer using it. I’d suggest you to refer our [Flatpak guide][8] if you don’t know about it.
|
||
|
||
[Bluefish][9]
|
||
|
||
#### 2\. BlueGriffon
|
||
|
||
![][10]
|
||
|
||
**Key** **Highlights:**
|
||
|
||
* **WYSIWYG** editor
|
||
* Black and light theme
|
||
* Responsive Design support
|
||
* EPUB 3.1 support
|
||
* Cross-platform support
|
||
|
||
|
||
|
||
BlueGriffon is an impressive WYSIWYG HTML/CSS editor. You can choose to edit the codes and check the design or simply edit it visually without needing to fiddle with the codes.
|
||
|
||
This is especially helpful for folks who aren’t comfortable with HTML/CSS and just starting out. It makes it easy to edit while offering all the necessary features for a web designer.
|
||
|
||
##### How to install it?
|
||
|
||
You can download the deb package from its [official website][11] or opt for other installers and source code depending on the Linux distribution you’re using.
|
||
|
||
You may want to read the [different ways to install a DEB file][12] if you’re on an Ubuntu-based distro.
|
||
|
||
[BlueGriffon][13]
|
||
|
||
#### 3\. SeaMonkey
|
||
|
||
![][14]
|
||
|
||
**Key Highlights:**
|
||
|
||
* WYSIWYG Editor
|
||
* Separate browser
|
||
* HTML editing
|
||
* Cross-platform support
|
||
|
||
|
||
|
||
SeaMonkey isn’t your typical code editor — but it’s a collection of Internet applications like a browser, email, IRC chat, and HTML editor.
|
||
|
||
It does support editing the source code of a web page and the ability to edit visually without needing to know HTML.
|
||
|
||
You can explore more about it when you get it installed.
|
||
|
||
##### How to install it?
|
||
|
||
You can simply download the package for Linux available on their [official site][15] and run the executable SeaMonkey application file to get started.
|
||
|
||
[SeaMonkey][16]
|
||
|
||
#### 4\. Brackets
|
||
|
||
![][17]
|
||
|
||
**Key Highlights:**
|
||
|
||
* Live preview option
|
||
* Tailored for web design
|
||
* Auto-completion
|
||
* Cross-platform
|
||
|
||
|
||
|
||
Brackets is already one of the [best modern text editors for coding][18] in Linux. It was primarily built for web developers while also supporting other programming languages.
|
||
|
||
Surprisingly, it’s an open-source project by Adobe, which isn’t super actively maintained — but it’s there.
|
||
|
||
##### How to install it?
|
||
|
||
You can simply grab the deb file from its [official website][19] for Ubuntu 19.10 or lower. For Ubuntu 20.04 or any other Linux distro, you will be better off using the [Flatpak package][20] or the [Snap][21].
|
||
|
||
You may also explore their [GitHub releases section][22] for other downloads.
|
||
|
||
[Brackets][19]
|
||
|
||
#### 5\. NetBeans
|
||
|
||
![][23]
|
||
|
||
**Key Highlights:**
|
||
|
||
* HTML Editor
|
||
* Cross-platform
|
||
|
||
|
||
|
||
NetBean isn’t technically an out-of-the-box HTML-CSS editor. But, you can use it as an HTML editor when building an HTML5 application.
|
||
|
||
It isn’t the go-to solution for HTML editing, but it’s an option out there for a specific group of programmers. You can give it a try to see if it does what you expect it to.
|
||
|
||
##### How to install it?
|
||
|
||
You can find it listed in your software center. In either case, you can just head to the [official download page][24] to get it installed.
|
||
|
||
[NetBeans][25]
|
||
|
||
**Which HTML editor do you use?**
|
||
|
||
There are a few more editors that you can use for editing HTML and CSS. There is [Aloha Editor Community Edition][26] preferred by some web developers.
|
||
|
||
You can surely use other [modern code editors][18] like Atom and VS Code or the good-old [Geany text editor][27] to edit HTML and CSS files.
|
||
|
||
If you regularly work on web design and development, which open source HTML editor do you use and recommend? We might add your recommendation to our list here. You may also mention non-open source WYSIWYG editors but that won’t be added in the list for obvious reasons.
|
||
|
||
--------------------------------------------------------------------------------
|
||
|
||
via: https://itsfoss.com/open-source-html-editors/
|
||
|
||
作者：[Ankush Das][a]
|
||
选题：[lujun9972][b]
|
||
译者：[译者ID](https://github.com/译者ID)
|
||
校对：[校对者ID](https://github.com/校对者ID)
|
||
|
||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||
|
||
[a]: https://itsfoss.com/author/ankush/
|
||
[b]: https://github.com/lujun9972
|
||
[1]: https://itsfoss.com/open-source-cms/
|
||
[2]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2020/07/Open-Source-html-editors.jpg?ssl=1
|
||
[3]: https://www.styleshout.com/free-templates/kards/
|
||
[4]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2020/07/bluefish.png?ssl=1
|
||
[5]: https://en.wikipedia.org/wiki/WYSIWYG
|
||
[6]: https://bfwiki.tellefsen.net/index.php/Installing_Bluefish
|
||
[7]: https://www.flathub.org/apps/details/nl.openoffice.bluefish
|
||
[8]: https://itsfoss.com/flatpak-guide/
|
||
[9]: http://bluefish.openoffice.nl/index.html
|
||
[10]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/07/bluegriffon.png?ssl=1
|
||
[11]: http://www.bluegriffon.org/#download
|
||
[12]: https://itsfoss.com/install-deb-files-ubuntu/
|
||
[13]: http://bluegriffon.org
|
||
[14]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2020/07/seamonkey.png?ssl=1
|
||
[15]: http://www.seamonkey-project.org/releases/
|
||
[16]: http://www.seamonkey-project.org
|
||
[17]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/07/brackets-dreamweaver-alternative.png?ssl=1
|
||
[18]: https://itsfoss.com/best-modern-open-source-code-editors-for-linux/
|
||
[19]: http://brackets.io/
|
||
[20]: https://flathub.org/apps/details/io.brackets.Brackets
|
||
[21]: https://snapcraft.io/brackets
|
||
[22]: https://github.com/adobe/brackets/releases
|
||
[23]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2020/07/netbeans.jpg?ssl=1
|
||
[24]: https://netbeans.apache.org/download/index.html
|
||
[25]: https://netbeans.apache.org/
|
||
[26]: https://www.alohaeditor.org/
|
||
[27]: https://www.geany.org/
|