Chapter 2. Creating a Web Site
What You’ll Do
Create a Web Site Using a Template
Introduction
Before jumping in and letting your creative energy take over, it’s wise to plan out what you want your Web site to accomplish. Taking the time now to plan your overall ideas and getting them down on paper will save you hours of work later on. Maybe you want to create a business site that will have a corporate style to it. Perhaps you’re a hobbyist who wants to display your favorite collection. Either way, having an image and content to match your product will take some planning and research.
Microsoft Expression Web helps you create a Web site in two general ways—by a template or from scratch. A template opens a Web site with predefined headings, links, and placeholder text that specifies what information you should enter.
As far as content, Expression Web makes it easy to import a file, folder or an entire Web site. There is a wizard, called the Import Web Site Wizard, that can step you through the process. If you find that you need to insert a page or two into your site, you can do it through a blank page, or even using a template to add a page or two. After you finish working with a Web site, you can to save the material.
If you want to use an entire Web site or some individual Web pages in another site, you can create a Personal Web Package, which allows you to export the Web content you want from a Web site in a single file that you can import into another Web site. If you no longer need a Web site, you can delete it.
Planning a Web Site
Before you begin developing your Web site in Expression Web, there are several issues to consider and a few decisions to make. First, of course, is the question of what type of Web site you want to build. What is the focus of your design? Are you looking to create a personal site? Maybe you want to create a business or organization site.
Web Site Templates
After you’ve considered these questions, you need to decide whether you intend to work from a template or create your Web site from scratch. Creating a Web site one page at a time is a lot harder than using a template. Expression Web provides a variety of templates representing the most popular Web site styles. A template provides a complete multiple-page site with Web pages, a common look and navigation system, and placeholders for your content. After you create a site using a template, you can customize it to your specific needs by replacing the headers, textual arrangements, or graphic elements.
When you create a Web site, Expression Web creates Web page files, Cascading Style Sheets (CSS) files, script files, image files, and other folders for the purpose of organizing site files. Expression Web tracks files and folders in a Web site using hidden files known as metadata. The hidden files are stored in hidden folders that begin with _vti in the main Web site folder. You don’t need to change anything in these folders, you just need to know why they exist if they become visible.
Types of Web Sites
When you create a Web site, you need to decide which type of site you want to create. There are three types of Web sites: Disk-based, FTP (File Transfer Protocol), and HTTP (Hyper-Text Transfer Protocol) or secure HTTP (HTTPS) with Secure Sockets Layer (SSL).
A disk-based Web site is located at a specific disk location, which can be a local hard disk or network drive, and useful for Intranets (internal Web sites) or publishing to a remote Web server later. An FTP site is typically located on a remote Web server and useful for fast file transfer and working remotely. An HTTP or HTTPS site is located on a remote Web server and useful for browsing Web pages and working remotely. If you want additional security and your Web server is configured to allow SSL visitors, you can enable SSL so credentials are encrypted.
Creating a Web Site Using a Template
Expression Web comes with templates that make it easy to create a Web site. A template opens a Web site with predefined headings, links, and placeholder text that specifies what information you should enter (such as your address). A Web site template includes a set of related Web pages with established links ready for you to customize the content and the necessary CSS files to create a uniform display. You can use the Web Site tab on the New dialog box to create a Web site using templates, which include One Page Web Site, Empty Web Site, and several site variations for Organization, Personal, and Small Business.
Create a Web Site Using a Template
Click the New button list arrow on the Common toolbar, and then click Web Site.
The New dialog box opens, displaying the Web Site tab.
In the first pane, click Templates.
Click the template icon you want to use.
Specify the location where you want to store the Web site (click Browse, if necessary) and a name at the end.
- Disk-based. Enter a path location. For example: C:web sitemysite
- FTP. Enter an ftp site address. For example: ftp://ftp.website.com/mysite
- HTTP. Enter an http site address. For example: http://www.website.com/mysite
If you specify an http site, select the Use Encrypted Connection (SSL) check box to create a secure site.
Click OK.
Working with Template Content
After you create a template or open an existing one, you can replace the content on any of the pages with your own material. The site’s home page—the first page that appears when you type a URL—is called default.htm. When you open the home page, you can select elements, such as headlines, text, or images and insert new content. If an element is shared by multiple pages, such as the site’s name or navigation bar, you need to open the locked content in a .dwt file (typically called master .dwt). When you make changes on a Web site or page, an asterisk (*) appears on the tab next to the name indicating changes have not been saved.
Open Template Pages
Open the Web site based on a template you want to change.
Double-click the file you want to open in the Folder List.
- Home page. Double-click default.htm.
- Master page. Double-click master.dwt.
Select and replace the elements you want, such as text, headings, site name, or navigation.
Click the Save button on the Common toolbar.
Timesaver To save all files at once, click the File menu, and then click Save All.
An alert message appears, asking if you want to save your changes.
Click Yes, and then click Close to close the status dialog box.
Any changes made to the master appear on the home page and all other site pages.
Replace Content in Template Pages
Open the Web page with the template content you want to replace.
Select the heading or paragraph text you want to change.
Type or paste in your own text.
Select an image you want to replace.
Click the Insert menu, point to Picture, and then click From File.
The Picture dialog box opens.
Locate and select the picture you want to insert.
Click Insert.
The Accessibility Properties dialog box opens.
Type a description.
Click OK.
The original image is replaced by the new image. You can resize the graphic to fit where you want.
See Also
See “Resizing and Resampling Graphics” on page 126 for information on resizing graphics and using the Pictures toolbar.
Managing Template Content
When you create a Web site from a template, you are bound to get files and folders from Expression Web you don’t need. You can quickly right-click the file or folder you no longer want in the Folder List and delete it from the site. Since the template files all work together, you can copy a template file from the site and save it with a new name to create a new Web page that works with the other Web site files.
Delete a Template Page, File, or Folder
Open the Web site based on a template you want to change.
In the Folder List, right-click the file or folder you want to remove, and then click Delete.
Click Yes to confirm the deletion.
Copy a Template Page to Create a New Web Page
Open the Web site based on a template you want to change.
In the Folder List, right-click the template file you want to use as the basis for a new Web page file, and then click New From Existing Page.
A new untitled page appears in the Editing window with content and formats from the original template Web page.
Creating a One Page Web Site
When you start Expression Web, a blank Web page opens based on a default blank template. The default blank template defines the page margins, default font, and other settings. The blank Web page doesn’t become a Web site until you save it. Instead of starting Expression Web and saving the new page, you can use the New dialog box to quickly create a one page blank Web site, which you can fill in. You can then add new pages easily and link them together to create a connected Web site. If you need a blank Web site without any of the related files and folders that come along with it, you can create an empty Web site.
Create a Blank One Page Web Site
Click the New button list arrow on the Common toolbar, and then click Web Site.
The New dialog box opens, displaying the Web Site tab.
In the first pane, click General if necessary.
Click One Page Web Site.
Specify the location where you want to store the Web site (click Browse, if necessary) and a name at the end.
- Disk-based. Enter a path location. For example: C:web sitemysite
- FTP. Enter an ftp site address. For example: ftp://ftp.website.com/mysite
- HTTP. Enter an http site address. For example: http://www.website.com/mysite
If you specify an ftp or http site, select the Use Encrypted Connection (SSL) check box to create a secure site.
Click OK.
Create a Empty Web Site
Click the New button list arrow on the Common toolbar, and then click Web Site.
The New dialog box opens, displaying the Web Site tab.
In the first pane, click General if necessary.
Click Empty Web Site.
Specify the location where you want to store the Web site (click Browse, if necessary) and a name at the end.
- Disk-based. Enter a path location. For example: C:web sitemysite
- FTP. Enter an ftp site address. For example: ftp://ftp.website.com/mysite
- HTTP. Enter an http site address. For example: http://www.website.com/mysite
If you specify an ftp or http site, select the Use Encrypted Connection (SSL) check box to create a secure site.
Click OK.
Opening an Existing Web Site
If you need to update an existing Web site, Expression Web gives you ways to open the site. You can use the Open button list arrow on the Common toolbar or the Recent Sites command on the File menu. You can open a Web site from your local hard drive, a network drive, or a Web server using a Web address, known as a Uniform Resource Locator (URL). If you type a file name in the Site name box, Expression Web opens that file using the Windows file system. If you type a Web address, such as www.mywebsite.com, Expression Web retrieves all the files from that location just like a browser. When you open several pages at the same time, they all appear in the same window. However, if you open a new site while another site is still open, the new site opens in a new Expression Web window.
Open a Web Site from a Local Computer
Click the Open button list arrow on the Common toolbar, and then click Open Site.
Click an icon on the Navigation pane (Vista) or Places bar (XP) to open a frequently used folder.
Navigate to the drive and folder location where you want to open the Web site.
Select the Web folder with the site you want to open.
Click Open.
Did You Know?
You can open a recently opened Web site. If you’ve recently accessed a Web site, you can use the File menu to quickly open it again. Click the File menu, point to Recent Sites, and then click the site you want.
You can automatically open the last opened site. Click the Tools menu, click Applications Options, select the Open last Web site automatically when Expression Web starts check box, and then click OK.
Open a Web Site from a Web Server
Click the Open button list arrow on the Common toolbar, and then click Open Site.
Type the URL (either an http or ftp address) or select an existing shortcut to the Web site you want open.
Click Open.
Type the user name and password for the Web server.
Click OK.
The Remote Web Site Editing Options dialog box opens.
Click the Edit live Web site now or Edit local copy now, and publish changes to the server later option.
Click OK.
The Web site opens, displaying the site folders and files in the Folder List.
For Your Information: Internet URLs
A URL (Uniform Resource Locator) is like a postal address, each part of the address helps indicate where it’s supposed to go. The entire address includes the Hypertext Transfer Protocol (HTTP), a colon, two forward slashes, and the site type (usually www for World Wide Web). This is followed by the domain address (the site’s name), a period, and the domain name (refers to the type of site, such as .com for commercial). A sample URL is http://www.quepublishing.com.
Importing Web Content
When you’re working on a Web site, you might want to import a page file (or even an entire folder) or an entire site that was created in Microsoft FrontPage or another program. Expression Web makes it easy to import a file, folder, or a Web site. When you import a Web site, Expression Web uses the Import Web Site Wizard to step you through the process. The wizards helps you transfer files using FrontPage Server Extensions WebDAV (Distributed Authoring and Versioning), FTP (File Transfer Protocol), Windows file system, and HTTP (directly from a Web site on the Internet). When you import a site created with FrontPage, Expression Web recognizes the pages and the code (with FrontPage Server Extensions) behind it. However, you can use the code on new pages, which means you’ll need to modify the pages over time to meet standard coding. If you have a Personal Web Package, which is a reusable Web site or parts of a Web site in a single file, you can also import it into a Web site.
Import Web Content from a File or Folder
Open the Web site in which you want to import Web content.
Click the File menu, point to Import, and then click File.
Click Add File or Add Folder.
Navigate to the location with the file, folder, or URL you want to import, and then click the file or folder.
Click Open to add it to the Import dialog box.
Select all the files that you want to import.
Click OK.
Did You Know?
You can import a Personal Web Package. Click the File menu, point to Import, click Personal Web Package, locate and select the Web Package file (.fwp), and then click Open. Expression Web creates a new folder with the same name as the imported file.
Import Web Content from a Web Site
Open the Web site in which you want to import Web content.
Click the File menu, point to Import, and then click Import Web Site Wizard.
The Import Web Site Wizard dialog box opens.
Click the option indicating how you want to get the files.
Type a Web site location or click Browse and select one. See the example above the Web Site Location box.
Click Next to continue.
- If requested, enter a username and password, and then click OK.
If available, type the location where you want to create a local copy of the site or click Browse and select one.
- If a site is already open, select the Add to current Web site check box.
Click Next, and then specify the options you want to limit how many levels below the home page to import or limit the import to a maximize size or only HTML and image files, if available.
When you’re done, click Finish.
The wizards imports the Web files into corresponding folders in your site.
Adding Pages to Your Web Site
Whether you have a Web site created using a template, or are beginning from scratch, you will eventually need to add new pages to the site. New pages can be blank or template based, so it is also possible to integrate template pages with your own pages that you created from scratch. The New dialog box contains an extensive selection of single-page templates. After you create the new page, you need to create a hyperlink to the existing Web.
Add Pages to a Web Site
Click the Web Site tab for the site in which you want to add a new page.
If necessary, click the View menu, and then click Folder List to display the Folder List.
Right-click a blank area of the Folders List, point to New, and then click HTML.
Timesaver Click the New Page button on the title bar of the Folder List.
A new file appears in the Folder List, and is assigned a default name which is highlighted and framed in a box.
Type a new name (including .htm at the end) for the page, and then press Enter.
Drag the file name icon for the page where you want it in the Folder List.
Expanding and contracting perforated lines appear any place where your page can be positioned.
When the new page is where you want it, release the mouse button to position the page.
Double-click the new page to open it for editing.
Add Pages to a Web Site Using Templates
Click the Web Site tab for the site in which you want to add a new page.
Click the New button list arrow on the Common toolbar, and then click Page.
Click the tab with the page template you want to use.
- General. Creates HTML, ASPX, CSS, Master Page, Dynamic Web Template, JavaScript, XML, Text File, Create from Dynamic Web Template, or Create from Master Page.
- ASP.NET. Creates ASPX, Master Page, Web User Control, Web Configuration, Site Map, and Create from Master Page.
- CSS Layouts. Creates an HTML file and links it to a CSS file.
- Style Sheets. Initializes a cascading style sheet (CSS) file to standardize the appearance of Web pages.
- Frames Pages. Creates frame pages.
Click the template you want to use.
Click OK.
Click the Save button on the Common toolbar.
Navigate to the Web site folder location where you want to add pages.
Type a name for the page, or use the suggested name, and then click Save.
Creating a Personal Web Package
A Personal Web Package allows you to package an entire Web site or parts of a Web site in a single file that you can use (import) in another Web site. To create a Personal Web Package, you use the Personal Web Package command on the Export menu. In the Export Web Package dialog box, you select the files and folders you want to include in the Personal Web Package file (.fwp), provide property information about the files and folders, and select dependency options for use during the import process.
Create a Personal Web Package
Open the Web site with the files and folders you want to export into a Personal Web Package.
Click the File menu, point to Export, and then click Personal Web Package.
In the left pane, select the files or folders you want in the Personal Web Package.
Click Properties.
Enter the title, description, author, and company information you want.
Click OK.
To display file dependencies, click Show Dependencies, and then select a file in the left pane.
To change the dependency option, click the Dependency Checking list arrow, then select an option.
Click OK.
Navigate to the location where you want to save the Web Package.
Type a name for the Personal Web Package.
Click Save, and then click OK upon completion.
Saving a Web Site
After you finish working with a Web site, you need to save the material. When you make changes on a Web site or page, an asterisk (*) appears on the tab next to the name indicating changes have not been saved. When you save a Web site, you save each Web page and any related, or embedded, files, such as graphics, included with the pages. You can use the Save All command on the File menu to quickly save all modified files. If graphics on a Web page need to be saved, the Save Embedded Files dialog box appears, asking you to select any options you want and save the files.
Save a Web Site
Click the File menu, and then click Save All.
If necessary, specify which image files you want to save with the Web page or pages, and where to save them.
- Rename. Rename the embedded file name.
- Change Folder. Change the embedded folder location.
- Set Action. Set option to save or not save an embedded file.
- Picture File Type. Change the graphic type and quality.
Click OK.
Renaming a Web Site
When you create a Web site using a template or wizard, Expression Web automatically give the site a general name (mysite1, mysite2, etc.) and saves it. You can rename the site to something more meaningful to you. You can right-click the Web site folder or use the Site Settings command on the Site menu.
Rename a Web Site
Click the Site menu, and then click Site Settings.
Click the General tab.
Type a new site name.
Click OK.
Did You Know?
You can rename the Web folder. Right-click the Web folder in Folders view or the Folder List, click Rename, type a new name, and the press Enter. You can also rename a Web folder in Windows Explorer.
Deleting a Web Site
If you no longer want or need a Web site you can delete it. When you delete a Web site, Expression Web deletes everything it contains, including Web pages, pictures, text files, Expression Web files, and all folders. If you want to save any files in the Web site folder, you need to back them up before deleting the site.
Delete a Web Site
Open the Web site you want to delete.
If necessary, click the View menu, and then click Folder List to display the Folder List.
Right-click the Web site you want to remove, and then click Delete.
Click the Delete this Web site entirely option.
Click OK.
Did You Know?
You can delete only the hidden data for a Web site. If you want to keep Web pages and related content, such as images, for a Web site, yet remove the hidden tracking and organization files used by Expression Web, the Delete command allows you the option to do it. Right-click the Web site you want in the Folder List, click the Delete only hidden metadata files from this Web site preserving all other files and folders option, and then click OK.