Adding Images

In this blog we'll add an image to our demo-hello page.

 

Prerequisites

(1) Complete the Hello World exercise and have your responsive design web site ready at http://localhost/dbnetrd. 

(2) Complete the Resource Files exercise.

Your developer tools are at: http://localhost/dbnetrd?ac=dev 

Your RD web site's physical folder is at: c:\inetpub\wwwroot\dbnetrd

Your theme file is at c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css

 

Objectives

Add an image to your demo-hello page and test the responsive behaviour.

 

Add an image  

Find a png image having a width greater than 600px on your PC and save it as: c:\inetpub\wwwroot\dbnetrd\res\demo\images\test.png

Navigate to http://localhost/dbnetrd?ac=dev and open your Responsive Design Form Designer.

Open your file "hello".

Click the word "hello" on the page and press CTRL+K to insert new HTML text "Lorem ipsum".

Click the new text "Lorem ipsum" and press CTRL+Q to bring up the HTML editor. Delete the words "Lorem ipsum".

Click the image icon to insert an image.  In the URL field enter:

../res/demo/images/test.png

Delete the height and width values (this will make the image responsive), save and close the dialog.

Press ALT-S to save and ALT-L to publish your page.

 

Test Point

In a new Chrome browser TAB, make sure that Chrome developer tools are open (F12) and navigate to http://localhost/dbnetrd?dbpage=demo-hello

Press CTRL+F5 to refresh the page.  You should see your image on the page.  Resize the browser window

 

Tip

Always save your images in your

c:\inetpub\wwwroot\dbnetrd\res\WORK_FOLDER\images folder.

In this example "WORK_FOLDER" is "demo".

In inserting an image into a page, always use the url:

. ./res/WORK_FOLDER/images/IMAGE_NAME

In this example IMAGE_NAME is test.png...