To Process and Save a PICTURE to the Web

START Menu
(Program) Adobe Photoshop Elements
File
Open
(Find your original photograph)
Open
Image
Resize
Image Size
Resolution - Change to 72  (It's often set at 300)
OK
File
Save for Web
(If a message comes up,saying this is too big, do you want to continue?  Say Yes)
Two pictures will appear....the one you are interested in is on the right - It MAY look way too big, and you
only see a corner of the picture
[New Size] on the right menu, change percent to 20 (you can play with this number)
Apply
Look on bottom left of the picture on the right, and check the JPEG K number.  It should be between 40 and 80 K
If it is below 80 K, choose (under JPEG on right menu) Medium, High, Very High, or Maximum) until the picture looks its best and is still under 80 K
OK
Choose file to save pictures to.  I like to keep them separate from other pictures in a file entitled "Pictures Saved for Web"
Add a Text Element:



1)  T above

2)  Move to desired place

3) Highlight "Add a Text Element:"

4)  Format by choosing

Font

Font Size

Font Color

Border?  Thickness  & Color
Add a  NEW Text Element: This allows you to recreate the same formatting without having to start from scratch for ever text box

1)  Right Click / Clone

(if "clone" doesn't appear, move arrow till it becomes a double pointed arrow on blue outline  of box)

2)  Move cloned box to desired place

3) Highlight old text

4)  Replace with new text

5).  Tighten box to fit text exactly

(Make sure all extra "spaces" are removed after new text, and then size box to fit)
Get a PICTURE off the web:



1)  Google to find picture you like

2)  Right Click and "Save Picture As"

3)  Find the appropriate file to save to in your files

4)  Be sure to save the URL and a tiny copy of the picture on the "Reference Websites" page of your site, so you can ask for permission later, and give credit to the source on your site.

ADD a PICTURE onto your page



1)  Picture Icon next to T above

2)  Usually (unless you have already used the picture on the website, and it is in the picture file) click "Your Computer"

3)  Find the picture in your files, and open

4)  Move picture to desired place and size

Aligning Pictures and Text to look nice on the page:



1)  Use Control and Select pictures to be aligned (at the same time)

2)  Look to Right and choose the alignment you desire

3)  Group if appropriate

4) Check Lock Position and Size box

5)  Become familiar with specific Position and Size numbers (ie, left margin of text) to keep it all consistent on the page and throughout the site)

To Link an item to another page or another site



1)  Highlight the desired text to be linked (OR) click on the picture

2)  Go to LINK button above (6 from left, grey button)

3)  CHOOSE: (Click in the Circle)

Existing Page or File - if you want to link to another page on your site (find it in the File Manager List)



URL Web Address - if you want to link to another site.  (You must have that URL cut to paste here.  Make sure the http:// is there (but not twice; I always highlight the one there and replace it completely with the new URL)



Email Address - ifyou want to make an email address a link,



or another position on the same page:  (Follow Steps 1-3 above)



Another Area on this Page - (Anchor Link) if you want to direct a person to a specific place on the current page you are working on.

Use Pull-Down menu and choose "Create a New Anchor Link"

Click OK

An ANCHOR Box will pop onto your page in the upper left corner:

RENAME - Click on the Rename button to the right, and type in your new name, Click OK

DRAG the icon to the place you want the link to jump to - Be sure it is all the way to the top of the desired item, because the anchor jumps there exactly!



NOTICE the little "back to top" button at the end of this line?  You will want to put them on pages

where you use anchor links, so that people can go back and forth from the link to the top again.  You now have one in your collection of pictures on this website, so we should probably add them to pages instead of the "return to top" text that I have used before.  What do you think about that?  In any case, we must add this feature whenever you use anchor links.  To do so, simply choose the "Return to Top" option on the pull-down menu when you follow the above directions for anchor links  I make sure there is one such icon in every screen - i.e, when one disappears, I add another one within that screen shot.


Create a New Page

1)  Open a page you always use as a template

2)  Click File and "Save As"

3)  Type in name of new file (no spaces or anything)

The Page you Saved As  will be returned to the file cabinet, in tact.  You must go there to retrieve it.  Choose one page to always use as your Template Page  That way they are for sure all consistently the same format.

4)  Use the text boxes already there to cut and paste your  new material into.  That keeps the formatting handy so you don't have to recreate it.



5) Save and Publish the page before you can link it to the navigation menu or even another page.


Link a New Page to the Existing Navigation Menu

1) The page must be saved and published before it can be added to the navigation menu

2)  Click on the Navigation Menu already on your page







3)  Click on Links tab on right/grey section, and click on +link icon



4)  Click Existing Page or File and Browse to find your newly created page in the List



5)  Notice that it adds "Link 12" to the NAV MENU - You must TYPE IN the Display Name and click "Edit Link"



6.  Notice how this affects the Navigation Menu, and that it may mean changing the spacing on every single page to facilitate the new size of the Menu.



7.  You can DELETE pages from the Nav Menu, or change order of the pages by using the up and down arrows you see on the


CREATE A NEW Navigation Menu

1) The page must be saved and published before it can be added to the navigation menu

2)  Click Blue Circle with N above, next to after the add picture icon

3)  In pop-up box, choose "Create a New Nav Menu) -

4)  Enter a name for your new Menu, Like Navigation 2, (will appear)

5)  Click OK, and a box like this** will appear:**

You must be clicked on this box (it will have a

blue line around it) to be able to create your

new navigation menu.

6)  You can then choose the Basics, Links, Style and

Effects of your new Menu -

7)  Add Links (as described above)

8)  You must choose which pages you add this new Navigation Menu to.  Once added to a page, it will change whenever you change it on any page.

9)  To add it to a page, simply go again, to the Blue Circle with N, and choose Navigation 2 or whatever the name of the new one is.

Your links will apear in this area once you have created your Navigation Menu
You must first add links to your Navigation Menu in order for this Element to work
.
To Add Background Texture

1) Click on the Page Info icon above, 5th from the left, grey button, next to Publish Button



On Right, in grey area of screen, find the Background choices; they are

Color  You can choose any color, including your own custom color (last choice on dropdown menu)

Pattern  There are several there to choose from - not very good ones, if you ask me

Image - Get from your computer - as we did  for this site.


Frames and Borders

1) Click on the  Blue StarIcon, 5th from the Left above:

2)  Choose Border from the Dropdown Menu

3)  While clicked on the border that drops onto your page, you can choose:

Thickness

Bevel

Fill Color



Color of the Border itself



REMEMBER: 

When a border surrounds a picture or a text box, and it is on the "top" layer, no links work unless they are "brought to the front" of the layer.    To avoid layering problems, use a "standard divider" instead, and run it down both sides and along the bottom of your page, framing without covering the whole page.

Also, when a picture is framed with a border, it is more difficult for someone to copy the picture from the website.



ALSO CHECK OUT:  The other shapes in this icon

They can all be manipulated to be different colors and sizes



About Text Boxes, Borders, Padding, Wrapping text around pictures
Notice how the text in this box butts right up against the border?  That is because is has no "padding".  Padding can be a good thing if the box is very small, as in the box below "Add a PICTURE onto your page"  I've added a padding of "5" to that box.  Padding can also be cumbersome, as it causes the box to line up differently and take more space than shows on your Sitebuilder versionof the page. It can also change the alignment or formatting from one browser to the other....which is a good reason to use padding sparingly.
Another way to get good margins and wrapping ability of text boxes is to place a text box within a text box, using the outside text box as the "border" and putting numerous text boxies within that one.  like this





In this way, I can manipulate the size of the text space to wrap around a picture....While I have borders on these text boxes to illustrate where they begin and end, you would of course not use borders on the text boxes within your page.  You must also always be aware of layering, and that boxes with links you want to work on the front page be brought to the front along with nav menus, etc.
The trick is to line the boxes up nicely on the left, and not have too much spacing between the text and the last text box, and to make them fit nicely around thepicture without too much extra margin space..
Return to Top.
Return to Top.
Return to Top.
Return to Top.
Return to Top.
Return to Top.
Return to Top.
Return to Top.
This is an extra Text box, placed on top of the one I was typing in.  It allows me to move the text precisely where I want it, while keeping a border for the text, and allowing it to move around a picture, for instance.  I put a border aorund this one,  and gave it a background color, but you don't have to.
About Padding:

Forget it!

Create margins in your boxes by placing one text over another, with background and borders on the bottom text, and text itself in a smaller box on top.

PADDING complicates your life and creates spacing nightmares.

Trust me - avoid padding!
INSERT HTML and PAYPAL buttons on your site.

First, you'll need a "business" or "premium" account from Paypal
You will need to verify the account with PayPal - Go to Paypal for instructions.

Homestead has a lot of complicated new ways of making payments, now that they are an Intuit Company;
Avoid all that by going directly to Paypal, and inserting their buttons directly on your page.

Log-in to your Paypal Account, and click on "Mercant Services"

Follow their instructions to create your button.

Once you have the button, save and copy the code, and come back to your web page

On the top you will see an HTML button in red:  Click that:  When this icon comes up,
Look to the right, and click on the "Enter or Paste HTML" button

Delete the message that says, "Paste your snippet here" and paste your HTML into
the box.

Place the box where you want it to show up, and publish to see if it's where you want.  If not, just move till it is.


your html snippet