Tools of the Trade
A lot of people start designing web pages only to be discouraged to the point of giving up by the editor they’re using. There are literally dozens of text editors out there ranging all the way from the simple Windows Notepad to the very complex Emacs and Vim.
It is important to use an editor that you are comfortable with. If you like the simplicity of Notepad and don’t care about syntax highlighting, then use Notepad. If you want your attributes and your values different colors from your selectors and your properties, then something designed for writing code is probably best for you. The most important to look for in a text editor is that it is capable of saving in plain text. Word processing programs like Word and OpenOffice generally do not save files as plain text. Plain text files usually have the
.txt extension and do not include any formatting like bold/margins, etc.
The editors suggested below are just the tip of the ice-berg. All of these programs provide syntax highlighting which makes it much easier to write HTML and other code. There is much more than just syntax highlighting however: everything from debugging to in-place editing to collaborative editing is possible with the following tools. Most of the programs below are free.
Notepad++ For Windows
TextWrangler For Mac
TextWrangler is a product released for free by BareBones software, makers of the popular BBEdit text editor. TextWrangler is available at The TextWrangler Download Page. It is similar in features to Notepad++.
SubEthaEdit For Collaborative Editing on the Mac
SubEthaEdit is not free but provides an interesting feature not easily found in any other editor to date: collaborative editing. You and a friend or coworker can view and modify a document at the same time over a network or Internet connection. It also provides syntax highlighting and easily integrates into Fetch (more on Fetch later).
You can download old versions of SubEthaEdit for free, and there is an educational discount on the most current version. More information is available at the SubEthaEdit Home Page.
Emacs For (Almost) All Operating Systems
Emacs is popular in the computer science industry as an “all-in-one” development environment. It is billed as “the world’s most customizable editor” because so much of its interface and how it handles documents can be changed by the user using a functional programming language called Lisp. Emacs is available for many operating systems and provides a consistent user experience across them all. Emacs does, however, have a relatively large learning curve and is generally not recommended for the beginner or the faint of heart.
Web design isn’t all about code! To make a visually appealing Web site, you might find yourself in need of an image or two.
Photoshop For Mac and Windows
The industry-standard in image editors on Windows and Macintosh machines is Adobe’s Photoshop. Luckily, we have a workshop with online curricula for Photoshop. The problem, however, is that Photoshop is prohibitively expensive for some or simply offers more features than what is needed for basic image creation and editing.
The GIMP / GIMPShop For Mac, Windows, Linux, and UNIX
The GIMP (GNU Image Manipulation Program) is a free, open-source alternative to Photoshop. When coupled with GIMPShop, a variant that makes GIMP behave much like Photoshop, you can create Photoshop-quality images without the cost.
Online Image Editors
If you are just looking for basic crop/resize functionality with a few added effects and don’t want to download and install (or learn how to use) a heavy image editing program, then you may consider looking at one of the many online image editors. Most of them are free and provide many of the features that most web designers need to get started.
A very small list of Online Image Editors:
(Please note that we in no way support or endorse any of these companies or products. Use them at your own risk.)
SFTP Programs for Managing Files
Once you have some content to put on your Web site, you need to transfer it to a server so the world can see.
Many Web site hosting companies let their clients use FTP (File Transfer Protocol) programs to transfer their files. Thus, there are dozens of freely-available FTP programs available. The UW, however, does not support regular FTP and instead requires that you transfer your files using SFTP, or Secure File Transfer Protocol. Many of the free FTP programs do not support the more-advanced SFTP system.
Thankfully, the UW provides all staff, students, and faculty with SFTP software on the UWICK, a CD you can buy at the UW Bookstore for $1. Alternatively, you can download the UWICK software for free online.
Information on how to download and upload files using Tectia
Tectia For Windows
Tectia is available from The UWICK Download Web Site (select “SSH Tectia Client”). More information on how to use Tectia can be found at the Uploading Your Feed page on the Podcasting online curriculum. Remember to use the server names discussed on the UW Web Publishing page.
Fetch For Mac
The UWICK Download Web Site (select “Fetch (Secure)”). More information on how to use Fetch can be found at the Uploading Your Feed page on the Podcasting online curriculum. Remember to use the server names discussed on the UW Web Publishing page.
sftp For (Almost) All Operating Systems
A command-line utility called
sftp is available for almost all operating systems. It does not provide the graphical user interface provided by Tectia and Fetch, but it does provide a more powerful feature set for the nimble-fingered.
It is beyond the scope of our tutorials to discuss
sftp. Many of the
sftp commands for navigating the file system are similar to those discussed in our (Unix workshop curriculum)[/lst/help/fundamentals/unix].
Below is a sample session with sftp. The user connects, lists the contents of the remote home directory, gets (downloads)
index.shtml and then immediately puts (uploads) the same file before quitting.
$ sftp email@example.com Connecting to ovid.u.washington.edu... Password: sftp> ls Code connect.php cssnotes cvsroot.tar localhost.sql.gz mysql mysql-5.0.37-linux-i686 mysql.sock public_html public_media schoolfiles student_html svnroot www.tar sftp> cd public_html sftp> get index.shtml Fetching /nfs/aesop12/hw02/d73/rtimmons/index.shtml to index.shtml /nfs/aesop12/hw02/d73/rtimmons/index.shtml 100% 2032 2.0KB/s 00:00 sftp> put index.shtml Uploading index.shtml to /nfs/aesop12/hw02/d73/rtimmons/index.shtml index.shtml 100% 2032 2.0KB/s 00:00 sftp> quit
For more information on the
sftp utility, type
man sftp at the command line.