itextsharp pdf c# : Create bookmarks in pdf reader control SDK platform web page winforms html web browser Build%20Your%20Own%20Web%20Site%20The%20Right%20Way%20Using%20HTML%20&%20CSS%203rd%20Ed48-part807

Web Developer Toolbar
OrWDT,forthesakeofbrevity!AswithFirebug,therearemanytasksyoucanac-
complishwiththistool,butthere’sahandfulthatyou’llfindyourselfusingagain
andagain.HerearemypicksfromthisexcellenttoolthatIcouldn’tbewithout.
Disable CSS
OneofthefirsttestsIdoonanywebpagewhentryingtoassessadeveloper’sskill
levelisdisableCSS.(Forexample,ifI’mtryingtoestablishwhetherapotential
employeeorcontractorbuildswebsitestherightwayandunderstandswebstand-
ards.)IfapageiscorrectlyputtogetherandusesCSSalonetocontrolthelayout,
colors,sizing,andsoon,disablingtheCSSshouldrevealabasicversionofthepage.
SeeFigure12.20forwhereyoucandisableit.
Figure 12.20. The WDT menu for disabling CSS on a web page
AndtheeffectontheprojectsiteisasIwouldexpectittobe,inFigure12.21.
Build Your Own Website The Right Way Using HTML & CSS
444
Create bookmarks in pdf reader - 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
adding bookmarks to pdf document; bookmark pdf in preview
Create bookmarks in pdf reader - 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
excel hyperlink to pdf bookmark; bookmarks in pdf reader
Figure 12.21. BubbleUnder.com sans CSS—looking rather bare
Atthispoint,I’dnormallyincludeascreenshotofahigh-profilewebsitethatstill
usestablesforlayout,demonstratingjusthowlittleitchangeswhenCSSisdisabled.
Butit’sgrowingharderandhardertofindexamplesofthis—whichisgood,because
itmeansthatpeoplearefinallygettingwiththeprogram!
Thatsaid,ifyoutrythis
Disable CSS
featureonafewsitesthatyouvisitfrequently,
you’resuretoseeexampleswheredisablingthestyleshaslittletonoeffectonthe
pagelayout.(Andthat’sbad,becauseitmeansCSSwasbypassed,tableswereused
inappropriately,andallthestylingisembeddedrightthereonthepage.)
ThisisaWDTfeaturethatIusesooften,Ineveractuallyusethemousetoselect
it;instead,Iusethekeyboardshortcut(
CTRL + Shift + S
,or
CMD + Shift + S
on
aMac),whichallowsmetoquicklydisableandre-enabletheCSS.
Disable JavaScript
InChapter11,wehadanintroductiontoJavaScriptand,specifically,usingthe
jQuerylibrary.WhenyoudostartplayingaroundwithJavaScriptinmoredepth,
the
Disable JavaScript
featurewillbeagreattime-saver—seeinghowyourpagesbehave
withandwithoutJavaScript.Figure12.22showsyouhowtodisableJavaScript.
445
What to Do When Things Go Wrong
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; 'create optimizing options
copy bookmarks from one pdf to another; creating bookmarks pdf
VB.NET PDF File Split Library: Split, seperate PDF into multiple
file into multiple ones by PDF bookmarks or outlines As String = Program.RootPath + "\\" 1.pdf" Dim outputFileName 1 to (Page Count - 1). ' Create output PDF
create bookmark pdf; edit pdf bookmarks
Figure 12.22. WDT lets you disable JavaScript on a web page
Notethatwith
Disable JavaScript
,youneedtoswitchitonfirst;thenrefreshthepage
toseetheeffect.So,usingthegalleryexamplefromChapter11,choose
Disable
>
All JavaScript
.Youshouldseethedefaultviewofthegallerycaptionsthatwe’veseen
allthewaythroughthebook—nobodymissesoutonanyimportantinformation.
Whatoftenhappens,though—andwhatthisfeatureisgreatforidentifying—isthat
peoplewritetheirscriptsinawaythatmeanscontentishiddenbydefault.Ifsuch
contentisviewedinabrowserwithJavaScriptswitchedoff,wholeblocksofuseful
contentmaybeinvisible.Aquickcheckusingthistoolwillrevealthispoorlyim-
plementedJavaScript.
Outline Elements on the Page
InFirebug,Idemonstratedthatyoucanright-clickanythingonthepageandselect
Inspect Element
,whichcanrevealwhatelementyou’relookingat,beita
paragraph
,
table
,or
image
.Anotherwayofviewingthingsistohaveallelementsofacertain
typerevealedtoyou.So,forexample,ifyouwantedtoseeallthe
paragraph
sona
page,youcandothisinWDTbychoosing
Outline
>
Outline Custom Elements
,and
typingin
p
.Figure12.23indicateswhereyoucanfindthismenufeature.
Build Your Own Website The Right Way Using HTML & CSS
446
C# PDF File Compress Library: Compress reduce PDF size in C#.net
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; // create optimizing options
export pdf bookmarks to excel; how to bookmark a pdf file
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.
excel hyperlink to pdf bookmark; create bookmark in pdf automatically
Figure 12.23. Select 
Outline Custom Elements
, and type in the element you want
Asyouwentdowntheoptionsto
Outline Custom Elements
,youmayhavenoticed
somepredefinedchoices,particularlyfortables.Thisisbecausetablesshould
neverbeusedforlayout,andthisisahandywayofidentifyingapagethatmisuses
tablesthisway.Figure12.24exposesasiteusingtablesincorrectly,whichWDTis
abletooutlinequicklyforus.
Figure 12.24. Tables being used for layout—that’s a no-no!
Hide Images or Reveal 
alt
Attributes
An
alt
attributeissupposedtobeanalternativetothe
image
element.Inmost
browsers—butnotIE—ifthe
image
ispresent,youcan’tseethe
alt
attribute.This
canleadtomaintenanceproblems,asyoumightupdatethe
image
,butforgetto
updatetheassociated
alt
attributebecauseit’snotobviouswhenyoulookatthe
page.Bychoosing
Images
>
Display Alt Attributes
inWDT,youcanseethe
alt
attrib-
utesalongsidethe
image
itrelatesto,whichcanreallyhelpidentifymismatches,
asshowninFigure12.25.
447
What to Do When Things Go Wrong
C# Create PDF Library SDK to convert PDF from other file formats
file. Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields.
how to create bookmark in pdf automatically; editing bookmarks in pdf
.NET PDF SDK - Description of All PDF Processing Control Feastures
Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. PDF Create.
delete bookmarks pdf; how to bookmark a pdf document
Figure 12.25. These are definitely not the 
alt
attributes we want for these images
Youcanalsohideimagesentirely,findbrokenimagesonthepage,and—onethat
Iuseoften—hidebackgroundimages.Thislastoneisparticularlyusefulwhenyou
havetextonabackgroundimage.Ifnobackgroundcolorhasbeensettocomplement
thebackgroundimage,youcangetintotrouble,asthistoolquicklyreveals.
Forexample,ifyouhavewhitetextoveradarkbluebackgroundimage,butno
backgroundcolorhasbeenset,you’relikelytohavewhitetextonawhitebackground
whenimagesaredisabled,makingthatsectionillegible.Thistoolcanrevealthis
typeoferrorverypromptly.
Here’sanotherexamplefromtheprojectsite.Thetableheadingsandcells(
th
and
td
)haveapurposelybroken(missing)backgroundcolor,andthetablebackground
Build Your Own Website The Right Way Using HTML & CSS
448
VB.NET Create PDF Library SDK to convert PDF from other file
Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields in Visual Basic .NET application.
copy bookmarks from one pdf to another; export pdf bookmarks to text file
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
pdf bookmarks; adding bookmarks to pdf reader
colorhasbeensettowhite.ThetophalfofFigure12.26showshowitshouldlook,
whilethebottomhalfrevealstheeffectofhidingbackgroundimages.
Figure 12.26. With no background color set, the text in our table headers becomes unreadable
Whiletheinformationinthetablecellsisreadable,thetableheadertextappears
invisible,asit’swhiteonwhite.WDTpromptlyrevealedthisprobleminthepur-
poselybrokenversionoftheeventspage(incodearchiveat
website_files/02_WebDevToolbarExamples/03_NoBackgroundColorSpecified/events.html
).
View Information about CSS and JavaScript
OnefinalfeaturetomentiononWDTisitsabilitytobringupareportonallthe
CSSorJavaScriptthatapageuses.Youcandothisusingthefollowingoptions:
■
CSS
>
View CSS
■
Information
>
View JavaScript
You’llthenbepresentedwithanewtabthatlistsallCSSorJavaScriptonthepage
(dependingwhichoptionyoutook);youcanthenexpandorcollapsetheinformation
tomakeiteasiertoreadandfindwhatyouneed.Itmaynotbeobviousnowwhy
youmightneeditbut,trustme,thisisagreattooltohaveonhandwhenyouneed
toworkoutwhyapageisbroken.Itreallysavesyoutimetrawlingthroughthe
page’ssourcecodeandpickingoutallthereferencestoCSSandJavaScript.
And So Much More …
AswithFirebug,thistoolhasloadsmoretooffer.Andthebestwaytolearnwhat
itcandoistohaveaplay.Forgettheprojectsitefornow—goandvisitapagethat
449
What to Do When Things Go Wrong
youknowquitewellandvisitfrequently,andstarttohaveapokearoundusingthis
tool.Somesuggestionsforyou:
■
Information
>
Display Block Size
■
Information
>
View Document Outline
(agoodwaytocheckonanews/blogarticle)
■
Outline
>
Headings
■
Resize
>
Resize the Window
Oh,thepower!Beforeyoujustlookedatthesewebpages;nowyoucanreallyhave
agooddigaroundandseeexactlyhowthey’vebeenbuilt—and(withasuitably
smuglookonyourface)pickholesinalltheirlittlemistakes!
How to use XRAY
ThefinaltoolthatI’mgoingtotalkyouthroughisthesuper-simpleXRAY.Brought
toyoubythewonderfulpeopleatWestciv—long-standingsupportersofweb
standardsanddoingthingstherightway—XRAYletsyouquicklyanalyzeanyele-
mentonapage.
AsIsaidearlier,thisoneisn’tanextensionthatyouinstall—it’saspecialkindof
bookmarkorfavorite.Or,tousetheparlance,afavelet.Andjustasyoucancallup
afavoritepage,youcansummonupXRAYbyclickingonthisbrowserfavorite.
Whenyoudo,Figure12.27revealswhatyou’llseeonthepage.
12
Figure 12.27. The XRAY start screen
Nowjustclickanywhereonthepage.Whicheverelementyouclickonwillhave
itsinformationdisplayedinthisfloatingpanel.Itmaynottellyoueverythingthat
youneedtoknow(that’swhereFirebugcomesin),butforthepurposesofquickly
checkingsomeHTMLandCSSproperties,it’saperfect,quicksolution.Forexample,
itwilltellyou:
12
Thisishowitlooksatthetimeofwriting,butIknowthatanewversionisinthepipelinethatwill
addmorefeatures,butshould,mostly,appearlikethis.Sodon’tbetoosurprisedifitlooksalittledif-
ferentfromthescreenshotsusedhere.
Build Your Own Website The Right Way Using HTML & CSS
450
■
bordervalues
■
marginvalues
■
paddingvalues
■
heightandwidth
■
xandycoordinates
■
whethertheelementisfloated
■
howtheelementispositioned(
static
,
relative
,or
absolute
)
Thetopofthepanelrevealswhereinthedocumenthierarchyitsitsinabreadcrumb-
trailstyle—ahorizontalprogressionofelements.Youcanevenusethat“bread-
crumb”tojumpupalevel(orseverallevelsatatime)toseewheretheelementis
incontext.Figure12.28showsan
hgroup
elementselected,whileinFigure12.29
aparentelement(
section
)twolevelsupisdepicted.
Figure 12.28. The 
hgroup
element is selected
451
What to Do When Things Go Wrong
Figure 12.29. Two levels up, a parent element is selected
Inaddition,XRAYshowsmarginandpaddingamountsaroundtheelementselected
usingacolorscheme.Thismaybedeliberate(ornot),buthere’showIremember
it:
■
Padding=Pink
■
Margin=Maroon
13
Tryitoutforyourself.OneparticularlyusefulaspectofXRAYthatI’dliketodraw
yourattentiontoiswhereitshowsthe
top
,
left
,
width
,and
height
values.
Noticethattherearetwovalues(oneinparentheses).Sometimesthevalueshere
differ.Whycouldthatbe?Thefirstvalueistheamountthatyou’vesetitto;for
example,takethisCSS:
div.myBox {
width:100px;
padding:10px;
border:2px solid red;
}
Whenclickingona
div
withthis
class
whileXRAYisrunning,youwillseethe
following,asshowninFigure12.30.
13
Okay,soit’sreallypurple,butithelpsmetoremember!
Build Your Own Website The Right Way Using HTML & CSS
452
Figure 12.30. Two values are shown in the XRAY window
ThefirstvalueinXRAYsays100px(whatwasstatedforthe
width
property).The
valueinbracketsistheactualwidth,andcalculatedasfollows:
■
2pxforborder(left)
■
+10pxpadding(left)
■
+100pxwidth
■
+10pxpadding(right)
■
+2pxforborder(right)
■
=124pxtotal
Thisdifferenceinthetwofigurescanoftenpinpointthecauseofproblems.Ifthe
layoutisbusted,perhapssomethingistoowide?XRAYmightrevealthedifference,
andyouthenlooktoseeifthecluesareelsewhereinXRAY’sfloatingpanel(namely
the
padding
,
margin
,or
border
values).
Let’slookatarealexamplebasedontheprojectsite.Inthecodearchiveforthis
chapter(
website_files/03_XRayExamples/01_BlockquoteWidthWrong
),lookatthequote
ontheright-handside.There’snothingobviouslywrongwithit,butifthetotal
widthneededtobe300px,itneedstobeaddressed.BybringingupXRAYand
checkingthe
aside
element,it’sshowingthewidthvalueas300px(322px),evident
inFigure12.31.
453
What to Do When Things Go Wrong
Documents you may be interested
Documents you may be interested