Micro soft Expression Web 4

Transcription

1 University of Texas at Arlington Micro soft Expression Web 4 Beginner s Guide 2011

2 1

3 2 Table of Contents UTA Web Pages... 5 Connecting to your Website... 5 Copying files from your Website... 8 To open a web page... 9 Web Page Views... 9 To save a web page To publish to the live website To rename a page or folder Bulleted and numbered lists To create a bulleted or numbered list To increase or decrease the indent of one or more listed items Remove List Formatting To remove list formatting from one or more list items Symbols To insert a symbol Pictures To add a picture from a file to a web page To add a picture from a digital camera Hyperlinks To create or modify a hyperlink To remove a hyperlink from text To delete the content that contains a hyperlink Bookmarks To create a bookmark To remove a bookmark To redirect a web page Tables... 16

4 3 To add a table To add a cell to a table To add a row to a table To add a column to a table To split cells in a table To merge cells in a table To delete a cell, row, or column from a table To set the layout properties of a table To align a table, column, row, or cell To make rows or columns the same size To convert a table to text To convert text to a table To create a form To delete a form control To delete a hidden form control To automatically put form tags around HTML form controls Create a Website To create a website To open a website To rename a website To delete a website Create a new web page To change the properties of a web page Cascading Style sheets (CSS) To attach an external CSS to a web page by dragging and dropping To attach an external CSS to one or more web pages or to a.css file To detach an external CSS from a web page To detach a linked CSS from multiple web pages To detach an imported external CSS from a.css file... 24

5 4

6 5 UTA Web Pages This section of the document shows how to use Microsoft s Expression Web to connect to and publish pages to official UTA web servers located on the WWW, WWEB, students.uta.edu and Omega servers. Connecting to your Website The first step in using Expressions Web is to set up a directory on your local computer. Open the Expressions Web application on your computer and then follow the directions below to set up a directory. 1. Click Site on the menu bar. 2. Click New Site. 3. Enter or browse to a location for your site on your local hard drive. 4. Enter a name for your site in the Name: field. 5. Click OK.

7 6 (A folder appears in your Folder List and the default.html page appears in your Site View.) Add a Publishing Destination In order to update your website in Expression Web, you must add it as a publishing destination. Follow the instructions below to set up a publishing destination. 1. Click Site on the Main Menu bar. 2. Click Publishing. 3. Click on Add a publishing destination... (The "Publishing Destination" is the location of the web site that you will be updating.) The Connection Settings Window appears.

8 7 4. Give this connection a Name. 5. For Connection Type, click on the down arrow and choose WebDAV. 6. For Location, enter 7. For User Name and Password, enter your NetID and Password. 8. Check the Use Encrypted Connection (SSL) box. 9. Click Save. (Expressions Web will now open your local site and your web site.) Note: Depending on the location of your website, you may need to select a different Connection Type and alter the URL you enter into the Location field. The example above is for option #2, websites located on the WWEB server. 1. WWW o o 2. WWEB o o 3. STUDENTS o o 4. OMEGA o o Connection Type: WebDAV Location (Publishing URL): name> Connection Type: WebDAV Location (Publishing URL): name> Connection Type: FTP Location (Publishing URL): ftp:\\students.uta.edu\<first 2 letters of your NetID>\<NetID> Connection Type: SFTP Location: sftp:\\omega.uta.edu

9 8 Copying files from your Website Once you have successfully connected to your website, you should copy them to your local computer for editing. You can make a copy by doing the following: 1. Select the files and/or folders by clicking on them once. 2. Click on the left-pointing arrow. 3. All of your files should now be duplicated on your hard drive.

10 9 Editing Your Web Page Once you have a local copy of all of your web site files, you can begin editing them. You should edit the files on your local computer (the left panel). Once you have finished editing, you will use the right-pointing arrow to publish files to your live web site. To open a web page 1. Double-click the page in the Folder List task pane or the Folders view of the website. Web Page Views Once you have opened a web page, you will see another tab appear in the page design window. At the bottom of the window, you can switch the editing window options by clicking on one of the options: Design, Split, Code Design view enables you to visually design web pages. Split view gives you simultaneous complete control over both the design and the code of your web pages. As you select items in one pane, the other pane scrolls and identifies the item in that pane. Code view shows the code that makes up the page.

11 10 To save a web page When you have finished making changes to your page, you must save the changes. Do one of the following to save your changes: On the Common toolbar, click the Save button. Right-click the tab at the top of the editing window and then click Save. On the File menu, click Save. To save a webpage to a different location or with a different name, on the File menu, click Save As. Remember, you are making changes to the local copy of your web page files. After you have finished editing and saving all of your pages to your local computer, you must publish them to the live web site if you want your changes to show up online. To publish to the live website 1. After saving changes, click the (x) on the web page tab(s). 2. Click the Site View tab. 3. At the bottom of the Site View tab, click Publishing. (You should now see both your local files and your live web site files.) 4. Click on the file(s) you want to publish. 5. Click the right-pointing arrow in between the two panes.

12 11 To rename a page or folder 1. Right-click the page or folder in the Folder List task pane or the Folders view of the website. 2. Click Rename. 3. Type the new name. 4. Click Enter. Bulleted and numbered lists You can quickly add bullets or sequential numbers to existing lines of text, or you can automatically create bulleted and numbered lists as you type. If you're creating bulleted lists for web pages, you can use any picture as a bullet. To create a bulleted or numbered list 1. In Design view or Code view, in your web page, place your cursor where you want to create a list, and then do one of the following: To create a regular bulleted list, on the Formatting toolbar, either click the Bullets button or click the Style box, and then select Unordered List <ul>. To create a regular numbered list, on either the Common or Formatting toolbar click the Numbering button <ol>., or click the Style box, and select Ordered List To create a list that uses a picture to mark each list item, on the Format menu, click Bullets and Numbering. In the List Properties dialog box, click the Picture Bullets tab. Under Picture, either select Use current CSS Style to use the image specified by a CSS Style or select Specify picture to choose a picture. If you selected Specify picture, click Browse and select a picture and click Open, and then click OK. To create a custom bulleted list, on the Format menu, click Bullets and Numbering. In the List Properties dialog box, click the Plain Bullets tab, click a bullet style, and click OK. To create a custom numbered list, on the Format menu, click Bullets and Numbering. In the List Properties dialog box, click the Numbers tab, and click a

13 12 number style. To set the starting number, under Start at, type a number, and click OK. 2. For each item or line of text that you want in the list, type the text, and then press ENTER to add a bullet or number to the list. 3. When you have typed the last item, press ENTER twice to end the list. To increase or decrease the indent of one or more listed items 1. Put your cursor in a list item or select one or more listed items. 2. On the Common or Formatting toolbar, click the Increase Indent button, or click the Decrease Indent button. Remove List Formatting You can quickly remove list formatting from one or more list items or an entire list. When you remove list formatting from list items, each list item is put within a set of paragraph tags (<p></p>). To remove list formatting from one or more list items 1. In Design view or Code view, in your web page, put your cursor in the line of the list item or select one or more list items. 2. Do one of the following: On the Common or Formatting toolbar, if your list is bulleted, click the Bullets button or if your list is numbered, click the Numbering button. On the Format menu, click Bullets and Numbering. In the List Properties dialog box, click the tab that represents your list's type. For bulleted or numbered lists, click the box with no bullets or no numbering; for picture bullets, in the Specify picture box, clear the box of all characters, and then click OK. With one or more list items selected, on the Format menu, click Properties. In the List Item Properties dialog box or List Properties dialog box, click the box with no bullets or no numbering, and then click OK.

14 13 Symbols Microsoft Expression Web provides the Symbol dialog box for adding symbols (copyright symbol, degree symbol, etc.) to a web page and setting the symbol's font. You can also use the Windows Character Map tool or its associated keyboard shortcuts to add a symbol to a page in Expression Web. To insert a symbol 1. In Design view or Code view, in your web page, place your cursor where you want to insert a symbol or special character. 2. On the Insert menu, click Symbol. 3. In the Symbol dialog box, under the Font and Subset boxes or under Recently used symbols, click the symbol or special character you want to insert. To go to a particular subset in the list of symbols, in the Subset box, click the arrow and select a subset. 4. To select the font that the symbol uses in your web page, in the Font box, click the arrow, and select a font. 5. Click Insert. 6. Click Close. Pictures You can add a picture (also called a graphic or image) to your web page from a file, scanner, or digital camera. In order to add a picture from a scanner or digital camera successfully, you need to connect your device to your system and install the device software on your system. To add a picture from a file to a web page 1. In your web page, place your cursor where you want to add a picture, and then do one of the following: Drag the picture from the Folder List task pane or Web Site view into the Design view of your page.

15 14 On the Common, Standard, or Pictures toolbar, click the Insert Picture From File button. In the Picture dialog box, in the File Name box, specify the file you want to add, and then click Insert. On the Insert menu, point to Picture, and then click From File. In the Picture dialog box, in the File Name box, specify the file you want to add, and then click Insert. 2. In the Accessibility Properties dialog box, in the Alternate text box, type the alternate text you want. Alternate text makes your image accessible to screen readers. It also is visible in some browsers when the graphic is downloading, when it can't be found, or when a site visitor moves the pointer over it. 3. To add a long description, click Browse and select a file, and then click OK. To add a picture from a digital camera 1. On the Insert menu, point to Picture, and then click From Scanner or Camera. 2. In the Insert Picture from Scanner or Camera dialog box, under Device, click the device that you want to add a picture from, and then click Custom Insert. 3. Select the picture that you want to add, and then click Get Pictures. 4. In the Accessibility Properties dialog box, in the Alternate text box, type the text you want to display for pictures when the graphic is downloading, when it can't be found, or when a site visitor moves the pointer over it. 5. To add a long description, click Browse and select a file, and then click OK. 6. When you save the page, the Save Embedded Files dialog box prompts you to save the picture to your website. You can quickly change the appearance of pictures by using the Pictures toolbar. The toolbar also provides buttons that enable you to add or modify hotspots on an image. Hyperlinks The Insert Hyperlink dialog box enables you to create a hyperlink that links to an existing or new web page, a file, an address, or a particular location on a web page. You can also use this dialog box to modify the text that contains a hyperlink and to add a ScreenTip that appears when the user's pointer is over a hyperlink.

16 15 When you want to modify an existing hyperlink, the Edit Hyperlink dialog box provides all the same options as the Insert Hyperlink dialog box and enables you to remove a hyperlink. To create or modify a hyperlink 1. In your web page, in Design view or Code view, do one of the following: To create a hyperlink, select the item that you want to use as the hyperlink. To modify an existing hyperlink, put your cursor anywhere in the hyperlink. 2. In either the Common or the Standard toolbar, click the Insert Hyperlink button. To remove a hyperlink from text To preserve the content that contains the hyperlink, either put your cursor in the content that contains the hyperlink or select the content, and then do one of the following: In either the Common or the Standard toolbar, click the Insert Hyperlink button. In the Edit Hyperlink dialog box, click Remove Link. Point to the <a> tag in the Quick Tag Selector bar at the top of the web page, click the arrow that appears next to the tag, and select Remove Tag. If the hyperlink also contains a bookmark, the bookmark will also be removed. To delete the content that contains a hyperlink Select the content that contains the hyperlink, and press DELETE. Bookmarks A hyperlink can go to a particular location on a web page by linking to a bookmark (HTML anchor) at the location. You can add a new bookmark and manage existing bookmarks in the current web page by using the Bookmark dialog box. When you bookmark a selection of text, the text displays with a dashed underline in Design view. When you bookmark an empty location, the bookmark is indicated in Design view by a bookmark icon when Show and Paragraph Marks are both selected under Formatting Marks on the View menu.

17 16 To create a bookmark 1. Open the web page in either Design view or Code view. 2. Select the text to which you want to assign a bookmark. 3. On the Insert menu, click Bookmark. 4. In the Bookmark dialog box, under Bookmark name, type a name for the bookmark (spaces are allowed). To remove a bookmark 1. Open the web page in either Design view or Code view. 2. On the Insert menu, click Bookmark. 3. Under Other bookmarks on this page, click the bookmark you want to delete. 4. Click Clear. To redirect a web page 1. In Design view or Code view, in your web page, select the <body> tag. 2. In the Behaviors task pane, click Insert, and then click Go to URL. 3. In the Go To URL dialog box, specify the URL for the page or file you want to redirect the site visitor to and then click OK. Tables A table is made up of rows and columns of cells into which you can insert text, graphics and other HTML. You can customize your tables in a variety of ways to make them more attractive and easy to read. To add a table 1. In Design view, place the insertion point where you want to insert the table. 2. Do one of the following: On the Table menu, click Insert Table.

18 17 On the Tables toolbar, click the Draw Table button and then use your pointer to draw the table. Set the properties that you want. To add a cell to a table 1. Place the insertion point in the cell next to where you want to add a cell. 2. On the Table menu, point to Insert, and then click Cell to the Left or Cell to the Right. To add a row to a table 1. Place the insertion point in the row above or below the row that you want to add. 2. On the Table menu, point to Insert, and then click Rows or Columns. 3. Click Rows, then type or select the number of rows you want to add. 4. Under Location, specify if you want to place the row above or below the selected row. To add a column to a table 1. Place the insertion point in the column next to where you want to add a column. 2. On the Table menu, point to Insert, and then click Rows or Columns. 3. Click Columns, then type or select the number of columns you want to add. 4. Under Location, specify if you want to place the column to the right or left of the selected column. To split cells in a table 1. Right-click the cell that you want to split, point to Modify,and then click Split Cells. 2. Click Split into columns or Split into rows. 3. In the Number of columns or Number of rows field, type the number of columns or rows that you want to split the cell into. To merge cells in a table 1. Select a row, column, or group of adjacent cells. 2. Right-click, point to Modify, and then click Merge Cells.

19 18 To delete a cell, row, or column from a table 1. In Design view, place the insertion point in the cell, row, or column you want to delete. 2. On the Table menu, point to Delete, and click Table, Delete Columns, Delete Rows, or Delete Cells. You use the Tables toolbar to create and modify tables in your page. To set the layout properties of a table 1. In Design view, right-click the table, and then click Table Properties. 2. In the Table Properties dialog box, do the following: Use this Size Alignment Float Specify width Specify height Cell padding Cell spacing Borders Background Enable layout tools Set as default for new tables To do this Set the number of Rows and Columns in your table. Set the horizontal alignment of your table. Set the floating property of your table. Set the width of your table. Set the height of your table. Set the padding between cells. Set the spacing within cells. Set the size and color of your table borders. Set the color or background picture you want as your table background. Select to enable layout tools. Select to use these settings for all new tables you create. To align a table, column, row, or cell 1. In Design view, select the table, column, row, or cell. 2. On the Formatting toolbar, click the Align Right button, Align Left button, Center button, or the Justify button. To make rows or columns the same size 1. In Design view, select the column or row you want to change. 2. On the Tables toolbar, do one of the following:

20 19 To make all rows the same height, click the Distribute Rows Evenly button on the Tables toolbar. To make all columns the same width, click the Distribute Columns Evenly button on the Tables toolbar. Using Microsoft Expression Web, you can convert a table to text and you can convert text to a table. To convert a table to text 1. In Design view, select the table that you want to convert to text. 2. On the Table menu, point to Convert, and then click Table To Text. To convert text to a table 1. In Design view, type separator characters such as commas or periods where you want to separate text into columns and rows. 2. Select the text that you want to convert to a table. 3. On the Table menu, point to Convert, and then click Text To Table. 4. In the Convert Text to Table dialog box, select the character you used to separate the columns. To create a form 1. In Design view, drag Form from the Toolbox to your page. 2. Drag form controls from HTML section in the Toolbox to your form. To delete a form control 1. Click the control you want to delete, and then press DELETE. To delete a hidden form control 1. Right-click the form, and then click Form Properties. 2. Click Advanced. 3. In the Advanced Form Properties dialog box, in the Hidden fields list click the name of the control you want to remove, and then click Remove.

21 20 You use different form controls to gather different types of information. For instance, to get site visitor contact information or comments, you might use text boxes or text areas. To get ordering, shipping, and billing information, you might use these plus drop-down boxes, option buttons, push buttons, and other controls. To group related HTML form controls, such as text boxes, check boxes, and submit buttons, you can put the form controls inside a single set of form tags (<form> </form>.) You can set Microsoft Expression Web to automatically add form tags around a form control when you add the form control to a location that is not already enclosed by form tags. To automatically put form tags around HTML form controls 1. On the Tools menu, click Page Editor Options. 2. In the Page Editor Options dialog box, click the General tab. 3. Select Automatically enclose form fields within a form. Create a Website When you open a website in Microsoft Expression Web, the Web Site tab is automatically added to your editing window. You can look at the content in your website in four different Web Site views to help you design, publish, and manage it. To create a website 1. On the File menu, point to New, and then click Web Site. 2. In the New dialog box, select the type of website that you want to create, specify the location of the website, and then click OK. To open a website 1. On the File menu, click Open Site. 2. In the Open Site dialog box, do one of the following: To open a site that you have opened before, in the Look in box, select Web Sites, and then click your website. To open a site on your computer, browse to and click the folder that contains your website, and then click Open.

22 21 To rename a website 1. On the Site menu, click Site Settings. 2. On the General tab, in the Web name box, type a new name for the website. To delete a website 1. In the Folder List, right-click the website, and then click Delete. 2. To confirm the deletion, click Yes. Create a new web page Do one of the following: On the File menu, point to New, and then click Page. In the New dialog box, select the type of page, and then click OK. On the File menu, click New. In the New dialog box, on the Page tab, select the type of page, and then click OK. Press CTRL+N.

23 22 On the Common toolbar, click the New Document button. To change the properties of a web page 1. With the web page open, do one of the following: In Design view, right-click an empty area, and then click Page Properties. On the File menu, click Properties. Use this Title 2. In the Page Properties dialog box, on the General tab, do the following: To do this Type the title of the page. The title appears in the title bar of many web browsers. Description Type the description of the page. The description is displayed in the search results of some search engines and used by some search engines to index websites. A meta tag with the name "description" is added to the header of the page. Keywords Type the keywords for the page. Keywords are used by some search engines to index websites. A meta tag with the name "keywords" is added to the header of the page. Cascading Style sheets (CSS) When you want one or more web pages to use the styles that you've defined in an external cascading style sheet (CSS), you must attach the external CSS to those web pages. You can attach an external CSS to a single web page by dragging the.css file onto the open page in Design view. When you want to attach the external CSS to multiple pages or to another external CSS, or when the external CSS is located outside your website, you can use the Attach Style Sheet dialog box instead. When you no longer want a web page to use the styles of an attached external CSS, you can detach the CSS from that page in one step by using the Apply Styles or Manage Styles task pane. When you want to detach an external CSS from multiple web pages or a whole website, you can use the Manage Style Sheet Links dialog box instead. To attach an external CSS to a web page by dragging and dropping 1. Open the web page in Design view.

24 23 2. Drag the.css file from either the Folder List task pane or the Web Site window onto the page. To attach an external CSS to one or more web pages or to a.css file 1. To select the files that you want to attach the CSS to, do one of the following: To attach the CSS to a single web page, open the web page. To attach the CSS to all web pages in a website, open the website. To attach the CSS to multiple pages, in the Folder List task pane or Web Site view, select the web pages that you want to use the CSS. To attach the CSS to all the pages in a folder, in the Folder List task pane or the Folders view of the Web Site view, select the folder. To attach the CSS to a different.css file, open the.css file to which you want to attach the CSS. 2. Do one of the following: On the Format menu, point to CSS Styles, and then click Attach Style Sheet. In the Apply Styles or the Manage Styles task pane, click Attach Style Sheet. 3. In the Attach Style Sheet dialog box, do the following: Use this URL Attach to Attach as To do this Specify the.css file and its path. Select the pages to attach the CSS to: Current page: only the open web page. All HTML Pages: all pages in the open website. Selected page(s): only the web pages you've selected in the current website. Select the method of attachment: Link: using the Link element. Import: using rule. To detach an external CSS from a web page 1. Open the web page in either Design view or Code view.

25 24 2. In the Apply Styles or the Manage Styles task pane, right-click the name of the CSS file (for example, "ewd.css") and select Remove Link. To detach a linked CSS from multiple web pages 1. Do one of the following: To detach a linked CSS from all pages in a website, open the website. To detach a linked CSS from multiple web pages, select the web pages in the Folder List task pane or the Web Site view. 2. On the Format menu, point to CSS Styles, and then click Manage Style Sheet Links. 3. In the URL list in the Link Style Sheet dialog box, click the name of the external cascading style sheet (CSS) that you want to detach. 4. Click one of the following: Current page detaches the CSS from only the current web page. All Pages detaches the CSS from all pages in the current website. Selected Page(s) detaches the CSS from only the pages you've selected in the current website. 5. Click Remove, and then click OK. To detach an imported external CSS from a.css file 1. Open the.css file that contains the imported CSS. 2. Delete rule that references the CSS file that you want to detach.