how to download pdf file from folder in asp.net c# : Excel pdf bookmarks control Library system azure asp.net winforms console dw8_udl_pdi_070-part1791

Creating a modern, standards-compliant website  
using <div> tags, CSS, and Templates 
The following training module was developed in collaboration with the office of Computer 
Training and Support Services (CTSS), a division of Academic Computing and Networking 
Services (ACNS), at Colorado State University. It grew out of a desire to incorporate universal 
design principles and emerging web design standards into the University’s basic training 
program for web page design using Dreamweaver software. 
The module is comprised of a series of exercises, each lesson building on the previous one, 
culminating in a complete website. Along the way, many principles of universal design and best 
practices will be explained and employed. 
At key points, you will be asked to switch to a new set of files. Although switching to the new 
files is optional, it will insure that your work matches the descriptions and illustrations in the 
text. To switch to a new set of files, simply modify the site settings to point to the appropriately 
numbered folder (refer to page 6 for instructions about defining a website in Dreamweaver). The 
folder numbers are indicated in the text with red icons as follows: 
, etc. 
Please note: These lessons were designed for use with Dreamweaver version 8. Older and newer 
versions of the software may be not correspond to the instructions and illustrations provided. 
Objectives 
Upon completion of this module, the user will: 
•
Understand the importance of adhering to web standards and universal design practices 
•
Understand the importance of designing for diverse technologies and user requirements 
•
Be able to create a simple, standards-compliant website using XHTML, <div> tags, and 
cascading style sheets 
•
Be able to create a Dreamweaver template and generate a website from it 
•
Understand the difference between “fixed-width” and “liquid” layouts, and the pros and 
cons of each 
•
Be able to create a more complex 3-column layout using the above techniques 
•
Know where to find key web development resources available at CSU 
Creating a modern, standards-compliant website 
Page 1 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Excel pdf bookmarks - 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
convert word pdf bookmarks; bookmarks pdf reader
Excel pdf bookmarks - 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
export pdf bookmarks to text file; create pdf with bookmarks from word
Table of Contents 
Define a new website............................................................................................. 5
Create the basic page layout.................................................................................. 6
Create a new web page............................................................................................................6 
Give the page a title................................................................................................................6 
Save the document..................................................................................................................6 
What is a <div> tag?...............................................................................................................7 
Insert div “header”..................................................................................................................7 
Insert div “navigation”............................................................................................................8 
Insert divs “content” and “footer”...........................................................................................8 
Insert additional <div> tags to the header ............................................................ 8
Adding Content to the <div> tags........................................................................ 10
Insert logos into the header...................................................................................................10 
Add links to header graphics.................................................................................................10 
Add the navigation list..........................................................................................................11 
Create links for the unordered list items...............................................................................11 
Add the footer text................................................................................................................11 
Add dummy content..............................................................................................................12 
Add the “Skip to main content” link.....................................................................................12 
Preview in a web browser.....................................................................................................12 
Link to default style sheet.....................................................................................................12 
Link to navigation style sheet...............................................................................................12 
Metadata................................................................................................................................13 
“Validate Before You Replicate”..........................................................................................14 
Templates ............................................................................................................ 14
Save design.html as a Template............................................................................................14 
Create an editable region within the template.......................................................................15 
Generate pages of website................................................................................... 15
Create a new page from the Template ..................................................................................15 
For each page of the site…...................................................................................................15 
Modify individual pages........................................................................................ 16
Home Page............................................................................................................................16 
Staff Page..............................................................................................................................16 
Training Page........................................................................................................................18 
FAQ Page..............................................................................................................................19 
Services Page........................................................................................................................21 
Modify the template ............................................................................................. 21
Add an email link to the footer.............................................................................................21 
Add a “date stamp” in the footer...........................................................................................21 
Link to JavaScript source file ...............................................................................................22 
Attach the Horizontal Navigation style sheet to the template...............................................23 
Attach the Print style sheet to the template...........................................................................23 
Creating a modern, standards-compliant website 
Page 2 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
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
delete bookmarks pdf; add bookmarks to pdf
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.
how to create bookmarks in pdf file; editing bookmarks in pdf
Attach 3-D menus.................................................................................................................24 
Save changes and test page...................................................................................................24 
Two types of layouts: “Fixed-width” and “liquid”................................................. 25
Create a “fixed” layout..........................................................................................................25 
Create a “liquid” layout ........................................................................................................26 
Create a 3-column layout..................................................................................... 28
Familiarization exercise........................................................................................................28 
Create a new template based on our previous work..............................................................28 
Alter the markup (the structure) of the new template...........................................................28 
Add new div elements, one for each column........................................................................28 
Insert the “messagebox” div that will contain special announcements ................................28 
Disable style rendering in Dreamweaver..............................................................................29 
Get new text for page............................................................................................................29 
Apply markup to the text ......................................................................................................29 
Add photos to the section “Department in the News!”.........................................................29 
Apply a style rule (called a “custom class”) to each image..................................................29 
Create some “null links” for Column 3.................................................................................30 
Add sub-menu items.............................................................................................................30 
Apply links to each of the new list items..............................................................................30 
Re-enable Style Rendering ...................................................................................................30 
Update links to style sheets...................................................................................................30 
Switch back to Design view..................................................................................................31 
Save the template (File > Save or Ctrl+S) and close it.........................................................31 
Create a new page from the template....................................................................................31 
Preview the page in the browser...........................................................................................31 
Review the 3-column exercise.............................................................................. 31
Appendix 1: Cascading Style Sheets ............................................... 32 
What are cascading style sheets? ........................................................................ 32
CSS rules...............................................................................................................................32 
Breaking it down.................................................................................................. 32
Anatomy of a rule.................................................................................................................32 
Anatomy of a declaration......................................................................................................32 
Grouping selectors and rules.................................................................................................33 
Categories of CSS selectors.................................................................................. 34
Type selectors .......................................................................................................................34 
Class selectors.......................................................................................................................34 
ID selectors ...........................................................................................................................34 
The Universal selector ..........................................................................................................34 
Pseudo-elements ...................................................................................................................34 
Pseudo-classes.......................................................................................................................34 
Editing style sheets.............................................................................................. 35
The “cascade”...................................................................................................... 35
Creating a modern, standards-compliant website 
Page 3 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
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.
create pdf bookmark; bookmark pdf in preview
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
adding bookmarks in pdf; excel pdf bookmarks
Three Locations for CSS ....................................................................................... 35
In an external file..................................................................................................................35 
Inside the <head> element....................................................................................................35 
Inside the <body> element....................................................................................................35 
Conclusions...........................................................................................................................35 
Tip for designing with style sheets....................................................................... 36
The CSS box model............................................................................................... 36
CSS syntax........................................................................................................... 37
Standard notation..................................................................................................................37 
Shorthand notation................................................................................................................37 
Shorthand notation for box dimensions................................................................................37 
Appendix 2: Resources ................................................................... 39 
CSU resources for web developers....................................................................... 39
XHTML and CSS references, tutorials, and tools................................................... 39
Books ....................................................................................................................................39 
Web Links (by category) ......................................................................................................39 
XHTML Specification......................................................................................................39 
Cascading Style Sheets (CSS) ..........................................................................................39 
Liquid Layout/multiple columns.......................................................................................39 
Multi-Column layout ........................................................................................................40 
CSS menus........................................................................................................................40 
CSS Table formatting .......................................................................................................40 
CSS Tutorials....................................................................................................................40 
HTML validator................................................................................................................40 
CSS Validator...................................................................................................................40 
Creating a modern, standards-compliant website 
Page 4 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
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
creating bookmarks pdf; how to add bookmarks to a pdf
.NET PDF SDK - Description of All PDF Processing Control Feastures
bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. PDF Create. Create PDF from Word (docx, doc); Create PDF from Excel
bookmarks pdf files; how to bookmark a page in pdf document
Define a new website 
1.  Go to Site > New Site…  
2.  Click on Advanced tab at the top 
3.  Enter “Practice” for the site name. 
4.  Click on the Browse button (the folder icon) to point to the local root folder. 
•
Open the folder Userdata\DW8_Practice\ and click “Select.” 
5.  Click on the Browse button (the folder icon) to point to the default images folder. 
•
Open the folder Userdata\DW8_Practice\assets\images\ and click “Select.” 
6.  Make sure the “Links relative to: Document” option is selected. 
7.  Make sure the “Enable cache” option is checked. 
8.  Click OK to complete the site definition. 
Creating a modern, standards-compliant website 
Page 5 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
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
how to add bookmarks on pdf; create bookmark pdf file
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
pdf create bookmarks; bookmark page in pdf
In Dreamweaver’s Files panel, note the site structure: 
Practice (Root) 
assets 
css 
images 
javascript 
Resources 
various Word and Excel documents 
Templates 
currently empty 
Create the basic page layout 
Create a new web page. 
1.  Choose File > New… 
2.  Select the General tab 
3.  Select Category: “Basic page,” and Basic page: “HTML” 
4.  Make sure the Document Type (DTD) is “XHTML 1.0 Transitional” 
5.  Click Create 
Give the page a title 
Each web page has a 
<title>
tag. This tag is used by web browser software to identify and 
bookmark the page, so it’s important how you name your document. The best practice for 
naming pages is to put repeating information at the end of the title. For example, the title 
Faculty Information – Civil Engineering Department – Colorado State University 
will yield a more useful bookmark than 
Colorado State University Department of Civil Engineering – Faculty Information 
1.  In the Title box at the top of the screen, enter the following: 
Computer Training and Support Services - Colorado State University 
2.  Press the Enter key. 
Save the document.  
Save the page as “design.html” This page will become the template; it will not be used per se. 
A note about web design 
It is generally a mistake to begin designing a page or site before carefully considering the 
structure of your content—how you will prioritize and sequence key information. Begin by 
marking up the text to give structure to the document. For example, insert 
<div>
tags that will 
divide the content of your page. Once content structure has been determined, you can begin to 
consider the aesthetics of your design. 
Creating a modern, standards-compliant website 
Page 6 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Create the four primary divisions 
What is a <div> tag? 
It is important to recall that HTML is a “markup language.” Markup provides structure and order 
to your content. For example, the 
<p>
tag breaks text up into blocks that are interpreted by the 
web browser as paragraphs. Similarly, the <h1> tag indicates a level 1 header, the 
<a>
tag creates 
an anchor or link, and so on. 
Another markup tag of great importance is the 
<div>
tag. A “div” divides your document into 
logical sections. For training purposes, we will be using four main 
<div>
tags. Keep in mind that 
websites can contain any number of 
<div>
tags and/or nested 
<div>
tags. The primary 
<div>
tags we will create are: 
•
header 
•
navigation 
•
content 
•
footer 
A 
<div>
tag can be inserted in several ways. One 
method involves Dreamweaver’s Insert menu:   
Insert > Layout Objects > Div Tag. 
Another way is to click the Insert Div Tag button on the 
Insert Toolbar. 
For this example, let’s use the Insert Div Tag button 
from the Insert Toolbar. 
Insert div “header” 
Click on the Insert Div Tag button and 
enter the following information in the 
dialog box: 
Insert:  At insertion point 
ID:  header 
Click OK. 
Note: The 
<div>
tags we will create all have a unique identifier or “ID.” This ID is used to 
connect page elements with style rules. IDs can also be used by JavaScript to create interactive 
behaviors. 
Creating a modern, standards-compliant website 
Page 7 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Your page should look similar to this: 
Insert div “navigation” 
Click on the Insert Div Tag button and enter the following information in the dialog box: 
Note the “After tag” option! 
Insert:  After tag <div id="header"> 
ID:  navigation 
Insert divs “content” and “footer” 
Repeat this process for the remaining two 
<div>
tags, “content” and “footer.” 
For each new div, be sure to select Insert: After tag along with the previous ID name. For 
example, when creating the div “content,” choose “Insert: After tag <div id="navigation">.” 
Once all four divisions have been created, your canvas should look like this: 
Insert additional <div> tags to the header 
The header will contain two graphics: the CTSS logo and the CSU logo. Each graphic requires 
its own formatting, so we will wrap each it in its own 
<div>
tag. 
Click on the Insert Div Tag button and enter the following information in the dialog box: 
Note the “before end of  tag” option! 
Insert:  before end of tag <div id="header"> 
ID:  ctsslogo 
Creating a modern, standards-compliant website 
Page 8 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
For the second logo, repeat with the following information: 
Insert:  before end of tag <div id="header"> 
Note the “before end of  tag” option! 
ID:  csulogo 
When complete, your page should look like this: 
In Dreamweaver’s Design view it is impossible to see how the divs “ctsslogo” and “csulogo” are 
nested inside the div “header.” To see the hierarchy of 
<div>
tags more clearly, switch to Code 
view, as shown below: 
The 
<div>
tags should look like this: 
Notice how the two logo 
<div>
tags appear between the opening and closing tags for the header. 
Switch back to Design view to continue. 
Save the page 
Choose File > Save (Ctrl+S). Give the page the name “design.html” 
Hey, where’s all the style? 
Admittedly, the page doesn’t look like much at this stage! That’s because we are focusing our 
efforts on creating useful structure rather than an attractive visual appearance. Aesthetics 
certainly are important, and we will spend a time working with cascading style sheets (CSS) to 
make the page look more pleasing. It is important to remember this rule: First give your content a 
logical structure, then make it look pretty. Content is king! 
Creating a modern, standards-compliant website 
Page 9 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Adding Content to the <div> tags 
Insert logos into the header 
1.  Select the text “Content for id "ctsslogo" Goes Here” (triple-click to select the text) 
2.  Press the Delete key to remove the text 
3.  Select “Common” from the Insert toolbar menu (or the tab “Common” if in tab view) 
4.  Click the Insert image icon 
a.  Image: assets/images/ctss_logo.gif 
b.  Alt text: “Computer Training and Support Services home page” 
5.  Repeat same steps for CSU logo 
a.  Image: assets/images/csu_logo.png 
b.  Alt text: “Colorado State University home page” 
Your page should now look like this: 
Note on alternative text:  Each of the two images will serve as a link to another page. Therefore 
our alternative text refers to the links’ destinations rather than to the graphics themselves. It’s the 
intent of the images on the page that matters, and in this case they are pointers to other pages. 
Add links to header graphics 
The CTSS logo 
1.  Open browser and copy the URL of the CTSS home page: http://www.ctss.colostate.edu/
. 
2.  Return to Dreamweaver 
3.  Select the CTSS logo 
4.  Click in the link field 
5.  Paste the URL  
6.  Press Enter 
The CSU logo 
1.  Repeat these steps to obtain the link for the CSU logo. The URL is: 
http://welcome.colostate.edu/
Creating a modern, standards-compliant website 
Page 10 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Documents you may be interested
Documents you may be interested