From Front Page to Expression Web (Intro to the Basics of EW) August 2008

Transcription

1 From Front Page to Expression Web (Intro to the Basics of EW) August 2008 Setting up your work area: When Expression Web first opens, you will notice Task Panes on each side of the window. You may choose to close these by clicking on the X in the upper right corner of each Pane so that your window is less confusing. There are several Task Panes that may appear on the sides of your window. Task Pane Window View Also, you may choose to click on the Design mode so that you do not see any of the code behind the web page. However I prefer to leave the view on Split so I can see the code and quickly figure out display problems as they occur. I. Customizing your Template Open Saved Template in EW: In EW click on File > Open > browse to your W: drive Select the index page. 1

2 Give Page A Title: (Include school initials first. i.e. MHHS Mrs. Shelby s Home Page. For a school homepage, include the entire school name and location of school) Click Format > Background > General Tab Type a new title in the Title box. Click OK. Set Background: To use an image: Click Format > Background Under Formatting, click Background Picture; click the Browse button to locate the saved image To use a solid color: Select color by clicking on the white rectangle to the right of Background- click Custom for more options click OK NOTE: Please use only the 256 Web Colors from the color spectrum Change text, hyperlinks, and visited hyperlinks color: Click Format > Background >General Tab > Click on color boxes to change colors of links. Select color > Apply > OK Hyperlink color refers to the color the text becomes after it has been made a link to something (default is blue). Visited hyperlink color refers to a hyperlink after it has been clicked (default is purple) Active hyperlink color is what it changes to between being clicked and reaching its destination. (this is when the hourglass is moving). Hover Hyperlink color is what it changes to when the mouse hovers over the link. Insert Text: (Always use: Arial, Times New Roman, Verdana or Courier New) Highlight the text, Type Title of Homepage Here or Insert Text Here Type over the text with the name of the web page/site (this saves the original formatting of the text) If necessary, use the toolbar to change font (one of 4 fonts), color, style, size, and alignment. If wanted, repeat the above steps to enter text into the cell below provided for more text. If not, delete the cell instead of adding text. (Delete the cell by holding down Alt and clicking in the cell. With the cell now highlighted, click on Table>Delete Cell) Modify/Delete Text as desired Insert Graphic: Highlight the text, Insert Graphic or click on the graphic place holder to select it. 2

3 On the toolbar choose Insert>Picture>From File and browse to your W: drive In EW, you can set the Alternative Text in the Accessibility Properties dialog box. Type in the field next to Alternative Text (i.e. what this is a picture of) Picture toolbar: auto thumbnail contrast & brightness black & white resample rotation options bevel washout Available Tools: 1. autothumbnail 2. rotation option 3. contrast and brightness 4. transparent transparent 5. black & white 6. washout 7. bevel 8. resample II. Create Hyperlinks Creating a link to the school s Home Page: Click above the disclaimer on the bottom of the index template. Type the school s name. Highlight the name of the school > Click Link ( ) button on top toolbar Choose Existing File or Web Page in the upper left corner of the window If you know the URL, type it in the Address, otherwise browse to the page. Creating a link to Highlight text or graphic that you to be a link. Click Link ( ) button on top toolbar Choose Address on the lower left corner of the window Type exact address (mail will appear) Click OK To browse: Click the icon > Internet Explorer will open > browse to your website> minimize the page > the URL will appear in the Address box want to: 3

4 Creating a link to a second page (ex: Homework Page) Highlight text or graphic that you want to be a link Click on the Link ( ) button on the toolbar Choose Existing File or Web Page in the upper left corner of the window Browse to your folder in the W: drive Either click on the button to browse to the file in your folder or if you are working in the same location as the file you are looking for, use the center navigation window. Click OK Use the button Browse to the w: drive Save and Preview in Browser Check the code in split view to check for any errors in your link (i.e. file:///) III. Modifying Templates To Create Tables: 1. Click Table Menu. Click Insert. Click Table 2. Place a check next to Specify Width. Type 650. Mark Pixels (not Percent) Table Alignment: 1. Right click in Table. Click Table Properties 2. Click pull down arrow next to Alignment, make selection To add rows or columns: 1. Click where the new row or column is to be added 2. Click Table > Insert > Rows or Columns To delete rows or columns: 1. Highlight the new row(s) or column(s) to be deleted (if only one, then ALT Click) 2. Right click, select Delete To merge (or split) rows or columns: 1. Highlight the row(s) or column(s) to be merged. Right click, select Merge (or Split) 4

5 To add a border and change background color to a table and cells: Table background & color: 1. Right click in table. Click Table Properties. 2. Under "Borders", change Size and Color. 3. Under "Background", change Color or click next to "Use background picture" and click Browse to find background image. Click OK. Cell background & color: 1. Right click in table. Click Cell Properties. 2. Under "Borders", change Size and Color. 3. Under "Background", change Color or click next to "Use background picture" and click Browse to find background image. Click OK. To modify the alignment of items in cells: 1. Right click within the cell Click Properties 2. Next to Horizontal alignment and Vertical alignment, use the pull down menu to change settings. To align graphics with text: 1. Type some text next a graphic. 2. Right click the picture. Click Picture Properties > click Appearance tab> click the pull down menu next to Alignment. Make selection > Increase border thickness to add a border. Click OK To change picture border: 1. Right click picture. Click Appearance Tab. 2. Under "Layout" change Border thickness. Click OK. Web Page Properties Background Color Heading Graphic Page Text R Source: Font: G Font: Size: B Font Size: Color OR Font Color: Hyperlink color: HEX: Effects applied: Active hyperlink color: Visited hyperlink color: Hover hyperlink color: Online resource: 5

6 AM I READY TO LINK MY WEBPAGE? When you think you re ready, look over these guidelines to double check. REMEMBER: Any employee web site on the District's server must adhere to the guidelines of the Shelby County Schools Web Page Requirements. In addition, any outside web page linked to the Shelby County Schools web page must serve the purpose to inform, educate, or communicate. 1) Have I signed the Employee Website Accountability Agreement Form? READ Web Page Requirements SIGN Employee Web Page Accountability Agreement Form Turn in signed Employee Web Page Accountability Agreement Form to your school s webmaster (webmaster will send a copy to the technology office) 2) Has my page been previewed and approved by one of the school s administrators, and one of the Shelby County Technology Department webmasters, and the local school s webmaster? Obtain approval from one of your school s administrators Obtain approval from one of your school s webmasters. All items on the Web Site Specifications Checklist below should be completed in order to obtain this approval. Obtain approval from one of the technology office s webmasters 3) Are the pages correctly titled? Includes school initials (ex: RMS Jackson s Homepage)* * In EW, with your webpage open, go to Format > Background > General Tab. In the Title box type the name you want to appear on the Internet. 4) Do I have all necessary links? A link from my Homepage (index) to my school s Homepage. Links from all of my pages back to my Homepage (index). All links are working properly. ** In EW with your webpage open, highlight the word or graphic you wish to link and click the hyperlink button (on top toolbar) 5) Is the SCBOE disclaimer at the bottom of each page?(may be copied from any SCBOE webpage) This is the official web site of the Shelby County Board of Education. Any other site that claims to be affiliated with, represent or contain information about any Shelby County School is not endorsed by the Shelby County Board of Education. If you leave the official Shelby County Board of Education web site, the Shelby County School District claims no responsibility for the content beyond this point. 6) Are all pages complete and up to date? All unwanted text and graphics from templates have been deleted. All graphics are web ready. (NO clipart. All are saved in your folder.) All graphics and text are aligned attractively. Backgrounds are consistent. *These requirements are ONLY necessary the very first time your web page is posted (linked) Forms are available at: Or go to the Shelby County Schools Home Page > Technology > Forms 6