Drupal 7 User Manual

12/16/2015 User Manual

BASIC USER GUIDE TO DEVELOP A WEBSITE IN
DRUPAL CONTENT MANAGEMENT SYSTEM

Punjab Information Technology Board, Government of Punjab

1. LOGIN..........................................................................................................................................................................1
2. CREATING BASIC PAGE ................................................................................................................................................1

2.1 SELECT CONTENT TYPE .....................................................................................................................................................1
2.2 CREATE PAGE .................................................................................................................................................................2
2.3 MENU SETTINGS ............................................................................................................................................................. 3
2.4 URL PATH SETTINGS ........................................................................................................................................................ 3
2.5 CREATING LINKS.............................................................................................................................................................. 3
3 INSERT TABLE ..............................................................................................................................................................5
3.1 TABLE PROPERTIES .......................................................................................................................................................... 5
4 INSERT IMAGES ...........................................................................................................................................................6
4.1 UPLOAD IMAGE .............................................................................................................................................................. 6
4.2 INSERT IMAGE IN BODY.....................................................................................................................................................6
5 FILE ATTACHMENT.......................................................................................................................................................8
5.1 UPLOAD FILE..................................................................................................................................................................8
5.2 LINK FILE WITH TEXT ........................................................................................................................................................ 8
6 ADDING ANCHORS ....................................................................................................................................................10
6.1 CREATING THE ANCHOR ..................................................................................................................................................10
6.2 CREATING LINK TO ANCHOR.............................................................................................................................................10

1

Go to your website, enter user name, password and answer the security math challenge. Click on the login
button.

At the top left side of the website, click on “Add content” link

2.1 Select Content type

An overlay window will open with different content types mentioned, select “Basic Page”

1

2.2 Create Page

Give your page a Title

Select Input format as “Full HTML” under Body area

Enter data is the body region but make sure if you copy some data from a website word document or any other
source, first paste the data is notepad and then copy it from notepad and paste it in body region. At the top of
body region there is “WYSIWYG Toolbar” which contain controls to format data or insert images, tables etc.

2

2.3 Menu Settings

In the Menu Settings check “Provide a menu link” check box. Enter Menu link title and select Parent item from
the drop down list.

2.4 URL path settings

In URL path settings enter an “URL alias” for the page

Now click the “Save” button.

2.5 Creating Links

Linking to pages in Drupal is very similar to linking with standard HTML. The link itself is standard HTML, but
there are different ways to link to documents so it is important to review this material.

 Select the text that you want to use as the link.
 Click on the Link icon on the WYSIWYG toolbar. The Insert/edit link dialog displays.

3

 Enter page URL or other website URL of the site in the Link URL field.
 In the Target field, select Open in new window, if it is an external website or page.
 Click on the OK button to close the dialog and see your link.

4

In the “WYSIWYG Toolbar” click on the insert table icon

3.1 Table Properties

Table properties pop up window will open. Set number of Rows and Columns and set the width of the table as
100%. Set cell spacing, border size and cell padding as zero.

5

To insert images in the drupal content, there is an images field under the body. Image size and type must match
the requirement mentioned in the image field.

4.1 Upload Image

 Click on the “browse” button
 Select the image you want to upload
 Click on the “upload" button
Once the image is uploaded, a thumbnail of the image with the name appears in the image field

4.2 Insert Image in body

 Right click on the thumbnail of the image
 Select “Copy image” from the properties menu

 Place the cursor in the body where you want to insert the image
 In the “WYSIWYG Toolbar” click on the insert image icon. An “Image Properties” pop window will open

6

 Right click in the URL text field and click paste, image url will be pasted there.
 The image url needs to be amended

o Original URL will look like:
http://lhr.pitb.gov.pk/system/files/styles/thumbnail/private/Desert.jpg?itok=3RGFshiT

o Now remove the highlighted part of the url. The remaining url will look like:
/system/files /Desert.jpg

 Set the height and width of the image and click “Ok”.

7

To attach files in the drupal content, there is a files field under the body. File size and type must match the
requirement mentioned in the image field.

5.1 Upload File

 Click on the “Choose Files” button
 Select the file you want to upload
 Click on the “upload" button
Once the file is uploaded, the file field shows the uploaded file

5.2 Link File with text

 Right click on the file name where the file is uploaded
 Select “Copy link address” from the properties menu

 Select the text, you want to link the file with
 Select link control from “WYSIWYG Toolbar”
 Paste the link address in the URL field
 The file url needs to be amended

8

o Original url will be like:
lhr.pitb.gov.pk/system/files/AB1461012.pdf#overlay-context=y1Gk3Ri7w8C/3/permissions

o Remove the highlighted part of the url. Remaining url will be like:
/system/files/AB1461012.pdf

o In the Target field, select Open in new window

9

There may be times when you want to create a link at the top of a page that points to a location in a lower
portion of the page. If this is the case, you can use anchors to create the links

 Add an anchor tag to the location on the page you want to link to
 Add a link with that anchor tag name to the text or image that will be the link.

6.1 Creating the anchor

 Place your cursor in the location where you want to locate the anchor.
 Click on the Anchor icon in the “WYSIWYG” toolbar.

 The Insert/edit anchor dialog displays
 Enter the name of the anchor using a term that describes the place or location of the anchor.
 Click the OK button. An anchor icon displays in front of the text where your cursor was located.

6.2 Creating link to anchor

 Select the text you want to link with to the anchor
 Select link icon in the “WYSIWYG” toolbar.
 Select “Link to anchor in the text” from the link type
 Select the anchor you created from the list of Anchor

Names
 Click OK button and the link to the anchor will be added

to the text.

10