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...