Lesson 4
Click here for linking
Inserting & Formatting Images
To
insert a picture into your page you simply click on Insert on the Main
Menu, choose Image, a window will pop up. (See screenshot at the right).
On the Location tab, you will click on the Choose File button and find
your graphic on your hard drive and click on the picture and the location
of the graphic will be placed in the Image Location: area.
Tooltip is supposed to name your graphic but all I
see it doing is exactly what Alternate Text does. If you enter something
in Tooltip then whatever you enter into Alternate Text will not appear. It
is possible that this Tooltip is a browser specific tool. If you would
like to add Alternate Text to your page, leave the Tooltip blank. If you
want to add Alternative Text you can use either spot, making sure you have
Alternate Text marked if you use that choice. If you do not want any
alternate text just choose the Don't use alternate text and leave the
other two areas blank.
The dimensions Tab allows you to use the actual
image size or resize it to the specifications you like. It is pretty
straight forward so will not place a screenshot of it here.
The Appearance tab is what you will use to change several things about
the image's appearance on the page. Left and Right specifies in pixels how
much space is left between the left and right sides of the image. Top and
bottom does the same. Solid Border adds a border to you image in pixel
size of your choice.
Align
Text to Image allows you to align the text to go around the image
depending on what you have chosen. Below you will see samples of what each
of the choices in the screenshot to the left will provide.
Beside
this flag is text that has been aligned "At the top" as you can see one
line will run across the screen aligned to the top of the flag. The rest
of the text will appear under the flag leaving some blank space. I have
also made the Left and Right spacing and the Top and Bottom spacing at 10
and the Solid Border at 1.
The
formatting for this graphic is alignment "In the center" the Left and
Right spacing and the Top and Bottom spacing at 10 and the Solid Border at
2. As you can see the first line is aligned with the center of the graphic
and the next lines appear below it.
Formatting
for this graphic is alignment "At the bottom" the Left and Right spacing
and the Top and Bottom spacing at 10 and the Solid Border at 3. As you can
see the first line is aligned with the bottom of the graphic and the next
lines appear below it.
Formatting
for graphic at the left is alignment "Wrap to the left" the Left and Right
spacing and the Top and Bottom spacing at 10 and the Solid Border at 0. As
you can see the text aligns and wraps around the graphic instead of a
large amount of space being left blank, the text uses up all the space
around the graphic. This and the "Wrap to the right" which is shown with
the flag on the right side of the page are what I use most often.
You can see more samples in
HTML Lesson 2.
Linking
Linking Your Image The final tab on your image is for linking your image to a location on
your page or another page. If you are linking to a page on your hard drive
you can use the Choose file link and find the link you are wanting to use
and clicking on it. To add a border around your picture (which indicates
to others there is a link on the image) just check Show border around
linked image.
URL is relative to page location This is seen in two areas on
Image Properties, under the location tab and under the link tab. What is a
relative URL? There are two types of URLs they are Relative and Absolute.
An absolute URL provides the entire path to whatever you are linking to.
The Absolute URL to the screenshot on the right is
d156889.shared30.cdxsolutions.com/images/nvu/nvul4i4.jpg but the relative path to
the screenshot is ../images/nvu/nvul4i4.jpg. What relative does is makes
it easier for the web designer to edit in the future. If all of the links
to pages and graphics on Ask Maggy Mae were absolute and I changed the
name of Ask Maggy Mae to Ask Maggy, in most cases I would have to go from
page to page and edit each individual link to it's new absolute URL. But
when using a relative URL you eliminate this work. The url
../images/nvu/nvul4i4.jpg instructs the browser that it needs to find the
link by moving up one directory (the two dots tell it this) then go to the
images folder, then the nvu folder and find the image named nvul4i4.jpg.
With the relative URL nothing will need to be changed when moving to a
different domain name.
Linking
Text Highlight the text you wish to add a hyperlink to and right click
and choose Create Link. You will see a window pop up like the one in the
screenshot to the right. Either type your URL into the space provided or
choose the file from your hard drive by clicking on the Choose File
button.
Bookmarking is used to link to a certain area on a page. This
page uses a bookmark, the link is placed at the top of the page and says
click here for linking. When you click on it you are brought down to the
Linking title. I use this in my tutorials when I am placing two or more
subjects into one tutorial.
T
o
create a bookmark just place your mouse at the spot that you wish to
bookmark. Click on the button shown in the screenshot on the left and a
window will appear as shown in the screenshot on the right. Type in a name
for your bookmark or anchor (Nvu calls it) and click on the OK button.
To link to a bookmark simply highlight the text or graphic you wish to
link and right click and Create Link. The graphic above showing Link
Properties will appear and in the Link Location box if you click on the
down arrow just above the Choose File button you will be given the list of
anchors or bookmarks you have created. Simply click on the one you want
and click the OK button and your link to the bookmark has been created.
Target Frame is used in the hyperlink to instruct the browser
how to open the link. I cannot see in Nvu how to edit the URL to allow for
Target Frame. To do this you would have to use the HTML view to add the
code to the page. When in the HTML view find the hyperlink you wish to add
the target frame to and add target="_blank" between the <a and href= see
below for sample.
<a href="d156889.shared30.cdxsolutions.com">Ask Maggy Mae</a>
Ask Maggy Mae
will open the page in the same window as your page is in
<a target="_blank" href="d156889.shared30.cdxsolutions.com>Ask Maggy Mae</a>
Ask
Maggy Mae
will open the page in a new window
