Working with a Web Editor - Building Basic Web Pages - Creating a Website: The Missing Manual (2015)

Creating a Website: The Missing Manual (2015)

.

Part 1. Building Basic Web Pages

Chapter 5. Working with a Web Editor

In Chapter 1, you built your first HTML page with nothing but a text editor and a lot of nerve—the same way all web page whiz kids begin their careers. To really understand HTML (and to establish your HTML street cred), you need to start from scratch.

However, very few web authors stick with plain-text editors or use them to create anything other than simple test pages. The average HTML page is filled with tedious detail. Try to write every paragraph, line break, and formatting tag by hand, and you’ll probably make a mistake somewhere along the way. Even if you don’t, it’s hard to visualize a finished page when you spend all day staring at angle brackets. This is especially true when you tackle more complex pages, like those with graphics or multicolumn layouts.

The downside to outgrowing Notepad or TextEdit is the expense. Professional web design tools can cost hundreds of dollars. At one point, software companies planned to include basic web editors as part of operating systems like Windows and Mac OS. In fact, some older versions of Windows shipped with a scaled-down web editor called FrontPage Express (and some old Macs included a severely truncated editor called iWeb). But if you want a full-featured web page editor—one that catches your errors, helps you remember important HTML elements, and lets you manage your entire site—you have to find one on your own. Fortunately, there are free alternatives for even the most cash-strapped web weaver.

In this chapter, you’ll learn how web page editors work and how to find the one that’s right for you. You’ll also discover some free web editors that can do the same work as their professional counterparts.

The Benefits of a Web Editor

Tools like Notepad and TextEdit aren’t all that bad for starting out. They keep page development simple and don’t mess with your HTML (as a word-processing program would). Seeing the result of your work is just a browser refresh away. So why might you outgrow a basic text editor? For a number of reasons, including these:

§ Nobody’s perfect. With a text editor, it’s just a matter of time before you make a mistake, like typing <b> instead of </b>. Unfortunately, you might not realize your mistake even when you view your page in a browser. Browsers do their best to compensate for HTML inaccuracies, even if that means obscuring the real problems in your page. A good web page editor can highlight faulty HTML and help you correct it.

§ Edit-Save-Refresh. Repeat 1,000 times. Text editors are convenient for small pages. But what if you’re trying to size a picture perfectly or line up a table column? You need to jump back and forth between your text editor and your web browser, saving and refreshing your page each time, a process that can literally take hours. With a good web page editor, you get conveniences like drag-and-drop editing to fine-tune your pages—make a few adjustments, and your editor tweaks your HTML appropriately. Editors also have a preview mode that lets you immediately see the effect of your edits, no browser required.

§ Help, I’m drowning in HTML! One of the nicest little frills of a web page editor is color-coded HTML. Color-coding makes those pesky tags stand out against a sea of text. Without this feature, you’d be cross-eyed in hours.

§ Just type <ul><li></li></ul>. To create a bulleted list, of course. You haven’t forgotten already, have you? The truth is, most web authors don’t memorize every HTML element there is. With a web editor, you don’t need to. If you forget something, there’s usually a menu command, keyboard shortcut, or pop-up window to help you out.

Of course, using a graphical web page editor has its own risks. That’s why you started out with a simple text editor and why you’ll spend a good portion of this book learning more about HTML and CSS. If you don’t understand these standards properly, you can fall into a number of traps. For example, you might unintentionally use non-web-safe fonts that won’t show up on other computers (Finding the Right Font), or include HTML5 elements that older browsers don’t recognize. And no matter what editor you use, you still need to understand HTML, because you’ll spend a significant amount of time looking at raw markup to see exactly what’s going on, to clean up a mess, or to copy and paste useful bits to other pages.

Figure 5-8. When you start Expression Web, it creates a new, empty web page with the working filename Untitled_1.html. Although there’s no content in the page yet, it already has a basic HTML skeleton, consisting of the <html>, <head>, and <body> elements.

When you type in the HTML window, nothing changes in the preview pane. But as soon as you click in the preview area or press the F5 key (which is the Refresh command), Expression Web updates the page preview

Figure 5-9. When you type in the HTML window, nothing changes in the preview pane. But as soon as you click in the preview area or press the F5 key (which is the Refresh command), Expression Web updates the page preview.

The preview isn’t just a preview—it’s also a fully editable WYSIWYG version of your page. Try it out—click in the preview area and edit your sentence. As you type, the changes appear in your markup above.

If you want more room to work, you don’t need to stick with the split screen. Click one of the buttons in the bottom-left corner of the page to switch your view. Click Design to focus on the WYSIWYG rendition of the page and hide the markup, or click Code to fill the whole page with markup (Figure 5-10). Incidentally, this is exactly the same way Dreamweaver works, except that it places the buttons at the top of the editing window.

Split view is a great way to get an overview of your page, but it’s often handy to switch to markup-only Code view (like you get in the Notepad text editor) to free up more working space

Figure 5-10. Split view is a great way to get an overview of your page, but it’s often handy to switch to markup-only Code view (like you get in the Notepad text editor) to free up more working space.

TIP

Do you want to stay in split view but see more of one view than the other? First, point to the bottom edge of the bar that separates the markup area from the preview area. If you’re in the right spot, your mouse cursor will change into a line with an arrow pointing up and an arrow pointing down. Now just click and drag the dividing line up (to show a bigger preview area) or down (to show more markup).

Editing HTML in Code view is a breeze. Expression Web offers a number of useful features that can help you out:

§ It color-codes your tags so they stand out from your text.

§ When you type the left angle bracket (<), Expression Web pops up a handy list of elements that you can use.

§ When you add a start tag (like <b> for bold lettering), Expression Web automatically adds the end tag (</b>), saving you a few keystrokes.

§ If you make an obvious mistake (like deleting a tag you need, or misspelling a tag name), Expression Web points out the problem with a red squiggly underline or a yellow highlight. To get a description of exactly what you did wrong, just point to the mistake.

Expression Web also has plenty of features that are less useful for serious HTML writers. For example, you can drag an HTML tag from the Toolbox panel on the right side of the window and drop it on your page, but it’s just as easy to type in the element you want by hand.

Similarly, you’ll spot a fully stocked toolbar at the top of the Expression Web window. You might use the drop-down element-picker to create a heading or bulleted list, but most of the buttons are more trouble than they’re worth. That’s because they make a series of changes to your page that may not be exactly what you want.

For example, if you click the center-alignment button, Expression Web adds an internal style sheet to your page, creates a class-based new style rule (to which it assigns a rather useless name like auto-style1), and then adds the class attribute to your element to apply the style. This is all well and good, but it’s even better if you decide exactly what effect you want, create a style with the name you want, put it in the place you want, and then give it the combination of style settings that you want.

Configuring Expression Web for HTML5

As you’ve already learned, Expression Web is a few years old, so its features set might not reflect the very latest and greatest developments in web design. One area where it shows its age is in the doctype it uses to adorn all new web pages. Ordinarily, Expression Web specifies the XHTML doctype for your pages, which was once the favorite of strict, standards-minded web developers. But now, every web designer uses the all-purpose HTML5 doctype instead.

If you don’t want to edit the first line of every new web page you create, you need to tell Expression Web to use the HTML5 doctype all the time. Fortunately, that’s easy to do:

1. Choose ToolsPage Editor Options from the menu.

Expression Web opens a window with several tabs crammed full of options.

2. Click the Authoring tab (Figure 5-11).

3. In the middle section (“Doctype and Secondary Schema”), change the “Document Type Declaration” setting to “HTML 5.”

4. Click OK.

From this point on, every new page you create gets the slimmed-down HTML5 doctype you’ve been using all along. To check, create a new page by choosing File→New→Page.

Opening Multiple Pages

To get a feel for Expression Web, you can experiment with a sample page from a previous chapter. For example, you can use one of the resumé pages from Chapter 1 or a style sheet from Chapter 3. Use the standard File→Open command to open the page you want.

You need to tell Expression Web that you want to create official HTML5 pages. Ignore the minor mistake Expression Web makes by calling the standard “HTML 5” instead of using its true and official space-less name, “HTML5.”

Figure 5-11. You need to tell Expression Web that you want to create official HTML5 pages. Ignore the minor mistake Expression Web makes by calling the standard “HTML 5” instead of using its true and official space-less name, “HTML5.”

Expression Web lets you open as many pages as you want at a time. You use tabs to switch from one page to another (Figure 5-12), which is handy when you have to make changes to several pages in your site. To close a file, click the tiny X next to its name.

Here you have three documents open: the tomato soup recipe example from Chapter 4, the styled resumé from Chapter 3, and its linked style sheet. Click a tab to switch files

Figure 5-12. Here you have three documents open: the tomato soup recipe example from Chapter 4, the styled resumé from Chapter 3, and its linked style sheet. Click a tab to switch files.

Defining a Site in Expression Web

Like Dreamweaver, Expression Web provides a site feature that makes it easy to work with an entire folder of files. It also lets you tap other, advanced features, like link-checking and site-uploading (which you’ll consider on Uploading in Expression Web).

The basic idea is that an Expression Web site is a collection of web pages and other resources (like pictures and style sheets), stored in a folder on your computer (optionally with subfolders inside it). To open a site in Expression Web, you simply need to tell it where that website folder is. Here’s how:

1. Select SiteOpen Site.

Expression Web opens the Open Site window, which lists all the sites you’ve opened before (Figure 5-13).

Expression Web’s Open Site dialog box lists all the websites it knows about. When you open Expression Web for the first time, this list is empty (except for a nearly useless sample site that Expression Web creates when you install it). To hunt down one of your own sites, click Browse

Figure 5-13. Expression Web’s Open Site dialog box lists all the websites it knows about. When you open Expression Web for the first time, this list is empty (except for a nearly useless sample site that Expression Web creates when you install it). To hunt down one of your own sites, click Browse.

2. Click Browse to search for your website folder.

Opening a website is just like browsing for a file, except that you’ll see only folders listed, not filenames.

3. Browse to the folder you want to open, select it, and then click Open.

For this example, pick the Chapter 1 folder from the companion site at http://prosetech.com/web.

Clicking Open returns you to the Open Site dialog box. If you want to store the location of this website so you can open it more quickly next time, switch on the “Add to managed list” option. That way, Expression Web will add the folder to its Managed Sites list.

4. Click Open to open your website in Expression Web.

After you click Open, the editor displays a Site View tab listing all the files in your site (see Figure 5-14).

When you open a website folder (here it’s a folder named C:\Creating a Website\Chapter 1), Expression Web adds a tab that displays all the files in that folder. You can do basic file management here—for example, you can right-click a file to pop open a menu with options to rename or delete the file. You can also double-click a page to open it for editing

Figure 5-14. When you open a website folder (here it’s a folder named C:\Creating a Website\Chapter 1), Expression Web adds a tab that displays all the files in that folder. You can do basic file management here—for example, you can right-click a file to pop open a menu with options to rename or delete the file. You can also double-click a page to open it for editing.

5. Add the Expression Web metadata folders. To do so, choose SiteSite Settings, choose “Maintain the website using hidden metadata files,” and then click OK.

Many of Expression Web’s site-management features require tracking information, which Expression Web stores in hidden subfolders. However, Expression Web doesn’t create these folders automatically; you need to opt in to get the program to produce them.

The word metadata means “data about data.” In other words, Expression Web’s metadata folders store data about the data in your website. If you’re curious, you can see these subfolders in Windows Explorer—they have names like _private, _vti_cnf, and _vti_pvt. (Web trivia: The VTI acronym stands for Vermeer Technologies Inc.—the company that originally created FrontPage and sold it to Microsoft.)

These folders have several purposes. First, they keep track of what files you uploaded to your web server. This tracking makes it incredibly easy for you to update a website, because Expression Web transfers only changed files to your server, not the entire site. The folders also track information about your site’s pages and resources, which Expression Web uses for handy features like reporting and link-checking (Checking Your Links in a Web Editor).

TIP

Treat the metadata folders as a bit of behind-the-scenes plumbing. You need to have them for certain features, but once you create the folders you don’t need to think about them again.

When you finish working with a site, you can either close Expression Web or choose Site→Close to shut down the site view, close all the open web pages, and start working on something else.

UP TO SPEED: HONING YOUR EXPRESSION WEB SKILLS

Now that Microsoft has stopped developing Expression Web, it’s difficult to find good help on the more complicated parts of the program. If you search the Web for “Expression Web tutorials,” you’ll turn up a few ad-heavy but low-information sites that may help you with some of the basics. But your best bet is to steer away from the more advanced and less commonly used features, some of which are linked to Microsoft-specific extensions that your web host might not support.

Instead, rely on the useful Expression Web features covered in this chapter, such as its HTML editing, its web page previews, and its site management. You’ll round out your Expression Web knowledge in Chapter 9 when you learn how you can use it to upload your site to your web server (Uploading in Expression Web).

Trying Out Brackets

Not interested in old software and not willing to part with the big bucks? If Expression Web and Dreamweaver don’t fit your style, you might find happiness with Brackets, the newest, slimmest, and most nerd-pleasing web development tool.

Getting Brackets onto your computer is easy. The setup program is just a download away at http://brackets.io. Once you install Brackets on your computer, open the program and keep reading.

Just like Dreamweaver and Expression Web, Brackets starts you out at its main window, where all your web editing work takes place. However, the Brackets window is simpler and more streamlined than what you get with those other web editors. In Brackets, there are no fancy toolbars and only a single side panel, on the left, which lists the files you’re working on. The rest of the window shows the markup for the page you’re currently editing (Figure 5-15). You get the markup only—there’s no built-in preview or WYSIWYG view.

TIP

You’ll notice that Brackets helps you keep your spot in long files with line numbers in the left margin. Another nice feature is the ability to highlight the active line—the one you’re currently working on—with a light-gray background. To switch that feature on, choose View→Highlight Active Line. Similarly, you can turn off the line numbers by choosing View→Line Numbers.

The first time you start Brackets, it displays a sample file named index.html that tells you a bit about the program

Figure 5-15. The first time you start Brackets, it displays a sample file named index.html that tells you a bit about the program.

The first bit of magic you get with Brackets is its live web browser integration. At the time of this writing, you need Google Chrome to use this feature. Assuming you have the browser, just click the lightning bolt icon on the right side of the Brackets window (or choose File→Live Preview) to open a new Chrome window with a preview of the page in it (Figure 5-16).

So far, this doesn’t sound like anything special. But there’s more going on than first meets the eye. When you start a live preview, Brackets wires itself into Chrome, breaking you out of the tedious edit-save-refresh cycle. In fact, as soon as you change a detail in the Brackets window, Chrome updates the linked window so that it reflects your edit. So even though the source code and preview aren’t in the same window (as they are in Dreamweaver and Expression Web), the Brackets and Chrome windows work so well together that it’s hardly a problem.

NOTE

You only need to launch a live preview once. The Chrome window remains linked to the page you’re editing in Brackets, until you close Brackets or Chrome.

Here’s the sample index.html page in Brackets and its linked Chrome preview. Notice how Brackets outlines the first paragraph in blue. It uses this subtle effect to indicate the part of the page you’re currently editing

Figure 5-16. Here’s the sample index.html page in Brackets and its linked Chrome preview. Notice how Brackets outlines the first paragraph in blue. It uses this subtle effect to indicate the part of the page you’re currently editing.

Working with a Set of Files

Brackets has a curious way of dealing with files. Every time you open a page (by choosing File→Open) or create a new one (by choosing File→New), Brackets adds this file to the list of working files, which appears on the left side of the Brackets window. And there it stays. Brackets is so keen to keep your recent work at your fingertips that even if you close and then reopen the program, you’ll see the same set of working files in the list on the left.

If this seems a bit awkward, don’t worry—it all gets better when you take charge of the working file list. Here’s how:

§ To switch from one page to another, click the page’s name in the list. (In other words, the working list replaces the tabs feature that you use to switch between pages in web editors like Dreamweaver and Expression Web.)

§ If you finish working with a file and don’t want it cluttering up your working files list, point to the filename and then click the tiny X that appears on the left (Figure 5-17).

§ To rearrange the list of working files, click the tiny gear icon to pop open a menu of sorting options. You can order the list by filename (alphabetically), file type (to separate web pages from style sheets, code files, and so on), or the time you added it to the list (newest at the top).

Brackets keeps track of the web pages you’re editing in its working files list. To open one of the files, click it. To banish it from the list, click the X icon (shown here next to resume.htm)

Figure 5-17. Brackets keeps track of the web pages you’re editing in its working files list. To open one of the files, click it. To banish it from the list, click the X icon (shown here next to resume.htm).

The working files list is just one of two that appear in the Brackets window. Underneath it, Brackets displays the folder list; click a folder and you see all the files it contains. Initially, the list holds the Getting Started folder, which includes an example page that Brackets puts on your computer when you first install it. But it makes more sense for you to pick your website folder here. That way, you can quickly open all the web pages you need.

Start by choosing File→Open Folder. Then browse to your site folder, click it, and then click the Select Folder button. For example, you could pick the Chapter 1 folder from the companion site (http://prosetech.com/web), which holds all the examples from Chapter 1 (Figure 5-18).

Here’s one more trick: Brackets remembers all the folders you open. So if tomorrow you want to return to the Chapter 1 website, just click the heading at the top of the folder list. You’ll see a list of all the recent folders you’ve worked with. Pick the Chapter 1 folder, and you’re on your way.

Brackets is stuffed with quirky tricks like this. To learn more, check out the video tutorials on the official Brackets YouTube channel at www.youtube.com/user/CodeBrackets. You can also get the latest news from the official Brackets blog at http://blog.brackets.io.

When you open a folder, Brackets displays a list of the files it contains. And when you open a file from the folder list, Brackets adds it to your working files list

Figure 5-18. When you open a folder, Brackets displays a list of the files it contains. And when you open a file from the folder list, Brackets adds it to your working files list.

NOTE

If Brackets suits your style, you’re in luck. Unlike Expression Web and many other free web development tools, Brackets is under active development and has a community of enthusiastic web developers using it.

GEM IN THE ROUGH: CREATING STYLE SHEETS WITH WEB PAGE EDITORS

The best web editors (including the three covered in this chapter: Dreamweaver, Expression Web, and Brackets) don’t just help you write HTML; they also offer handy features for writing style sheets.

To try them out, start by opening an existing style sheet or creating a new one. To create a style sheet in Dreamweaver, choose File→New, pick CSS in the Page Type list, and then click Create. To create a style sheet in Expression Web, choose File→New→CSS. And in Brackets, choose File→New, and then File→Save. (It’s not until you save your file with the familiar .css extension that Brackets recognizes it as a style sheet.)

At first, you won’t see anything to get excited about. But life gets interesting when you start to edit your style sheet. As you type, your web page editor pops up a list of possible style properties and values (see Figure 5-19). If you dig deeper in Dreamweaver or Expression Web, you’ll find that both web editors have windows that let you build styles by pointing and clicking, as well as convenient shortcuts for applying styles to page elements.

As you edit a style sheet in Dreamweaver, it pops up lists of possible style properties (left) and property values. If you’re dealing with colors, you even get this handy color picker (right), which translates the color codes in your style sheet into the actual color and displays the results. It’s a great help for foggy memories and saves more than a few keystrokes

Figure 5-19. As you edit a style sheet in Dreamweaver, it pops up lists of possible style properties (left) and property values. If you’re dealing with colors, you even get this handy color picker (right), which translates the color codes in your style sheet into the actual color and displays the results. It’s a great help for foggy memories and saves more than a few keystrokes.