asp.net pdf viewer control : Disable pdf thumbnails software Library cloud windows .net html class htmlp20-part1436

For additional written instructional guides, visit us @ http://www.calstatela.edu/handouts
Creating a Web Page Using HTML 
Part 2: Adding Multimedia to the Page 
I
NFORMATION 
T
ECHNOLOGY 
S
ERVICES
California State University, Los Angeles 
Version 1.1 
Summer 2009 
Contents 
Introduction ................................................................................................................................... 2
 
Downloading the Data Files ......................................................................................................... 2
 
Launching the Program ............................................................................................................... 2
 
Creating Title Text ........................................................................................................................ 3
 
Creating a New Row in the Main Table ..................................................................................... 3
 
Creating a CSS for the Title Property ......................................................................................... 3
 
Entering the Title and Setting the CSS Class.............................................................................. 4
 
Inserting a Picture......................................................................................................................... 5
 
Checkpoint One ............................................................................................................................. 5
 
Saving the Page as a Template ..................................................................................................... 6
 
Creating an Image Gallery ........................................................................................................... 6
 
Creating a New Page for an Image Gallery ................................................................................ 6
 
Adding Content to the Page ........................................................................................................ 7
 
Changing the Title ................................................................................................................... 7
 
Creating a Table for the Thumbnails ...................................................................................... 7
 
Inserting the Thumbnails into the Table Cells ........................................................................ 8
 
Linking the Thumbnails to the full-sized images ................................................................... 8
 
Checkpoint Two ............................................................................................................................ 9
 
Inserting a Flash Document into the Page ................................................................................ 10
 
Checkpoint Three........................................................................................................................ 11
 
Disable pdf thumbnails - software Library cloud:C# PDF Thumbnail Create SDK: Draw thumbnail images for PDF in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
Disable pdf thumbnails - software Library cloud:VB.NET PDF Thumbnail Create SDK: Draw thumbnail images for PDF in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
Introduction  
Web sites can be created by using one of many coding languages (e.g., HTML, JSP, PHP, ASP, 
ASP.net, or Perl). Among those languages, HTML is the most basic text-based language that has 
been used in Web design since 1989. HTML consists of two parts: 1) content that will be 
displayed in a Web browser and 2) markup or tags, which are encoded information that is 
generally hidden from Web page viewers. This three-part workshop series will help students 
create a basic Web site using fundamental HTML knowledge that they can build on with more 
advanced techniques. 
This second part builds upon the Web page that was started in the first workshop. A template 
will be created so that new pages can be quickly created. This handout focuses on adding 
multimedia objects to the page, by first creating an image gallery, adding a Flash movie, and 
embedding a sound file. Also, basic usage of programs such as Flash will be introduced in this 
handout. 
Downloading the Data Files 
This handout includes sample data files that can be used for hands-on practice. The data files are 
stored in a self-extracting archive. The archive must be downloaded and executed in order to 
extract the data files. 
The data files used with this handout are available for download at 
http://www.calstatela.edu/its/training/datafiles/htmlp2.exe
.  
Instructions on how to download and extract the data files are available at 
http://www.calstatela.edu/its/docs/download.php
Launching the Program 
Notepad will remain as the editor of choice. 
To launch notepad: 
1.  Click the 
Start menu
button 
►All Programs
►Accesories
► Notepad
(see 
Figure 1).  
Figure 1 – Starting Notepad 
Creating a Web Page Using HTML, Part 2
2
software Library cloud:C# PDF File Permission Library: add, remove, update PDF file
File: Compress PDF. Page: Create Thumbnails. Page: Insert PDF Choose to offer PDF annotation and content extraction Enable or disable copying and form filling
www.rasteredge.com
software Library cloud:VB.NET PDF File Permission Library: add, remove, update PDF file
File: Compress PDF. Page: Create Thumbnails. Page: Insert PDF Choose to offer PDF annotation and content extraction Enable or disable copying and form filling
www.rasteredge.com
2.  Select the 
File
menu 
► Open
3.  Open the “index.html” file from the student data file directory. 
Creating Title Text 
For each page of the Web site, a title text is nice addition. It can quickly explain what the content 
of the page displays. 
C
REATING A 
N
EW 
R
OW IN THE 
M
AIN 
T
ABLE
Since there isn’t a row for content yet on the page, a new table row and cells will be created to 
accommodate everything. 
To create a new table row: 
1.  Open the file “index.html” from the student data file directory.  
2.  Place the cursor after the 
</tr>
representing the Menu bar row (this can be identified by 
the contents of the <td> tags, with several hyperlinks pointing to different pages that are 
to be created.) and press 
[Enter]
(see Figure 2). 
Figure 2 – Getting Started Creating a New Table Row 
3.  Type 
[<tr>]
[Enter] 
to create a line break, 
[<td>]
[Enter]
to create another line break, 
[</td>]
[Enter]
, and 
[</tr>] 
(see Figure 3). 
Figure 3 – New Table Row 
C
REATING A 
CSS
FOR THE 
T
ITLE 
P
ROPERTY
Like with all elements of the page, the title can be created and modified with CSS. A new CSS 
style will be created for the page. 
To create a new CSS style: 
1.  Locate the last (}) in the heading section after the last created CSS style and create a new 
link below it. 
2.  Type 
[.title_text {] 
and press 
[Enter]
to create a line break. 
3.  Type 
[font-family: Geneva, Arial, Helvetica, sans-serif;]
and press 
[Enter]
to create a 
line break. 
4.  Type 
[font-size: 24px;]
and press 
[Enter]
to create a line break. 
5.  Type 
[font-style: italic;]
and press 
[Enter]
to create a line break. 
Creating a Web Page Using HTML, Part 2
3
6.  Type 
[line-height: normal;]
and press 
[Enter]
to create a line break. 
7.  Type 
[font-weight: bolder;]
and press 
[Enter]
to create a line break. 
8.  Type 
[color: #CC6600;]
and press 
[Enter]
to create a line break. 
9.  Type 
[text-decoration: none;]
and press 
[Enter]
to create a line break. 
10. Type 
[}]
and press 
[Enter]
to create a line break (see Figure 4). 
Figure 4 – .title_text CSS Style 
E
NTERING THE 
T
ITLE AND 
S
ETTING THE 
CSS
C
LASS
With the title_text CSS style defined, it can now be used for the page titles. 
To enter the title and use the new CSS class: 
1.  Place the cursor after the <td> that was created in the previous section. 
2.  Type 
[<font class=“title_text”>]
to define the font class. 
3.  Type 
[<div align=“left”>]
to align everything to left. 
4.  Type the title 
[Welcome to my Homepage]
5.  Close out the font tag by entering 
[</font>] 
(see Figure 5). 
6.  Press 
[Ctrl]+[S]
to save the file. 
7.  Open the “index.html” file in a Web browser to preview it (see Figure 6). 
8.  Close the Web browser after previewing. 
Figure 5 – Code View 
Figure 6 – Previewing the Page 
Creating a Web Page Using HTML, Part 2
4
Inserting a Picture 
Pictures are great ways to enhance the Web page. They can explain something far quicker than 
text and add a bit of variety to the page. A picture will be used to outline the Welcome title that 
was just made. 
To insert a picture: 
1.  Place the cursor after the “Welcome to my Homepage” text and press 
[Enter]
to create a 
line break. 
2.  Type 
[<br>]
to create a line break. 
3.  Type 
[<img src="images/gradient_bar.jpg" />]
(see Figure 7). 
4.  Open the file in a Web browser to preview the changes. 
5.  Close the Web browser after previewing. 
Figure 7 – Inserting a Picture 
Figure 8 – Previewing the Page 
Checkpoint One 
Use this time to make sure that the page that has been created is consistent with the steps. See 
Figure 8 for a visual reference and Figure 9. Open the file “checkpoint_1.html” from the data 
file folder, if there is any major difference. 
Creating a Web Page Using HTML, Part 2
5
Figure 9 – Checkpoint One Code 
To open the checkpoint_1.html file (only if necessary): 
1.  Select the 
File
menu 
► Open
2.  Change the Files of type: to All files. 
3.  Locate the student data file directory. 
4.  Select the “checkpoint_1.html” file. 
5.  Click 
Open
6.  Save the file as “index.html” in the student data file directory. 
Saving the Page as a Template 
Since a Web site consists of more than one page, additional pages will need to be used to 
content. A template allows for a base model for extra pages. This will save time as the graphics, 
menu, and framework do not have to be recreated each time a new page is added to the Web site. 
For the purpose of this workshop, a copy of the file will be saved as a template file.  
To save a page as a template: 
1.  Select the 
F
ile
menu 
► Save A
s…
2.  Name the file: “page_template.html”
3.  Click 
Save
Creating an Image Gallery 
An image gallery is an effective way to share photos and other pictures with friends, families, co-
workers, etc. With an image gallery thumbnails will be used to represent the full size images 
which will be displayed when the thumbnails are clicked. 
C
REATING A 
N
EW 
P
AGE FOR AN 
I
MAGE 
G
ALLERY
With a page template ready and the menu setup for the additional pages of content, an image 
gallery page can now be incorporated into the Web site. From the previous workshop, a link was 
Creating a Web Page Using HTML, Part 2
6
created to a not yet made image gallery page. This page will now be created and the image 
gallery will be created there. 
To create a new page: 
1.  Open the template file (“page_template.html”) if it is not already currently opened. 
2.  Select the 
F
ile
menu 
Save A
s…
3.  Ensure that the Save as t
ype is set to: All files. 
4.  Name the file: “pictures.html”
5.  Ensure that the save location is the same as the file “index.html”
6.  Click 
Save
A
DDING 
C
ONTENT TO THE 
P
AGE
Since the template page is currently a generic page, a single change has to be made before adding 
in the image gallery. The title text “Welcome to my Homepage” will have to be changed to 
represent the image gallery. Also, a table has to be made to accommodate the thumbnails. 
Changing the Title 
Since this page will be the picture gallery page the page title must be changed. 
To change the page title: 
1.  Locate the “Welcome to my Homepage” text and select it. 
2.  Replace the text with 
[Picture Gallery]
Creating a Table for the Thumbnails 
Though the entire page is contained within a table, another table can be embedded into it for 
further flexibility. 
To create a new table: 
1.  Place the cursor after the image tag for the gradient bar (“<img 
src="images/gradient_bar.jpg" />”) and press 
[Enter]
to create a line break. 
2.  Type 
[<table width="100%" border="10" cellspacing="0" cellpadding="0">]
3.  Type 
[<tr>]
and press 
[Enter]
to create a line break. 
4.  Type 
[<td></td>]
and Press 
[Enter]
to create a line break. 
5.  Repeat step 4 four times to create four more cells for additional images. 
6.  Type 
[</tr></table>]
to close the table row and table (see Figure 10). 
NOTE
: For Figure 10, a blank space character (&nbsp;) was added to each of the table cells for 
illustration purposes. 
Figure 10 – Creating a Table for an Image Gallery 
Creating a Web Page Using HTML, Part 2
7
Inserting the Thumbnails into the Table Cells 
With the cells created. The Thumbnails can be inserted into each cell so that they can then be 
linked to the full size images in the image folder. 
To insert the images into the table cells: 
1.  Place the cursor between the first “<td></td>” that was created in the previous section. 
2.  Type 
[<img src=“images/tn_cat_1.jpg” width=“125” height=“94”>]
3.  Place the cursor between the second “<td></td>” that was created in the previous section. 
4.  Type 
[<img src=“images/tn_cat_2.jpg” width=“125” height=“94”>]
5.  Place the cursor between the third “<td></td>” that was created in the previous section. 
6.  Type 
[<img src=“images/tn_cat_3.jpg” width=“125” height=“94”>]
7.  Place the cursor between the fourth “<td></td>” that was created in the previous section. 
8.  Type 
[<img src=“images/tn_cat_4.jpg” width=“125” height=“94”>]
9.  Place the cursor between the fifth “<td></td>” that was created in the previous section. 
10. Type 
[<img src=“images/tn_cat_5.jpg” width=“125” height=“94”>]
(see Figure 11). 
Figure 11 – Adding the Thumbnails 
Linking the Thumbnails to the full-sized images 
With the thumbnails inserted into the page and in place, they can now be used as hyperlinks for 
the full sized image. Thus, once the viewer of the page clicks on the image, the full-sized image 
will appear. The links that will be created will appear in a new browser window. 
To link the thumbnails to the full-sized images: 
1.  Place the cursor before the <img> tag for the thumbnail tn_cat_1.jpg. 
2.  Type 
[<a href=“images/cat_1.jpg” target=“_blank”>]
3.  Place the cursor after the <img> tag for the thumbnail tn_cat_1.jpg. 
4.  Type 
[</a>]
to close out the hyperlink tag. 
5.  Place the cursor before the <img> tag for the thumbnail tn_cat_2.jpg. 
6.  Type 
[<a href=“images/cat_2.jpg” target=“_blank”>]
7.  Place the cursor after the <img> tag for the thumbnail tn_cat_2.jpg. 
8.  Type 
[</a>]
to close out the hyperlink tag. 
9.  Place the cursor before the <img> tag for the thumbnail tn_cat_3.jpg. 
10. Type 
[<a href=“images/cat_3.jpg” target=“_blank”>]
11. Place the cursor after the <img> tag for the thumbnail tn_cat_3.jpg. 
12. Type 
[</a>]
to close out the hyperlink tag. 
13. Place the cursor before the <img> tag for the thumbnail tn_cat_4.jpg. 
14. Type 
[<a href=“images/cat_4.jpg” target=“_blank”>]
15. Place the cursor after the <img> tag for the thumbnail tn_cat_4.jpg. 
Creating a Web Page Using HTML, Part 2
8
16. Type 
[</a>]
to close out the hyperlink tag. 
17. Place the cursor before the <img> tag for the thumbnail tn_cat_5.jpg. 
18. Type 
[<a href=“images/cat_5.jpg” target=“_blank”>]
19. Place the cursor after the <img> tag for the thumbnail tn_cat_5.jpg. 
20. Type 
[</a>]
to close out the hyperlink tag (see Figure 12). 
Figure 12 – Hyperlinking the Thumbnails 
Checkpoint Two 
Use this time to make sure that the page that has been created is consistent with the steps. See 
Figure 14 for a visual reference and Figure 13. Open the file “checkpoint_2.html” from the data 
file folder, if there is any major difference. 
To open the checkpoint_2.html file (only if necessary): 
1.  Select the 
File
menu 
► Open
2.  Change the Files of type: to All files. 
3.  Locate the student data file directory. 
4.  Select the “checkpoint_2.html” file. 
5.  Click 
Open
Figure 13 – Checkpoint 2 Code 
Creating a Web Page Using HTML, Part 2
9
Figure 14 – Checkpoint 2 Browser View 
Inserting a Flash Document into the Page 
Flash animations can bring motion and interactivity to the page. They can be used as an 
introduction page, as an embedded movie, or even as a custom menu. Thus it may be important 
to be able to incorporate this into a Web page whenever necessary. When pasted into an HTML 
page the flash document is considered an object. 
To insert a Flash document into the page: 
1.  Open the file “flash.fla” in Flash. 
2.  In Flash, Select the 
File
menu 
► Publish
. Several new files will be created (flash.swf, 
which will be embedded into the page, and flash.html, which contains the code that needs 
to be copied into the HTML page). 
3.  Return to Notepad. 
4.  Open the newly created file “flash.html” from the student data file directory. 
5.  Select the text <object> tag as well as all of the code before the </object> closing tag (see 
Figure 15). 
6.  Select the 
Edit
menu 
► Copy 
to copy the code. 
Figure 15 – Selecting the Object Tag 
7.  Close the document “flash.html” and return to the document “pictures.html”
8.  Place the cursor after the </table> tag that was created in the picture gallery section of 
this handout. 
Creating a Web Page Using HTML, Part 2
10
Documents you may be interested
Documents you may be interested