2010 iWeb

From CRIPTWiki
Revision as of 20:58, 15 April 2011 by Gnaboka (Talk | contribs)

Jump to: navigation, search

Opening iWeb

To open iWeb on the Apple computer, click on the iWeb icon in the dock. If the icon is not there, go to Spotlight (command + space), and type in iWeb.

Make sure to save your progress.

Editing in iWeb

When iWeb opens up, it should automatically bring up the CRIPT Anatatorium project.

The pages will be on the left in a sidebar. Click on the pages you wish to edit and make changes.

Make sure you save every time you make a change.

To launch and formatting toolboxes such as the inspector toolbox or Fonts toolbox, select the appropriate ones on the botton right corner of the iWeb window. (Media|Adjust|Inspector|Colors|Fonts)

Resizing and moving components of the website is relatively simple. To select certain components to change/move around, simply hold down the SHIFT button on the keyboard and select the components with the mouse. To unselect, click on the component you wish to unselect while holding down the SHIFT key.

Make sure to save your progress.

Hyperlinking

To hyperlink, you need to have the Inspector toolbox open, and select the second last tab. Click on a component you wish to hyperlink (Picture, Text etc..) and select ENABLE AS A HYPERLINK. After that is done, use the dropbox to select where you want that particular component to be hyperlinked to. If you are hyperlinking text, you also have the option to changing the color of the font when it is scrolled over, visited, etc. Just select the Format tab within.

Be careful when hyperlinking buttons. There are potentially 3 things you can hyperlink. The background button image, the text, and the text box. To be safe, hyperlink all three to the same place. Select the background image of the button and follow the above instructions. To hyperlink the texbox, click on the text once and hyperlink. To hyperlink the text, double click the text and hyperlink. Always check your links.

Make sure to save your progress.

Creating New Pages

To create an additional page within the current project, select the "+" button in the bottom left corner of iWeb, beside PUBLISH and VISIT. Select the style of page you wish to create. To remain consistant with the new CRIPT website, choose a template from SIMPLE (Fl).

If you wish to have the new page visible in the top navigation menu, leave it as is. However, if you wish not to have it visible in the navigation menu, simply open the Inspector toolbox, and select the second tab 'Page'. There you can change the name of the page, and include/exclude it from the navigation menu.

IMPORTANT: DO NOT UNCHECK THE "DISPLAY NAVIGATION MENU" BUTTON. It will mess up the header containing the logo and text.

Make sure to save your progress.

Images

Using images is pretty simple in iWeb, If you have the file on the computer, simply drag and drop it into the desired page/location. If you are dragging images from the internet, make sure those images are not hyperlinked. For example if you are dragging an image from Google Images, follow the image for its entire path before dragging, otherwise when you drag and drop, it will hyperlink to the path the image was intended to go on the internet. (If you didn't understand what I just wrote, in Google images keep clicking on the image that you want until you can't click it anymore and you have the option of saving it as a file.)

When you drag an image into iWeb, you can either drag it into the page, or you can drag it into an image placeholder. When you drag it into the page, you basically adjust the corners to make it the size you want. When you drag it into a placeholder, you can change the zoom of the image using the continuum scroll bar on the bottom of the image, and to change the visible area of the picture, select edit mask, and move it around until you are satisfied. To add images into the slideshow in the CRIPT PHOTOGRAPHY page, simply drag and drop from a file on your computer, or the internet into the slideshow box.

Make sure to save your progress.

Creating Buttons

The simplest way to create a button is to copy one from one of the already completed pages. Copy and Paste the button into your new page and use that.Make sure the hyperlink is set to where you want. If you need to resize the button, open the Inspector toolbox and choose the third last tab with the ruler, then select the button and unclick the 'Constraint Proportions' and resize to your desire.

Make sure to save your progress.

Publishing the Website

After you have made changes to desired pages and are ready to upload the site to the internet, you must first publish it to a folder. To do this, you must (in iWeb) go to File> Publish to a Folder, then select Desktop> iWeb CRIPT 2010> WebSite> CRIPT.

You usually do not have to go to desktop to look for the file because it automatically chooses it for you. Select "CHOOSE" and replace the previous file. When you close iWeb, choose DO NOT PUBLISH.

Make sure to save your progress.

Uploading to Server

When uploading the completed website, use CyberDuck. It is the yellow duck in the dock that looks exactly like the duck you used to play in the tub with when you were younger. Once you have opened the program, select 'Open Connection' and type in "anatatorium.com" in the server and your username and password, then hit connect. Once you are in, scroll down to find a folder called "public_html" drag and drop CRIPT folder as well as 'index.html' from the WebSite folder in which you have published the site. Make sure you copy the whole folder, as it is easier to keep track of everything and results in less probability to have dead links or other mistakes.

Creating Meta-Tags

To create meta-tags for the website in iWeb, you must use a program called "iWeb SEO Tool". It should be located in the dock, however if it is not, just look it up in spotlight. The icon looks very similar to the one for iWeb, so make sure you choose the right one.

Once you have opened iWeb SEO Tool, go to the top left corner and select Open Website. Navigate from Desktop>iWeb CRIPT 2010>WebSite>CRIPT and click select. It should load all of the saved iWeb pages. Select the page (not folder) you wish to add meta tags into, and you should be able to write inside the fields to your right. After you have selected a desired page to add meta tags in, select the Meta Tags tab and enter in the website description and website keywords in the appropriate boxes. Do that for any pages you wish to add meta tags to and select apply after every page.


Make sure to hit Apply to save your progress after EVERY page you have added meta-tags in, also everytime you open the program and make changes, select the Re-apply Saved Tags.

To add an HTML Header code, go to the Site Settings tab and in the Header Code, insert this and modify as you wish:

   <meta name=”description” content=”xxxxxxxxxxx” />
   <meta name=”keywords” content=”xxxxx, xxxxxxx, xxxxxxxx, xxxx xxxxxx, xxxx xxxxx, xxxxx, />
   </head>

Replace the "xxxxxxxx" with keywords.

Uploading Meta-Tags

When all of the desired pages have the meta tags, select the "Publish" button at the top right corner of the window. In the next window that pops up choose 'Publish to FTP' and select next. There already is an FTP account set up, so just select the account, and in the Directory Path, type "/public_html", and hit upload. It will take a while so do not stop the progress.


Transfering iWeb to a new computer

Save contents of the webpage folder from the 'iWeb CRIPT 2010' folder on the desktop.

IMPORTANT to save the domain file and replace in the same location on the new computer. Library > Application Support > iWeb > DOMAIN