HTML in 10 Steps or Less- P19 potx

To modify HTML tags, select a new color from the General color picker.. The next time you invoke a color picker, the Apple color opens see Figure 158-2.. In the Apple Color Picker, scrol

Trang 1

Setting Menu Keys

Each function in the HTML Tools Palette we’ve covered here in Part 13 is mirrored as a command on the Markup menu BBEdit makes it easy to define keyboard shortcuts (“equivalents”) for them

1. Choose Edit ➪ Set Menu Keys from the BBEdit menu bar to open the Set Menu Keys dialog box (see Figure 156-1)

Figure 156-1: The Set Menu Keys dialog box

2. To access the commands for the Markup menu, scroll down and click the disclosure triangle next to Markup (see Figure 156-2)

3. To add a menu key, select a command and click the Set button This displays the Set Key dialog box (see Figure 156-3)

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 2

• You know you’ve made a typo when the code color-ing turns solid You can customize those colors (see Task 157).

Figure 156-2: Exposing the various Markup commands

Figure 156-3: Creating a keyboard shortcut in the Set Key dialog box

4. Type a key combination and click OK If the key combination is in

use already, a prompt tells you which keystroke it’s currently assigned

to and asks if you want to replace it (see Figure 156-4)

Figure 156-4: A keyboard shortcut already in use

5. To reset an accepted keystroke, click the Reset button and try

another keystroke combination

cross-references

• Helios Software’s TextPad (see Part 12) offers similar menu key–setting functionality.

• If you want to use a WYSIWYG HTML editor for the Mac, try Macromedia Dreamweaver MX (see Part 15) at www macromedia.com/ software/dreamweaver.

Trang 3

Modifying Color Syntax Checking

BBEdit allows you to modify the colors it uses to color the HTML code Although there is no objective, functional benefit to changing these colors, doing so gives you the freedom to impose your personal style (favorite colors, etc.) on your editing environment

1. To enable color syntax checking, open the BBEdit Preferences panel

by choosing Edit ➪ Preferences from the menu bar or pressing Command+; on the keyboard Choose Editor Defaults to view these options (see Figure 157-1) Make sure you click the Syntax Coloring check box

Figure 157-1: Setting the code editor’s default preferences

2. To modify the colors used in syntax-checking, choose Text Colors

in the BBEdit Preferences panel (see Figure 157-2) to view these options

note

• This topic isn’t about

cod-ing per se but you should

make a habit of

comment-ing code Code needs to

be legible to humans and

machines alike.

Trang 4

• A text editor is something you could find yourself star-ing at for a long time when the HTML bug really grabs you Use colors that don’t make you bug-eyed.

Figure 157-2: Setting the syntax-checking colors

3. To modify the background color, select a new color from the

Background color picker

4. To modify HTML tags, select a new color from the General color

picker

5. To change the color of comment tags, select a new color from the

Comments color picker

6. To change the color of <a>tags, select a new color from the Anchor

color picker

7. To change the color of <img>tags, select a new color from the

Image color picker

8. To assign unique colors to attributes, click the Color Attributes

Separately check box, Assign attribute colors with the Names color picker and values with the Values color picker

9. To save your changes, click the Save button in the upper right and

then close the BBEdit Preferences panel

cross-reference

• Color syntax-checking is standard in most editors TextPad (see Part 12), Macromedia HomeSite (see Part 14), Macromedia Dreamweaver (see Part 15), and Microsoft FrontPage (see Part 16) all use it.

Trang 5

Modifying HTML Color Preferences

By default, BBEdit’s color picker uses a 216-color, Web-safe palette These

216 colors are guaranteed not to shift or dither on any platform, running any browser, when running in 8-bit color mode There’s just one small problem with that: Personal computers advanced beyond 8-bit color nearly a decade ago Consequently, using colors outside the Web-safe palette isn’t as risky as it was

in 1995 For this reason, you may want to change BBEdit’s color picker to gain

a little leeway

1. Choose Edit ➪ Preferences from the menu bar or press Command+;

to open the BBEdit Preferences panel Select HTML Colors (see Figure 158-1) to view those options

Figure 158-1: Making HTML color preferences

2. Under Color Picker, click Apple Color Picker The next time you invoke a color picker, the Apple color opens (see Figure 158-2)

note

• The color picker defaults to

the last display option

you used.

Trang 6

• If you prefer to use the Web-safe color picker, you can display it horizontally

or vertically, and in various swatch sizes Choosing the VisiBone or VisiBone 2 option in the BBEdit Preferences panel displays the color picker as a square swatch radiating out from the center in order of hue.

Figure 158-2: The Apple Color Picker

3. In the Apple Color Picker, scroll down the list of options on the left

side and select the HTML Picker (see Figure 158-3)

Figure 158-3: The HTML Picker

4. Use the RGB sliders to specify levels of red, green, and blue

Corresponding hexadecimal color values appear in the HTML field

5. To restrain the sliders to a Web-safe palette, click the Snap to Web

Color check box

6. Once you choose a color, click OK to close the dialog box and insert

the color value

cross-reference

• To learn more about color and the Web, see the book’s Web site at www wiley.com/compbooks/ 10simplestepsorless.

Trang 8

Part 14: Working with HomeSite

Task 159: Exploring the HomeSite Environment Task 160: Creating a New Project

Task 161: Organizing a Project with Folders Task 162: Starting a New HomeSite Document Task 163: Creating and Using Web Page Templates Task 164: Inserting and Converting Files

Task 165: Finding and Inserting Tags and Attributes Task 166: Cleaning Code with CodeSweeper Task 167: Editing Cascading Style Sheets with the Style Editor Task 168: Previewing in External Browsers

Task 169: Formatting Body Text Task 170: Creating Lists Task 171: Checking the Spelling Task 172: Adding a Horizontal Rule Task 173: Searching an HTML Document Task 174: Replacing Web Page Content Task 175: Inserting an Image

Task 176: Using the Image Map Editor Task 177: Inserting Tags Automatically Task 178: Inserting Tables

Task 179: Building Framesets Task 180: Creating Forms Task 181: Determining Document Weight Task 182: Validating and Verifying Your Code Task 183: Customizing HomeSite

Task 184: Using Auto-Backup Task 185: Establishing Deployment Options Task 186: Deploying Files and Folders

Trang 9

Exploring the HomeSite Environment

At first glance, Macromedia HomeSite 5 looks like a simple text editor — a place to type your HTML code, save your files, and create other types of code that are added to your HTML document Looks can be deceiving, however HomeSite is a very powerful program that offers a variety of automated features, views, tools, and commands found throughout a fairly complex (yet easy to use) interface In this task, you take a tour of that interface, checking out each of the main areas of the workspace and learning to navigate HomeSite efficiently If you’d like to give HomeSite a test-drive, go to the Macromedia Web site (www.macromedia.com) and download an evaluation version It will only work for 30 days, after which you must purchase the application in order to keep using it

1. Display HomeSite’s screen tips Hover your mouse over the buttons

on the main toolbars, on all the tabs on the right side (top) of the window, and across the bottom of the left-most panel Figure 159-1 shows the entire workspace

Figure 159-1: The HomeSite workspace divided into sections

2. Click the Help button (the purple book with a “?” on it) among the tabs at the bottom of the Resource panel The Help tools appear (see Figure 159-2)

3. Click the Projects tab on the Resource panel to see your project files and folders

Your HTML document

is typed here QuickBar

Site View window

Resource

note

• HomeSite is not a

WYSI-WYG (“what you see is what

you get”) design tool like

Dreamweaver is If you want

to access Dreamweaver’s

graphical interface to do

your design work or to

enhance a page you’ve

started in HomeSite, click

the Open Macromedia

Dreamweaver button at the

foot of the Editor’s toolbar.

Trang 10

• Click the Search button (the one with the tiny binoculars in the top tool bar) to search the help files using keywords or phrases.

• You can insert a set of paragraph tags by pressing Shift+Ctrl+P Any time there’s

a shortcut for a command, you’ll find it in the menu.

4. To see a tree-like display of your project files, click the Site View tab,

also found in the Resource panel Figure 159-3 shows an index page (Home Page) and two subpages (About Us and Contact Us)

Figure 159-2: Click the plus signs next to the various topic groups to find the help you need

Figure 159-3: Use the view in the upper left to get a sense of the relationship among your pages and to establish links between them

5. Experiment with the Quickbar Click the Fonts tab (also called the

Fonts toolbar) to see your text formatting tools and then check out the Tables tab (Tables toolbar)

Working with HomeSite 345

cross-reference

• BBEdit provides a similar set of tools for Mac users Learn to insert tags quickly in Part 13.

Trang 11

Creating a New Project

In HomeSite, a project is the same as a site It’s called a project because, typi-cally, the development of a Web site — rather than just a few ad hoc pages — is

a project unto itself If you think about a project as being a site, you’ll find it very easy to understand HomeSite’s tools

1. Choose Project ➪ New Project The New Project dialog box opens (see Figure 160-1)

Figure 160-1: Starting a new project

2. Type a name for your project in the Project Name field

3. Type or browse to the location of the project folders If you click the yellow folder button at the right end of the Location of Project File field, the Select Directory dialog box opens (see Figure 160-2)

Figure 160-2: Selecting a directory for your project and its files and subfolders

note

• Leave the Add All Subfolders

option checked and then

leave All Files selected in

the File Types drop-down

list This places no

limita-tions on what you can

include later in your

project folder.

Trang 12

• Creating a real project in HomeSite is important for when you later want to upload your site’s files

to a Web server If you just create a group of linked pages, you will make more work for yourself when it comes time later to estab-lish a workable folder structure on the Web server

to run your Web site.

• Because the Select Directory dialog box offers no “New Folder” button, you should create the project folder before beginning this process You can do this in Windows Explorer or any other file-management tool.

• When setting up your pro-ject folders, be sure to create an images folder

as well as a site_content folder for storing non-HTML documents containing text that you may use on your Web pages The images folder, obviously, is the repository for all images used in your Web pages.

4. Click a directory (or folder) where you want to store your project

files and click OK The project files will appear in the Projects tab of the Resource panel (see Figure 160-3)

Figure 160-3: The main project folder and two subfolders are ready to store the HTML documents and other files you create and use with the project

cross-reference

• Setting up a site in FrontPage is a very similar process See Part 16.

Trang 13

Organizing a Project with Folders

Once you’ve set up a project, you can add folders to the project folder, creating

a filing system for your HTML documents, images, and site content files (documents, worksheets, and other files that your client may send you or that you may accumulate yourself) Although the number of folders you can create is unlimited, don’t add so many folders and subfolders that you create a filing system that’s difficult to manage, navigate, and understand

1. With the Projects tab displayed in the Resources panel, right-click the main project folder A submenu appears (see Figure 161-1)

Figure 161-1: Accessing folder-related tools by right-clicking your existing folders

note

• Because a virtual folder

doesn’t really exist, it

can-not be uploaded to a Web

server The folder(s) you’re

creating here will be

copied to your Web server

once you deploy the site

(or project).

Trang 14

• These folder-naming rules exist so that any server that could host these fold-ers would be able to sup-port them Some servers don’t allow capital letters

in names and, for the Web, using underscores instead of spaces (as in

“site_content” rather than

“site content”) helps pre-vent problems later on.

• The same shortcut menu that allowed you to add folders can be used to delete them, too Right-click an unwanted folder (from within the Project tab

of the Resource panel) and choose Remove Folder No dialog box results — the folder is simply deleted.

2. To create a new subfolder for your projects folder, choose Add Folder

The Add a Project Folder dialog box opens (see Figure 161-2)

Figure 161-2: Defining a new folder in HomeSite

3. In the Add a Project Folder dialog box, click the Folder Name text

box and type a name for the folder The name should be in lowercase and contain no spaces or punctuation

4. Click the Physical Folder option

5. As needed, type or browse to (using the browse button) the Directory

Path that contains your folder

6. Click the Auto Include Files Using Filter option and leave All Files

selected

7. Click the Auto Include Subfolders option if it’s not already selected

8. Click OK to create the folder

cross-reference

• Creating folders to store site files is easy in Dreamweaver, too Check Part 15 for all the details.

Trang 15

Starting a New HomeSite Document

After you create your project and build your folders to store HTML docu-ments and related files, you can start your first HomeSite document This task shows you how to start a new page, work within the automatically-inserted tags, and begin entering page content

1. With your project displayed in the Project tab of the Resource panel, choose File ➪ New The New Document dialog box opens (see Figure 162-1)

Figure 162-1: Picking the kind of page you want to create

2. Double-click the Default Template icon This creates a new HTML document with the starting tags already inserted (see Figure 162-2)

Figure 162-2: The starting page with <html> and <body> tags already in place

notes

• The text between the

<title> tags appears

in the title bar of the

browser when it displays

your Web page.

• Choose <h1> (Heading 1),

<h2> (Heading 2), or

<h3> (Heading 3) tags in

the Tags menu Once the

heading tags are inserted,

add the actual heading text

between them.

Định dạng
Số trang	20
Dung lượng	918,63 KB