|
Expression Web 3 Book Terms and Notes by FJW
Tutorial 2 Formatting Text Task 1: Set the Title, Description and Keywords for your Web page EW 51 Task 2: Set a Background Color for any color other than white for your page. EW 52 Task 3a: Use a centered <h1> with 2pt or 3pt letter-spacing and an left-aligned <h2> or left-aligned <h3> tag Task 3b: Apply a Web safe color to your left-aligned <h2> or left-aligned <h3> tag EW 61 Task 4: Use the font attribute xx-large or x-large somewhere at the top of your page EW 55 Task 5: Use a serif font, a sans-serif font, and a monospaced font on your page - note how you can create a style for this customized text. Right-click on any style1s or style2s in the Apply Styles panel and Rename it to a logical name such as Title or SubTitle or ChapterHeading… EW 56 Task 6: Put a Top and Bottom Border on your <h1> tag that is on the top of the page. Name the new style (class) .h1Border instead of the default name of style1 or style 2 (If you want you can also add a left and right border as well.) Set whatever border width, color or style that you desire. EW 58 Task 7a: Add some text within a <p> tag that is both bold <strong> and italic <em> EW 65 Task 7b: Use an obvious superscript or subscript somewhere on the bottom of your page. EW 74 Task 8a: Create an Unordered list with a square bullet EW 70 Task 8b: Create an Ordered list EW 70 Task 9: Add a double spaced <blockquote> to a paragraph on your page. EW 77 Task 10: Add an <hr> with a width of less than 100% EW 81 Task 11: Insurance Points
(only used if something else does not work)
EW 48 To ensure that the relationship among the files and folders is always maintained (especially for linked documents), it is important that you perform all of your Web site file management within Expression Web using the Folder List panel, rather than using the file management utilities of Windows
EW 48 If panels and toolboxes are missing or out-of-whack: Click the Panels menu, and then click Reset Workspace Layout.
EW 51 Managing Sites: Clicking the Remove button does not delete the site; it only deletes the site name from the list.
EW 51 To create a title, a page description, and keywords: 1. Right-click anywhere in the editing window. EW 52 You can use the page properties > click the Formatting tab> to change both the text color and the background color.
EW 55 Note that there is no corresponding HTML heading size for the keyword xx-large. In typography, a point is 1/72 of an inch in height. The font sizes are approximate and vary depending on the browser and browser version.
EW 56 A serif font is a font embellished with stroke endings that resemble hooks or tails. A sans-serif font does not have stroke embellishments. Times New Roman and Arial are two very commonly used fonts. Times New Roman is an example of a serif font, and it is the default font for most browsers. Arial is an example of a sans-serif font. Courier is an example of a monospace font, which is a font where each character occupies the same amount of space
EW 56 Whenever you change the font for a Web page, it’s always a good idea to list a font family and to list the appropriate generic font name at the end of the list of fonts. If you have chosen an unusual font and the user does not have the specified font installed on his or her computer, the browser will display the most similar font it has installed from one of the generic fonts that you specified.
EW 58 To create an outside border: 1. Click anywhere inside the h1 text 2. Click the h1.style1 Code tab to select the h1 container. 3. On the Common toolbar, click the Outside Borders list arrow and then click Outside Borders. Sample code: <style type="text/css"> .h1Border { border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; padding-top: 1px; padding-bottom: 1px; } </style> </head>
EW 59 Changing the Border Style, Color, and Width • Select the text or the container tab. • Click Format on the menu bar. • Click Borders and Shading.
EW 61 On computer monitors, color is actually a combination of three colors: red, green, and blue. Mixing these three colors and varying their strength (their intensity) is what produces the color gallery you see in the world around you… The Web-safe colors are those colors that are so common that all monitors should be able to display them correctly.
EW 62 The hexadecimal system is a numbering system based on the number 16. After the number 9, the letters A, B, C, D, E, and F are used to represent the numbers 10, 11, 12, 13, 14, and 15… The hexadecimal values for color are based upon the intensity of red, green, and blue. In hexadecimal representation, 00 is the lowest intensity and FF is the highest. The hexadecimal number is preceded by a flag character, the # symbol. The flag character is followed by three RGB triplets, which are three two-character groups of hexadecimal numbers representing the intensity of red, green, and blue. #FF0000 = Red, #00FF00 = Green, #0000FF = Blue, #FFFF00 = yellow Ex: css <style type="text/css"> .important { color: #0000FF; font-size:xx-large; font-family:Arial, Helvetica, sans-serif } Ex use: <p class=" important">Sample color code</p> Or <p>Sample <span class="important">color </span>code</p>
EW 70 An unordered list is a list with bullets as the list marker, and an ordered list is a list with letters or numbers as the list marker.
<ul style="list-style:square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
EW 71 Changing the Bullet Type • Select the list contents. • Click Format on the menu bar, and then click Bullets and Numbering.
EW 74 The Font dialog box has several unique means to format text, such as making text appear in all capitals and creating superscripts and subscripts.
EW 77 Expression Web has two buttons on the Common toolbar that change a text indent. Each time you click the Increase Indent Position button, Expression Web increases the indent by 50 pixels. The HTML blockquote element, however, indents text on both sides. The following can be used for a double-spaced block quote: <blockquote style="line-height: 200%;">callout text goes here</blockquote>
EW 77 Web development traditionally has fallen as a task shared by two distinct groups. On the one hand are Web page designers, whose primary focus is to design an attractive and attention-getting Web page. On the other hand are Web page developers, who write software that supports the underlying features of a Web page, such as accessing a database and retrieving that information for display on the user’s screen. The two groups often possess different skill sets
EW 79 A spread heading is a heading that uses either word or character spacing. <h1 style="letter-spacing: 2pt">My Title</h1>
EW 79 Changing the Character Spacing • Select the text. • Right-click and then click Font on the shortcut menu. • In the Font dialog box, click the Character Spacing tab.
EW 81 Horizontal lines are referred to in HTML as horizontal rules. Horizontal lines appear differently depending on the browser and browser version. (For consistency: consider using an image instead) Ex: <hr style="background-color:blue; width:50%; text-align:center; height:3px;" />
EW 83 Special Characters: Ex: Pictures Copyrighted © by Your Name
EW 86 The home page for most Web sites is a file named default.htm or index.htm. Expression Web automatically creates a file named default.htm for you. Filenames for Web sites should be lowercase, should not include any punctuation other than the underscore character, and should begin with a letter. Filenames should be brief, preferably not more than eight characters, and should not include spaces.
EW 86 Recall that Expression Web keeps track of all files that are associated with your Web site. This information is kept in two hidden folders, which you should be careful not to move or delete. These hidden folders and their contents do not appear in the Folder List panel, but they will appear in Windows Explorer if you have the option set in Windows Explorer to display hidden files. Metadata is information about the documents in your Web site. The _vti_cnf metadata folder contains information about every file in a particular site. Expression Web uses this information to determine the location of links within the site. The _vti_pvt metadata folder stores several files that provide information, among other things, to configure the initial settings for Expression Web.
EW 86 Creating a Web Site • Choose a storage location on your computer for the Web site; insert storage media if necessary. • Click Site on the menu bar, and then click New Site. • In the New dialog box, specify One Page Site or Empty Site. • Click the Browse button and navigate to the storage location you have chosen for the Web site. Click the New Folder icon or the New Folder button (depending on your operating system). Type a name for the new folder. • Click the Open button. |