- Introduction
- Opening and Editing an Existing File Using Code View
- Importing Styled Text from a Document
- Cleaning Up Imported Text
- Further Reading
- Summary
- Q&A
- Workshop
- 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 MyKipple site should open automatically when you open Expression Web 4. If not, you can find it by selecting Open Site from the Site 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 Site dialog lists all the sites created in Expression Web 4 (see Figure 4.2). When you create or manage a website with Expression Web 4, the program automatically generates a shortcut to facilitate easy access to the site from 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 Documents.
)
Figure 4.2 The Open Site dialog displays all the websites you created in Expression Web 4; 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 gray striped shading above and below. The gray areas are the default top and bottom margins for the h1 tag. 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 heading style.
)
Figure 4.3 When you click an element in either Code or Design view, that object is highlighted in both views for easy reference.
HTML is a basic markup 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 to change the appearance 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 manually change the style. Try changing the heading <h1> and </h1> tags to paragraph <p> and </p> to see what happens in Design view.
Notice that when you change the beginning tag, Expression Web 4 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. When you change the end tag to match the start tag, the errors go away.
)
Figure 4.4 When Expression Web 4 discovers a code error, it highlights the error with a yellow background and red text and shows 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 just code 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>
Looking at the rest of the code, 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 display 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.