Web Page Development Using Iweb
Total Page:16
File Type:pdf, Size:1020Kb
Web Page Development using iWeb Please note that this introductory manual has been designed for use in coordination with the Web page Development II on a Macintosh workshop. For a complete listing of currently offered workshops, please refer to http://www.neiu.edu/scs. Student Computing Services Academic Computing, NEIU B-107 Web: www.neiu.edu/~scs Email: [email protected] Phone: 773-442-4390 Web Page Development using iWeb Syllabus Course Description: This workshop will introduce intermediate concepts regarding web page development on a Macintosh OS X system. Using Mac OS X, we will explore how to create basic types of web pages, upload them into an NEIU account, and how to view the web pages from a browser. Prerequisites: Basic understanding of Macintosh OS X or attendance to the Introduction to Macintosh workshop as well as basic knowledge of the Internet and Internet Applications such as web browsers and FTP ap- plications. Goal(s) of the Workshop: Participants should leave with an understanding of how to create their own web page using iWeb on a Macintosh system. Course Content: · create new web pages from templates. · create links. · insert pictures. · use ftp to upload files. · preview a web page online. · edit an existing iWeb file. · create an http directory and fix file permissions. Disclaimer: The Web Page Development using iWeb workshop is recommended for people who already pos- sess a basic understanding of web page design. Basic knowledge of the Macintosh Operating Sys- tem is also necessary in order to maximize results from this workshop. The screen captures found in this document are based on the Macintosh Operating System X. Questions regarding workshops may be directed to: Student Computing Services Academic Computing, NEIU B-107 Web: www.neiu.edu/~scs Email: [email protected] Phone: 773-442-4390 Web Page Development using iWeb 1 of 28 Aug 14, 2006 Table of Contents • Welcome to iWeb............................................................................. 3 • The iWeb Window............................................................................ 4 • Editing Palettes and Panels............................................................... 6 • Inspector................................................................................... 7 • Page Panel................................................................................ 8 • Text.......................................................................................... 8 • Graphics.................................................................................. 10 • Metrics.................................................................................... 12 • Hyperlinks............................................................................... 12 • Photo Gallery................................................................................ 13 • Blogs........................................................................................... 14 • RSS Feeds.................................................................................... 16 • Subscribing and Viewing RSS Feeds................................................. 17 • Saving an iWeb File....................................................................... 19 • Publishing a Website...................................................................... 20 • Launching Fetch............................................................................ 21 • Transferring Files to Your NEIU Account............................................ 22 • Creating Your HTTP Directory and Fixing Permissions.......................... 24 • Frequently Asked Questions............................................................ 26 • Additional Assistance with iWeb....................................................... 27 • • Web Page Development using iWeb Review........................................ 28 • Conclusion of Document................................................................. 28 • Information Resources................................................................... 28 Web Page Development using iWeb 2 of 28 Aug 14, 2006 Welcome to iWeb iWeb is the web authoring application which is a part of the iLife suite. First introduced in 2006, iWeb easily allows users to access built-in templates to create a series of related web pages which share a similar navigational style and theme. iWeb templates allow 6 different types of pages to be created: • Welcome • About Me • Photos • Movie • Blog • Podcast The purposes of the Welcome and About Me pages are self-explanatory. Photos provides a picture gallery (with slideshow capabilities) while Movie presents a movie file. A Blog refers to a web log and is commonly used as an online journal or diary. People may use blogs to post updates and experiences during projects and trips, or simply to post their thoughts and feelings for the day. Finally, a Podcast is similar to a blog but it is comprised of audio files that online visitors can download and listen to. When launching iWeb, the application will prompt the user to sign into their .Mac account. This is a fee-based service provided by Apple Computer. Please note that NEIU students have online storage space allocated for their use and not need to subscribe to the .Mac service in order to use iWeb. Click on the Close button to continue. A dialog window will appear which allows the user to select a specific template. Although the theme of the template is meant to remain consistent for all the pages, different themes can be chosen for individual pages. Click on a theme on the left side of the dialog box. The corresponding templates will ap- pear on the right to provide a preview. If you are just begin- ning your website, select the Welcome template and click on the Choose button to continue. Web Page Development using iWeb 3 of 28 Aug 14, 2006 The iWeb Window After choosing a template, a window similar to the one below will appear on the screen. The left side of the window is comprised of the Site Organizer. It will show you all the web pages you have on your website. By clicking on a web page, it will appear in the editing window. At the bottom-left corner of the window there are 3 buttons: Publish and Visit are only active if you are publishing your website onto a .Mac account. Since we will be uploading our web pages to our NEIU accounts, we will disregard these but- tons. The “+” button will add additional pages to your website. Please note that when creat- ing your website, you do not need to use all 6 page templates, nor are you restricted to only one page of each type. For instance, a website may be composed of two Welcome pages and three Blogs. Web Page Development using iWeb 4 of 28 Aug 14, 2006 The rest of the toolbar buttons at the bottom of the window provide object editing func- tionality. These functions are very useful since iWeb treats the content within a web page as objects. This means that text boxes and pictures can be easily resized, moved, and oth- erwise edited. Text will insert a new text box onto the web page. Similarly, Shapes will insert a basic geometric shape onto the web page. Since all of the content in the web page are treated as objects, they can be considered to be on different layers. You may think of layers as different pieces of paper on a desk. If one sheet of paper is on top of another, it can be considered to be in front of the other sheet and will partially block it from view. Selecting an object and clicking on the Forward button will cause that object to be moved forward in one-layer incre- ments. Please note that if an object is several layers be- neath another, it may require several clicks of the Forward button to bring it in front of another object. Conversely, clicking on the Backward button will cause the object to go backward one layer. The final button on the left side of the tool bar is the Mask/Unmask function. It will allow you to draw a rectangle within the image. Double-clicking in the image will crop (cut) the gray borders away. You can restore the image to it’s original state by either double-clicking on the image again or by select the image and clicking on the Unmask button. Original image Cropped image Anchor Points At this time, it is important to note that whenever an object (such as an image or a text box) is selected, small white squares will appear around its border. These are known as anchor points and allow the user to resize the object by clicking and dragging one of the points. To keep the object’s dimensions proportional, resize an object by dragging the points situated at the corners of the object. Web Page Development using iWeb 5 of 28 Aug 14, 2006 Editing Palettes and Panels Computer applications tend to have numerous floating toolbar palettes that allow users to quickly and easily select different commands and functions. In iWeb, these palettes are ac- cessible via the buttons on the bottom right side of the iWeb window. Media brings up a media browser palette. If your media files are stored within the iTunes and iPhoto applications or are within the Movies folder of your home directory, iWeb provides access to these files via the media browser palette. To insert a media file, simply drag it from the media browser to the iWeb window. If your media file is stored elsewhere on the hard drive or on a different volume, you may insert the file by locating it within the Mac OS X Finder and dragging it into the iWeb window. The Adjust, Colors, and Fonts buttons will bring up the corresponding editing palettes. These palettes allow users