A Website Is Really Just
Text: Build One in 5 Minutes
What You’ll Learn in This Hour:
. How to create a new website . How to create a new page
. How to create and edit simple text content using Design view . How to test your first web page in multiple browsers
. How to use SuperPreview to test your pages against Internet Explorer and other browsers
Now that you have seen what this program can do, it’s your turn to make your own project. You start at the beginning with a blank site and one Hypertext Markup Language (HTML) page, and work your way from there to the fully functional site you saw in Hour 2, “Beginning at the End: A Walkthrough of the Finished Project.”
Creating a New Website
As you saw in Hour 2, a website is a group of related files and folders under one main folder. In fact, a website such as www.designisphilosophy.com is little more than a fold- er on a server you can access through the Internet. By creating a new website in Expression Web 4, you tell the program, “This folder is where I will put all the text, images, and other files I want to share with everyone in the world when they visit the website. Please keep track of them for me.” In response, Expression Web 4 keeps tabs on what you do and makes appropriate changes to your files to reflect the changes you have made in related files and keep the website working properly. It does so by creating a set of hidden metadata files that describe the site and its contents. That way, the information about how your site functions is stored even if you delete the program from your computer or hand over the project to another Expression Web 4 user.
ptg7913109 The first thing to do when you start a new project is to create a new website. You can do
this from the Site menu or from the New Site icon on the Common toolbar. This opens the New Site dialog, which displays the different options available (see Figure 3.1).
FIGURE 3.1 The New Site dialog gives you the ability to create new websites from scratch, from templates, or by importing an existing site.
Expression Web 4 makes a deliberate separation between sites and pages through the use of the New Site button on the Common toolbar and by placing the New Site, Open Site, Recent Site, and Close Site functions under the separate Site menu.
From the New Web Site dialog, you have the option to make a basic website with no content, create one from a template, or import an existing site using the Import Site Wizard. Under General are three more options: One Page Site, Empty Site, and Import Site Wizard. The One Page Site option creates a website with a home page file called default.html. The Empty Site option creates a website folder with no files.
The Import Site Wizard lets you import an already existing site from a local folder, a network folder, or the Web.
By the Way
By the
Way Don’t take titles such as One Page Site and Empty Site too literally. People often think of computer programs as rigid and inflexible and start to worry when they see definite descriptions like these. A common question that arises when people open the New Site dialog for the first time is, “What option do I choose if I want to create a site with morethan one page?” It might seem like a silly question to those well traveled in the world of web design, but this confusion is understand- able in much the same way that my high school teacher could never understand that the computer casing was not the hard drive. It’s all a matter of perspective.
In reality, programs are (at least for the most part) flexible, and titles such as these are merely general descriptions. Using a One Page Site template in
ptg7913109
▼
Expression Web 4 just means that you start with a folder with one file. In fact, strictly speaking, a one-page website isn’t a website at all—it’s just a single web page. Likewise, an “Empty Site” is a website folder that starts with no files in it with the expectation that files will be added later.
At the bottom of the dialog is the suggested location for your new website. The sug- gested location varies depending on your computer’s operating system and setup. To avoid confusion, always create a new folder with the same name as your project and use it as your website folder. You can use the Browse button to select any folder on your hard drive, on a local network, or on an external server, such as your web- site or root folder, but keeping your files on one of your local hard drives is usually the best solution.
It’s a good idea to have a central location where you keep all your websites.
Expression Web 4 suggests you use the My Web Sites folder located under
Documents, but you can use any folder you want. This book uses the My Web Sites folder as the central location for all projects.
Try It Yourself
Create a New One-Page Website
Creating a new website should always be the first step when starting a new project.
In this task, you create a new website with one HTML page.
1. Click the New Site icon (second from the left on the Common toolbar) or click Site and select New Site from the main menu.
2. In the New dialog, select General and One Page Site.
3. Click the Browse button next to the Location box at the bottom of the dia- log and navigate to the My Web Sites folder under Documents. Create a new folder and name it MyKipple.
4. Click the MyKipple folder to highlight it and then click Open. The Site Name setting automatically matches the folder name you created, unless you want to give the site a different identifying name.
5. Make sure the Add to Managed List box is checked and then click OK. ▲
ptg7913109
Beginning Where You Left Off
When you start Expression Web 4 again after closing it, by default the program opens the last project you were working on. This function is great if you are work- ing on only one project, but it can be annoying if you have several projects going at once. If you want the program to start without opening a website and create a blank web page instead, you can change the settings under Tools, Application Options.
Expression Web 4 has now created a new site with one page called default.html (see Figure 3.2). This is the blank canvas you work with from here on out.
As you make changes to the files in the website, Expression Web 4 keeps tabs on what you do and makes sure your hyperlinks are up to date, even if you change them, to keep everything working properly.
By the Way
FIGURE 3.2 The MyKipple site as it appears after creation.
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
ptg7913109 design, home page filenames are either: indexand the less common defaultormain.
All versions of Expression Web use default.html as the home page. A home pageor root pageis 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 dis- play the web page.
By the Way
HTML is the most prevalent markup or publishing language for creating websites.
A markup language is a set of code snippets that define for a browser how it should lay out and format text. Used correctly, HTML is a powerful tool to organize and display large amounts of content in a simple and accessible way. For further information on HTML, visit http://en.wikipedia.org/wiki/HTML.
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.
ptg7913109 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).
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 <h1>from the Style drop- down menu (see Figure 3.5) in the toolbar.
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 repli- cate 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 under- neath, type one more paragraph, this time using the I(italic) and B(bold) buttons in the toolbar to emphasizeandstrongly emphasizeparts of the text.
ptg7913109 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).
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.
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).
ptg7913109
Five Browsers You Should Have on Your Computer
A web designer or developer should always have the end user in mind. However, you don’t know what browser or even what kind of computer the visitor will use when viewing your websites. Making an educated guess is the best you can do.
The majority of the computers connected to the Internet run some version of Microsoft Windows, and most of these computers have Internet Explorer as their default browser. Therefore, Internet Explorer should be at the top of the list.
Because Expression Web 4 works only on Windows-based computers, you proba- bly already have Internet Explorer installed by default. If not, you can get the latest version of Internet Explorer free from Microsoft by visiting www.microsoft.com/ie.
Mozilla’s Firefox browser is the biggest competitor to Internet Explorer. In compari- son with Internet Explorer 6, 7, and 8, Firefox has been a far more “reasonable”
browser when it comes to code interpretation because it follows web standards pretty closely, although the release of Internet Explorer 9, which adheres to web standards, has narrowed the gap substantially. Nevertheless, many Internet users swear by Firefox and, for that reason, you should also have Firefox installed. You can get it free from Mozilla by visiting www.firefox.com.
Most Mac (Apple) users use the default Mac OS browser called Safari. Apple also has a Windows version of this browser. To ensure that Mac users get the same experience as Windows users, you should also test everything in Safari. You can get it free from Apple by visiting www.apple.com/safari/.
In 2008, Google released a new browser on the market called Chrome. This browser is entirely JavaScript based and is meant to run “lighter and faster” than any other browser available today. In the time since its release, it has managed to FIGURE 3.7
The result as it appears in Design view in Expression Web 4.
By the Way
ptg7913109 become one of the leading browsers in the world, and even though it is still in its
infancy, it is now a staple browser that has to be considered. You can get it free from Google by visiting www.google.com/chrome.
Finally, there is the Opera browser. Although it doesn’t have a large market share, Opera is a popular alternative to the mainstream browsers and has an extremely loyal following. It works on many cell phones and other portable devices. Opera is strict when it comes to web standards and can be an excellent tool for uncovering bad code that other browsers glance over. You can download Opera for free by vis- iting www.opera.com.
Testing Your Web Page in Multiple Browsers
When you design for the Web, it’s important to continually test your pages in multi- ple web browsers to ensure that they work and appear the way you intend. A web browser is nothing more than a program that renders or interprets the code in your page and displays it accordingly. However, like human interpreters, there can be large discrepancies among browsers when it comes to interpretation. The WYSIWYG editor in Expression Web 4’s Design view is a custom browser built to mimic stan- dard browser behavior, but it is not perfect; some standard markup is not rendered accurately. Likewise, not all browsers are particular about web standards or they interpret web standards differently and, as a result, your page can look different depending on which browser you use.
To help with the testing process, Expression Web 4 can be set up to preview your page in all the different browsers installed on your computer, and in multiple differ- ent window sizes. This can be done from the File menu or from the Preview button on the Common toolbar.
To preview the current page in your default browser, click the Preview button on the Common toolbar. If you want to select a different browser or preview the page in multiple browsers, click the down arrow next to the Preview icon to get the Preview in the browser drop-down menu, as shown in Figure 3.8. By default, the list includes the currently installed version of Internet Explorer and your default browser, if differ- ent from Internet Explorer. If you have installed more browsers on your computer, you can add these to the list by selecting Edit Browser List from the bottom of the drop-down menu.
ptg7913109 Pressing F12 is the quickest way to test your current page against the last browser
you tested in. By pressing F12, you cause the browser to open and you see the local instance of your page just as you would if it were stored somewhere on the Web. As you can see from Figure 3.9, the page looks the same as it did in Expression Web 4.
Because you use only the standard styles h1,h2,p, and li, the text fills the entire width of the window. If you grab the edge of the window and resize it, the text reor- ganizes itself to fit the smaller or larger space.
FIGURE 3.8 By clicking the down arrow next to the Preview icon, you can test your page in one or multiple different browsers (and windows sizes) installed on your computer.
FIGURE 3.9 Your first web page as it appears in Internet Explorer 9.
ptg7913109
When Browsers Go Bad: Internet Explorer
If you’ve worked with web design before or you’ve surfed the Web using different browsers, you’ve no doubt run into the infamous Internet Explorer problem, where pages that look fine in Internet Explorer are “broken” in other browsers, or vice versa. Internet Explorer 6 and 7 have a tendency to display pages, and especially those using CSS, differently from other browsers. This problem is often miscon- strued as a problem with the other browsers, but in reality, it is the result of Internet Explorer interpreting web standards in a nonstandard way (no pun intend- ed). This has lead to the rise in popularity of other browsers such as Firefox and Chrome, international campaigns to phase out Internet Explorer 6, and a phenom- enon known as “IE Hacks,” in which designers and developers have been forced to come up with special code hacks to circumvent these problems so that their sites appear identical across all browsers.
Fortunately, the Internet Explorer development team finally realized the error of its ways and, with the release of Internet Explorer 9 in March 2011, the browser is now fully standards compliant and pushing for even closer web standards integra- tion on the Web. Microsoft has also launched a campaign to rid the world of Internet Explorer 6. You can check it out for yourself at www.ie6countdown.com.
Fortunately, the renewed push for web standards and the introduction of the new HTML5 standard has given the upgrade movement a big boost, and we can finally see a light at the end of the tunnel where IE 6 and 7 problems are concerned.
Even so, many users run Internet Explorer 8, which is still not entirely up to stan- dard, and it is estimated that a small minority of users will “hang on to” Internet Explorer 6 for years to come.
SuperPreview: A Sneak Preview
At this point, you are probably thinking two things: First of all, it seems awfully cumbersome to keep testing all of your pages in all these different browsers. Second, how are you supposed to test your pages against older browsers you don’t have?
After all, there is no simple way of installing Internet Explorer 6, 7, and 8 on your computer now that you have Internet Explorer 9 up and running!
To curb this problem, designers have turned to one of three strategies: virtual machines (where you set up virtual computers with older operating systems within your current operating system and run older browsers in them), multiple computers (where you have several different computers running at the same time, and you test the pages on all of them), or web-based “browser shot” applications (which produce screenshots of what the page looks like in multiple different browsers and configura- tions). The problem with all these is that they are cumbersome, time consuming, and not very effective.
By the Way