Beginning at the End: A
Walkthrough of the Finished Project
What You’ll Learn in This Hour:
. How to import and work with a completed website in Expression Web 4 . How to preview a site in your browser
. How this book is laid out
. How to use the different tools in Expression Web 4 to explore a website and learn how it works
When I start to read a book like this, I always want to see the end result of all the les- sons before I start so that I know what I’m getting myself into. So, rather than mak- ing you go through all the tutorials to see what you can build in just a few hours with Expression Web 4, I start at the very end by showing you the site you will build throughout these lessons and use it to showcase some of the many features available in this application.
Because websites consist of many different files linked together, it is important to keep everything organized. But, to do this, you first need to understand what the dif- ferent elements are and how they work and relate to each other. By looking at a completed website and using the tools available in Expression Web 4, you can get a firmer grip on how everything comes together.
The methods you learn in this hour will be useful to you down the road. In fact, when you finish Hour 24, “Publishing Your Website,” I urge you to come back to this hour for a second look. Because you’ll come back with a better understanding of how the website works, you’ll have an entirely new perspective on the different lessons in this hour.
ptg7913109
▼
Working with a Completed Website
To work efficiently in Expression Web 4 (or any web design application, for that mat- ter), it is important to understand how the application handles files and file relation- ships. By working with a completed website, you can experiment and learn how Expression Web 4 works with you to keep everything functioning properly as you edit and reorganize the different elements. That way, you get an early start developing techniques and understanding that usually comes only much later in the learning process.
The Import Site Wizard is a helpful tool that saves you a lot of time when you need to work on a website built in a different application or by a different designer. There- fore, you will probably use it frequently.
Try It Yourself
Importing a Completed Website
A website is actually just a folder with a group of files linked together. What makes it awebsiteis that the files within that folder can be viewed using a web browser. You get a more thorough explanation of this idea later in this book. By creating a new website in Expression Web 4, you tell the application that the main (root) folder is the bottom line or foundation and that everything in it relates back to this folder.
When you publish your website, the domain name replaces the root folder.
To start, use the Import Site Wizard to import the finished project into the application as a new website. You can use it to import sites from your local computer or network and from external web servers or even directly from the websites themselves.
1. Go to this book’s website at http://expression.pinkandyellow.com and down- load the lesson files for this hour to a central location on your computer.
2. Unzip the lesson files using your operating system’s native file-extracting func- tion or an application such as 7-zip. Place the lesson files in a central location on your computer (for example, on your desktop).
3. Open Expression Web 4.
4. Go to Site, Import, and then select Import Site Wizard. This opens the Import Site Wizard dialog, as shown in Figure 2.1.
5. Select the File System option and use the Browse button to navigate to the loca- tion where you placed the unzipped lesson files for this hour. Select the folder called MyKippleFinal. With the address set, click Next.
▼
ptg7913109 6. On the next page (see Figure 2.2), you are asked to define where the local copy
of the site should be created. You need to select a folder different from the one the files are in right now. It is always a good idea to keep all of your website projects in one location on your computer so that they are easy to find. Many people use the My Web Sites folder under Documents. Browse to the location you want the new website to be created in, create a new folder called MyKippleFinal, and select it. Click Next.
7. Expression Web 4 will most likely flash two warning messages at this point:
The first one tells you that there is no site at the location you defined in step 4, and the second message asks you if you want to set up a site in that location.
Click OK to both. The final page of the Import Site Wizard tells you that the website has been set up and that you can now start importing files. Click Finish.
FIGURE 2.1 The Import Site Wizard dialog lets you import an existing site from a multitude of different sources both on your computer and on the Web.
FIGURE 2.2 The second page of the Import Site Wizard lets you define where you want the new website project placed on your computer.
▼
▼
ptg7913109 Local website address Remote website address
FIGURE 2.3 The second page of the Import Site Wizard lets you define where you want the new website proj- ect placed on your computer.
Now that you have defined a location for the new website, Expression Web 4 opens in Site view, and you see all the files in the remote location (the folder you down- loaded the lesson files to) on the right and your new site location on the left. To begin with, the left side is blank. To populate your new site with the files from the finished project, select all the folders and files on the right side and click the blue left-pointing arrow between the two views. This button publishes the existing files to your new site. This might seem odd, but if you consider a scenario in which you were down- loading files off a web server, it makes sense.
When the transfer is complete, you see a view like the one shown in Figure 2.3. This view shows you the local website on the left and the remote website on the right. This is your site management window from which you can synchronize two locations or move files and folders between the local and remote locations either one by one or in groups. Expression Web 4 keeps tabs on what files have been moved and what files have been modified in the program, and whenever you come back to this view, it tells you what files need to be updated on either the local or remote location.
You have successfully imported the new website when you can see that the local and remote websites are identical in terms of files and folders and that the Folder View panel shows all the files and folders. You can now click the disconnect button (a power plug with a red bar next to it) to sever the connection.
▼
▲
ptg7913109
By the Don’t Be Confused by the Names “Local” and “Remote” Way
As you saw in the preceding lesson, Expression Web 4 separates the website you are working with from the one you are publishing to by referring to them as local websiteandremote website, respectively. However, these names can easily be confusing. In the example you just saw, it can be argued that bothwebsites are local.
Expression Web 4 considers the website you open in the application as the local website and the one you are publishing the files you have worked on to as the remote website, regardless of the actual location of either. This can lead to some interesting and confusing results: If you want to, you can set up a website so that the files you are working on are on a web server (technically, a remotelocation) and publish these files to a hard drive on your computer (technically, a localloca- tion). In that case, the web server would be considered the localwebsite and placed on the left, whereas the folder on your hard drive would be considered the remote website and placed on the right.
If you are ever confused about which location is defined as remote or local, you can always check the address bars at the top of each folder tree in Site view (refer to Figure 2.3).
Previewing the Site in Your Browser
Now that you have set up the MyKipple website in Expression Web 4, look at how the site works in real life. One of the most important habits you need to establish when working with web design is to constantly test what you are doing in one browser (or preferably several browsers) to see that everything is working as it should. For this reason, you have the ability to preview a page in your browser from anywhere inside the application.
To see the new site as it would appear for any visitor when it is on the Web, go to the Folder List panel, right-click the default.html file, and select the current preview browser (prefixed by a browser icon) from the pop-up menu (see Figure 2.4).
This opens the default.html page of the MyKipple website in your browser. The default.html page is the home page of the website, and from here, you can navigate through all the different pages that have been created.
ptg7913109 FIGURE 2.4
You can preview any page in your website by selecting a browser from the right-click menu.
In this case, the default browser is Internet Explorer 9.
The website itself serves as a good introduction to the different sections of this book. The following sections describe the different functionalities and when you will learn them.
Setting Up a Website and Building Pages
All websites consist of a group of web pages. These pages can contain anything from text to images to interactive elements such as Flash movies or Silverlight applica- tions. In Hour 3, “A Website Is Really Just Text: Build One in 5 Minutes,” and Hour 4,
“Building a Home Page: A Look Behind the Curtain,” you learn how to set up a new site and build simple pages.
Hyperlinks
On the MyKipple website, you can see that several segments of text are highlighted in blue. These are hyperlinks that point the browser to different pages either within the website or in external websites. You learn how to create and manage hyperlinks in Hour 5, “Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web.”
Images
If you scroll down to the last paragraph and click the link with the text “my collec- tion of cameras,” you are taken to a new page with a large image of a collection of cameras. Images are an important part of web design and can serve both as content,
ptg7913109
FIGURE 2.5 The home page of the MyKipple website features many different text styles defined by CSS.
such as the camera image; as functional elements, such as buttons; or even as design elements. You learn how to insert and manage images in Hour 6, “Getting Visual, Part 1: Adding Images and Graphics,” and Hour 7, “Getting Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots.”
Tables
At the bottom of the camera page, you find a standard HTML table. In the past, tables were heavily used as design elements to structure the contents of web pages.
However, this was never an ideal situation, and it caused a lot of problems for designers and the people visiting their sites. As a result, designers are moving away from using tables as design elements and now use them only for their intended pur- pose: to display tabular data. Because the focus of this book is to learn how to design standards-based websites with Expression Web 4, you learn how to use tables to dis- play only tabular data. Tables are covered in Hour 9, “Getting Boxed In, Part 1:
Using Tables for Tabular Content.”
Styling the Content
Go back to the home page by clicking the Home button, and you see that the text in the page has many different styles (see Figure 2.5). The heading is big, uppercase, and gray; the paragraph text is smaller, darker, and justified. There are subheadings that look different from the main heading, links, a sidebar with a text box and links,
ptg7913109 and so on. If you were working in a word-processing application, you would have
applied these different looks or styles to each of the sections. But in standards-based web design, you create an external set of styles that define how the different elements look and behave. These styles are created with a code language called Cascading Style Sheets (CSS), and Expression Web 4 is an excellent tool for both learning and working with this language. In Hour 10, “Bringing Style to Substance with Cascading Style Sheets,” you learn how to create and manage these CSS styles to give your con- tent more identity.
Page Layout
As you just learned, designers used to use tables to create page layouts, but this prac- tice is on the way out. In its place, designers are now turning to CSS as their primary layout tool. In addition to changing the look and feel of text and other content, CSS can build containers or boxes that wrap the content. Using this technique, you can group different elements together and create styles and substyles to define how these different elements should look and behave. With the proper use of CSS, you can cre- ate visually stunning and easily approachable web layouts that look the same across all browsers and platforms. Hour 11, “Getting Boxed In, Part 2: Knee Deep in CSS,”
and Hour 14, “Harnessing the Power of CSS Layouts,” show you how to create, mod- ify, and apply styles using the built in CSS functionalities of Expression Web 4 and by editing code directly. In these hours, you learn how to use CSS to create advanced layouts for your sites and how external style sheets can control the look and feel of multiple pages from one central location.
Buttons
Buttons are a subgenre of the common hyperlink in which the hyperlink is attached to a visual element, such as an image or a text box. Because there are many differ- ent types of buttons, there are many different ways to make them, and each serves its own purpose. In Hour 15, “Buttons, Buttons, Buttons,” you learn how to create sev- eral different types of buttons and when to use them.
The Main Menu
Aside from the content itself, I would argue that the navigation is the most
important feature of any website. There are many ways to create functional naviga- tion, and some ways are better than others. One of the most intuitive and visually
ptg7913109 exciting navigational tools you can put on your website is the image-based menu. As
with everything else, there are several different ways you can make such menus, and each has advantages and drawbacks. In Hour 17, “Building a Functional Menu,” you learn how to create several different CSS-based menus, including a drop-down menu.
All these menus are highly functional and are used heavily throughout the Web.
Contact Forms
The Internet allows for a two-way conversation between the website owner and the visitor. To facilitate this type of communication, a large group of tools, known as forms, is built in to the main code language of the Internet, HTML. Using forms, you can create anything from a simple email form to advanced forum, blog, and even e- commerce functionalities. If you click the Contact button on the main menu, you are taken to a page with a contact form. In this book, you learn how to make this con- tact form work using two different server-based technologies: FrontPage Server Exten- sions (FPSE) and PHP. In Hour 19, “Getting Interactive with Forms,” you learn how to build and configure web forms and use the built-in functionality in Expression Web 4 to create a contact form based on FrontPage Server Extensions. However, this form works only if your web server has FrontPage Server Extensions installed. As an alter- native, you learn how to build an identical email form using a different code lan- guage, called PHP, in Hour 21, “Beyond the Basics, Part 1: PHP in Expression Web 4.”
The Email Forms Don’t Work!
If you try to use the email form, you immediately notice that it doesn’t actually work. This is not because there is something wrong with the forms or you have done anything wrong on your end. Both FPSE and PHP forms useserver-side scriptsto generate emails. And, as the name suggests, server-side scripts need to run on a server to work. When you preview your pages in your browser from Expression Web 4, you are not using a web server, but just looking at your local files.
In Hours 20 and 22, you will be introduced to an application known as Expres- sion Development Server and learn how to use it to preview the functionality of the email forms. If you want to see a fully working version of the email forms right now, go to www.mykipple.com.
Watch Out!
ptg7913109
Flash and Other Embeddable Content
On the main menu is a button named Flash. In Hour 20, “Working with Flash and Other Embeddable Content,” you’ll learn how to include Flash movies and other embeddable content in your pages. Flash movies are created using a dedicated appli- cation, and you can use Expression Web 4 only to insert them into your pages and configure their data files. In that hour, you get a glimpse into the world of Flash and how that technology works and interacts with your website. You also learn how to insert, or “embed,” advanced HTML5 and Flash content from sites such as YouTube in your site.
Exploring the Website in Expression Web 4
Back in Expression Web 4, you can use the different features to explore the website and understand how it works. The application comes equipped with a set of tools to help you get a quick overview of the different elements the site is made up of and how everything is put together to work.
On the bottom of the Web Site view, you have four tabs: Folders, Publishing, Reports, and Hyperlinks. These are four different ways to view your website:
. Folders gives you a regular browser view of the files and folders in your website.
In other words, it works the same way as the Folder List panel.
. Publishing gives you a view of the local and remote websites side by side and lets you transfer files between the two locations either one at a time or in groups. This is where you actually publish your site to the Web. (Publishing your site is covered in Hour 24.)
. Reports gives you a rundown of all the assets in your website and the status of each of these assets. From there, you can see, for example, how many hyper- links are in the site (and how many of them are broken), how many images it