Iweb Basics Website
Total Page:16
File Type:pdf, Size:1020Kb
iWeb Basics Website: http://etc.usf.edu/te/ iWeb is the web design application introduced by Apple in iLife 06. iWeb allows you to see exactly what your website will look like as you work on it. You do not need to know any HMTL or programming to create a website with photo galleries, blogs, podcasts, and movie pages. iWeb includes sev- eral professionally-designed templates that make it easy to get started with web design. iWeb also works well with the other programs in the iLife suite. You can drag and drop content from iTunes, iMovie, and iPhoto to add it to your website. Site Management its name to select it and type in the The Site Organizer allows you to man- name you want to use. age the web pages that make up an iWeb site. To create a new website in iWeb: 1. Launch iWeb by clicking on its icon in the Dock or in the Applications folder. To add a page to the new site: 2. In the .Mac information screen, 1. Click the Add (+) button at the bot- click on Sign In if you already have tom of the Site Organizer to open a .Mac account, or on Close if you the Template Chooser and select a don't have an iWeb account. page type for the new page. 3. Check the box next to "Don't show 2. Click on Choose to add the page to this message again" if you want to the site. keep this window from being dis- 3. Repeat steps 1 and 2 to add pages played each time iWeb opens. as needed. 4. When the Template Chooser 4. To rename a page, double-click on opens, select a template from the its name in the Site Organizer and list on the left, then choose a page type in the name you want to use type for the first page in the site by for it. clicking on one of the thumbnails on 5. To delete a page, click on its icon in the right. If the Template Chooser the Site Organizer, then choose does not come up automatically Edit > Delete Page. You must have when you open iWeb, choose File > at least one page in an iWeb site. If New Site. you delete the last remaining page 5. Click on Choose to create a new of an iWeb site, the Template site with the selected template. Chooser will open so you can cre- 6. Choose File > Save to save your ate a new page. site. 6. The first page listed in a site is the 7. The new site will be listed in the start page for that site. To change Site Organizer (the column on the the order of pages, drag and drop left) with the default site name. the pages in that site until they are To rename the site, double-click on Created by Luis Perez Last Updated: 3/31/08 in the desired order in the Site Or- • To change the font and style, click on ganizer. the Fonts button in the toolbar and select a font family, font typeface, You can create multiple sites in iWeb. and size using the different columns. To create additional sites, choose File The buttons at the top of this window > New Site and repeat the steps in this will allow you to add underlining, a section. To delete a site, select it in the shadow, or other styling to your text. Site Organizer and choose Edit > De- • To add a list, place the cursor in the lete Site. line where you want to start your list, open the Text Inspector and select a Navigation list type using the drop-down menu in iWeb automatically creates a naviga- the List pane. A new list item is cre- tion bar which appears at the top of ated each time you press Return. To each page in a site. The navigation create a line break without creating a bar automatically updates as you add new list item hold down the Shift key and remove pages. on your keyboard as you press Re- turn. To hide the navigation bar and create your own navigation links: To add your own text boxes, click on 1. Open the Inspector and select the the Text button in the toolbar then Site Inspector. modify the text box as follows: 2. Uncheck the box next to “Display • To move a text box, click on it to se- navigation menu.” lect it and move it to another location. 3. If you only want to remove a single • To resize the text box, drag on one of page from the navigation bar, select the handles that appear when you the page in the Site Organizer and click on it. uncheck the box next to “Include page in navigation menu.” Links To add a hyperlink: Working with Text 1. Select the text or object you want to iWeb templates include placeholder turn into a hyperlink. text to show you exactly how your text 2. Open the Hyperlink inspector. will be formatted. To replace the 3. Check the box next to "Enable as a placeholder text, double-click to select hyperlink." it and begin typing your own text. 4. Using the drop-down menu, select one of the link types: There are several ways to format text • One of My Pages: use this option in iWeb: to link to another page in your • To change the spacing and align- site. Use the Page drop-down ment, open the Inspector and select menu to select the name of the the Text Inspector. Use the sliders to page. change the character, line, and para- • An External Page: select this op- graph spacing. Click on the buttons tion to link to a page on the Web. at the top to change the alignment, or Enter the web address of the click on the color well to change the page in the URL field. text color. Created by Luis Perez Last Updated: 3/31/08 • E-Mail Message: use this option The Metrics Inspector also has options to create a contact link. Enter a that apply to images: recipient address and a subject in • Use the flip buttons to flip the image the corresponding fields. vertically or horizontally. • Use the Angle wheel to rotate the im- Images age. iWeb templates also include place- holder images. There are several The Adjust Image window allows you ways to add images to an iWeb site: to adjust the colors and lighting in your • Drag and drop an image from a images without having to open iPhoto: Finder window until it is over the 1. Select the image you want to edit placeholder image. and click on the Adjust button in the • Select a placeholder image and then toolbar to open the Adjust Image choose Insert > Choose to navigate window. to the location where the image is 2. Use the sliders to change the over- stored on your hard drive. Select the all brightness and contrast, or fix image and click on Choose to re- the colors in your image. place the placeholder image. 3. The histogram at the bottom of the • Click on the Media button in the tool- window displays tonal information bar, then click on the Photos pane for your image. Use the Exposure and choose an image from your slider to change the mid-tones in iPhoto library or from one of your your image. To work with the iPhoto albums. Drag the image into shadows or highlights individually, the canvas until it is over a place- use the markers below the histo- holder image. gram. Drag in from the left to in- crease the shadows (and make the Once you have added an image to a image darker), or from the right to page, you can drag it to a different lo- bring out the highlights (and make cation or use the handles that appear the image brighter). around it to resize it. 4. To perform an automatic adjust- ment, click on the Auto Levels but- The Graphics Inspector can be used to ton. If you’re not happy with the further customize the appearance of an results, click on Reset Image to image: start over. • Check the box next to Shadow to add a drop shadow. Use the controls to When you add an image to a page it change the angle, offset, and other can be added inline or fixed on the options for the drop shadow. page. Inline images move along with • Check the box next to Reflection to the text as you type, and they can create a reflection effect. Use the have text wrap around them. Fixed slider to change the opacity of the objects can be dragged to any location reflection. on the page and they do not affect the • Use the opacity slider to increase the flow of the text. To wrap text around level of transparency in the image. an image: 1. Select an inline image in the can- vas. Created by Luis Perez Last Updated: 3/31/08 2. Open the Wrap pane of the Text and Metrics Inspectors. You can Inspector. change the fill and stroke colors, or 3. Check the box next to “Object add a drop shadow. causes wrap”. 4. Click on one of the buttons to have Photo Pages the text wrap around the right or left One of the page types included in side of the image. iWeb allows you to quickly build a 5. To add white space between the photo gallery.