{"id":23,"date":"2018-02-08T16:13:36","date_gmt":"2018-02-08T16:13:36","guid":{"rendered":"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/?post_type=chapter&#038;p=23"},"modified":"2019-04-23T21:27:25","modified_gmt":"2019-04-23T21:27:25","slug":"chapter-2-files-and-links","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/chapter\/chapter-2-files-and-links\/","title":{"raw":"Chapter 2 - Files and Links","rendered":"Chapter 2 &#8211; Files and Links"},"content":{"raw":"Since a web page may have numerous linked files, like image and style sheets, and hyperlinks to other pages, file organization is very important.\r\n\r\nA basic website will reside in a folder on a server that readers access through a universal resource locator (URL)<span>\u2014<\/span> the web address that they type on their browsers. To load without being specifically named, the first page, or home page, on your site must reside in the main, or root, folder, and be called \u201cindex.htm\u201d or \u201cindex.html.\u201d\r\n<h2><strong>File Organization<\/strong><\/h2>\r\nA convenient way to organize a basic site is to make folders to hold the other web pages, images, style sheets, and JavaScript\u00a0if present (<span style=\"color: #ff0000\"><strong>Figure 2-1<\/strong><\/span>). Links (<strong><span style=\"color: #ff0000\">Figure 2-2<\/span><\/strong>) to these other elements need to be specified using the directory path on the server. For example:\r\n<ul>\r\n \t<li>Going down: If you place an image, \u201cimage.jpg,\u201d that resides in a folder, \u201cimages,\u201d then you must specify &lt;img src=\u201cimages\/image.jpg\u201d&gt;, including the folder followed by a forward slash in the file specification.<\/li>\r\n \t<li>Going up: If in another page of your site, that\u2019s contained in a folder, \u201cHTML,\u201d you want to use the same image, you must first specify an upward path from the \u201cHTML\u201d folder into the root folder, &lt;img src=\u201c..\/images\/image.jpg\u201d&gt;. The two periods and slash tell the browser to go up one folder and then down into the \u201cimages\u201d folder.<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_693\" align=\"aligncenter\" width=\"517\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png\" alt=\"Screenshot of a directory listing.\" width=\"517\" height=\"267\" class=\"wp-image-693 \" \/><\/a> <strong>Figure 2-1.<\/strong> File organization of a simple web site into a root folder with an index.html file and folders for style sheets (css), other pages (html), and JavaScript (js).\u00a0<span><span class=\"il\">Adobe\u00a0<\/span>Dreamweaver\u00ae\u00a0<\/span><span>screenshot(s) reprinted with permission from\u00a0<\/span><span class=\"il\">Adobe<\/span><span>\u00a0Systems Incorporated.<\/span>[\/caption]\r\n\r\n<strong style=\"font-family: Roboto, Helvetica, Arial, sans-serif;font-size: 1.2em\">Hyperlinks<\/strong>\r\n\r\nOther pages can be linked using hyperlinks of two types:\r\n<ul>\r\n \t<li>Relative hyperlinks are to pages on the same server, such as \u201cpage2.html\u201d in <strong><span style=\"color: #ff0000\">Figure 2-2<\/span><\/strong>. Example of a relative link: &lt;a href=\u201chtml\/page2.html\u201d&gt;Page 2&lt;\/a&gt;.<\/li>\r\n \t<li>Absolute hyperlinks go to a link on a different server, usually someone else\u2019s page on the web. An absolute link: &lt;a href=\u201chttp:\/\/www.ryerson.ca\u201d&gt;Ryerson University&lt;\/a&gt;.<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_249\" align=\"aligncenter\" width=\"619\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/2.2_DW-W_Links.png\" alt=\"Code for linking relative hyperlinks to pages on the same server.\" width=\"619\" height=\"319\" class=\"wp-image-249 size-full\" \/> <strong>Figure 2-2.<\/strong> Examples of code for linking to embedded files and images.\u00a0<span><span class=\"il\">Adobe\u00a0<\/span>Dreamweaver\u00ae\u00a0<\/span><span>screenshot(s) reprinted with permission from\u00a0<\/span><span class=\"il\">Adobe<\/span><span>\u00a0Systems Incorporated.<\/span>[\/caption]\r\n<h2><strong>Dreamweaver\u2019s Site Manager<\/strong><\/h2>\r\nDreamweaver\u2019s Site Manager (Site &gt; Manage Sites) provides a convenient way to manage sites (Exercises). The root folder is displayed in the Files palette (Window &gt; Files, <span style=\"color: #ff0000\"><strong>Figure 2-3<\/strong><\/span>). After creation and editing, files and folders can be uploaded to the server with a built-in file transfer protocol (FTP) utility.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_380\" align=\"aligncenter\" width=\"242\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/DW-P_Files.png\" alt=\"Root folder displayed on Dreamweaver\u2019s Site Manager.\" width=\"242\" height=\"299\" class=\"wp-image-380 size-full\" \/> <strong>Figure 2-3.<\/strong> Dreamweaver\u2019s File palette.\u00a0<span><span class=\"il\">Adobe<\/span>\u00ae Dreamweaver\u00ae\u00a0<\/span><span>screenshot(s) reprinted with permission from\u00a0<\/span><span class=\"il\">Adobe<\/span><span>\u00a0Systems Incorporated.<\/span>[\/caption]\r\n\r\n<div class=\"bcc-box bcc-info\">\r\n<h3 itemprop=\"educationalUse\">Using Dreamweaver\u2019s Site Manager<\/h3>\r\n<strong>How to use Dreamweaver's Site Manager<\/strong>\r\n<ol>\r\n \t<li>Make a site folder for your site and organize any desired subfolders.<\/li>\r\n \t<li>Dreamweaver &gt; Site &gt; Site Manager.<\/li>\r\n \t<li>New Site &gt; enter Site Name &gt; click the folder icon to the right of Local Site Folder.<\/li>\r\n \t<li>Browse to the root folder you created, select, click Choose.<\/li>\r\n<\/ol>\r\n&nbsp;\r\n\r\n<strong>Linking to a Server<\/strong>\r\n<ol>\r\n \t<li>In Site Manager, click Servers.<\/li>\r\n \t<li>Contact your site administrator for FTP settings to use.<\/li>\r\n<\/ol>\r\n&nbsp;\r\n\r\n<strong>Using the File Palette (Figure 3)<\/strong>\r\n<ol>\r\n \t<li>Open the File palette: Window &gt; Files.<\/li>\r\n \t<li>You can view various root folders on the local or remote computer (server).<\/li>\r\n \t<li>To connect to the server, click the plug icon in the upper left corner.<\/li>\r\n \t<li>If you change the file structure in the root folder, click the Refresh button.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<h2><strong>Site Maps<\/strong><\/h2>\r\nA site map (<span style=\"color: #ff0000\"><strong>Figure 2-4<\/strong><\/span>) is a diagram of the pages and hyperlinks in your site. It shows how readers will be able to navigate from one page to another by clicking on hyperlinks. A site map is useful in planning your site and determining the arrangement of files.\r\n\r\n[caption id=\"attachment_250\" align=\"aligncenter\" width=\"600\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-1024x512.png\" alt=\"An organizational diagram displaying hyperlinks that the reader is able to navigate to from the Home Page. \" width=\"600\" height=\"300\" class=\"wp-image-250\" \/> <strong>Figure 2-4.\u00a0<\/strong>A simple example of a site map. Hyperlinks will enable the reader to navigate from the Home Page to pages 1, 2, and 3, and to an external website, by clicking links. Created by Richard Adams. Licensed CC BY 4.0.[\/caption]\r\n\r\n&nbsp;","rendered":"<p>Since a web page may have numerous linked files, like image and style sheets, and hyperlinks to other pages, file organization is very important.<\/p>\n<p>A basic website will reside in a folder on a server that readers access through a universal resource locator (URL)<span>\u2014<\/span> the web address that they type on their browsers. To load without being specifically named, the first page, or home page, on your site must reside in the main, or root, folder, and be called \u201cindex.htm\u201d or \u201cindex.html.\u201d<\/p>\n<h2><strong>File Organization<\/strong><\/h2>\n<p>A convenient way to organize a basic site is to make folders to hold the other web pages, images, style sheets, and JavaScript\u00a0if present (<span style=\"color: #ff0000\"><strong>Figure 2-1<\/strong><\/span>). Links (<strong><span style=\"color: #ff0000\">Figure 2-2<\/span><\/strong>) to these other elements need to be specified using the directory path on the server. For example:<\/p>\n<ul>\n<li>Going down: If you place an image, \u201cimage.jpg,\u201d that resides in a folder, \u201cimages,\u201d then you must specify &lt;img src=\u201cimages\/image.jpg\u201d&gt;, including the folder followed by a forward slash in the file specification.<\/li>\n<li>Going up: If in another page of your site, that\u2019s contained in a folder, \u201cHTML,\u201d you want to use the same image, you must first specify an upward path from the \u201cHTML\u201d folder into the root folder, &lt;img src=\u201c..\/images\/image.jpg\u201d&gt;. The two periods and slash tell the browser to go up one folder and then down into the \u201cimages\u201d folder.<\/li>\n<\/ul>\n<figure id=\"attachment_693\" aria-describedby=\"caption-attachment-693\" style=\"width: 517px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png\" alt=\"Screenshot of a directory listing.\" width=\"517\" height=\"267\" class=\"wp-image-693\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure.png 784w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure-300x155.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure-768x396.png 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure-65x33.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure-225x116.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/directory_structure-350x180.png 350w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/a><figcaption id=\"caption-attachment-693\" class=\"wp-caption-text\"><strong>Figure 2-1.<\/strong> File organization of a simple web site into a root folder with an index.html file and folders for style sheets (css), other pages (html), and JavaScript (js).\u00a0<span><span class=\"il\">Adobe\u00a0<\/span>Dreamweaver\u00ae\u00a0<\/span><span>screenshot(s) reprinted with permission from\u00a0<\/span><span class=\"il\">Adobe<\/span><span>\u00a0Systems Incorporated.<\/span><\/figcaption><\/figure>\n<p><strong style=\"font-family: Roboto, Helvetica, Arial, sans-serif;font-size: 1.2em\">Hyperlinks<\/strong><\/p>\n<p>Other pages can be linked using hyperlinks of two types:<\/p>\n<ul>\n<li>Relative hyperlinks are to pages on the same server, such as \u201cpage2.html\u201d in <strong><span style=\"color: #ff0000\">Figure 2-2<\/span><\/strong>. Example of a relative link: &lt;a href=\u201chtml\/page2.html\u201d&gt;Page 2&lt;\/a&gt;.<\/li>\n<li>Absolute hyperlinks go to a link on a different server, usually someone else\u2019s page on the web. An absolute link: &lt;a href=\u201chttp:\/\/www.ryerson.ca\u201d&gt;Ryerson University&lt;\/a&gt;.<\/li>\n<\/ul>\n<figure id=\"attachment_249\" aria-describedby=\"caption-attachment-249\" style=\"width: 619px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/2.2_DW-W_Links.png\" alt=\"Code for linking relative hyperlinks to pages on the same server.\" width=\"619\" height=\"319\" class=\"wp-image-249 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/2.2_DW-W_Links.png 619w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/2.2_DW-W_Links-300x155.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/2.2_DW-W_Links-65x33.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/2.2_DW-W_Links-225x116.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/2.2_DW-W_Links-350x180.png 350w\" sizes=\"auto, (max-width: 619px) 100vw, 619px\" \/><figcaption id=\"caption-attachment-249\" class=\"wp-caption-text\"><strong>Figure 2-2.<\/strong> Examples of code for linking to embedded files and images.\u00a0<span><span class=\"il\">Adobe\u00a0<\/span>Dreamweaver\u00ae\u00a0<\/span><span>screenshot(s) reprinted with permission from\u00a0<\/span><span class=\"il\">Adobe<\/span><span>\u00a0Systems Incorporated.<\/span><\/figcaption><\/figure>\n<h2><strong>Dreamweaver\u2019s Site Manager<\/strong><\/h2>\n<p>Dreamweaver\u2019s Site Manager (Site &gt; Manage Sites) provides a convenient way to manage sites (Exercises). The root folder is displayed in the Files palette (Window &gt; Files, <span style=\"color: #ff0000\"><strong>Figure 2-3<\/strong><\/span>). After creation and editing, files and folders can be uploaded to the server with a built-in file transfer protocol (FTP) utility.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_380\" aria-describedby=\"caption-attachment-380\" style=\"width: 242px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/DW-P_Files.png\" alt=\"Root folder displayed on Dreamweaver\u2019s Site Manager.\" width=\"242\" height=\"299\" class=\"wp-image-380 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/DW-P_Files.png 242w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/DW-P_Files-65x80.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/DW-P_Files-225x278.png 225w\" sizes=\"auto, (max-width: 242px) 100vw, 242px\" \/><figcaption id=\"caption-attachment-380\" class=\"wp-caption-text\"><strong>Figure 2-3.<\/strong> Dreamweaver\u2019s File palette.\u00a0<span><span class=\"il\">Adobe<\/span>\u00ae Dreamweaver\u00ae\u00a0<\/span><span>screenshot(s) reprinted with permission from\u00a0<\/span><span class=\"il\">Adobe<\/span><span>\u00a0Systems Incorporated.<\/span><\/figcaption><\/figure>\n<div class=\"bcc-box bcc-info\">\n<h3 itemprop=\"educationalUse\">Using Dreamweaver\u2019s Site Manager<\/h3>\n<p><strong>How to use Dreamweaver&#8217;s Site Manager<\/strong><\/p>\n<ol>\n<li>Make a site folder for your site and organize any desired subfolders.<\/li>\n<li>Dreamweaver &gt; Site &gt; Site Manager.<\/li>\n<li>New Site &gt; enter Site Name &gt; click the folder icon to the right of Local Site Folder.<\/li>\n<li>Browse to the root folder you created, select, click Choose.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong>Linking to a Server<\/strong><\/p>\n<ol>\n<li>In Site Manager, click Servers.<\/li>\n<li>Contact your site administrator for FTP settings to use.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong>Using the File Palette (Figure 3)<\/strong><\/p>\n<ol>\n<li>Open the File palette: Window &gt; Files.<\/li>\n<li>You can view various root folders on the local or remote computer (server).<\/li>\n<li>To connect to the server, click the plug icon in the upper left corner.<\/li>\n<li>If you change the file structure in the root folder, click the Refresh button.<\/li>\n<\/ol>\n<\/div>\n<h2><strong>Site Maps<\/strong><\/h2>\n<p>A site map (<span style=\"color: #ff0000\"><strong>Figure 2-4<\/strong><\/span>) is a diagram of the pages and hyperlinks in your site. It shows how readers will be able to navigate from one page to another by clicking on hyperlinks. A site map is useful in planning your site and determining the arrangement of files.<\/p>\n<figure id=\"attachment_250\" aria-describedby=\"caption-attachment-250\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-1024x512.png\" alt=\"An organizational diagram displaying hyperlinks that the reader is able to navigate to from the Home Page.\" width=\"600\" height=\"300\" class=\"wp-image-250\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-300x150.png 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-768x384.png 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-65x33.png 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-225x113.png 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/SiteMap-350x175.png 350w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-250\" class=\"wp-caption-text\"><strong>Figure 2-4.\u00a0<\/strong>A simple example of a site map. Hyperlinks will enable the reader to navigate from the Home Page to pages 1, 2, and 3, and to an external website, by clicking links. Created by Richard Adams. Licensed CC BY 4.0.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"author":6,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-23","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":24,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/23\/revisions"}],"predecessor-version":[{"id":723,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/23\/revisions\/723"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/23\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapter-type?post=23"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/contributor?post=23"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/license?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}