- Creating a New Website
- Creating Your First Web Page
- Testing Your Web Page in Multiple Browsers
- SuperPreview: A Sneak Preview
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Your First Web Page
Now that you have created a website, the Site view appears in place of the Split view you previously saw. You explored the different functions of this pane in Hour 2. For now, let’s focus on creating your first web page.
As you can see, your new website contains one file called default.html. When a browser visits a domain or folder on the web, it always looks for the home page. By design, home page filenames are either: index and the less common default or main. All versions of Expression Web use default.html as the home page. A home page or root page is the page the browser looks for in a folder if the visitor does not specify a particular filename in the address bar.
Default.html is an HTML file that contains all the code a web browser needs to display the web page.
Double-click the filename and make sure you are in Split view (see Figure 3.3). As you can see, although it contains some code, it has no content. If you were to open the file in a browser at this point, all you would get is a white page. So, before going any further, you need to add some content.
)
Figure 3.3 Even though Code view shows several lines of code, default.html is empty in Design view because there is no content yet.
To see how easy it is to create a simple web page, switch to Design view so that all you see is the blank page. When set to Design view, Expression Web 4 works in much the same way as a word-processing application such as Microsoft Word. This is great when you want to quickly edit content. Click anywhere inside Design view and start typing text. The text appears in a dotted box with a P hovering over it. This box is a visual aid called Block Selection, and it gives a visual representation of what content a particular element applies to (in this instance, P or “paragraph”). If you click the dotted line itself, Expression Web 4 adds pink shading above and below it, providing a visual representation of the default margins the paragraph has. You can turn Block Selection and all other visual aids on and off from the Visual Aids menu under the View menu or from the Visual Aids button on the status bar (see Figure 3.4).
){kind=link}
Figure 3.4 The Visual Aids button on the status bar lets you turn on and off visual aids as you work.
If you click somewhere else on the page, the Block Selection box disappears and you see the text as it appears in a browser. By moving the cursor to the end of this line, you can continue your current paragraph. If you press Enter, the cursor shifts down approximately two lines to start a new paragraph, and Expression Web 4 creates a new Block Selection box.
On the first line, enter your page title and select Heading 1 2<h1> from the Style drop-down menu (see Figure 3.5) in the toolbar.
){kind=link}
Figure 3.5 The Style drop-down menu works much the same as the style menu in a word-processing application such as Microsoft Word.
With the cursor at the end of the first line, press Enter to create a new paragraph, and a new P box will appear under your heading. Enter some more text—enough to fill at least three full lines. If you can’t come up with anything to write, simply replicate some text out of this book or any other written material laying around.
Create a new paragraph by pressing Enter and typing a subheading. Use the Style drop-down menu in the toolbar to set the tag to Heading 2 <h2>. Directly underneath, type one more paragraph, this time using the I (italic) and B (bold) buttons in the toolbar to emphasize and strongly emphasize parts of the text.
You need two more elements: a bullet (unordered) list and a numbered (ordered) list. As in a word processor, press Enter to create a new line and click the Numbered List button (see Figure 3.6).
){kind=link}
Figure 3.6 The Numbered List and Bulleted List buttons work in much the same way as they would in a word-processing application.
A number appears on the left, the Block Selection box shifts to the right, and its tag changes to LI (list item). Type a series of list items and separate them by pressing Enter. To end the list, simply press Enter to create a new list item and then either click the Numbered List button again to deactivate it or press the Backspace key on your keyboard. Doing so changes the new list item to a new paragraph.
Creating a bulleted list is done in the same way: Click the Bulleted List button and create a series of list items.
Finally, click the Save button or press Ctrl+S to save the file. Pat yourself on the back: You just created your first web page (see Figure 3.7).
)
Figure 3.7 The result as it appears in Design view in Expression Web 4.