Chapter #2

Hardware requirements for Expression Web

Hardware requirements for Expression Web

Introduction to Expression Web

Views of Expression Web

Microsoft Expression Web Help

W3C Markup Validation Service

Chapter 2

Introduction to HTML Editors

Expression Web:Expression Web is considered one of the more user friendly HTML editors in the industry. Expression Web looks a lot like Microsoft Word and has additional commands to implement Web page design. These features used with Expression Web are easy to use and master. The making of Web pages are made in Design mode and a sample of what the page will look like is displayed in Preview mode. Expression Web uses the Microsoft Word format to develop Web pages. The HTML code is added to all pages designed. Expression Web provides a “What You See Is What You Get” (WYSIWYG) interface. Expression Web generates the HTML code for the user.

System Requirements and Compatibility:Make sure that your hardware is compatible with Windows XP Home or Professional, and that all the computers on which you plan to install the operating system are capable of supporting the installation. Microsoft uses a Hardware Compatibility Listing (HCL) to determine if a computer will successfully install Windows XP. Table 2.0 shows the minimum and recommended hardware requirements for installing Windows XP Professional.

Windows XP Professional is the preferred operating System to use for Expression Web. (See Table 2.0)

Table 2.0 Windows XP Home or Professional Hardware Requirements

Minimum requirements Recommended requirements

Intel Pentium (or compatible) 233 MHz or higher processor Intel Pentium II (or compatible) 300 MHz or higher processor.

64 MB of RAM 128 MB (4 GB maximum) of RAM

2-GB hard disk with 650 MB of free disk space (additional disk space required if installing over a network)

2 GB of free hard disk space

VGA-compatible or higher display adapter SVGA display adapter and Plug and Play monitor

Keyboard, mouse, or other pointing device Keyboard, mouse, or other pointing device

CD-ROM or DVD-ROM drive (required for CD installations) CD-ROM or DVD-ROM drive 12x or faster

Network adapter (required for network installation) Network adapter

Expression Web also has a Hardware Compatibility Listing (HCL) to ensure that you successfully, install Expression Web on to your system. (See Table 2.1)

Table 2.1 FrontPage 2003 Hardware Requirements

Minimum requirements Recommended requirements

Intel Pentium (or compatible) 233 MHz or higher processor Intel Pentium III (or compatible) processor.

128 MB of RAM 256 MB of RAM

180 MB of hard-disk space 380 MB of hard-disk space

VGA-compatible or higher display adapter SVGA display adapter and Plug and Play monitor

Windows 2000 with Service Pack 3 Windows XP

Dial-up connection Broadband Internet access

Expression Web:Expression Web is considered one of the more user friendly HTML editors in the industry. Expression Web replaces Expression Web. Expression web looks a lot like Microsoft Word and has additional commands to implement Web page design. These features used with Expression Web are easy to use and master. The making of Web pages is made in Design mode. The XHTML code is added to all pages designed.

System Requirements and Compatibility:Make sure that your hardware is compatible with Windows Vista Home Basic or Home Premium, and that all the computers on which you plan to install the operating system are capable of supporting the installation. Microsoft uses a Hardware Compatibility Listing (HCL) to determine if a computer will successfully install Windows Vista. Table 2.2 shows the minimum and recommended hardware requirements for installing Windows Vista.

Windows Vista is Home Premium or Business is the preferred operating System to use for Expression Web. (See Table 2.2)

Table 2.2 Windows Vista Home Premium or Business Hardware Requirements

Minimum requirements Recommended requirements

800 MHz or higher processor 1 GHz or higher processor.

512 MB of RAM 1 GB of RAM

20-GB hard disk with 15 GB of free disk space 40 GB of free hard disk space

Support for Super VGA graphics adapter Support for DirectX 9 graphics with:

WDDM Driver

128 MB of graphics memory

Pixel Shader 2.0 in hardware

32 bits per pixel

Keyboard, mouse, or other pointing device Keyboard, mouse, or other pointing device

CD-ROM drive DVD-ROM drive

Network adapter (required for network installation) Network adapter

Expression Web also has a Hardware Compatibility Listing (HCL) to ensure that you successfully, install Expression Web on to your system. (See Table 2.3)

Table 2.3 Expression Web Hardware Requirements

Minimum requirements Recommended requirements

700 MHz or higher processor 1 GHz or higher processor

512 MB of RAM 1 GB of RAM

1.5 GB of hard-disk space 5.0 GB of hard-disk space

VGA-compatible or higher display adapter SVGA display adapter and Plug and Play monitor

Windows XP Service Pack 2 Windows Vista Home Premium or Business

Dial-up connection Broadband Internet access

Introduction to Expression WebExpression Web is located by itself or within Microsoft Office. One click on the All Start icon -> then select All Programs -> You will see the Microsoft Expression folder. Click on the Expression folder to open the Expression Icon. Click on Expression Web to open the application. This is a four click procedure to open Expression Web. (See figure 2.4)

Figure 2.4

This is displayed from a Vista system.

Expression Web has three views to display your work. These views are displayed and explained in the following pages.

Opening a Page in Expression Web:There are three kinds of commands to start a Web page. The Site -> New command will display a single page for you to make or edit. You will deal with one Web page. The second way is to use the Site -> Open. This will open a folder and display the files within that folder. The folder is a plain folder without any Web site information. The third way is to Site -> Open Site. You need to specify a Web folder or Web Site where you have previously stored your Web files. This Open Site command will open the folder and convert that standard folder into a Web folder. The difference between a regular folder and a Web folder is that a Web folder has a small globe on the folder and has additional folders and files that are used to structure a Web Site. We will be using Site -> New in the beginning part of the book and Site -> Open Site later in this book. The Site -> New is used to open a single HTML Web file in Design view. (See Figure 2.6)

The Site->New -> Page will open a single Web Page. The Site->Open Site-> will open a Web folder or Web Site. (See figure 2.6)

Figure 2.6

The Site-> can open individual Web Page to edit and make a single Web Page or Web Site to edit and make multiple Web Pages.

Design Mode:This is where you start to make Web pages. The Design mode view is started with a blank page for you to insert text and pictures or to open an existing page to be modified. Design mode is used just like the Microsoft Word processor. The Design mode can be used to develop any Web page depending on the parameters that you use to make the Web page. The formatting toolbar is what is used to change the size and styles of text that you will use in your design. (See figure 2.5)

Figure 2.5

This is where you design all of your Web pages.

Split Screen Mode:This mode shows two types of pages in one display. The top display is the HTML code that is related to the bottom portion of the display. The bottom display is of the Web page in Design mode. This split screen function can help you troubleshoot code or adjust code to see how it looks on the same display. This feature is more useful on larger displays. I wouldn’t recommend using a Split screen feature on a 15 inch display. (See figure 2.7)

Figure 2.7

The XHTML code and Expression Web Design Mode is useful for testing and modifying XHTML code.

Expression Web in Code Mode:The Code screen is used to display the code of your XHTML program. The XHTML files will get bigger as you learn more about XHTML programming and you will need the additional space to display as much of your XHTML files as possible. The Code display is good to compare the code to the actual display. Understanding the XHTML code and how it is displayed on the screen will give you a better understanding of how XHTML coding works. Expression Web has a nice feature that numbers the line for the code within your program. XHTML is a language that will not always give you an error when the code is typed incorrectly. XHTML will display the XHTML tag and anything associated with that tag. It is up to you to understand if the display is incorrect. Examine the display carefully and make sure it is exactly what you want. Coding manually will also sharpen your skills and make you a better programmer. (See figure 2.8)

Figure 2.8

Expression Web Views:Expression Web has a View capability to show different aspects of a Web folder or Web Site. You select views by selecting Views-> from the standard toolbar and than select the type of view you want to display. The different views are Page and Folder List.

In Expression Web you can work on an individual file with the File-> New command or you can open a complete folder or Web Site. The command that is used to open a single HTML file will not enable you to see the different views because you are working on a single HTML file and the complete structure is that one file.

The commands File-> Open or Open Site… will open a Web folder or a complete Site located on a Web server. This command can be used to view the different aspects dealing with Web structure.

Design View:The Design View is used to design the contents of the selected Web page for you to edit. The file that is displayed is the one that you can edit. The View Page can be displayed in Design, Split or Code mode. One file is worked on at a time. Any other files that are loaded are considered in the background and can be selected by clicking on the tab to bring the file to the foreground. Once the file is brought to the foreground it can be edited or displayed as needed. (See figure 2.9)

Figure 2.9

Folders view: List Files and FoldersFolder view is very similar to using Windows Explorer. The Folders list is used to show the architecture of the folders and files in your directory. This view gives you information showing you the Name of the file or folder, Title of the file or folder, Size of the file, Type of file, when the file was modified by date and by whom the file was modified. Knowing what you have and knowing the spelling of folders and files helps organize and utilize your Site. This example is of a Web Site display. (See figure 2.10)

Figure 2.10

The folders and HTML files are listed in Folder view on the left side of the display. Currently there are only two files in this folder. This will increase as you perform more Web pages.

Report View:This display is accessed by selecting Site -> Reports-> Site Summary and all the records of your Web Site are displayed. One of the items on the top of the page is Name which shows you the different characteristics of your Web Site such as files, pictures and links. It also gives you a Count of how many times a file, picture or link has been accessed. The Size of all the files and a brief Description on the different categories are. It gives you a complete run down of everything on your Site.

This is a useful tool for checking the utilization of your Site and which areas are heavily used. It is a great tool to use for proactive operations and to help reduce slow downs (bottlenecks) on your Web Site. The broken hyperlinks are good for troubleshooting connectivity of your Web site. (See figure 2.11)

Figure 2.11

The Slow Pages category identifies if Web Pages that are loading slowly.

Hyperlinks View:Hyperlinks are text or images that when you click on them will bring you to a new Web Page or Web Site. Hyperlinks are created two ways. First, you can manually make links from page to page. This can take a long time to link all the HTML files together. The second way is to implement Dynamic web Templates. We will discuss Hyperlinks and Dynamic Web Templates later in this book. The reason why I introduced you to these concepts is to show you how links look in the Hyperlinks View. The Hyperlinks View show the links from the Individual HTML file to the Default.HTM file and back to the individual HTML files. This is exhibiting that this Web Site has links to and from the home page. Expression Web associates the word Homepage to the file Default.HTM. The student Webs Sites will also use Default.HTM as their home page. Checking the Hyperlinks View is a good troubleshooting tool to check what links exist between files and if there are any broken links. A broken link is displayed in red with a broken line between the two locations. (See figure 2.12)

Figure 2.12

The main location is the Default.htm location. This Default.htm is the Homepage of the Web Site. Currently there is only one link between the Default.HTM and Lab_1.HTM.

Getting Help from FrontPage:The help assistant is located on the right side of the display and the keyword is inserted into the search for: display. Once the word or words are inserted into the search box then you click on the green arrow which is the search for: command. The results will be displayed above the search for: feature. (See figure 2.13)

The search feature is a very handy option to get help in building, maintaining and troubleshooting Web Pages and Web Sites.

Figure 2.13

This is a search display page. On the upper left insert the command that you want to search and retrieve the information to perform the task that is needed. (See figure 2.14)

Figure 2.14

This shows the results of the search of the word “Views”. (See figure 2.15)

Figure 2.15

Here is another way to access the Microsoft Office Expression Web help. The upper right display has a search textbox to search for help. Microsoft products use F1 which is another way of opening the help task pane.

Chapter #3

Create and modify Web pages

Displaying HTML tags

Adding Font type to Expression Web

Creating and Using Formatted List

Bullets and Numbering Formatting List

Chapter 3

Creating and Modifying a Expression WebThe first thing is to determine the media that you need to save our work on. A Flash drive with a cord attached is an excellent choice to save your data on. All Flash drives should have a volume name. We have made a couple of HTML files. We should make a folder to store these files on. I would make a folder on a flash drive called “ET710”. In Windows Explorer click on the Flash drive and this will select the drive. Click File ->New->Folder and name the folder on the flash drive. Once you have completed making the folder you can put the HTML files that you have previously made into this folder. A removable media is a good way to store you data. I would also save your work locally on the local C: drive. It should be noted that the computers at Queensborough community College are imaged every night. Therefore data should not be saved on the local drives because the next day your data will be gone. All work at QCC should be saved on a flash drive. Now that you have a folder created and your data is stored you are ready to proceed with Expression Web. You might want to make an ET-710_DOC folder to hold your word documents.

The menu bar that you will use is File -> Open Site… command. The File-> Open Site… is used to open a Web folder or Web Site and not a single file. The Open Site… is directed to a folder and to display your data in that folder. The folder that we will open has or can be converted from a folder to a Web folder. Expression Web will convert the folder to a Web folder automatically. The difference between the folders is that a Web folder has a global (Earth) symbol on it and the regular folder is plain. The global folder is used in the Web address to access the information in that Web folder. The Web folder has additional folders generated in it to handle the different type of Web Pages.

This is the Open Site … command. We are specifying the Drive that is the C:\ or Flash drive location and the folder is “ET710”. (See figure 3.0)

Figure 3.0

This is changing a regular folder into a Web Folder. The regular folder is all yellow. A Web folder has an earth symbol on it.

Expression Web will automatically change the folder that you made from a typical folder to a Web folder that Expression Web can use. Expression Web will provide the additional information that is needed.

This view of Expression Web is File-> Open Site-> C:\ET-710 location and its content. This is showing Lab_1.htm, Lab_2.htm, and Default.htm pages. The Default.htm is the homepage for FrontPage. The file Default.htm has a small home symbol next to the file name. Everything in this Web Site needs to be controlled and interfaced around the Default.htm file. (See figure 3.1)

Figure 3.1

Once you have loaded any Web page you can insert and modify the data of that Web page.

Importing data into Expression WebDesign view allows you to drag and drop files directly into a Web page. If a company or organization has information that it wants to put on its Web Site, it can import that data directly into FrontPage. Expression Web automatically converts several different types of imported files into HTML, including Microsoft Word, Microsoft Excel, Microsoft PowerPoint, and WordPerfect. (See figure 3.2)

Figure 3.2

Here is the Excel Document. (See figure 3.3)

Figure 3.3

Here is the procedure to insert an Excel Spreadsheet into an Expression Web document. Open up the Expression Web document that you want to insert the data into. Open up the Excel spreadsheet and select the data. (See figure 3.4)

Figure 3.4

Select and Copy Data to the ClipboardOpen up the Expression Web page and select the location on the page that you want the data inserted into FrontPage. (See figure 3.5)

Figure 3.5

The Excel data is now inserted into Expression Web

Displaying HTML TagsThe HTML tags that make up an HTML document are usually hidden in Expression Web. There are two ways to display them. Clicking on the Code icon will display all the HTML tags. An additional is to click on View-> Formatting Marks->Tag Marks. This will show you the HTML tags in design view with the HTML codes associated with that page. (See figure 3.6)

Figure 3.6

This will reveal the html tags on the current Web page that you are working on.

Here are the html tags displayed. This feature can be turned on and off at will. These tags are not displayed on the Web pages from a browser window. (See figure 3.6)

Figure 3.6

Adding Font Type to a Expression WebAdding text to you Web pages using Design view’s editing environment is similar to using a word processor. The way you see the text displayed on your computer is almost identical to the way the Web page will be displayed in an internet browser. To help see the most accurate display you should close the help feature to have a complete view without any real estate being used by other programs. As you edit your text, the HTML editing tags necessary to format your text are automatically added for you. This makes Expression Web a very powerful and useful HTML editor.

By using Design view’s menu commands, toolbar buttons, and the keyboard shortcuts, you have available a full text-editing HTML environment. Take the time to familiarize yourself with the Formatting toolbar in Expression Web. (See figure 3.7)

Figure 3.7

The Formatting Toolbar can be selected in different configurations.

The Expression Web Formatting Toolbar handles a variety of font commands. The HTML tags H1-H6, font style, and font size if you don’t want to use the H1-6 tags. There are also icons to make your letters BOLD, Italic, and Underline. I would recommend that you DO NOT use underline on any of your pages. In Web design, a word or sentence that is underlined is usually associated with a link to another Web Site. To eliminate errors and confusion don’t use the underline feature. (See figure 3.8)

Figure 3.8

Number list and bulleting list are also available from the Toolbar menu. (See Figure 3.9)

Bullets and numbering are used for organization. (See figure 3.9)

Figure 3.9

There are a variety of bullet types you can select from.

There are a variety of numbering schemes to select from. (See figure 3.10)

Figure 3.10

You can also select a bulleting system that will display pictures as bullets.

The Highlight feature is used to emphasize text on your Web page. (See figure 3.11)

Figure 3.11

The text can be highlighted into any color.

Font Color is another useful tool. Color can be used to put MORE FOCUS on a Web page. It also can draw attention to a particular word or phase. (See figure 3.12)

Figure 3.12

Modifying Font PropertiesYou have learned how to change the style of a paragraph. The Formatting toolbar also allows you to change the font properties of selected text. You can control several font properties such as type, style, color, and size. When you choose a new font property and begin typing, the text you type reflects the new font property. You can also change the font properties of the text you selected. Try changing the font properties now.

Select the Format -> Font and change the settings.

The Font dialog box displays. You can add effects and change the font style, size and type. You can also pick the color that you want displayed. Because you did not select any text to modify the new font properties will affect the new text that you now enter. (See figure 3.13)

Figure 3.13

Select a font type, font style, and font size (See figure 3.14)

Figure 3.14

The Font type, style, size and color are now changed. Make sure you don’t select a font that is hard to read like the one that is displayed in figure 3.14.

Figure 3.15

The text up to this point has been displayed with a line between the statements. Not all sentences needs a line space between lines of code. This can be wasteful and is not a good way to design a Web. The way to put the lines one after another is to use the SHIFT and ENTER keys to eliminate the extra line. The SHIFT and ENTER will give you a carriage return and a single line feed. (See figure 3.16)

Figure 3.16

The line spaces are eliminated. This makes your Web Page more consolidated and you can put more information on the display area.

Changing FontsDesign view allows you to change the actual Font type of selected text, such as Ariel or Courier fonts. But be aware that if you use particular fonts, the computer used to display your Web page must have those fonts installed for the text to display as you intended.

Shortcut methodsThe Shortcut menu allows you to quickly modify several characteristics of your text, such as the font and page properties. There are also many buttons on the Formatting toolbar you can use to modify text attributes. Using the Formatting toolbar, you can change the text, size, color and alignment of selected text. You can also make selected text appear bold, underlined, or in italic format.

Creating and Using Formatting ListsUsing lists on your Web pages is an effective way to organize data in a manner that gets the attention of the user who is browsing your Web Site. Listing information that is easy to read and understand. Expression Web offers several tools to make easy work of creating bulleted and numbered lists. You can create bulleted or numbered lists, nested lists, and even insert paragraphs in a list. After creating lists, you can enhance their appearance by applying a theme to the Web Page.

Aside from numbered lists, you can also create bulleted list. You can even choose the type of bullet you want displayed. List can be nested, which means that you can display a numbered list indented with a bulleted list. A nested list can have two or more numbered or bulleted items. The nested list can be number and number or bullet and bullet, or number and bullet. (See figure 3.17)

Figure 3.17

This display shows numbered and bulleted formatted lists

The numbered and formatted lists come in a variety of shapes to choose from.

Chapter #4

Adding a Hyperlink to an existing Web Page

Adding Internal links of a Web Site

Adding a link to the World Wide Web

Create a master Web page layout by using Dynamic Web Templates