Part I: Creating Great Web Sites in Java

Maker QR Code JIS X 0510 in Java Part I: Creating Great Web Sites

Many people are pleasantly surprised by how easily they can create a basic Web page with text and images in Dreamweaver This section focuses on text, the next section on images In this chapter, I use Dreamweaver s HTML formatting options, including the heading and paragraph tags I start with basic HTML tags to keep things simple at this stage and to introduce you to what many designers consider the basic building blocks of a good Web page In s 5 and 6, you find detailed instructions for using CSS to change the size, color, and font and other style options of text formatted in HTML

To add text to a page, you can simply click to insert your cursor at the top of a page and type If you want to add text that you have somewhere else, such as file created in Microsoft Word, you can copy and paste it into Dreamweaver instead of retyping it Dreamweaver offers many ways to maintain formatting when you copy and paste text from another program This is especially important when you copy text from Microsoft Word because if you just paste text in as is, you risk including a lot of extra code that is unique to Microsoft Word and can cause problems in your Web page You can change the default for how Dreamweaver handles formatting when you choose Edit Paste by altering the Preferences in the Copy/Paste category You can also choose Edit Paste Special to display these options any time you paste new content Here are your four main options for inserting text when you choose Edit Paste Special (and two ways to refine your choice): Text Only: Dreamweaver strips any formatting and inserts plain text Text with Structure: Dreamweaver includes paragraphs, lists, tables, and other structural formatting options (This choice is my favorite because it removes any code specific to a program like Word if you use the Clean Up Word Paragraph Spacing check box described a little later, while preserving basic formatting) Text with Structure Plus Basic Formatting: Dreamweaver includes structural formatting as well as basic formatting, such as bold and italic

Text with Structure Plus Full Formatting: In addition to the previous options, Dreamweaver includes formatting created by style sheets in programs, such as Microsoft Word Retain Line Breaks: Line breaks are preserved, even if you don t keep other formatting options This option is not available if you choose Text Only Clean Up Word Paragraph Spacing: This option removes special formatting code that is unique to Microsoft Word, and is unnecessary (and not recommended) for text on the Web I cover many more text formatting options in 5 because formatting on the Web is best done with CSS and you need to understand the basics of CSS before you start using styles to format text

One of the best formatting options for headlines is the collection of heading tags In HTML, using heading tags (<h1>, <h2>, and so forth) to format text that serves as a title or headline offers many advantages Heading tags are designed to be displayed in relative sizes, with <h1> the largest, <h2> smaller, <h3> smaller still, and so on through <h6> So no matter what a Web page s default text size is (and text sizes can vary due to browser settings and computer platform), any text formatted with an <h1> tag is always larger than text formatted with <h2> (In 5, you find instructions for creating styles that can change the appearance of heading tags while still preserving these benefits) Popular belief is that many search engines give priority to keywords in text formatted with an <h1> tag because the most important text on a page is generally included in the largest size headline To format text with a heading tag, follow these steps: 1 Highlight the text you want to format 2 In the Property inspector, at the bottom of the workspace, make sure the HTML button on the left side of the inspector is selected 3 Use the Format drop-down list to select a heading option (see Figure 2-9) When heading tags are applied, the text automatically changes to become big and bold in design view