Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P2 docx

ptg 12 HOUR 1: Get to Know Microsoft Expression Web 3 FIGURE 1.6 Folder List panel. FIGURE 1.7 Tag Properties panel. Left and Right Panels On the left and right sides of the workspace are four panels, described in the follow- ing sections. These panels contain tools, information, and content you can use in the design process. Folder List (Top Left) The Folder List panel shows the folder and file tree in the project or site you are work- ing within (see Figure 1.6). Tag Properties and CSS Properties (Bottom Left) This panel contains two tabbed subpanes. The Tag Properties (see Figure 1.7) and CSS Properties (see Figure 1.8) panes display the current tag or CSS properties of the From the Library of Lee Bogdanoff ptg Getting Acquainted with the Workspace 13 FIGURE 1.8 CSS Properties panel. FIGURE 1.9 Toolbox panel. selected object. Clicking different parts of the code in Code view shows how the tag properties change depending on the code you click. We cover both panes in more detail in later hours. Toolbox (Top Right) The Toolbox panel contains code segments and tags frequently used while editing in Code view (see Figure 1.9). These make up two main sections, HTML and ASP.NET Controls, and each section has multiple subcategories. By clicking the + and – icons, you can explode and collapse the categories to see what they contain. Apply Styles and Manage Styles (Bottom Right) This panel contains two tabbed subpanels. The Apply Styles panel displays the CSS styles available to the current page and enables you to apply styles to objects in Design view (see Figure 1.10). The Manage Styles panel has similar functionality From the Library of Lee Bogdanoff ptg 14 HOUR 1: Get to Know Microsoft Expression Web 3 FIGURE 1.10 Apply Styles panel. FIGURE 1.11 Manage Styles panel. with the addition of a preview area where you can see what each style does to your content (see Figure 1.11). Both panels give you the ability to either apply styles or create new styles. All the panels are intelligent; they learn from how you use the program. If you use a particular item often, it moves higher on the list to make it more accessible. A rarely used item moves down on the list. The panels also help you by turning currently unavailable functions gray so that you don’t waste time trying to do something impossible. Status Bar The status bar is at the bottom of the workspace (see Figure 1.12). It provides infor- mation about the program itself and general information such as file size and over- all settings (what code format you are using and so on) of the page you are working From the Library of Lee Bogdanoff ptg Changing and Customizing the Workspace 15 FIGURE 1.12 The status bar appears on the bottom of the workspace and gives you con- stant and current information about the file you are working on. FIGURE 1.13 The Manage Styles panel floating above the workspace. on. In addition, the status bar has tools that warn you if there is invalid or incompat- ible code in your page. If you want to close the status bar (not something I recom- mend), click Tools, Application Options and uncheck Show Status Bar under General. Changing and Customizing the Workspace Depending on what you are doing, you might want to have a certain panel or menu more prominently featured, or you might want to open a new panel with more func- tions. To accommodate this, the workspace is completely customizable: You can grab any horizontal and vertical border within the workspace to make a panel smaller or larger. You can also grab panels and move them around both by repositioning them within the workspace and by undocking and floating them on top of or outside the window (see Figure 1.13). This technique is particularly useful if you use a dual-monitor From the Library of Lee Bogdanoff ptg 16 HOUR 1: Get to Know Microsoft Expression Web 3 FIGURE 1.14 You can turn all available panels on and off from the Panels menu. setup because you can dedicate the main window to Code view and Design view and leave all the tools on the other screen. As you saw previously, each panel can contain several subpanels. Each subpanel becomes accessible through tabs. Expression Web 3 groups related subpanels together for convenience, but you are free to move them around in any way you like. The Panels menu on the menu bar controls the panels (see Figure 1.14). From here you can select what panels are active (marked by a check mark). If you click one not currently featured in the workspace, the program adds it to the relevant panel. You can remove a panel from view by clicking the small X in its upper-right corner. New to Expression Web 3 is the ability to pin the panels to the sides of the workspace. This feature allows you to keep the panels handy in the workspace without them tak- ing up much needed real estate. To pin a panel to the side, simply click the pin icon at the top-right corner of the panel (see Figure 1.15). When a panel has been pinned to the side, the panel name is written vertically down the side. To access the panel, simply hover your mouse over the name of the desired panel and it “pops” out to cover your workspace (see Figure 1.16). In addition to the From the Library of Lee Bogdanoff ptg Changing and Customizing the Workspace 17 Pin icon FIGURE 1.15 You can pin any panel to the side of the workspace by clicking the pin icon in the top-right corner of the panel. Pinned panels FIGURE 1.16 The pinned panel pops out to cover the workspace when you hover your mouse over the name. obvious space saving, one interesting benefit of using this pinning feature is that when the panels open when hovered over, they are wider than the default setting. This enables more information to display. From the Library of Lee Bogdanoff ptg 18 HOUR 1: Get to Know Microsoft Expression Web 3 ▼ To unpin the panels and place them back in their normal configuration, simply click the horizontal pin in the top-right corner of the currently active pinned panel (see Figure 1.16). If you want to quickly pin or unpin all the panels in your workspace, go to Panels on the Main menu and select Hide Panels. To unpin them again, go back to the menu and uncheck the same function. Try It Yourself Change the Size and Content of the Panels As you perform different tasks while working on a page or website, your needs will change in terms of what tools and information should be prominently displayed and what can be hidden. For this reason Expression Web 3 gives you complete control over what panels are available and where they are positioned at any time. 1. Hover your mouse pointer over the vertical line that separates the Code and Design views from the right panels. 2. Click and drag the separator to the left to create more space for the panels. 3. Do the same with the horizontal line separating the top and bottom panels to allow more space for the bottom panel. 4. Hover your mouse pointer over the horizontal line that separates Code view and Design view. 5. Click and drag the separator upward to create more space for Design view. 6. Use the pin icon in the Folder List panel to pin the folder list to the left side of the workspace. Note that when the Folder List is pinned, the Tag and CSS Prop- erties panel shifts up to fill out the space. 7. Pin the Tag and CSS Properties panel to the side to free up space for the View panel (see Figure 1.17). 8. Click and hold the Apply Styles panel and drag it around inside the workspace. Notice how it suggests different docking positions depending on which area you hover over. 9. Drag the Apply Styles panel to the edge of the workspace so that it floats on top before letting go. If you have a dual-monitor setup, drag the panel to the other monitor so that it doesn’t cover the main window. 10. Click the Panels button on the menu bar (now on the left side of your work- space) and select Behaviors. Notice that the Behaviors panel appears at its default location in the lower-right corner. From the Library of Lee Bogdanoff ptg Summary 19 FIGURE 1.17 You can cus- tomize the look of Expression Web 3 to suit your specific needs. ▲ 11. Click and hold the Behaviors tab in the floating panel and drag it away from the panel until it floats on its own. Following this exercise, you can see that the workspace is flexible, and there is no “right” or “wrong” in terms of workspace layout: Whatever works for you is the right layout. Figure 1.18 shows my workspace while I was in the middle of working on the demo site for this book. It might look messy and out of control, but at the time it made sense to me. But what if your workspace gets too “messy” or you accidentally close a panel or lose it altogether? To simplify the process of cleaning up your workspace, click the Panels button on the menu bar and select Reset Workspace Layout to restore its original configuration. Summary In this hour, you learned how Expression Web 3 works and how you can customize it to suit your needs. To some readers, this information might seem rudimentary or even redundant. But as you progress through the next 23 hours, you will see that having a solid understanding of the program makes a world of difference when you encounter new challenges. By knowing the basics, your understanding of the more From the Library of Lee Bogdanoff ptg 20 HOUR 1: Get to Know Microsoft Expression Web 3 FIGURE 1.18 There is no right or wrong when it comes to work- space layout. This layout has three toolbars and Snapshot (found under the Panels menu) turned on. advanced issues will be much easier. And because you’ll be spending a lot of time with this program, it’s worth your time to get to know it properly first. For convenience, this book uses the default workspace and panel layout. But now that you know how to customize them, feel free to organize their layout any way you see fit. Q&A Q. The Common toolbar looks a lot like the Formatting toolbar in Microsoft Word. Does that mean that it works the same way? A. Both yes and no. The Common toolbar has many of the same functions as Microsoft Word’s Formatting toolbar, but when you click a button on the Com- mon toolbar, a change happens through the addition or modification of a snippet in the code or hypertext rather than in the text. (The program refers to these code snippets as styles.) So yes, they look similar, but no, what happens when you push a button is different. Q. Can I accidentally lose a panel or a toolbar and not be able to open it again? A. No. All the panels are accessible from the Panels button on the Main menu. If you accidentally close a panel, you can always open it again from there. Fur- thermore, you can always reset the original layout of the panels by clicking From the Library of Lee Bogdanoff ptg Workshop 21 Panels and Reset Workspace Layout. All the toolbars are accessible by clicking View and selecting Toolbars. Workshop The workshop has quiz questions to help you put to use what you just learned. If you get stuck, the answers to the quiz questions are in the next section. But try to answer the questions first. Otherwise you’ll only be cheating yourself. Quiz 1. What is the proper way to create a web page? A. Using only Code view B. Using only Design view C. Using Split view D. None of the above 2. How many panels can you have open at one time? A. 8 B. 14 C. As many as you like Answers 1. D. None of the above. There is no right or wrong when it comes to how you cre- ate a web page. Some people create spectacular sites using only Notepad, whereas others create just as spectacular sites without ever seeing a line of code. To get the most out of this book, use Split view as much as possible. That way you get to see what happens in Code view when you make changes in Design view and vice versa. But, in the end, what works best is up to the indi- vidual user. 2. C. In theory you could fill your entire screen with panels and toolbars, but if you did it would be hard to get any work done. With that said, however, you are free to set up your workspace any way you please. From the Library of Lee Bogdanoff [...]... any and all files inside your site and be certain that Expression Web 3 updates the links that point to them so that everything keeps working as it is supposed to Watch Out! Never Move Your Files Outside of Expression Web 3 A common mistake of new web designers is moving files or folders using the regular browser window in their operating system rather than inside Expression Web 3 If you move a file... your From the Library of Lee Bogdanoff Exploring the Website in Expression Web 3 33 Silverlight application in Hour 21, but until then if you want to see a fully working version of the Silverlight gallery right now, go to www.mykipple.com Exploring the Website in Expression Web 3 Back in Expression Web 3, you can use the different features to explore the website and understand how it works The application... 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 grouping of related files and folders under one main folder In fact, a website such as www.designisphilosophy.com is little more than a folder on a server you can access through the Internet By creating a new website in Expression Web 3, you tell the... files linked together What makes it a website is 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 3, you are telling 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,...This page intentionally left blank From the Library of Lee Bogdanoff Introduction 23 HOUR 2 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 3 How to preview a site in your browser How this book is laid out How to use the different tools in Expression Web 3 to explore a website and learn... Hours 3, “A Website Is Really Just Text: Build One in 5 Minutes,” and 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... on the different lessons in this hour Working with a Completed Website To work efficiently in Expression Web 3 (or any web design application for that matter), it is important to understand how the application handles files and file relationships By working with a completed website, you can experiment and learn how Expression Web 3 works with you to keep everything functioning properly as you edit... first one telling you there is no site at the location you defined in step 4 and the second asking 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 Now that you have defined a location for the new website, Expression Web 3 opens in Site view,... one you are publishing to by naming them local website and remote website, respectively But these names can easily be confusing In the example, you just saw it can be argued that both websites are local 27 By the Way Expression Web 3 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... matter of perspective In reality, programs are (at least for the most part) very flexible and titles such as these are merely general descriptions Using a One Page Web Site template in Expression Web 3 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 Web Site” is a website folder that . with a completed website in Expression Web 3 . How to preview a site in your browser . How this book is laid out . How to use the different tools in Expression Web 3 to explore a website and learn. “Remote” As you saw in the preceding lesson, Expression Web 3 separates the website you are working with from the one you are publishing to by naming them local website and remote website, respectively book. By creating a new website in Expression Web 3, you are telling the application that the main (root) folder is the bottom line or foundation and that everything in it relates back to this folder.