Introduction to T4 Site Manager (its-t4sm-1t) 
51 
Figure 82: Insert/Edit Link dialogue box, General tab options 
2. In the Link URL field, type in (or paste) the external website URL (e.g. 
http://www.bbc.co.uk/news for a link to the BBC News website) – if you forget to 
include the http:// prefix a message will pop up asking if you want it added; click 
OK to accept. 
• Target attribute: leave the default option Open in This Window/Frame 
– exceptionally you may change it to Open in New Window (_blank)
• Title attribute: use this to provide additional text to describe the link or 
add useful information about the link. 
For example if you forced a link to open in a new window you could use 
the Title attribute to warn users by saying link opens in new window. 
• Ignore the Class attribute and the other tabs. 
3. Click the Insert button. 
Linking to another Section or content block in Site Manager 
1. Select the text you want to make a link then click on the Insert Section Link 
icon 
in the toolbar (or the Insert Content Link icon 
if you want to link to 
a specific content block within a section). This opens the Choose a section to 
link dialogue box (Figure 83). 
Figure 83: Choose a section to link dialogue box 
2. Using the Site Structure, navigate to the Section you want to link to. 
Convert pdf page to jpg - Convert PDF to JPEG images in C#.net, ASP.NET MVC, WinForms, WPF project
How to convert PDF to JPEG using C#.NET PDF to JPEG conversion / converter library control SDK
change pdf file to jpg online; reader pdf to jpeg
Convert pdf page to jpg - VB.NET PDF Convert to Jpeg SDK: Convert PDF to JPEG images in vb.net, ASP.NET MVC, WinForms, WPF project
Online Tutorial for PDF to JPEG (JPG) Conversion in VB.NET Image Application
convert multiple pdf to jpg; best program to convert pdf to jpg
Introduction to T4 Site Manager (its-t4sm-1t) 
52 
Linking to a non-web document (i.e. an Office or PDF file) 
1. Place the mouse cursor where you want to insert your link and click on the Insert 
Media icon 
This opens the Media Library browser (Figure 84). 
Figure 84: Media Library browser 
2. In the Media Library browser, navigate to the folder containing the file you want 
to link to and click on its name in the Media Name column. 
The file Media Name as well as the file type and size in brackets will be 
automatically used as the link text. 
Linking to an email address (mailto link) 
1. Select the text you want to link to an email address and click on the Insert/Edit 
link button 
2. In the Link URL field type in (or paste) the email address (e.g. 
joe.blog@bristol.ac.uk) and click Insert
3. Click OK when prompted to add the required mailto: prefix
The Site Structure shows the entire University website starting from the 
University homepage. Therefore you can use this method to link to any 
website hosted in T4 Site Manager. 
For other University websites not in Site Manager you will need to use the 
method for linking to external websites. 
The mailto link text should clearly indicate that the link will activate an 
email program. This can be achieved by either using the email address as 
the link (e.g. joe.blog@bristol.ac.uk) or a phrase like Email the School of 
Humanities office. 
If you copy a linked email address from a web page (e.g. from the 
University Contact Directory), make sure you click on the Paste as Plain 
Text button  before pasting. This is particularly important if you use 
Google Chrome as it will force the mail to link to open Google Mail. 
C# Create PDF from images Library to convert Jpeg, png images to
Batch convert PDF documents from multiple image formats, including Jpg, Png, Bmp, Gif, Tiff Any piece of area is able to be cropped and pasted to PDF page.
.pdf to jpg converter online; .net pdf to jpg
C# Image Convert: How to Convert Adobe PDF to Jpeg, Png, Bmp, &
This demo code just converts first page to jpeg image. String inputFilePath = @"C:\input.pdf"; String outputFilePath = @"C:\output.jpg"; // Convert PDF to jpg.
change format from pdf to jpg; change pdf to jpg file
Introduction to T4 Site Manager (its-t4sm-1t) 
53 
7.4 Adding and positioning images 
Selecting an image from the Media Library: 
1. Place the mouse cursor where you want to insert your image (this should be 
either between two paragraph or at the beginning of a paragraph when you want 
to “float” the image to the right – see Right aligning the image: on p.55) and 
click on the Insert Media icon 
to open the Media Library browser. 
Have a play 
Following the instructions above: 
1. Create external links 
 Modify again a content block you created earlier and in the body 
text field create a list with the two following links: 
• English Wine Producers (www.englishwineproducers.com) 
• United Kingdom Vineyards Association 
(www.englishwineproducers.com) 
2. Create internal links 
 Create a link to a page within your training site (make sure you 
select from the training channel – wwwtrain.bristol.ac.uk. 
3. Create a link to a non-web document 
 Create a link to the PDF document in the Media Library training > 
documents category. 
4. Create a link to an email address 
 Create a link to your own email address 
If the Media Library browser opens in View Media in Detailed Mode 
(i.e. as a list as shown in Figure 84 above), switch to View Media in 
Preview Mode (i.e. with thumbnails) as in  
C# Image Convert: How to Convert Tiff Image to Jpeg, Png, Bmp, &
RasterEdge.XDoc.Office.Inner.Office03.dll. RasterEdge.XDoc.PDF.dll. RasterEdge.XDoc. PowerPoint.dll. This demo code will convert first page to jpeg image.
convert pdf file to jpg format; change pdf to jpg
VB.NET PDF Convert to Images SDK: Convert PDF to png, gif images
Convert PDF to Jpg, Png, Bmp, Gif, Tiff and Bitmap in ASP.NET. Dim page As PDFPage = doc.GetPage(0) ' Convert the first PDF page to a PNG file.
change pdf file to jpg; convert pdf to 300 dpi jpg
Introduction to T4 Site Manager (its-t4sm-1t) 
54 
2. In the Media Library browser, find the image you want to insert and select it by 
hovering over the image and clicking Select (Figure 85). 
Figure 85: Selecting an image from the Media Library 
Modifying the image attributes: 
1. Left-click on the image to select it and then right-click to open the context menu, 
select Edit Media Attributes (Figure 86). 
Figure 86: accessing the Media Attributes dialogue box 
This opens the Set Media Attribute dialogue box (Figure 87): 
Figure 87: Setting the media attributes 
VB.NET PDF - Convert PDF with VB.NET WPF PDF Viewer
Image from PDF Page. Image: Copy, Paste, Cut Image in Page. with high quality, support converting PDF to PNG, JPG, BMP and GIF. Convert PDF to Word DOCX document.
convert pdf to jpeg on; convert pdf file into jpg
VB.NET Create PDF from images Library to convert Jpeg, png images
Components to batch convert PDF documents in Visual Basic .NET image formats in VB.NET, including Jpg, Png, Bmp Crop and paste specified image area to PDF page.
convert pdf picture to jpg; changing pdf file to jpg
Introduction to T4 Site Manager (its-t4sm-1t) 
55 
Specifying a description (alternative text) 
2. If relevant (see Top tip below), in the description field enter a short description 
of the image. 
Right aligning the image: 
You can easily align an image to the right of your page with the text on the left 
by applying a style class (note that there is no equivalent class to align images 
to the left). 
For this to work, place the cursor at the beginning of the paragraph with 
which you want to align the image and open the Set Media Attributes dialogue 
box as explained in 1 above. 
3. In the class field, enter one of the following style classes: 
a. align-right when the image is the standard width (283 pixels); 
b. align-right-no-width when the image width is different from 283 pixels. 
4. Click Update and Update again (or Save as Draft) when back in the Content 
tab view. 
Preview the page if you want to see your changes. 
Providing Alt text for non-text elements on a web page is a fundamental 
principle of web accessibility. 
Although this is primarily intended for the benefit of text-to-speech 
software users (i.e. blind people), other users may benefit too (e.g. those 
using a text-only browser). 
To write a good image description (Alt text), ask yourself: 
1. Is the image used as a link? 
Yes: use the description field to describe the image AND use 
the title attribute to indicate what happens when the image is 
clicked (e.g. Opens the Wikipedia entry for…) 
No: continue 
2. Does the image convey important information? 
Yes: 
• if a simple graphic or photograph, use the description field 
to provide a brief factual description of the image; 
• if the image contains text, use the description field to 
provide the exact same text; 
• if a complex image (e.g. graph, pie chart), use the 
description field to provide a short description AND provide 
the information contained in the image as text on the page. 
No: the image is purely decorative (i.e. does not contain useful 
information), you can leave the description field empty. 
For further information, see: webaim.org/techniques/alttext/ 
C# WPF PDF Viewer SDK to convert and export PDF document to other
from PDF Page. Image: Copy, Paste, Cut Image in Page. Link: Edit with high quality, support converting PDF to PNG, JPG, BMP and Convert PDF to Word DOCX document
convert pdf to jpg; best pdf to jpg converter
C# TIFF: C#.NET Code to Convert JPEG Images to TIFF
and REImage object to single or multi-page Tiff image Use C# Code to Convert Jpeg to Tiff. string[] imagePaths = { @"C:\demo1.jpg", @"C:\demo2.jpg", @"C:\demo3
changing pdf to jpg file; changing pdf to jpg
Introduction to T4 Site Manager (its-t4sm-1t) 
56 
7.5 Creating data tables 
Basic table creation 
1. Place the mouse cursor where you want to insert a data table and click on the 
Insert a new table icon 
. This opens the Insert/Edit Table dialogue box and 
shows the General settings (Figure 88): 
Set the options for your table using the General settings as follows: 
• Cols / Rows: sets the number of columns and rows including header 
rows/columns. 
• Cell Padding: adds space between the edges of cells and the text; set it 
to 4 or 5 pixels. 
• Cell Spacing: adds space between cells; best left to 0
• Alignment: sets the horizontal alignment: Left (default), Center and 
Right; best left to default as this can be set in a style sheet. 
• Width / Height: leave blank as this is best left to adjust automatically to 
fit the text. 
• Class: can be used to link to a style sheet. 
• Table Caption: tick this box (you will then need to type a caption above 
your table). 
• Make first row / column a header: defines header rows / columns; your 
table should have a header row, so tick this box, and optionally the 
header column option. 
Have a play 
Following the instructions above: 
 Insert the image you uploaded to the Media Library earlier in one of 
your pages. 
 Apply the relevant class to position it to the right. 
 Update and preview your changes. 
Data tables should be used to present lists of at least two related items 
with two or more categories of information (i.e. at least two rows and two 
columns), and to compare numerical data. 
Introduction to T4 Site Manager (its-t4sm-1t) 
57 
Figure 88: Insert/Edit Table General options 
2. Click Insert
You will now see the outline of an empty table (Figure 89) 
Figure 89: outline of a 4 row, 4 column table with caption 
3. Enter a caption at the top, then the column headers in the first row (optionally 
the row headers in the first column headers) and the data in the other cells. 
Making tables accessible 
Data tables can be difficult (if not impossible) to interpret for text-to-
speech software users (e.g. blind users), particularly when used to 
compare numbers. 
It is therefore an accessibility requirement to ensure that information 
presented in a data table can be understood by the visually impaired. 
See accessibility.psu.edu/tableshtml for further information on data table 
accessibility. 
Introduction to T4 Site Manager (its-t4sm-1t) 
58 
Adding a table summary 
1. Left-click anywhere in the table and then right-click. In the pop-up context menu 
select Table Properties. 
2. In the Insert/Edit Table dialogue box, select the Advanced tab (Figure 90). 
Figure 90: Insert/Edit Table Advanced options 
3. In the Summary field enter a brief description of the table (e.g. Table 
representing the percentages of UK adults who drink wine by age group). 
Leave all other fields empty (in particular do not use the Border Color and 
Background Color as this is better done in a style sheet). 
4. Click Update when done. 
Defining the header row and column 
1. Left-click anywhere on the header row (i.e. the top row) and then right-click. 
Select Cell > Table Cell Properties (Figure 91). 
Figure 91: Selecting the Table Cell Properties 
2. In the Table Cell Properties dialogue box (Figure 92): 
• check that the Cell Type is set to Header; 
• set the Scope option to Column
• select Update All Cells in Row from the drop-down just above the 
Update button; 
Introduction to T4 Site Manager (its-t4sm-1t) 
59 
• click Update when done. 
Figure 92: Table Cell Properties dialogue box 
If the table has a header column on the left, repeat these steps, setting the 
Scope to Row and the drop-down field above the Update button to Update All 
Cells in Column
Defining table head and body 
1. Finally, left-click on the header row again, then right-click and select Cell > 
Table Row Properties
In the Table Row Properties dialogue box (Figure 93): 
• set the Row Type to Header; 
• check that the drop-down option above the Update button is set to 
Update Current Row
• click Update
Figure 93: Table Row Properties dialogue box 
Applying basic styling 
1. Left-click anywhere in the table and then right-click. In the pop-up context menu 
select Table Properties. 
Introduction to T4 Site Manager (its-t4sm-1t) 
60 
2. In the Class attribute, select (value) from the drop-down and type table-basic in 
the now blank field (Figure 94). 
Figure 94: Adding basic styling to a table 
The CSS class table-basic is part of the UoB template stylesheet and 
defines default styling for data tables. 
Have a play 
Following the instructions above: 
 Create a simple data table with a header row and a header column 
using your own or the following data: 
2012 2011 2010 2009 2008 
Red Bordeaux 
10 
10 
White Bordeaux 
Red Burgundy 
White Burgundy 
Caption: French Vintages 2008-2012 
Summary: French vintages score out of 10 from 2008 to 2012 
 Make sure the table is fully accessible. 
 Update and preview. 
Documents you may be interested
Documents you may be interested