c# convert pdf to image : Convert pdf fillable forms Library software class asp.net winforms .net ajax sams_teach_yourself_microsoft_expression_web_4_in_24_hours_2nd_edition31-part2008

294
HOUR 17: Building a Functional Menu
Summary
Menus are important elements for navigation and design. A website with functional
and well-designed menus gives the visitor a more interactive experience and the
website a feeling of professionalism. For this reason and many others, it is important
to know how to make different types of menus, including drop-down menus that
look great and work properly across browsers and platforms.
There are many approaches to creating menus, and in this hour, you learned what I
think is the best and most-solid approach: the pure CSS menu. Not only is this type
of menu “standards based,” but it is easy to manage and future proof (not to men-
tion accessible).
At the end of this hour, you have three different menus: the basic vertical menu, the
basic horizontal menu, and the advanced horizontal drop-down menu. All three were
based on simple standards-based unordered lists and styled with fairly basic CSS.
Hopefully, what you learned by following these lessons is that if you have a firm
grasp of some basic CSS concepts, including the display,float, and visibility
attributes, you can create advanced layout elements with only minimal style code.
The drop-down menu at the end of this hour is as pure and simple as I can make it.
Its basis is a simple unordered list with sublists. This is done for several reasons: It
FIGURE 17.18
The menu items
now have indi-
vidual colored
backgrounds
applied using
custom classes.
www.it-ebooks.info
Convert pdf fillable forms - 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
allow users to attach to pdf form; convert pdf fill form
Convert pdf fillable forms - 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 word document to pdf fillable form; create a pdf form to fill out
Q&A
295
makes the content of the menu accessible regardless of what type of browser the visi-
tor is using; it keeps the styling separate from the content; and it is easy to manage
because all you need to do is edit the lists themselves—the design follows automati-
cally.
The styling you applied to the different menus in this hour was basic and can easily
be expanded and elaborated to create much more advanced looks and designs. The
backgrounds can be replaced by images; you can attach borders, and even classes,
to make each button different from the rest. All this is made possible by the
standards-based approach.
There is no right or wrong when it comes to creating menus, and there are other
techniques available. You can find a tutorial on how to use layers and images to
create a drop-down menu. I have deliberately taken the tutorial out of the main
body of the book because I do not want you to use layers-based menus. They are not
standards based; they are cumbersome; they require JavaScript support; and, most
important, they are hard to modify and redesign. Nevertheless, if you want to use
this type of menu or if you want to get a better understanding of how you can use
layers to create some fairly advanced visibility effects, the tutorial is there for you to
read.
Like I previously said, the menus you made in this hour are as clean as possible,
and they are the ones I use in all the sites I design (with more advanced styling, of
course). You can find a more advanced version of the pure-CSS drop-down menu
that incorporates the necessary JavaScript to solve the IE6 problem by going to
http://www.alistapart.com and searching for Suckerfish menu.
Q&A
Q. You say that the pure-CSS drop-down menu doesn’t work in Internet Explorer
6. Is that something I should worry/care about?
A. The answer to this question depends on who your target audience is. If you
assume your audience is up to date where technology is concerned and is
using equipment that is less than 8 years old (that is, running Windows XP or
a newer operating system), chances are they have upgraded their browser to
either Internet Explorer 7, 8, or 9, in which case this really doesn’t matter.
However, there are certain corporations and users who for one reason or
another do not upgrade their browsers, and for those people, the drop-down
menu won’t work. So, if you are creating a website targeted at users with old
systems or a corporation that uses Internet Explorer 6, you need to add some
JavaScript to your menu to make it work for your target users.
www.it-ebooks.info
C# Create PDF Library SDK to convert PDF from other file formats
Free PDF creator SDK for Visual Studio .NET. Batch create adobe PDF from multiple forms. Create fillable PDF document with fields.
convert pdf to form fillable; create fillable forms in pdf
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
Convert OpenOffice Text Document to PDF with embedded Create PDF document from OpenOffice Presentation in both ODT, ODS, ODP forms to fillable PDF formats in
attach file to pdf form; create a fillable pdf form from a word document
296
HOUR 17: Building a Functional Menu
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 the questions first. Otherwise, you’ll only be cheating yourself.
Quiz
1. What CSS attribute is used to make the items in an unordered list appear side-
by-side rather than under one another?
2. If you have a menu with a submenu, what selector name do you give to the
style that controls the links in the list items of the submenu?
Answers
1.
display: inline;
2.
#menuName ul li ul li a
Exercise
Create a new submenu for the Menu Item Five buttons. Make at least five new
menu items for the submenu. Link the buttons in the different menus to random
websites to see how they work.
www.it-ebooks.info
C# PDF Field Edit Library: insert, delete, update pdf form field
provide best ways to create PDF forms and delete PDF forms in C#.NET framework project. A professional PDF form creator supports to create fillable PDF form in
convert word doc to fillable pdf form; c# fill out pdf form
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Convert OpenOffice Spreadsheet data to PDF. Export PDF document from OpenOffice Presentation. Turn ODT, ODS, ODP forms into fillable PDF formats.
create fillable form pdf online; create fill pdf form
HOUR  18
Dynamic Web Templates
What You’ll Learn in This Hour:
.
How to create a Dynamic Web Template
.
How to create a new page from a Dynamic Web Template
.
How to apply a Dynamic Web Template to an existing page
.
How to edit a Dynamic Web Template and the files created from it
Most websites consist of more than a single page. The whole idea behind creating the
World Wide Web was the ability to make numerous documents available and then link
them together rather than presenting them all at the same time. But this causes a prob-
lem: If you have a website with multiple pages and you want to make a design change to
all these pages, you have to update each page individually. If your site has only a few
pages this is not a problem, but what if it has tens or even hundreds of pages?
In the past, updating large sites was a daunting task because each page contained all the
styling information. As a result, webmasters rarely updated designs, and sites quickly
became outdated. The introduction of Cascading Style Sheets (CSS) solved many of these
problems because the designer could now put the styling code in a separate document and
modify this file for sitewide changes. This was a huge step forward and paved the way for
a new generation of site models, including blogs.
However, wouldn’t it be great if you could take that principle one step further and set your
site up so that one file controlled not just the styles but the common elements of all the
pages, such as headers, footers, and main menus? This question is already answered in
the form of Dynamic Web Templates (commonly known as DWTs).
A DWT is a special type of file built using HTML and CSS to define which areas of a page
a publisher might edit and which areas are off limits to regular page building. After a
DWT exists, you can use it to build new pages in which all you need to do is input new
content in the predefined areas without having to worry about all the common elements
www.it-ebooks.info
VB.NET Create PDF Library SDK to convert PDF from other file
Best VB.NET component to convert Microsoft Office Word Create and save editable PDF with a blank page Create fillable PDF document with fields in Visual Basic
create a fillable pdf form; create pdf fillable form
C# PDF Text Box Edit Library: add, delete, update PDF text box in
Able to create a fillable and editable text box to PDF Since RasterEdge XDoc.PDF SDK is based on .NET framework ASP.NET web service and Windows Forms for any
acrobat fill in pdf forms; create fillable form pdf online
298
HOUR 18: Dynamic Web Templates
present in every page. More important, when you have multiple pages built using a
DWT, you can change the composition and layout of all the pages by making
changes to only the DWT file. In other words, using DWTs makes global alterations
to a website a snap.
In this hour, you learn how to build a DWT and create new pages based on it. You
also learn how to make changes to the DWT and its children, and how to apply a
DWT to an existing page. The most important lesson of this hour is that using DWTs
wisely can have a huge positive impact on your workload and make updating mul-
tipage websites nearly as easy as editing a single page.
Dynamic Web Templates
When you design a website, you should always consider the following question:
How do I make sure it is easy to update the look and functionality of every page
within the site? Depending on the scale of the project and the kind of content you
are presenting, the answer to this question is different:
.
If you are creating a small-scale site with only a few pages (fewer than ten)
and multiple different layouts and designs, you can go with straightforward
HTML pages with one or several style sheets attached.
.
If your site is (or could become) larger and you have one or two layouts to
implement sitewide, creating pages based on DWTs is an effective solution.
.
If your site has a high number of pages or constantly updated dynamic con-
tent (think an online paper or magazine, a forum, a blog, or a site with multi-
ple authors), the best solution is to use a Content Management System (CMS)
that generates pages dynamically with server-side script and a database. This
option is for advanced users only.
For the large majority of sites, the second and third options are the best choice
because they provide easy page construction and quick sitewide design changes.
Blogs, Forums, and Content Management Systems
If you are ready to move beyond the basics, take some time and familiarize your-
self with the most common Open Source blogging platforms, forums, and CMSs.
With these technologies in your toolkit, you will be well equipped to provide clients
with a wide range of services and options for their websites.
One of the great things about Open Source software is that because it is devel-
oped by the users, the programs are always evolving, and someone is always out
there with an answer for you when you run into a difficult problem. For this
www.it-ebooks.info
▼ 
Dynamic Web Templates
299
Try It Yourself
Creating a Dynamic Web Template
To get a firmer grasp on what a DWT is and how it works, you build a DWT for the
MyKipple.com website based on the default.html page.
Before you begin, replace the current default.html, kippleStyles.css, and layout.css
files in your site with the new ones found in the lesson files for this hour. The new
files include more styling to make the overall look and feel of the pages more pol-
ished. All the changes to the files are based on the lessons you have already com-
pleted. If you take a closer look at the code in the kippleStyles.css file, you see that
you can recognize most of (if not all of) the different styling elements. Also, import
the two images menuBG.png and footerBG.png and place them in the Graphics
folder.
reason, the best place to start learning about these technologies is the home
page of the project.
If you are new to web design, entering into the world of dynamic web technolo-
gies can be a seemingly daunting task. However, it isn’t as complicated as it
seems. If you want to learn about CMSs and how database-based dynamic web-
sites work, a good place to start is actually the blogging platform WordPress.
WordPress (www.wordpress.org) was originally a basic blogging platform that over
time has grown into a full-fledged publishing platform or CMS. I use it as the
base of most of my clients’ sites and for blogs. The benefit of using WordPress
is the seemingly endless variety of plug-ins that enable you to expand the plat-
form to do whatever you want as well. What is great about WordPress is that it is
built with the user in mind, so it can be as easy or as complicated as you want it
to be. Furthermore, it can work as either a blogging platform, a CMS, or both—
it’s totally up to you. Finally, the look and feel of WordPress is created using
standards-based code and CSS, meaning that you can use the techniques
learned in this book to completely redesign your WordPress-based sites. 
For more information on how to do this, visit my blog at 
www.designisphilosophy.com. 
As an added bonus, WordPress has excellent Search Engine Optimization (SEO)
built in, meaning that sites built using the platform are easily found on Google
and other search engines. That in itself is a huge selling point.
WordPress is not the only option available, and it might not be the platform you
are looking for. Other popular platforms include PHPBB Forum (www.phpbb.com),
on which the vast majority of web forums are built, and the two full-scale CMSs
Joomla! (www.joomla.org) and Drupal (drupal.org), both of which also offer
extensive customization and expandability.
www.it-ebooks.info
300
HOUR 18: Dynamic Web Templates
1. With the new default.html page open in Design view, click File, Save As on the
menu bar. In the Save As dialog, change the file type to Dynamic Web
Template (.dwt) and name the new file mykippleMaster.dwt. This creates a
new DWT.
2. With the mykippleMaster.dwt page open in Split view, delete all the text con-
tent in the #mainContent div (see Figure 18.1). You can do this by highlight-
ing the text and deleting it in Design view, or by highlighting all the content
between the beginning and end <div id=”mainContent”> tags and deleting
it in Code view. Make sure you leave the #centeredBG,#wrapper,#header,
#mainMenu, #content, and #footerdivs intact.
FIGURE 18.1
After deleting
the content
within the 
#content
div,
you should still
see the
#centeredBG
,
#header
,
#menu
,
#content
,and
#footer
divs in
Design view.
3. Place the cursoron the first line inside the 
#mainContentdiv, and use the Style
drop-down menu from the Common toolbar to set the style of the line to Heading
2 (h2). Press Enter to create a new paragraph underneath (see Figure 18.2).
4. Place the cursor inside the first line (
h2) and from the menu bar select Format,
Dynamic Web Templates, Manage Editable Regions.
5. The Editable Regions dialoglets you add and remove editable regions within
your DWT. Under Region Name, type heading and click the Add button (see
Figure 18.3). This creates a new editable region called heading. Click Close to
apply the changes.
www.it-ebooks.info
Dynamic Web Templates
301
FIGURE 18.2
Add two empty
text lines in the
#mainContent
div: the first one
with the 
h2
style
and the second
one with the 
p
style.
FIGURE 18.3
The Editable
Regions dialog
lets you add and
remove editable
regions.
6. Place your cursorinside the paragraph on the next line, and click the 
<p>tag
in the Quick Tag Selector to select the entire line, including the tags. From the
menu bar, select Format, Dynamic Web Template, Manage Editable Regions to
open the Editable Regions dialog again.
7. Create a new editable region called 
contentand click Close to apply the
changes. You now have two regions within the page, outlined in orange in
Design view (see Figure 18.4).
www.it-ebooks.info
302
HOUR 18: Dynamic Web Templates
Heading
editable
region
Content
editable
region
FIGURE 18.4
The Editable
Regions heading
and content are
inserted into the
DWT.
How Dynamic Web Templates Work
Now that you have created a DWT, let’s look at how it works. Looking at the page
in Code view, you see that it looks pretty much the same as the original file with the
exception of a few new lines of commented-out code. The new elements tell
Expression Web 4 that a specific DWT controls the page. The elements are com-
mented out because they are not HTML code but rather custom script designed
specifically to work with Expression Web 4. As a result, they have no actual func-
tion when a browser displays the page. Also, like other commented content, the
code is ignored. But when the application opens the page, they link the DWT and
its children together.
In the body of the document are several code segments that tell Expression Web 4
which areas are locked and which areas are editable. When you create a DWT from
scratch, you get a standard HTML page with two editable regions: doctitle and
body. As the names suggest, the doctitleregion holds the <title>tag in the head
portion of the page, and the body region holds the body of the page. The same
thing happened when you converted the default.html page to a DWT: Expression
inserted the doctitle region into your page at the end of the <head> tag.
▲ 
www.it-ebooks.info
Dynamic Web Templates
303
The beginning and end codes are commented out because they are not HTML and
their sole purpose is to help Expression Web 4 to define the editable regions. For
example, the doctitle editable region looks like this in Code view:
<!-- #BeginEditable “doctitle” -->
<!-- #EndEditable -->
Expression Web 4 considers anything within these two code snippets editable.
Because code that is invisible to browsers defines the editable regions, you can
choose how much you want to micromanage the content within them. The two
editable regions you inserted in the mykippleMaster.dwt page serve as good exam-
ples of this.
If you select the heading region in Design view and look at the code, you see that
the editable region is contained within the h2 tags:
<h2><!-- #BeginEditable “heading” -->(heading)<!-- #EndEditable --></h2>
That means whatever content you place inside the editable region will be styled with
theh2 style. As a result, when building a page based on this DWT, the designer can-
not change the style of this content. Expression Web 4 placed the editable region
inside the <h2> tags because you placed the cursor inside the h1 area before insert-
ing it.
With the paragraph, the content region is placed on the outside of the style tags,
like this:
<!-- #BeginEditable ”content” --><p>(content)</p><!-- #EndEditable -->
As a result, the content within the region is not yet styled and the designer can
apply other tags and styles at will. 
Understanding the difference between these two methods of inserting editable
regions means that the designer of the DWT has almost unlimited control of the
output that comes from pages created with the template.
Try It Yourself
Create a New Page from a DWT
When you have a DWT, creating new pages for your project becomes much easier.
The DWT contains all the common elements that all pages should feature, and all
you need to do is insert the page-specific content. Because HTML is the basis for the
DWT, all the CSS styling you attach to the DWT is available in your new page.
www.it-ebooks.info
Documents you may be interested
Documents you may be interested