xml to pdf c# itextsharp : Bookmarks in pdf SDK control API .net web page html sharepoint Build%20Your%20Own%20Web%20Site%20The%20Right%20Way%20Using%20HTML%20&%20CSS%203rd%20Ed22-part779

Figure 5.6. IE6 with poor PNG transparency (right) while Firefox 3.6 renders correctly (left)
Adding an Image Gallery to the Site
One of the great joys of diving is being amongst all the beautiful creatures that live
in the sea. You can try to explain the wonder of all this to a non-diver but, usually,
they’re unable to comprehend it. Our website provides a great opportunity to show
people how beautiful these underwater sights can be.
It’s time to grow the project site a little by adding a new page: a simple image gallery.
Before we start looking at the images themselves, we need to tweak the existing
website files slightly to accommodate the new page.
Updating the Navigation
1. Open
index.html
in your text editor.
2. Find the navigation section and add another link to your list of links, like so:
chapter5/website_files/01_link_in_nav/index.html
(excerpt)
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
Build Your Own Website The Right Way Using HTML & CSS
184
Bookmarks in pdf - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
add bookmarks pdf; adding bookmarks in pdf
Bookmarks in pdf - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
how to add bookmarks on pdf; create pdf bookmarks from word
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
</ul>
</div> <!-- end of navigation div -->
3. Save the file, and then look at it in the browser to make sure the link appears
appropriately.
4. Repeat the steps above for
about.html
and
contact.html
.
The navigation in all your pages should look like that shown in Figure 5.7.
Figure 5.7. Adding the Image Gallery to the navigation list
There’s just one small problem: the gallery page is yet to exist! Let’s rectify that
now.
Adding the New Gallery Page
1. Create a copy of
contact.html
and rename it
gallery.html
,just as we did back in
Chapter 2.
2. Open the newly created gallery page in your text editor, and change the level 2
heading (
h2
)content to “Image Gallery.”
185
Picture This! Using Images on Your Website
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
document file. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. Also a preview
creating bookmarks in pdf documents; create pdf with bookmarks from word
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF file by top level bookmarks. The following C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
export pdf bookmarks to text; bookmarks pdf documents
3. Remove the single paragraph that appearsbelow that heading, and replace it using
the following:
chapter5/website_files/01_link_in_nav/gallery.html
(excerpt)
<p>Below are some of the great views that club members have
captured on film (or digital memory) on various dive
trips.</p>
<p>Please do drop me a line (that's Bob) if you would like to
<a href="mailto:bob@bubbleunder.com">submit an image</a> to
this gallery.</p>
4. Change the
title
content to: Image Gallery—Underwater Photography from
Bubble Under’s members.
5. Finally, save the amendments and check the page in your browser.
Adding the First Image
Now, we’re ready to add the first picture to our gallery, a picture of a turtle. But this
is one tough turtle; it appears that a local shark has taken quite a chomp out of his
side, as Figure 5.8 reveals.
Figure 5.8. Ouch! That must have hurt!
Build Your Own Website The Right Way Using HTML & CSS
186
VB.NET PDF File Split Library: Split, seperate PDF into multiple
Demo Code in VB.NET. The following VB.NET codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
excel print to pdf with bookmarks; convert excel to pdf with bookmarks
C# PDF File Compress Library: Compress reduce PDF size in C#.net
NET framework. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. C# class demo
add bookmark pdf file; how to bookmark a page in pdf document
Imade a point of commenting on that image—after all, it’s quite a sight, isn’t it?
Clearly the image deserves a descriptive
alt
attribute, better than
A picture of a
turtle
,which falls well short of the full story. Here’s the markup we’ll use instead
for this image:
<p><img src="gallery/turtle-bite.jpg" width="400" height="258"
alt="A turtle swims comfortably among the coral, despite its
old injury - a large shark bite on one side"/></p>
Get the Picture
You’ll find this image—and all the others that we’ll use in this chapter—in the
code archive.
Note that the value of this
src
attribute is a little different from the others we’ve
seen so far. That forward slash tells the browser that the image is inside a folder. In
this case,
gallery/turtle-bite.jpg
informs the browser that the image file
(
turtle-bite.jpg
)is inside a folder named
gallery
.So, before you add this image to the
gallery, create the
gallery
folder inside your website’s folder. (We learned how to
create a folder back in Chapter 1. In Windows, select
File
>
New
>
Folder
;on a Mac,
select
File
>
New Folder
.) Then place the image inside it.
When you’ve saved the image inside the folder, add the previous markup to
gallery.html
,like so:
chapter5/website_files/01_link_in_nav/gallery.html
(excerpt)
<div id="bodycontent">
<h2>Image Gallery</h2>
<p>Below are some of the great views that club members have
captured on film (or digital memory) on various dive
trips.</p>
<p>Please do drop me (that's Bob) a line if you would like to
<a href="mailto:bob@bubbleunder.com">submit an image</a> to
this gallery.</p>
<p><img src="gallery/turtle-bite.jpg" width="400" height="258"
alt="A turtle swims comfortably among the coral, despite its
old injury - a large shark bite on one side"/></p>
</div> <!-- end of bodycontent div -->
Save the page and ensure it appears as expected in your browser—like Figure 5.9.
187
Picture This! Using Images on Your Website
.NET PDF SDK - Description of All PDF Processing Control Feastures
Fully featured PDF Viewer in HTML5; Outstanding rendering of PDF documents; Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display;
add bookmarks to pdf preview; create bookmarks pdf
XDoc.Word for .NET, Advanced .NET Word Processing Features
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. Word Create. Create Word from PDF; Create Word
export excel to pdf with bookmarks; acrobat split pdf bookmark
The size of the photo is sensible: at a width of 400 pixels, it fits quite well on the
page without any further adjustment. Soon, I’ll show you how to resize larger photos,
as most photos you take on a digital camera will be far too large for the gallery page.
Figure 5.9. The gallery page taking shape
Formatting the Picture Using CSS
When building image galleries, a common mistake that many people make is to use
agraphics program to create borders around their images. As we saw in Chapter 3,
we can use CSS for border effects; let’s use this technique now. How about a reas-
onably thick, white border, reminiscent of Polaroid snaps?
1. Open
style1.css
and add a new rule for the
img
element, like so:
chapter5/website_files/03_polaroid_effect/style1.css
(excerpt)
img {
border: 15px solid white;
}
2. Save the CSS file, and go back to your web page (
gallery.html
)and refresh it. You
should be looking at a view like the one shown in Figure 5.10.
Build Your Own Website The Right Way Using HTML & CSS
188
XDoc.Excel for .NET, Comprehensive .NET Excel Imaging Features
zooming & rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Excel Convert. Convert Excel to PDF; Convert Excel
add bookmarks to pdf file; pdf create bookmarks
XDoc.PowerPoint for .NET, All Mature Features Introductions
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. PowerPoint Convert. Convert PowerPoint to PDF; Convert
bookmarks in pdf files; creating bookmarks in pdf files
Figure 5.10. The white border gives the photo a Polaroid-like effect
Of course, you’re free to try out any effect you like. Perhaps you’ll experiment using
some of the effects we discussed in Chapter 4. For the purpose of this project site,
I’m going to maintain the white borders. I know it’s a little conservative, but you
can overdo it if you’re not careful.
Beware of the Knock-on Effects
If you go to the home page now, the divers image will also have a thick, white
border around it. Well, we did ask for all images to have a white border—the
browser’s just following orders! If you’d rather keep the white borders to just the
images on the gallery page, you’ll have to be more specific with your selector, so
thattherule will only takeeffect on that page. Don’t worry about itright now—but
don’t forget it, because we’ll dealwith theissue in the section called “Basic Image
Editing”.
Captioning the Picture
Pick up any newspaper, flick through the pages, and you’ll notice that photos are
accompanied by captions. It’s standard practice, so I’m going to show you how we
can implement image captions here. First, let’s think about what information might
189
Picture This! Using Images on Your Website
appear beneath thisphoto. You’ll probably want a description of the photo, perhaps
including a location, and almost certainly crediting the photographer. All these
items could be styled the same way, but I’m going to use two new styles.
When is a 
caption
not a caption?
Strangely, a picture caption element hasn’t always existed in HTML. This may
seem like an oversight, but there is a caption element. However, rather than
captioning photos, that elementis instead used for captioning tables, which we’ll
be looking atin Chapter 6. Two new elementswere introduced inHTML5, namely
figure and figcaption. These would be perfect for the job, if it weren’t for
pesky old Internet Explorer. We need to provide some additional guidance, so
we’ll revisit this in Chapter 10 with our HTML5 makeover. For now, we’ll use
techniques that work in all browsers, and please trust me, these use perfectly ac-
ceptable and valid HTML.
1. In
gallery.html
,remove the opening and closing paragraph tags that surround the
picture of the turtle, and replace them using
<div class="galleryphoto">
and
</div>
tags instead:
chapter5/website_files/04_unstyled_caption/gallery.html
(excerpt)
<div class="galleryphoto">
<img src="gallery/turtle-bite.jpg" width="400"
height="258" alt="A turtle swims comfortably among the
coral, despite its old injury - a large shark bite on
one side"/>
</div>
Build Your Own Website The Right Way Using HTML & CSS
190
2. Next, add a paragraph after the image (but inside the containing
div
), like so:
chapter5/website_files/04_unstyled_caption/gallery.html
(excerpt)
<div class="galleryphoto">
<img src="gallery/turtle-bite.jpg" width="400"
height="258" alt="A turtle swims comfortably among the
coral, despite its old injury - a large shark bite on
one side"/>
<p>This turtle was spotted swimming around the Great Barrier
Reef (Queensland, Australia) quite gracefully, despite
having had a large chunk taken out of its right side,
presumably in a shark attack. [Photographer: Ian
Lloyd]</p>
</div>
3. Finally, let’s add a
span
element around the photo credit part of the caption, so
that we can style it differently:
chapter5/website_files/04_unstyled_caption/gallery.html
(excerpt)
<p>This turtle was spotted swimming around the Great Barrier
Reef (Queensland, Australia) quite gracefully, despite
having had a large chunk taken out of its right side,
presumably in a shark attack. <span
class="photocredit">[Photographer: Ian Lloyd]</span></p>
4. Save
gallery.html
and take a look at the page in your browser. It should resemble
Figure 5.11. You won’t see any real stylistic changes, but it’s important to look
at the page first, so that you can understand why I suggest the changes I’m about
to recommend.
191
Picture This! Using Images on Your Website
Figure 5.11. The picture now has a caption, yet to be styled
It’s common for a picture caption to be displayed in a different font to that of the
document’s main body text; this can apply to the font’s weight and size, too. That’s
the first aspect we’ll change. Secondly, the gap between the text and the photo is a
little too big, so I will show you how we can fix that using the
margin
property. Fi-
nally, I’m going to add a stylistic touch beneath the caption that will help us once
we add more photos to the gallery.
1. Open
style1.css
and add the following CSS:
chapter5/website_files/05_styled_caption/style1.css
(excerpt)
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
This markup makes the necessary changes to the font, reduces the width of the
caption to make it easier to read, removes the spacing immediately above the
paragraph that describes the photo, and decreases the space between the lines
so that it’s more suitable.
Build Your Own Website The Right Way Using HTML & CSS
192
2. Next, add a new rule for the
photocredit
class:
chapter5/website_files/05_styled_caption/style1.css
(excerpt)
.photocredit {
font-weight: normal;
color: gray;
}
This will affect the text contained in the
span
element only.
An Alternative Approach
Incidentally, you could use some selector wizardry to achieve the same effect
without having to use the photocredit class at all. It would look like this:
.galleryphoto p span {
font-weight: normal;
color: gray;
}
This contextual selector translates as “for every span inside a p that’s inside
an element using a class of galleryphoto, make it normal font and gray”. If
you opted for this approach, you could remove the class attribute from the
span element. I’ve suggested using a class selector in this instance for future-
proofing purposes, as you might want to use a photo credit elsewhere in the
site, outside the context of the photo gallery.
3. Save the CSS file, refresh the web page once more, and review your work. It
should look like the page shown in Figure 5.12.
193
Picture This! Using Images on Your Website
Documents you may be interested
Documents you may be interested