Download
1 / 23
240 likes | 281 Views
Images: HTML and CSS. The Bells page without images in Source View and Design View. Add code for a background image to the body’s style. The attribute is background-image and the value is the name of the image file inside parentheses and after “ url ” (uniform resource location).
E N D
The Bells page without images in Source View and Design View
Add code for a background image to the body’s style The attribute is background-image and the value is the name of the image file inside parentheses and after “url” (uniform resource location).
Embedded versus referred to • When one inserts an image in a Word document, the image is embedded into the Word document. As a result if you want someone to view the document, you only need to send one file – the Word document. • When one inserts an image in an HTML document, the image is referred to by the HTML document. As a result if you want someone to view the document, you must send two files – the HTML document and the image file.
Relative versus Absolute Path • When the HTML document refers to the image file, it provides a path so that the image file can be located. • A file’s path may be absolute (a complete (full) path or an explicit, full URL, e.g. http://www.lasalle.edu/index.htm) or relative (a shorter path that starts with the same location as the file doing the referring). • Image files are generally referred to by a relative address. • Because the URL attribute value used before did not include “http://”, it is a relative address. • Because there was no reference to a folder, it means that the image file is in the same folder as the HTML file.
Folders above and below. • Code like background-image: url(images/PoeBack.jpg); implies that there is a folder named images at the same level as the HTML file and that folder contains an image file named PoeBack.gif • Code like background-image: url(../PoeBack.jpg); implies that the HTML file is in a subfolder that is in another folder and that the higher-level folder contains an image file named PoeBack.gif
Portability issue • Typically one does not develop web pages on the web server (the computer that will make the page available to users). Thus there should be no explicit reference to the file structure of the computer on which the page was developed. • That is, code like url(file:///var/images/image1.jpg) is bad
Go to View/Toolbox if you don’t already have the toolbox. Expand the HTML toolbox.
Go to View/Property Window if you don’t already have a Property Window
Result of dragging from the image icon in the toolbox to the top of the body
Click in the region next to source in the Properties Window and then on the button
Find the desired image file using the dialog box. Then click OK.
Add some image styling – in particular its position and width
