254
HOUR 15:Buttons,Buttons,Buttons
Summary
Buttons are an integral part of a website, both as navigational tools and as design
elements. Knowing how to make and when to use different styles of buttons makes
your life easier as a designer and your sites easier to navigate for the visitors.
Buttons can be anything from simple colored boxes with text inside them to
advanced image-based elements with different graphics for each state. The layout
and design of the page, and what the designer wants out of it, drive the choice of
what kind of button to use.
In this hour, we’ve covered how to create several different types of CSS-based but-
tons. The advantages of CSS buttons are that they are text based and standards
compliant, and a visitor who uses a text-only browser can still see the hyperlinks
within the buttons. In this hour, you learned how to create simple box-type buttons
with interactive features using CSS. You also learned how to take these buttons to
the next level by replacing the solid color backgrounds with images. Finally, you
learned how to use the sliding doors technique to use one image as the base for
multiple different button states. You do this by sliding it in the background to show
different versions of the same button image.
Q&A
Q. I created a second copy of the sliding doors button,but it shows up under-
neath the first one no matter what I do. Why can’t I make these buttons
show up next to each other?
A. Although sliding doors buttons can easily be lined up next to one another,
the one you made in this example cannot do so without each of the but-
tons being put in a separate table cell. The reason for this has to do with
the hiding of the button text, not the sliding doors function.
Workshop
The Workshop has quiz questions and exercises to help you put to use what you just
learned. If you get stuck, the answers to the quiz questions are in the next section.
But try to answer them first. Otherwise, you’ll be cheating yourself.
www.it-ebooks.info
Pdf fillable form - C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#.net, ASP.NET, MVC, WinForms, WPF
Online C# Tutorial to Automatically Fill in Field Data to PDF
convert pdf fill form; pdf signature field
Pdf fillable form - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
convert pdf to fill in form; convert an existing form into a fillable pdf form
Exercise
255
Quiz
1. What happens to a CSS-based button if the CSS style sheet is not loaded or
doesn’t work?
2. When creating the basic and advanced box buttons, do you need to create
separate styles for each of the buttons?
Answers
1. If the CSS style sheet is not loaded or doesn’t work, the CSS-based button
returns to its native state as a standard text link. This means even in sub-
optimal conditions, where things don’t work the way they are supposed to,
your button links will still work—they’ll just look less attractive.
2. No, not unless you want to. The idea behind using CSS to create box but-
tons is that you can apply the same styling and background (either color or
image) to multiple buttons with one set of styles. That way, you can make
quick changes to multiple buttons throughout your site by changing only a
few styles rather than having to change each individual button separately.
You can, however, make individualized buttons with individual back-
grounds or styles by wrapping each button instance in a 
<span>
tag.
Exercise
To give the visitor a visual cue that the button has been pressed before, make styles
for the 
:active
and
:visited
pseudoclasses for all the different CSS buttons you cre-
ated. The 
:active
style usually has a bold appearance (bright colors and dark font),
whereas the 
:visited
pseudoclass is usually more muted than the other styles.
www.it-ebooks.info
C# PDF Field Edit Library: insert, delete, update pdf form field
A professional PDF form creator supports to create fillable PDF form in C#.NET. An advanced PDF form maker allows users to create editable PDF form in C#.NET.
pdf fill form; allow users to attach to pdf form
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Convert multiple pages PowerPoint to fillable and editable PDF documents.
convert pdf forms to fillable; create a pdf with fields to fill in
This page intentionally left blank 
www.it-ebooks.info
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Convert multiple pages Word to fillable and editable PDF documents.
convert word form to fillable pdf; create fillable pdf form from word
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create fillable and editable PDF documents from Excel in Visual
change font in pdf fillable form; convert word form to fillable pdf form
[(H3F)]
257
HOUR  16
Using Code Snippets
What You’ll Learn in This Hour:
. What code snippets are
. How to use the new Snippets panel
. How to use the different code snippets that ship with Expression 
Web SP2
. How to create and edit your own code snippets
One of the many challenges of building websites is the code languages themselves.
Or more specifically remembering the many complicated syntaxes, formulas, and
code configurations used to make certain things happen or create certain effects.
After years of writing web code, the code languages become second nature, but even
then it’s often hard to remember large and complicated blocks of code from project
to project. To help with this process, Expression Web ships with a built-in code snip-
pets function.
Up until the release of Expression Web 4 SP2, this code snippets function was a bit
crude and rudimentary. Activating the code snippets function would give you a list
of available snippets that would be pasted into your code. This worked well enough,
but there was a lot of room for improvement.
Simultaneously, and seemingly unrelated, the earlier versions of Expression Web
also shipped with a panel called Behaviors. This panel carried with it a long list of
legacy functions relying on old and outdated coding practices and complex and
unfriendly code.
Based on input from the Expression Web community and Expression Web MVPs like
myself, the development team decided to make some drastic changes to the snippets
functionality of the application and also include some up-to-date functions and
functionalities in the process to replace the outdated Behaviors panel. The result of
www.it-ebooks.info
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Convert multiple pages PowerPoint to fillable and editable PDF documents. Easy to create searchable and scanned PDF files from PowerPoint.
change font size pdf fillable form; create a pdf form to fill out and save
C# Create PDF from Excel Library to convert xlsx, xls to PDF in C#
Create fillable and editable PDF documents from Excel in both .NET WinForms and ASP.NET. Create searchable and scanned PDF files from Excel.
adding a signature to a pdf form; c# fill out pdf form
258
HOUR 16:Using Code Snippets
this work is the new Snippets panel, which in my opinion is the most important and
most exciting feature of Service Pack 2.
Snippets: An Introduction
The code snippets function in Expression Web 4 SP2 is a powerful but easily over-
looked feature that can and will save you a lot of time and effort once you start
using it. Out of the box, it comes with a long list of useful snippets for HTML, CSS,
JavaScript, jQuery, PHP, and more, and you can create new snippets yourself to
serve your specific coding requirements.
By default, the Snippets panel appears in the top-right pane area behind the
Toolbox tab. To see the Snippets panel, simply click the Snippets tab (see 
Figure 16.1).
FIGURE 16.1
The Snippets
panel docks to
the top-right
panel when it is
opened.
The Snippets panel contains a list of folders, some of which contain snippets and
some of which contain further folders. The default snippets are stored in folders that
correspond with the code language, so CSS snippets live in the CSS folder, HTML
snippets in the HTML folder, and so on.
www.it-ebooks.info
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Convert multiple pages Word to fillable and editable PDF documents in both .NET WinForms and ASP.NET. Convert both DOC and DOCX formats to PDF files.
convert pdf to pdf form fillable; add fillable fields to pdf online
C# Create PDF Library SDK to convert PDF from other file formats
Create fillable PDF document with fields. Load PDF from existing documents and image in SQL server. Load PDF from stream programmatically.
asp.net fill pdf form; convert excel spreadsheet to fillable pdf form
Snippets: An Introduction
259
The snippets are code snippets, so they are used in Code view. To use a code snippet,
you first place your cursor where you want the snippet to appear in Code view and
then use one of two methods to insert the snippet: Either double-click the snippet
directly in the Snippets panel or press Ctrl+Enter to jump to the Snippet search func-
tion and then start typing in the name of the snippet you want to use. The search
function will narrow down your options and display only snippets with names that
match what you have written, as in Figure 16.2.
FIGURE 16.2
The search func-
tion shows only
snippets that
match your
search.
To insert a snippet from a text search, use the arrow keys to highlight the correct
snippet and press Enter. Alternatively, you can simply double-click the highlighted
snippet. You can also reset your search by clicking the X at the right side of the
search area.
When you select a snippet—either by clicking it once with your mouse or by navi-
gating to it with search and the arrow keys—you will see the name, description, and
code output for the selected widget in the preview area at the bottom of the Snippets
panel. This gives you the ability to check whether the snippet is the correct one
before you insert it.
www.it-ebooks.info
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
An advanced .NET control to change ODT, ODS, ODP forms to fillable PDF formats in Visual C# .NET. Online source code for C#.NET class.
create pdf fillable form; add fillable fields to pdf
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Turn ODT, ODS, ODP forms into fillable PDF formats.
adding a signature to a pdf form; create a writable pdf form
260
HOUR 16:Using Code Snippets
Try It Yourself
Use a Snippet to Create a Custom Tooltip
To see how to use the snippets and understand how to make them work, let’s start
by creating a custom tooltip function using a CSS snippet:
1. Create and open a new HTML page called snippetsDemo.html in Split view.
2. At the top of the page, create a paragraph and write MyKipple.com is a
great place to find information about kipple.
3. In Code view, scroll to the top and place your cursor right before the end
</head>
tag. Press Enter to create a few new empty lines.
4. In the Snippets panel, find the Style Block snippet and double-click it to
insert it in the 
<head>
tag. This inserts the standard code block that con-
tains CSS code in HTML pages.
5. With your cursor on the empty line between the beginning and end
<style>
tags, press Ctrl+Enter to make a snippet search. Type Tooltip, and
one snippet is revealed called Tooltip with CSS (see Figure 16.3). Press Enter
or double-click Tooltip with CSS to insert the code snippet.
FIGURE 16.3
After searching
for “Tooltip,”
only one snippet
appears. The
instructions on
how to use the
snippet can be
seen in the pre-
view area at the
bottom of the
Snippets panel.
www.it-ebooks.info
The Default Snippets
261
It would be logical to assume that once we’ve added the snippet, everything should
work automatically. However, that’s not the case. Apart from the jQuery UI Widgets
snippets, which we’ll cover later on in this hour, most of the snippets are just start-
ing points for more work. Case in point, the tooltip snippet does nothing unless we
add the 
.tooltip
class to some content and create a span to contain the tooltip
itself. If you select the Tooltip with CSS snippet again in the Snippets panel and look
at the description in the bottom of the panel, you see the following instructions: “If
you want to display a tooltip, just add the class ‘tooltip’ to an element and write
your Tooltip Text in a span tag within the element.” So let’s do just that:
1. In Code view, find the beginning 
<p>
tag and attach the 
.tooltip
class.
2. Still in code view, place your cursor after the word MyKipple.com, insert a
new
<span>
tag, and write The home of my kipple. Then end with the
</span>
tag.
If you click inside Design view to refresh the page, you’ll see that the new tooltip
does not appear. But if you save the page and preview it in your browser, the tooltip
will appear when you hover over any of the text in the paragraph. This is a very
basic demo of the Tooltip with CSS snippet, and the tooltip itself is not particularly
attractive, but it provides you with the building blocks to create advanced tooltips of
your own simply by adding a class and a span tag to an element (think image).
The Default Snippets
The default snippets shipped with Expression Web 4 SP2 provide a wide range of
effects, functions, and options. Depending on the type of snippet, the usage and
application differs. Here, I’ll walk you through the bulk of them and provide you
with the correct method for using them in your own projects.
CSS Snippets
The CSS snippets are divided into three main folders: Action, Effect, and Text. All the
snippets in these folders provide standard CSS markup that can be inserted either in
the head of the HTML page itself (contained within a standard 
<style>
block pro-
vided by the Style Block snippet) or in a CSS file or external style sheet. To apply a
CSS snippet to an element on the page, you attach the snippet class to that element.
Keep in mind that a lot of these functions are CSS3, meaning they will not work in
all browsers.
www.it-ebooks.info
262
HOUR 16:Using Code Snippets
CSS – Action
.
Replace text with image—The
.replace
class replaces text with a defined
image when text is hovered over.
.
Tooltip with CSS—The
.tooltip
class displays a tooltip wrapped in a
<span>
tag when the containing element is hovered over.
CSS – Effect
.
Box Shadow—The
.boxShadow
class adds a box shadow to the containing
box. The size and color can be changed by changing the values.
.
Circle—The
.circle
class draws a circle with CSS. The size and color can
be changed by changing the values.
.
Horizontal-Vertical align—The
.align
class aligns the element to the hor-
izontal and vertical center of the browser window.
.
Image Button—The
.imageButton
class attached to the input button ele-
ment replaces the default button with a custom image of your choice.
.
Opacity—The
.opacity
class sets the opacity (transparency) of the ele-
ment. 0.0 or 0 is fully transparent; 1 or 100 is fully opaque.
.
Rotate Box—The
.rotate
class rotates the element box by degrees.
.
Rounded Corners—The
.round_border
class adds rounded corners to the
element box.
CSS – Text
.
Change Color of Selected Text—Globally changes the color of text across
the entire page when highlighted with a mouse.
.
Disable Select Text—The
.unselect
class prevents the visitor from select-
ing text in the element for copying and such.
.
First letter in color and uppercase—Globally sets the first letter of each
element red and uppercase. Can be specified by changing style element
from
:first-letter
to
p:first-lettedsdf
, for example.
.
Text Ellipsis—The
.ellipsis
style adds an ellipsis (…) to the end of text
when not all text is displayed due to overflow (the box is too small to dis-
play all text).
www.it-ebooks.info
The Default Snippets
263
.
Text Shadow—The
.text-shadow
class adds text shadow. Limited browser
support at this time.
.
Text Outline—The
.outline
class uses the 
text-shadow
attribute and white
text to create the appearance of outlined text.
Doctypes Snippets
The Doctypes snippets provide the default doctype calls for the standard doctypes
used on the Web today. They are as follows:
.
HTML 4.01 Strict
.
HTML 4.01 Transitional
.
HTML 5 (default in Expression Web 4 SP2)
.
XHTML 1.0 Strict
.
XHTML 1.0 Transitional
.
XHTML 1.1
The doctype is inserted as the first line of code on a page. A page should never have
more than one doctype.
HTML Snippets
The HTML snippets are a mixed bag of 
<head>
and
<body>
snippets:
.
Definition List—Add in 
<body>
. Inserts a standard definition list in the
body of the page. The 
<dt>
tag wraps the definition keyword while the 
<dd>
tag wraps the definition itself.
HTML – Hyperlink
To be added in the 
<body>
of the page:
.
Add to favorites—Creates an “Add to favorites” (that is, bookmark this
page) link to your page.
.
Mail to link—Creates a click-to-email link. Replace “@@email@@” with the
target email address.
.
Open in new window—Creates a link that opens the target in a new page
using JavaScript.
www.it-ebooks.info
Documents you may be interested
Documents you may be interested