- Introduction
- Opening and Editing an Existing File Using Code View
- Importing Styled Text from a Document
- Cleaning Up Imported Text
- Summary
- Q&A
- Workshop
- Quiz
- Answers
- Exercise
This chapter is from the book
This chapter is from the book
This chapter is from the book
Opening and Editing an Existing File Using Code View
If you haven’t already done so, open the default.html file you worked on in Hour 3. The MyKippe site should open automatically when you open Expression Web 2. If not, you can find it by selecting Open Site from the File menu or from the drop-down menu of the Open icon on the Common toolbar (see Figure 4.1).
)
Figure 4.1 The drop-down menu under the Open icon on the Common toolbar gives you quick access to open files and sites without having to go to the Main menu
The Open Sites dialog lists all the sites created in Expression Web 2 (see Figure 4.2). When you create or define a website in Expression Web 2, the program automatically generates a shortcut to facilitate easy access to this list. If you can’t find the project on this list, you can navigate to it as you normally would. If you followed the directions in Hour 3, the project is in the My Web Sites folder under My Documents.
)
Figure 4.2 The Open Site dialog displays all the websites you have created in Expression Web 2. Here seen with the My Kipple project.
Before going any further, let’s look at what is happening in the page’s code. Select Split view using the button at the bottom of the pane to reveal both Code view and Design view. Click anywhere on the heading and then click the h1 tag on the Block Selection box. This highlights the content affected by the h1 style in both Design view and Code view (see Figure 4.3). In Design view, you see a box with a gray striped-out area above and below. The gray areas are the default margins for the h1 style. In Code view, you see the text buffered or wrapped on both sides by code tags. These tags tell the browser to display the text in the h1 style.
)
Figure 4.3 When clicking on an object in either Code or Design view that object is highlighted in both for easy reference.
HTML is a basic code language that can be summarized in one simple rule: Everything is wrapped between a beginning and an end tag. All beginning tags consist of a less-than bracket <, the tag name and/or function, and a greater-than bracket >. End tags look much the same, but with the addition of a forward slash / before the content. In this example, <h1> tags wrap the heading like this:
<h1>This is my first web page!</h1>
You now have two ways of changing the style of your content. You can use the style drop-down menu as you learned in Hour 3 or you can go into Code view and change the style manually. Try changing the <h1> and </h1> tags to <p> and </p>, and see what happens in Design view.
Notice that when you change the beginning tag, Expression Web 2 highlights the end tag in yellow and red to tell you that your code is broken (see Figure 4.4). Likewise the status bar on the bottom of the workspace puts up two warning signs: The first one tells you that it detects an HTML incompatibility; the second one tells you that it detects a code error.
)
Figure 4.4 When Expression Web 2 discovers a code error it highlights the error with a yellow background and red text as well as showing a warning sign in the Status Bar.
By studying the code, you see that all the different styles you applied in Hour 3 are actually the same type of tags:
- Heading 1 <h1>
- Heading 2 <h2>
- Paragraph <p>
- Italicized (emphasized) <em>
- Bold (strongly emphasized) <strong>
- Bullet (unordered) list <ul>
- Numbered (ordered) list <ol>
- List item for both lists <li>
The </body> tag, which wraps all the content, tells the browser that this is the content to display. The <head> tag contains all the meta information that is available to the browser but that the browser does not displayed within the page. Meta information includes the page title displayed at the top of the window, info about the designer, and so on. Finally the <html> tag, which tells the browser that the following content is written in the HTML language, wraps both the <head> and <body> sections. Scroll to the bottom of the Code view and you can see the </body> and </html> tags that close the page.