tag:blogger.com,1999:blog-71672706538901259562023-11-16T04:19:30.386-08:00Free Dreamweaver TutorialsDream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-7167270653890125956.post-80702323052611818182012-03-26T10:08:00.001-07:002012-03-26T10:34:34.698-07:00Conclusion - Getting Started with Dreamweaver CS5 - PART 7<ul class="seriesMenuLinkList"><li><a href="http://www.freedreamweavertutorials.com/2012/03/getting-started-with-dreamweaver-cs5.html">Getting Started with Dreamweaver CS5</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">Part 1: Defining a Site</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">Part 2: Creating an HTML Page</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">Part 3: Adding and Formatting Text</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">Part 4: Creating a Text Link</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">Part 5: Previewing a Webpage in a Browser</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">Part 6: Inserting an Image</a></li>
<li><a class="currentPage" href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">Conclusion</a></li>
</ul><br />
Before we end this tutorial series on Dreamweaver CS5, let's take another look at the first file that we created. In the <b>Files</b> panel, make sure that your <b>Learning Dreamweaver</b> site is selected, and then double-click on the <b>index.html</b> file to open it.<br />
<br />
Once it's open, click on the <b>Split</b> button in the <b>Document</b> window to switch to the <b>Split</b> view. This view shows us both the <b>Code</b> view and the <b>Design</b> view at the same time.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBc8k4Lm2KlTgeXpzMlA9hMoSsPiRIgDQjBZKfqntkvpogc6D7dBJovIvHSf4uJrkQ3eOkimEEqcRo25R2RNaGcW38iRKR-Ty_ngrjrzP0Pv-krBtC8-QU2bCQwb9er9zOnEJ6PmJ9Ug/s1600/01-split-view.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBc8k4Lm2KlTgeXpzMlA9hMoSsPiRIgDQjBZKfqntkvpogc6D7dBJovIvHSf4uJrkQ3eOkimEEqcRo25R2RNaGcW38iRKR-Ty_ngrjrzP0Pv-krBtC8-QU2bCQwb9er9zOnEJ6PmJ9Ug/s400/01-split-view.jpg" width="400" /></a></div><br />
On the right side we have the <b>Design</b> view, which shows the elements of the webpage as you would normally see them in a browser (although it's still best to preview your document in a browser as some things will appear differently in the <b>Design</b> view).<br />
<br />
On the left side we have the <b>Code</b> view, which also shows us the elements of our web page, but shows it to us in the form of HTML code. HTML code is made up of the instructions that tell the browser how to display the contents of a web page. It uses what you call HTML <b>tags</b> to classify elements so that the browser knows how to display them. These tags are always there, even if we're not aware of it. While we create things in the <b>Design</b> view, Dreamweaver is quietly adding them for us.<br />
<br />
Without going into too much detail, here are some of the most commonly used HTML tags. Try to see if you can spot them in the HTML documents that we've created thus far.<br />
<br />
Some commonly used HTML tags:<br />
<ul><li><b>h1</b> - used to define a first heading</li>
<li><b>p</b> - used to define a paragraph</li>
<li><b>a</b> - used to define a link</li>
<li><b>img</b> - used to define an image</li>
</ul><br />
But even though Dreamweaver lets you create web pages without having to type in the HTML code yourself, it's still important that you learn the basics of HTML, because HTML is the foundation of every web page. No matter what tool you use to create a website, there is always the HTML that marks up your elements. With Dreamweaver, what you have are tools and features that let you create the HTML code without having to manually type them in. But it's still important that you understand what's going on behind the scenes; otherwise you're just blindly clicking on buttons and windows in the Dreamweaver interface. In many cases, you'll probably need to switch between the <b>Design</b> and <b>Code</b> view in order to create your webpages and fix problems that may arise. But for those of you who up until this point have been creating websites only with basic text editors, then you can probably appreciate how Dreamweaver can make things a lot easier. It has a great set of tools and features that make the process of creating websites much more efficient, and what you've seen in this introductory tutorial series is just a small fraction of Dreamweaver's capabilities.<br />
<br />
Thank you for reading this tutorial series. I sincerely hope that you learned a few things. If you know others who might benefit from reading this series, please feel free to share it with them. <br />
<br />
For those of you who want to start learning HTML, I recommend the <a href="http://www.w3schools.com/html/default.asp">HTML tutorials by w3schools</a> as a good place to start.<br />
<br />
And that concludes this <b>Getting Started with Dreamweaver CS5</b> tutorial series.Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com1tag:blogger.com,1999:blog-7167270653890125956.post-14623984168053230542012-03-26T10:08:00.000-07:002012-03-26T10:34:18.136-07:00Inserting an Image - Getting Started with Dreamweaver CS5 - PART 6<ul class="seriesMenuLinkList"><li><a href="http://www.freedreamweavertutorials.com/2012/03/getting-started-with-dreamweaver-cs5.html">Getting Started with Dreamweaver CS5</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">Part 1: Defining a Site</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">Part 2: Creating an HTML Page</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">Part 3: Adding and Formatting Text</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">Part 4: Creating a Text Link</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">Part 5: Previewing a Webpage in a Browser</a></li>
<li><a class="currentPage" href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">Part 6: Inserting an Image</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">Conclusion</a></li>
</ul><br />
In this part of the tutorial series on Dreamweaver CS5, we'll learn how to insert an image in an HTML document.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
Create a new HTML document by choosing <b>File > New</b>. The <b>New Document</b> dialog window will come up. Select the <b>Blank Page</b> category and select <b>HTML</b> under the <b>Page Type</b> column. Under the <b>Layout</b> column, select <b><none></b>. For the <b>DocType</b>, choose <b>HTML 4.01 Transitional</b>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ98dkbx9n5s8ZR_EJIZ817j82F91E4DLzGfJsdvf9BoMIqdnYzXu0olWXoyte2OfCWDfKEQSAfqlbmE0999FHjkDn3fIRaD26tdL-nIGVNtyyS2lIHae1Y8sE4Y6pgYWDHBXpZ8XsaaQ/s1600/01-new-document.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ98dkbx9n5s8ZR_EJIZ817j82F91E4DLzGfJsdvf9BoMIqdnYzXu0olWXoyte2OfCWDfKEQSAfqlbmE0999FHjkDn3fIRaD26tdL-nIGVNtyyS2lIHae1Y8sE4Y6pgYWDHBXpZ8XsaaQ/s400/01-new-document.jpg" width="400" /></a></div><br />
Then click on <b>Create</b>.<br />
<br />
<br />
<span class="tutorialStep">Step 2</span><br />
Save this document inside your <b>learn-dw</b> folder as <b>insert-image.html</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLF093VhZPXw97sQ0l9HA8C4r4ct-lZXqRS9p4pPsLiR06f2sDatwmJsHNERA5yXjGM6C_TY7jN3tLyXu_1l7jdsGCni_BJeJx_pmEEDweE975rntMO1BPxmNkdEAn1YE3htqQ6G9toH0/s1600/02-save-as-insert-image.jpg" imageanchor="1"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLF093VhZPXw97sQ0l9HA8C4r4ct-lZXqRS9p4pPsLiR06f2sDatwmJsHNERA5yXjGM6C_TY7jN3tLyXu_1l7jdsGCni_BJeJx_pmEEDweE975rntMO1BPxmNkdEAn1YE3htqQ6G9toH0/s400/02-save-as-insert-image.jpg" width="400" /></a></div><br />
<br />
<span class="tutorialStep">Step 3</span><br />
When the new blank document comes up, type the words <b>Here is a picture of some leaves</b> in the <b>Design</b> view of your <b>Document</b> window and hit enter.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGS6T2pi8UUjCnmVcWkjGhRB_l-muXjx4w-rQ8DsKvKej5wQtkBgX2egsv_uZySXIuvxvEzymp1TqRbfdm5yVBvGpjk7mTMw3WyJ49aIo0rjuYzliRPV_osDUqXktLu6AGV5RqOwjNNco/s1600/03-leaves-text.jpg" imageanchor="1"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGS6T2pi8UUjCnmVcWkjGhRB_l-muXjx4w-rQ8DsKvKej5wQtkBgX2egsv_uZySXIuvxvEzymp1TqRbfdm5yVBvGpjk7mTMw3WyJ49aIo0rjuYzliRPV_osDUqXktLu6AGV5RqOwjNNco/s400/03-leaves-text.jpg" width="400" /></a></div><br />
<br />
<span class="tutorialStep">Step 4</span><br />
To add an image, choose <b>Insert > Image</b> from the main menu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fMc-tpU8LuEOmLR01cMpxlyekE0P17HSL0oxJWUIszKxaEKGI7zP_mm1RQbd8Rb8-MJTRlW2c01ZSpzYOsq3OPGES8EImA-rqIn5Do2bK3Rv9QfDbJnN6RTDQ1TtczYgqjwIAPoMumU/s1600/04-insert-image.jpg" imageanchor="1"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fMc-tpU8LuEOmLR01cMpxlyekE0P17HSL0oxJWUIszKxaEKGI7zP_mm1RQbd8Rb8-MJTRlW2c01ZSpzYOsq3OPGES8EImA-rqIn5Do2bK3Rv9QfDbJnN6RTDQ1TtczYgqjwIAPoMumU/s400/04-insert-image.jpg" width="221" /></a></div><br />
<br />
<span class="tutorialStep">Step 5</span><br />
When the <b>Select Image Source</b> window comes up, navigate to the <b>leaves.jpg</b> file inside the <b>images</b> folder of your <b>learn-dw</b> folder, and select it. For the <b>Relative to</b> option, choose <b>Document</b>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkMIGP0QpSB0RkhkSqszk2SS25e4Be_GjxgQbrtnS9Cxm9uavWN-fIIpP4hlrC_PDtugwPEHqSvQ33m4q2spY3ms0N3iSnS8GjvTJ0hOZu1vFfd42d2lolALsJwO3TObyVwZFH2u6EcWY/s1600/05-select-image-source.jpg" imageanchor="1"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkMIGP0QpSB0RkhkSqszk2SS25e4Be_GjxgQbrtnS9Cxm9uavWN-fIIpP4hlrC_PDtugwPEHqSvQ33m4q2spY3ms0N3iSnS8GjvTJ0hOZu1vFfd42d2lolALsJwO3TObyVwZFH2u6EcWY/s400/05-select-image-source.jpg" width="400" /></a></div><br />
Then click the <b>Choose</b> button.<br />
<br />
<br />
<span class="tutorialStep">Step 6</span><br />
The <b>Image Tag Accessibility Attributes</b> dialog box will come up after you click <b>Choose</b>. Type <b>leaves</b> in the <b>Alternate text</b> input field, and just leave the <b>Long description</b> field blank. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLgGj81nCOPI338C7rA3BdJSv-Ul976k7c3lh_96Mw4o_efn4AFD3vousuPi4A6NaFA9wp05XbFCn0V0Ur3Sz7nLfzfLpFcDohSgVWAHv9a-5bmOPrj9IoMQurXzD_5nfkMFa0BfdEHDw/s1600/06-alt-long.jpg" imageanchor="1"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLgGj81nCOPI338C7rA3BdJSv-Ul976k7c3lh_96Mw4o_efn4AFD3vousuPi4A6NaFA9wp05XbFCn0V0Ur3Sz7nLfzfLpFcDohSgVWAHv9a-5bmOPrj9IoMQurXzD_5nfkMFa0BfdEHDw/s400/06-alt-long.jpg" width="400" /></a></div><br />
The <i>alternate text</i> allows you to specify a word or phrase that briefly describes the image. And if for some reason the image fails to load when someone visits the page, this alternate text will be displayed in place of it. The <i>long description</i> allows you to specify an address to a web page that has a more detailed description of the image. Choosing not to provide an alternate text or a long description for an image is fine.<br />
<br />
Click <b>OK</b>. You should now see the image inserted in the document.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUQx6fVJiRUkndQ401bkkOBrDII0MK2aDMceNtXmhUuGjP-xQoQUnvf4KgiNGySOlaqaoVSKLinSnzux7Ap7nyRZnQTyNR9c7QlSl8a2ExjyerMNUnZ38sv-C-0S76AX-UyfKHI0_pI2o/s1600/07-leaves-pic-in-document.jpg" imageanchor="1"><img border="0" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUQx6fVJiRUkndQ401bkkOBrDII0MK2aDMceNtXmhUuGjP-xQoQUnvf4KgiNGySOlaqaoVSKLinSnzux7Ap7nyRZnQTyNR9c7QlSl8a2ExjyerMNUnZ38sv-C-0S76AX-UyfKHI0_pI2o/s400/07-leaves-pic-in-document.jpg" width="400" /></a></div><br />
<br />
<span class="tutorialStep">Step 7</span><br />
Save your work and preview it in a browser.<br />
<br />
<br />
In the next part, I'll share some final thoughts to <a href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">conclude this tutorial series</a>.Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com0tag:blogger.com,1999:blog-7167270653890125956.post-3510343290994556872012-03-26T10:07:00.002-07:002012-04-01T02:02:44.030-07:00Previewing a Webpage in a Browser - Getting Started with Dreamweaver CS5 - PART 5<ul class="seriesMenuLinkList">
<li><a href="http://www.freedreamweavertutorials.com/2012/03/getting-started-with-dreamweaver-cs5.html">Getting Started with Dreamweaver CS5</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">Part 1: Defining a Site</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">Part 2: Creating an HTML Page</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">Part 3: Adding and Formatting Text</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">Part 4: Creating a Text Link</a></li>
<li><a class="currentPage" href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">Part 5: Previewing a Webpage in a Browser</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">Part 6: Inserting an Image</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">Conclusion</a></li>
</ul>
<br />
A webpage browser is an application that is used to view webpages. Some popular webpage browsers include Firefox, Chrome, Safari, and Internet Explorer.<br />
<br />
In this part of this Dreamweaver CS5 tutorial series, we'll learn how to preview a webpage in a browser. Even though the <b>Design</b> view of the <b>Document</b> window shows you how your page looks like without the HTML tags, it's still best to preview your webpage in a browser to see exactly how the page will look like on a specific browser. <br /><br />But before we preview our webpage in a browser, let's first add a title to our webpage.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
At the top of the <b>Document</b> window, you'll see an input field for the web page title. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemi2zA754w0XDtb58ZR-tPHDkScwIwCDODOUYwnc2iWO4jnzdVIFbfP7VA1WLz-Ukgq2SwSw3ADVDFJJcwmN-UN71166YUZ_33RxJ9unW-LKJU3YgT43tbkdkskW_QdOyD3kRDiOlGb8/s1600/01-title-field.jpg" imageanchor="1"><img border="0" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemi2zA754w0XDtb58ZR-tPHDkScwIwCDODOUYwnc2iWO4jnzdVIFbfP7VA1WLz-Ukgq2SwSw3ADVDFJJcwmN-UN71166YUZ_33RxJ9unW-LKJU3YgT43tbkdkskW_QdOyD3kRDiOlGb8/s400/01-title-field.jpg" width="400" /></a></div>
<br />
Type <b>About Me</b> inside the title field.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2gp5e-j9FN7qrLdV_KNnQLbXkxfJIJBmXF4Jvu960vJNuPp8WT1Y_VTdnp_G4oG3_R7NS6UOSfL1uRJOTLXlGUGkOGkWhKofyftmmo6EZe8JmT3Xsbf4TpKQV1K_4ux79jcV19leRyog/s1600/02-title-about-me.jpg" imageanchor="1"><img border="0" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2gp5e-j9FN7qrLdV_KNnQLbXkxfJIJBmXF4Jvu960vJNuPp8WT1Y_VTdnp_G4oG3_R7NS6UOSfL1uRJOTLXlGUGkOGkWhKofyftmmo6EZe8JmT3Xsbf4TpKQV1K_4ux79jcV19leRyog/s400/02-title-about-me.jpg" width="400" /></a></div>
<br />
Save your document by choosing <b>File > Save</b>. <br />
<br />
And later on when you preview this webpage in a browser, you will see the webpage title in the title bar, which can be found at the top of the browser window.<br />
<br />
<span class="tutorialStep">Step 2</span><br />
To preview your HTML document in a browser, choose <b>File > Preview in Browser</b> from the main menu. You’ll see a list of the browsers that you have in your system. Click on the name of the browser that you'd like to preview the HTML document with, and wait for the browser to load.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOhTVSesyxUarR0xMM5G-K6DZmOAF17b8YTTMV_bZjX-ypW63ABDrn77xRqeDDIimPJf7m7SjEBnJoEs0S6kFRfQN8CRigxxjZQAq3kC2MJtM0y6HxrKVYAVPBPwxIDu1pmFi-_r5Yeho/s1600/03-file-preview.jpg" imageanchor="1"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOhTVSesyxUarR0xMM5G-K6DZmOAF17b8YTTMV_bZjX-ypW63ABDrn77xRqeDDIimPJf7m7SjEBnJoEs0S6kFRfQN8CRigxxjZQAq3kC2MJtM0y6HxrKVYAVPBPwxIDu1pmFi-_r5Yeho/s400/03-file-preview.jpg" width="340" /></a></div>
<br />
<br />
<span class="tutorialStep">Step 3</span><br />
Your chosen browser should now come up, and you should see it displaying your HTML document. You'll see the <b>About Me</b> title in the title bar, which would be at the top of the browser window. And you'll see the contents of your webpage in the browser's main body. Look for the <b>Go to the next page</b> link that you created, and click on it to see if it works.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqLWtjQL994QnrESgSZWqE2VnXzoPsEE6GTot1qU5E2_F8Vz9gGLcjl9hzTP2-Uauqg8GtBTB0NuOx9gf7jLdGnQetyGqw4m8Z9TeGNY2BABKt_-67zgZHXsk4eduo4iNDV7S1UfhCtoM/s1600/04-preview.jpg" imageanchor="1"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqLWtjQL994QnrESgSZWqE2VnXzoPsEE6GTot1qU5E2_F8Vz9gGLcjl9hzTP2-Uauqg8GtBTB0NuOx9gf7jLdGnQetyGqw4m8Z9TeGNY2BABKt_-67zgZHXsk4eduo4iNDV7S1UfhCtoM/s400/04-preview.jpg" width="400" /></a></div>
<br />
Clicking on it should bring you to the <b>page02.html</b> file.<br />
<br />
After testing the link, close your browser and go back to Dreamweaver. In the next part of this lesson, we’ll learn <a href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">how to insert an image in Dreamweaver CS5</a>.Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com0tag:blogger.com,1999:blog-7167270653890125956.post-88457767612098118802012-03-26T10:07:00.001-07:002012-03-26T10:33:28.002-07:00Creating a Text Link - Getting Started with Dreamweaver CS5 - PART 4<ul class="seriesMenuLinkList"><li><a href="http://www.freedreamweavertutorials.com/2012/03/getting-started-with-dreamweaver-cs5.html">Getting Started with Dreamweaver CS5</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">Part 1: Defining a Site</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">Part 2: Creating an HTML Page</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">Part 3: Adding and Formatting Text</a></li>
<li><a class="currentPage" href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">Part 4: Creating a Text Link</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">Part 5: Previewing a Webpage in a Browser</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">Part 6: Inserting an Image</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">Conclusion</a></li>
</ul><br />
In this lesson, we'll learn how to create a text link.<br />
<br />
<span class="tutorialStep">Step 1</span> <br />
Before we create a text link, let's bring our attention back to the <b>Files</b> panel.<br />
<br />
In the <b>Files</b> panel, make sure that your <b>Learning Dreamweaver</b> site is still the selected site. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvr12b91_tsyKbhNAILe6_KlCRMMXbzMAeDinkDI9rbPFsonnoxgfhqdXVnYw4RKdTxVFgvY_uEFRdn9E1EbjWbzm8L6X5ugyiXS-tbdLpUdSYzKdaT6s1zJdYgmhihe2GItV1vdOswrU/s1600/01-active-site.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="317" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvr12b91_tsyKbhNAILe6_KlCRMMXbzMAeDinkDI9rbPFsonnoxgfhqdXVnYw4RKdTxVFgvY_uEFRdn9E1EbjWbzm8L6X5ugyiXS-tbdLpUdSYzKdaT6s1zJdYgmhihe2GItV1vdOswrU/s400/01-active-site.jpg" width="400" /></a></div><br />
You should see a file named <b>page02.html</b>. This is the file that we will link to.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaWKZVgarcQvtF1rofboiGBY5Ra01TytDawPq3MYADbvVGOvtnuELFr_HRMHU8bXHnwIiTExRo5l1rP2gkCOxzIaxT97QAtVyEH5ImsW7ugunkg0ccQCvbf4uEbfCcmm-HsZkS_MAvXyA/s1600/02-page2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaWKZVgarcQvtF1rofboiGBY5Ra01TytDawPq3MYADbvVGOvtnuELFr_HRMHU8bXHnwIiTExRo5l1rP2gkCOxzIaxT97QAtVyEH5ImsW7ugunkg0ccQCvbf4uEbfCcmm-HsZkS_MAvXyA/s400/02-page2.jpg" width="303" /></a></div><br />
<span class="tutorialStep">Step 2</span> <br />
Let's now go back to the <b>Document</b> window, and create our text link. <br />
<br />
Select the <b>Go to the next page</b> text.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-j49yXILR4cNhTx4lik96OF_03AF0ndJrlaLa-9AdTgQo7-WDgtOIsZ7Jekh4FTIg6tTn27MCcw00_OvFYhlmOySLN9QwY4WaBN9rkDCnuzVJn5D3MRT2Y8B4ynREPHmAY5j1yMyo38k/s1600/03-go-to-selected.jpg" imageanchor="1"><img border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-j49yXILR4cNhTx4lik96OF_03AF0ndJrlaLa-9AdTgQo7-WDgtOIsZ7Jekh4FTIg6tTn27MCcw00_OvFYhlmOySLN9QwY4WaBN9rkDCnuzVJn5D3MRT2Y8B4ynREPHmAY5j1yMyo38k/s400/03-go-to-selected.jpg" width="400" /></a></div><br />
Then go to the <b>Properties</b> panel, and click on the <b>HTML</b> button to bring up the HTML properties. Look for the <b>Point to File</b> button. It's the button that looks like a target icon. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXReuxn1qZb-4BIkP6uv14zXo6Ip9IV0lU0W4gyXcFYFvFB4zCpsJl7FkZfFDZSDGQxfMeE7aIRR2GV3HicRRujoq4-XJfC3ukl5xzULyg4n1CrZB9rq69b2bZlikJOQRhCa3auLGyJRM/s1600/04-point-to-file.jpg" imageanchor="1"><img border="0" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXReuxn1qZb-4BIkP6uv14zXo6Ip9IV0lU0W4gyXcFYFvFB4zCpsJl7FkZfFDZSDGQxfMeE7aIRR2GV3HicRRujoq4-XJfC3ukl5xzULyg4n1CrZB9rq69b2bZlikJOQRhCa3auLGyJRM/s400/04-point-to-file.jpg" width="400" /></a></div><br />
Press this button, and without letting go, drag it toward the <b>Files</b> panel. Once you start dragging, you should see an arrow that drags out along with your mouse pointer. Keep dragging until the arrowhead is on top of <b>page02.html</b> in the <b>Files</b> panel.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjOCnJ7nYsT4wBMicKCml2dG8bfq49M-expyz9FoOsoCwA4jZnjIbUbZiFpzl55BnY373zqHWJc2AQ33Pe_HvReBGrh_6yCsQ9yJ5XE7klLvi6ZnSkFqM4qiQ0pZL5Iilf-SboNXTrz8o/s1600/05-click-drag-point-to-file.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjOCnJ7nYsT4wBMicKCml2dG8bfq49M-expyz9FoOsoCwA4jZnjIbUbZiFpzl55BnY373zqHWJc2AQ33Pe_HvReBGrh_6yCsQ9yJ5XE7klLvi6ZnSkFqM4qiQ0pZL5Iilf-SboNXTrz8o/s400/05-click-drag-point-to-file.jpg" width="400" /></a></div><br />
Once you've reached the file, release the mouse. This should successfully turn the selected text into a link that points to <b>page02.html</b>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi33HPhZ4S0VeLY1JZ1_gmYpmOgNbE_TlNhKHsd1XHVQeKSsI6VDn3P-02_FjHXAOx5SG6zQLr8ufjnOzwiOq5em2-PLgjLiXK3ucFaOtWaWQsY7E2QQuh4xF99Qq__4etWq2NOFCEtfxo/s1600/06-created-link.jpg" imageanchor="1"><img border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi33HPhZ4S0VeLY1JZ1_gmYpmOgNbE_TlNhKHsd1XHVQeKSsI6VDn3P-02_FjHXAOx5SG6zQLr8ufjnOzwiOq5em2-PLgjLiXK3ucFaOtWaWQsY7E2QQuh4xF99Qq__4etWq2NOFCEtfxo/s400/06-created-link.jpg" width="400" /></a></div><br />
<br />
<span class="tutorialStep">Step 3</span> <br />
Save your document by choosing <b>File > Save</b> from the main menu. We will test the link in the next part of this series when we learn <a href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">how to preview a webpage in a browser</a>.Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com0tag:blogger.com,1999:blog-7167270653890125956.post-90869451063869400742012-03-26T10:07:00.000-07:002012-03-27T02:16:30.751-07:00Adding and Formatting Text - Getting Started with Dreamweaver CS5 - PART 3<ul class="seriesMenuLinkList">
<li><a href="http://www.freedreamweavertutorials.com/2012/03/getting-started-with-dreamweaver-cs5.html">Getting Started with Dreamweaver CS5</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">Part 1: Defining a Site</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">Part 2: Creating an HTML Page</a></li>
<li><a class="currentPage" href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">Part 3: Adding and Formatting Text</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">Part 4: Creating a Text Link</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">Part 5: Previewing a Webpage in a Browser</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">Part 6: Inserting an Image</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">Conclusion</a></li>
</ul>
<br />
In this part of the series, we'll add some text to our HTML document. But before we do that, let's take a moment to observe our blank HTML document. The window that is housing this HTML document is called the <b>Document</b> window.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGgSaE5FCTDvPH8M3TZc4vTS-KYe6lPw-LwAhTudocYHbxn26Zp0SC_6xNwXJu6HiSIs9h-m3rn33YaMlCG-phQqYzSvj9Ge2Ee9Sx338DxTTTHNLnCtR3v90UayudymHt43wgaSzbk4/s1600/01-document-window.jpg" imageanchor="1"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGgSaE5FCTDvPH8M3TZc4vTS-KYe6lPw-LwAhTudocYHbxn26Zp0SC_6xNwXJu6HiSIs9h-m3rn33YaMlCG-phQqYzSvj9Ge2Ee9Sx338DxTTTHNLnCtR3v90UayudymHt43wgaSzbk4/s400/01-document-window.jpg" width="400" /></a></div>
<br />
The <b>Document</b> window allows you to view your HTML page in 3 ways: <b>Code</b> view, <b>Split</b> view, and <b>Design</b> view. The <b>Code</b> view shows you all the HTML code in your HTML document. HTML code makes up the building blocks of each web page, and the <b>Code</b> view will give you direct access to that. The <b>Design</b> view shows you the contents of your HTML document without the HTML code. It shows your web page and its contents in a way that's more similar to how word processors display documents. The <b>Split</b> view splits the <b>Document</b> window so that you see both the <b>Code</b> view and the <b>Design</b> view at the same time. You can switch between views by clicking on the view buttons found at the top-left of the <b>Document</b> window.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRG0NgppI49xL5ICJrc9XRzxtGSy9bJAD2Rx5y-viU_vY-VPOx7c7AZyyUy_0iYIIeQOiP9ybPsXpS3KegLYxTsGNjZRtONQw9TIGE522G-w17YXjLwP2EbV7ZOogvea8lTIe8H9S4rbE/s1600/02-view-buttons.jpg" imageanchor="1"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRG0NgppI49xL5ICJrc9XRzxtGSy9bJAD2Rx5y-viU_vY-VPOx7c7AZyyUy_0iYIIeQOiP9ybPsXpS3KegLYxTsGNjZRtONQw9TIGE522G-w17YXjLwP2EbV7ZOogvea8lTIe8H9S4rbE/s400/02-view-buttons.jpg" width="400" /></a></div>
<br />
Let's now add some text.<br />
<br />
<br />
<span class="tutorialStep">Step 1</span><br />
Make sure you're in the <b>Design</b> view by clicking on the <b>Design</b> view button. Once your in the <b>Design</b> view, type <b>My Website</b> on the first line of your document's body, and then press the enter key to move down to the next paragraph.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg875n4WyC5aUIyTkShhggZgE4qjjd0c5us2CUh8dpyTFP3XzTzJR7N1dHzTTpkssHul8WXvfynw0D5Iw6U1hyphenhyphenWFD8O0YhOiW0n3GsYqrgaDvcGKgWKOKg4Xv_pjrJbiGGzKb19c60rTw8/s1600/03-my-website.jpg" imageanchor="1"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg875n4WyC5aUIyTkShhggZgE4qjjd0c5us2CUh8dpyTFP3XzTzJR7N1dHzTTpkssHul8WXvfynw0D5Iw6U1hyphenhyphenWFD8O0YhOiW0n3GsYqrgaDvcGKgWKOKg4Xv_pjrJbiGGzKb19c60rTw8/s400/03-my-website.jpg" width="400" /></a></div>
<br />
<br />
<span class="tutorialStep">Step 2</span><br />
Then type <b>About Me</b>, and hit enter again.<br />
<br />
<br />
<span class="tutorialStep">Step 3</span> <br />
Next, type <b>My name is <i>[insert your name here]</i></b>, and hit enter once more.<br />
<br />
<br />
<span class="tutorialStep">Step 4</span> <br />
Then type <b>Go to the next page</b>. We will turn this last line of text into a link later on.<br />
<br />
So right now, your document should look like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibFO_z16-vqZ2Hileg8o3SlN0cf2ymi6to08lcKZ8BTy8EwRuM6fn_gQ18JGKfugWvhXjcZuhr24xSTWWrvxgr9LiP1xbxtPWV_eh8vONBC8qvegt2zKHPatNhwF-NF32pz6hTbi5_fwA/s1600/04-text.jpg" imageanchor="1"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibFO_z16-vqZ2Hileg8o3SlN0cf2ymi6to08lcKZ8BTy8EwRuM6fn_gQ18JGKfugWvhXjcZuhr24xSTWWrvxgr9LiP1xbxtPWV_eh8vONBC8qvegt2zKHPatNhwF-NF32pz6hTbi5_fwA/s400/04-text.jpg" width="400" /></a></div>
<br />
Save your document by choosing <b>File > Save</b>.<br />
<br />
<br />
<span class="tutorialStep">Step 5</span><br />
Now let's change the format of some of our text. Select the <b>My Website</b> text.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9CnLd6773sc2mDwFZD8gjQiUhWfl_LOE4UvJkUbsrEwNlzE9_vWgkcxjY3USuq3a-fuHNOQIqCmreSJT4p6DeqV8R1bOO5MdaF2EpWVNfbk_A21c_lZ-At5hyphenhyphenbOcWp04mcer1XFucpY/s1600/05-select-my-website.jpg" imageanchor="1"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9CnLd6773sc2mDwFZD8gjQiUhWfl_LOE4UvJkUbsrEwNlzE9_vWgkcxjY3USuq3a-fuHNOQIqCmreSJT4p6DeqV8R1bOO5MdaF2EpWVNfbk_A21c_lZ-At5hyphenhyphenbOcWp04mcer1XFucpY/s400/05-select-my-website.jpg" width="400" /></a></div>
<br />
Then go to the <b>Properties</b> panel. The <b>Properties</b> panel allows you to set the properties of the currently selected element in the <b>Document</b> window. In the <b>Classic</b> layout, the <b>Properties</b> panel can be found below the <b>Document</b> window.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixnzhbUs1zGNEoDASYLHdDu8LSr3KSQV6__zd4QVguC3jKgKBrrFaZ3-G9DYJQYaVxBHJfCya_KKKIrLGsPWC7hby3hXIkB5H2wwcHteMAwLbX6yLa5FBKWD71Ne2Brg286pURGtfoRrU/s1600/06-properties-panel.jpg" imageanchor="1"><img border="0" height="373" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixnzhbUs1zGNEoDASYLHdDu8LSr3KSQV6__zd4QVguC3jKgKBrrFaZ3-G9DYJQYaVxBHJfCya_KKKIrLGsPWC7hby3hXIkB5H2wwcHteMAwLbX6yLa5FBKWD71Ne2Brg286pURGtfoRrU/s400/06-properties-panel.jpg" width="400" /></a></div>
<br />
Once you see the <b>Properties</b> panel, click on the <b>HTML</b> button to bring up the HTML properties. Then go to the <b>Format</b> drop-down menu and choose <b>Heading 1</b> to turn the text into a first heading.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvU40vIIuHBSOIqbtXhvbTqx2DkdHILDroPkm8UwFLfe8w0KSt3u6hpXlR3UC__XAP6AELILuErt4K992O9qtFPk9g7t6Iz4Gda34V7JPWhq4diZhTfhwwoS8AsOx80x5LNyOMPUdWaE/s1600/07-heading-1.jpg" imageanchor="1"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvU40vIIuHBSOIqbtXhvbTqx2DkdHILDroPkm8UwFLfe8w0KSt3u6hpXlR3UC__XAP6AELILuErt4K992O9qtFPk9g7t6Iz4Gda34V7JPWhq4diZhTfhwwoS8AsOx80x5LNyOMPUdWaE/s400/07-heading-1.jpg" width="400" /></a></div>
<br />
The <b>My Website</b> text should now look like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8VfrpuMJstfla5b83PmwJ_GxdT_ITyJgl0u55WXpTWlMmu6uBJ684p1Leko06IwvDXUHo6pZkGynyCYtMGeKU0tpQg5jRbNmc6MvQxVUWkNqNTks2Vycc_DKzMCkda-7u1Kjt8nPteeg/s1600/08-my-website-big.jpg" imageanchor="1"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8VfrpuMJstfla5b83PmwJ_GxdT_ITyJgl0u55WXpTWlMmu6uBJ684p1Leko06IwvDXUHo6pZkGynyCYtMGeKU0tpQg5jRbNmc6MvQxVUWkNqNTks2Vycc_DKzMCkda-7u1Kjt8nPteeg/s400/08-my-website-big.jpg" width="400" /></a></div>
<br />
<br />
<span class="tutorialStep">Step 6</span><br />
Next, let's center the <b>My Website</b> heading. Make sure that the text is still selected. In the <b>Properties</b> panel, click on the <b>CSS</b> button to bring up the CSS properties. For the <b>Targeted Rule</b>, choose <b><New Inline Style></b>. And then click on the <b>Align Center</b> button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnIx_3JKTS9A1o5cxOTK1LCsEWv4hL8uNChwXJ4ND3wWSP8LGckIDytyM84g6ziGyaTE_BzGyeJL3p5mBSL79hrx9CAuVfgbjIMrvu0dadoLNpJOuj4jRS9AkStwloR8yOnrbMW2aYNo/s1600/09-center-heading.jpg" imageanchor="1"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnIx_3JKTS9A1o5cxOTK1LCsEWv4hL8uNChwXJ4ND3wWSP8LGckIDytyM84g6ziGyaTE_BzGyeJL3p5mBSL79hrx9CAuVfgbjIMrvu0dadoLNpJOuj4jRS9AkStwloR8yOnrbMW2aYNo/s400/09-center-heading.jpg" width="400" /></a></div>
<br />
The <b>My Website</b> heading should now be aligned to the center.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-eKbp1uQLib_EBJ4VEmH3cvgPYm3UqmI7OdeBzfwpXAggEisWmPF_liEUyFMv_YwBH3wPdcc4HIOsHCHG8l_CmBDWzBOQj2d-UK7-j6cciyHqwKtW-kxjlY_ypsZnBz_8y4vXEnf5NYs/s1600/10-my-website-big-center.jpg" imageanchor="1"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-eKbp1uQLib_EBJ4VEmH3cvgPYm3UqmI7OdeBzfwpXAggEisWmPF_liEUyFMv_YwBH3wPdcc4HIOsHCHG8l_CmBDWzBOQj2d-UK7-j6cciyHqwKtW-kxjlY_ypsZnBz_8y4vXEnf5NYs/s400/10-my-website-big-center.jpg" width="400" /></a></div>
<br />
<b>CSS</b> stands for <b>Cascading Style Sheets</b>. CSS lets you add styles such as color, font, alignment, borders, etc... to the elements of your webpage. We'll talk more about CSS in a future training series.<br />
<br />
Save your document by choosing <b>File > Save</b>. <br />
<br />
<br />
<span class="tutorialStep">Step 7</span><br />
Next, select the <b>About Me</b> text. Then in the <b>Properties</b> panel, click on the <b>HTML</b> button to bring back the HTML properties again. Then choose <b>Heading 2</b> for the format.<br />
<br />
<br />
<span class="tutorialStep">Step 8</span><br />
Next, select the <b>My name is <i>[insert your name here]</i></b> text. Let's change the font of that text. <br />
<br />
In the <b>Properties</b> panel, click on the <b>CSS</b> button to ensure that the CSS properties are displayed. For the <b>Targeted Rule</b>, choose <b><New Inline Style></b>. For the font, choose the <b>Verdana, Geneva, sans-serif</b> set from the <b>Font</b> drop-down menu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxYhxkD4D_bf10TfLoFr7KkooGOjO6EKHCw5w5TK8ss4gw7cvQjYx-JkxW42if0fdDJ034x5AJ1Ep6C70lY_EtAv49vinXHKrSG2l828REiuPUe4FyJI2a_mLamGlbdoOaOrDxjzd1Kaw/s1600/11-change-font.jpg" imageanchor="1"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxYhxkD4D_bf10TfLoFr7KkooGOjO6EKHCw5w5TK8ss4gw7cvQjYx-JkxW42if0fdDJ034x5AJ1Ep6C70lY_EtAv49vinXHKrSG2l828REiuPUe4FyJI2a_mLamGlbdoOaOrDxjzd1Kaw/s400/11-change-font.jpg" width="400" /></a></div>
<br />
This should set the selected text's font to <b>Verdana</b>.<br />
<br />
<b>But why does it specify more than one font?</b><br />
When a browser displays text, the font specified has to be a font that exists in the web page viewer's computer. In this example, if the person viewing your web page does not have the Verdana font installed in his or her system, then the browser will use the second font in the list. If the second font is still not installed in the web page viewer's computer, then it will use the third option, and so on. So for the other fonts in the same set that come after the first one, think of them as backup fonts.<br />
<br />
<br />
<span class="tutorialStep">Step 9</span><br />
Lastly, let's change the color. Make sure the text is still selected, and that the <b>CSS</b> properties in the <b>Properties</b> panel are still displayed. To change the font color, click on the color box in the <b>Properties</b> panel, and then click any color you want from the color palette that pops up.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9bZmyXQ2wBR9FRqN9u0_m_MLX8LVTcR-wGZGZWEurqIOYKkgvLCVLp5scyToyL5rS2dpyCWyJEyPPTzQTkuqw9D-hPCKc7vu09XbE3f3wYKeOmce8T5FACQKkyZf8qndJ0A7LKcLWUo/s1600/12-change-color.jpg" imageanchor="1"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9bZmyXQ2wBR9FRqN9u0_m_MLX8LVTcR-wGZGZWEurqIOYKkgvLCVLp5scyToyL5rS2dpyCWyJEyPPTzQTkuqw9D-hPCKc7vu09XbE3f3wYKeOmce8T5FACQKkyZf8qndJ0A7LKcLWUo/s400/12-change-color.jpg" width="400" /></a></div>
<br />
Click on any empty space in the <b>Document</b> window to deselect the currently selected text. You should see that the <b>My name is <i>[insert your name here]</i></b> text now has a different color.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTNpBlnR3-1GjA_73djqypLNqo0ZB6eoiYKTzr1ezOnXRRsDxgJaSiPuIm3EmJ4_vmXerscO4L_amvpNRQE6jhzsfP0ES43fh3YsRrsL6yELEwXE8Rw33zzDqliR0JvC-5d8uQjgMauXQ/s1600/13-see-text-diff-color.jpg" imageanchor="1"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTNpBlnR3-1GjA_73djqypLNqo0ZB6eoiYKTzr1ezOnXRRsDxgJaSiPuIm3EmJ4_vmXerscO4L_amvpNRQE6jhzsfP0ES43fh3YsRrsL6yELEwXE8Rw33zzDqliR0JvC-5d8uQjgMauXQ/s400/13-see-text-diff-color.jpg" width="400" /></a></div>
<br />
Save your work by choosing <b>File > Save</b>.<br />
<br />
<br />
So now that we've taken a basic look at how to add and format text in Dreamweaver CS5, let's move on to the next part where we'll learn <a href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">how to create a text link in Dreamweaver CS5</a>.Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com0tag:blogger.com,1999:blog-7167270653890125956.post-39531741879829441752012-03-26T10:06:00.001-07:002012-03-26T10:32:38.898-07:00Creating an HTML Page - Getting Started with Dreamweaver CS5 - PART 2<ul class="seriesMenuLinkList"><li><a href="http://www.freedreamweavertutorials.com/2012/03/getting-started-with-dreamweaver-cs5.html">Getting Started with Dreamweaver CS5</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">Part 1: Defining a Site</a></li>
<li><a class="currentPage" href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">Part 2: Creating an HTML Page</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">Part 3: Adding and Formatting Text</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">Part 4: Creating a Text Link</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">Part 5: Previewing a Webpage in a Browser</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">Part 6: Inserting an Image</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">Conclusion</a></li>
</ul><br />
A website is made up of different pages. These pages are usually in the file format known as <b>HTML</b>, which stands for <b>Hypertext Markup Language</b>. Let's go ahead and learn how to create a new blank HTML document. <br />
<br />
<span class="tutorialStep">Step 1</span><br />
To create a new HTML document in Dreamweaver CS5, go to the main menu and choose <b>File > New</b> to bring up the New Document dialog box.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxb_auoSA1xAcnyZuFNWU_sdTOcbBtzjsHFUQoEqXglUZHMcGm9MHVymqw2eUAMJ_ERQX5NgIs9PbIa9pZdHWIdBKBzO7pnOiXIGt9wY08pNretcaH-smdb0R-SBIUjG4OLbfnjqZ0Zo/s1600/01-file-new.jpg" imageanchor="1"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxb_auoSA1xAcnyZuFNWU_sdTOcbBtzjsHFUQoEqXglUZHMcGm9MHVymqw2eUAMJ_ERQX5NgIs9PbIa9pZdHWIdBKBzO7pnOiXIGt9wY08pNretcaH-smdb0R-SBIUjG4OLbfnjqZ0Zo/s320/01-file-new.jpg" width="262" /></a></div><br />
Then in the <b>New Document</b> dialog box, select the <b>Blank Page</b> category. Under the <b>Page Type</b> column, choose <b>HTML</b>. Under the <b>Layout</b> column, choose <b><none></b>. For the <b>DocType</b>, choose <b>HTML 4.01 Transitional</b>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_ww_Xoka5H4JC5gd3z3-PxgH0os9XMidMJ9fGmXbRAK3Gmt30ByoGBPgqPQVwQnI4EStsUsq5i7JFow9vdmzmMlQYbFG8uZkI-ZBceyiQk2rXwAoVhmxd0h_6DTTjoRgUOufoLHgSlg/s1600/02-new-document.jpg" imageanchor="1"><img border="0" height="261" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_ww_Xoka5H4JC5gd3z3-PxgH0os9XMidMJ9fGmXbRAK3Gmt30ByoGBPgqPQVwQnI4EStsUsq5i7JFow9vdmzmMlQYbFG8uZkI-ZBceyiQk2rXwAoVhmxd0h_6DTTjoRgUOufoLHgSlg/s400/02-new-document.jpg" width="400" /></a></div><br />
Then click on the <b>Create</b> button to create the HTML page.<br />
<br />
<br />
<span class="tutorialStep">Step 2</span><br />
Now that we have our new blank HTML document, let's save it. <br />
<br />
Choose <b>File > Save As</b> from the main menu to bring up the <b>Save As</b> dialog box. Then in the <b>Save As</b> dialog box, navigate to the <b>learn-dw</b> folder, and save this file inside it. Give the name <b>index.html</b> to this file. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEWZa0YwB57VsugXdb-V4t4AyNmphRS8wMUzSYXIOi6f4ehimVD6qrmIPVhriTLBv9bKHmEp3mRF_NoJtUY8S9b5CIobDyOx4gQsRML5r_eMyAZTFYi3bPtwzGB8mLPeRIj3ZFg4Ijvc/s1600/03-save-as.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEWZa0YwB57VsugXdb-V4t4AyNmphRS8wMUzSYXIOi6f4ehimVD6qrmIPVhriTLBv9bKHmEp3mRF_NoJtUY8S9b5CIobDyOx4gQsRML5r_eMyAZTFYi3bPtwzGB8mLPeRIj3ZFg4Ijvc/s400/03-save-as.jpg" width="400" /></a></div><br />
Then click <b>Save</b>.<br />
<br />
<b>Reminder:</b> If you're using a shared computer and other students are also completing this lesson, make sure you save it inside the <b>learn-dw</b> folder that belongs to you.<br />
<br />
In the next part of this lesson, we'll learn <a href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">how to add and format some text in Dreamweaver CS5</a>.Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com1tag:blogger.com,1999:blog-7167270653890125956.post-16381551676890335682012-03-26T10:06:00.000-07:002012-04-02T09:04:08.156-07:00Defining a Site - Getting Started with Dreamweaver CS5 - PART 1<ul class="seriesMenuLinkList">
<li><a href="http://www.freedreamweavertutorials.com/2012/03/getting-started-with-dreamweaver-cs5.html">Getting Started with Dreamweaver CS5</a></li>
<li><a class="currentPage" href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">Part 1: Defining a Site</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">Part 2: Creating an HTML Page</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">Part 3: Adding and Formatting Text</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">Part 4: Creating a Text Link</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">Part 5: Previewing a Webpage in a Browser</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">Part 6: Inserting an Image</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">Conclusion</a></li>
</ul>
<br />
When you start building your website, create a folder on your computer that will contain all the assets needed for that site. This includes the different pages, images, and other media assets that will make up your website. This folder on your computer is referred to as the <b>local root folder</b> of your website. Since the elements that make up a website are all related and linked to each other, it is important that you store them all in one place instead of scattering them all over different locations on your computer. Use one local root folder for each website that you plan on making.<br />
<br />
For the first part of this series, we'll start by setting up a Dreamweaver site. Now keep in mind that setting up a Dreamweaver site does not really make a site any different from other websites created using other tools. When you set up a Dreamweaver site, what you are doing is assigning a local root folder to a specific Dreamweaver website project. This lets you take advantage of the various Dreamweaver features that will help make the process of creating your website more efficient. For this training course, we will use the <b>learn-dw</b> folder as our local root folder. The files needed for this training course are already included in this folder.<br />
<br />
Let's begin.<br />
<br />
<span class="tutorialStep">Step 1</span><br />
<br />
Launch Dreamweaver CS5.<br />
<br />
<br />
<span class="tutorialStep">Step 2</span><br />
<br />
Let's first choose a workspace layout. The workspace layout refers to the way the windows and panels of your Dreamweaver workspace are arranged. There are a few preset workspace layouts to choose from. You can even save your own custom workspace layout.<br />
<br />
Let's choose the <b>Classic</b> layout. From the main menu at the top, choose <b>Window > Workspace Layout > Classic</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8Agzo9wJAvmimZf1kUeX-htHFjtiEHl3QYBOjRwOC1f0mtGbp_gDzWPVD1D0zKbPcG4zhNO5sTx5NVOj7zdMxqFMGevVwlFp1AaVeNmW4OQIO3l3l96EIW7nVZXd8nmypS7dPInq9qg/s1600/01-w-wl-classic.jpg" imageanchor="1"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8Agzo9wJAvmimZf1kUeX-htHFjtiEHl3QYBOjRwOC1f0mtGbp_gDzWPVD1D0zKbPcG4zhNO5sTx5NVOj7zdMxqFMGevVwlFp1AaVeNmW4OQIO3l3l96EIW7nVZXd8nmypS7dPInq9qg/s320/01-w-wl-classic.jpg" width="278" /></a></div>
<br />
<br />
<span class="tutorialStep">Step 3</span><br />
<br />
Then go back to <b>Window > Workspace Layout</b> again, and choose <b>Reset 'Classic'</b>. <br />
<br />
<b>Why are we resetting the workspace layout? </b><br />
This will ensure that the chosen layout is reverted back to its original appearance. Sometimes, you or someone else using the Dreamweaver application on your computer may end up moving windows and panels around, making your workspace messy and disorganized. Resetting the layout lets you quickly put everything back in the original place. If everything is in its original place, then you won't notice any changes after you reset the layout. But if things have been moved around, then you'll see your workspace layout revert back to the original arrangement.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgINwj_5PmoNg03Zups_vHKW1kMZeJOD3ZYMIkSuMNiq71fa7crRjB2wRg0fydNvYT6bpNkZZzIoStnteeswXW1tkY7dVQpmxtDL-EasdLl_junFdhYOchff4Y7PgaA-p74Ok9Gqb-TpaM/s1600/02-reset-classic.jpg" imageanchor="1"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgINwj_5PmoNg03Zups_vHKW1kMZeJOD3ZYMIkSuMNiq71fa7crRjB2wRg0fydNvYT6bpNkZZzIoStnteeswXW1tkY7dVQpmxtDL-EasdLl_junFdhYOchff4Y7PgaA-p74Ok9Gqb-TpaM/s320/02-reset-classic.jpg" width="320" /></a></div>
<br />
<br />
<span class="tutorialStep">Step 4</span><br />
<br />
Let's now begin the site setup process.<br />
<br />
To set up a new Dreamweaver site, go to <b>Site > New Site</b> from the main menu at the top.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3Znnq6LbsF1A6w6Qs-FfpIGRH1YBaC2lt6AQITtkiEhgoINI8v48wEZQBZJVMZJ3NK4M6uQjjx5F2tCsJLcmIoKQvB-ROmLypvJghSjZtUQYBEZMMOGYgLtCqIIESxyrgHxlW2_-_vU/s1600/03-site-new-site.jpg" imageanchor="1"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3Znnq6LbsF1A6w6Qs-FfpIGRH1YBaC2lt6AQITtkiEhgoINI8v48wEZQBZJVMZJ3NK4M6uQjjx5F2tCsJLcmIoKQvB-ROmLypvJghSjZtUQYBEZMMOGYgLtCqIIESxyrgHxlW2_-_vU/s320/03-site-new-site.jpg" width="247" /></a></div>
<br />
<br />
<span class="tutorialStep">Step 5</span><br />
<br />
The <b>Site Setup</b> dialog window will come up. Give your site a name by entering one in the <b>Site Name</b> input text field. Let's name this site <b>Learning Dreamweaver</b>. I recommend that you include your name in the title as well: <b><i>[Insert your name here]</i> - Learning Dreamweaver</b>. That way, you can easily distinguish which site is yours just in case other people are also working on this tutorial on a shared computer.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHhzH5I76iyyQlNGe_cpI4o5WXpbKPFSi49LONc33ncjY9xnUS9mmNWk4Nr71Jz58P9vVVVekhFYzeEsRNSZLEQb4WtN89GP6eG7P0NoNId4w0djHPeq2ENphaJx_oIg7nY8k-mj3l6w/s1600/04-site-set-up.jpg" imageanchor="1"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHhzH5I76iyyQlNGe_cpI4o5WXpbKPFSi49LONc33ncjY9xnUS9mmNWk4Nr71Jz58P9vVVVekhFYzeEsRNSZLEQb4WtN89GP6eG7P0NoNId4w0djHPeq2ENphaJx_oIg7nY8k-mj3l6w/s400/04-site-set-up.jpg" width="400" /></a></div>
<br />
<b>NOTE:</b> The site name will only be used by Dreamweaver to keep track of your website project. It will not show up on your actual website. <br />
<br />
<br />
<span class="tutorialStep">Step 6</span><br />
<br />
Next, let's assign the <b>learn-dw</b> folder as the <b>Local Site Folder</b> (this is the same thing as the local root folder). To assign the local site folder, click on the folder icon next to the local site folder input field.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsY5gG0DxMfPUWDr55b2Jk4CeuOCFK5TVRvYnnJHBwgGeG1bm1qHnuoRMUGd5W4d8AeuW9iAhAfWR7TvEx2I0xW7axO0NntfiGYxoo2AbK6nu-I-QyOVUGtCW-QS1_izyGagOg2hpZ8C4/s1600/05-folder-icon.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsY5gG0DxMfPUWDr55b2Jk4CeuOCFK5TVRvYnnJHBwgGeG1bm1qHnuoRMUGd5W4d8AeuW9iAhAfWR7TvEx2I0xW7axO0NntfiGYxoo2AbK6nu-I-QyOVUGtCW-QS1_izyGagOg2hpZ8C4/s1600/05-folder-icon.jpg" /></a></div>
<br />
And when the <b>Choose Root Folder</b> dialog window comes up, navigate to where you stored the <b>learn-dw</b> folder and select it.<br />
<br />
<b>REMINDER:</b> If you are working on a shared computer, make sure that you select your own copy of the <b>learn-dw</b> folder and not the folder of someone else. <br />
<br />
If you're working on a <b>Windows</b> computer, click on <b>Open</b>, and then click on <b>Select</b>.<br />
<br />
If you're working on a <b>Mac</b>, click <b>Choose</b>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjABye_jhcBZ-xmhcnPGP2VB2M438mmsuBblI5vkz9KPs1Qw_b2iQbUzx4-s2nXzMYVC9kMWrvU0XtbYEJdfVlqN_SSn_gscA3vVfFuUDSdFHCrPw4DNv2eVO55U8ht3RAtV2Muf1827sI/s1600/06-choose-window.jpg" imageanchor="1"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjABye_jhcBZ-xmhcnPGP2VB2M438mmsuBblI5vkz9KPs1Qw_b2iQbUzx4-s2nXzMYVC9kMWrvU0XtbYEJdfVlqN_SSn_gscA3vVfFuUDSdFHCrPw4DNv2eVO55U8ht3RAtV2Muf1827sI/s400/06-choose-window.jpg" width="400" /></a></div>
<br />
<br />
<span class="tutorialStep">Step 7</span><br />
<br />
Then back in the <b>Site Setup</b> dialog window, click on <b>Save</b>. <br />
<br />
<br />
<span class="tutorialStep">Step 8</span><br />
<br />
After clicking on the save button, take a look at the <b>Files</b> panel. If you're using the <b>Classic</b> workspace layout, the <b>Files</b> panel can be found in the lower-right corner of the workspace. It's the panel that has a tab that says <b>Files</b>. And just below the <b>Files</b> tab, you will see the name of the currently active Dreamweaver site, which in this case should be the <b>Learning Dreamweaver</b> site that we just set up.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_vulSslIlwaZzm7_0limODBVjzRS5aWRLXmKbsqP_KTJa2W_K1e0LpzZi7-D2Jqx61g2ELgm9vjdcv-aqHkHel611zCKNvNosgnnzJHTi8AgD5R7VaBYxYWXlHkr011lSqbHEHYO4XqU/s1600/07-files-panel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_vulSslIlwaZzm7_0limODBVjzRS5aWRLXmKbsqP_KTJa2W_K1e0LpzZi7-D2Jqx61g2ELgm9vjdcv-aqHkHel611zCKNvNosgnnzJHTi8AgD5R7VaBYxYWXlHkr011lSqbHEHYO4XqU/s400/07-files-panel.jpg" width="346" /></a></div>
<br />
The <b>Files</b> panel allows you to manage the contents of the local root folder that you assigned to your Dreamweaver site. For this site, the local root folder we assigned is the <b>learn-dw</b> folder. If you look at the contents of the <b>Files</b> panel, right below the <b>Local Files</b> heading, you'll see some files and folders. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOoHWiY3wIc8sUpjsJUI9W93oSTkdRnuTQHatP2bLTngMRZNdKbcyqtJDFba_257E8cw0Vx1aX6SZkJV4wvSos8rH9vYYIneM_Fibb54aMPKRU1Q8KnEP3JiaHzEzt0kFFZlqskM-fRN4/s1600/08-local-files.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOoHWiY3wIc8sUpjsJUI9W93oSTkdRnuTQHatP2bLTngMRZNdKbcyqtJDFba_257E8cw0Vx1aX6SZkJV4wvSos8rH9vYYIneM_Fibb54aMPKRU1Q8KnEP3JiaHzEzt0kFFZlqskM-fRN4/s400/08-local-files.jpg" width="320" /></a></div>
<br />
These files and folders are the ones that are contained inside the local root folder that we're using. But the <b>Files</b> panel did not copy the contents of the folder. Instead, it is linking to the actual folder that is on your computer. So whatever you do to the files and folders here in the <b>Files</b> panel (whether you move, rename, add or delete them) will reflect in the original folder. And whatever you do to the contents inside the original folder will also be reflected in the <b>Files</b> panel. So don't delete or move your actual local root folder. Otherwise, you'll have to edit the settings of your Dreamweaver site again in order to link to the correct local root folder.<br />
<br />
If you have other sites that you've set up, you can switch between them by clicking on the site name in the <b>Files</b> panel. This will bring up a drop-down menu that shows a list of the other sites you've set up. <br />
<br />
<br />
And that completes this tutorial on setting up a Dreamweaver site. In the next part, we'll learn <a href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">how to create an HTML page in Dreamweaver CS5</a>.Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com1tag:blogger.com,1999:blog-7167270653890125956.post-48966322941125655902012-03-26T10:05:00.003-07:002012-03-27T02:11:08.539-07:00Getting Started with Dreamweaver CS5<ul class="seriesMenuLinkList">
<li><a class="currentPage" href="http://www.freedreamweavertutorials.com/2012/03/getting-started-with-dreamweaver-cs5.html">Getting Started with Dreamweaver CS5</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">Part 1: Defining a Site</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-html-page-getting-started-with.html">Part 2: Creating an HTML Page</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/adding-and-formatting-text-getting.html">Part 3: Adding and Formatting Text</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/creating-text-link-getting-started-with.html">Part 4: Creating a Text Link</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/previewing-webpage-in-browser-getting.html">Part 5: Previewing a Webpage in a Browser</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/inserting-image-getting-started-with.html">Part 6: Inserting an Image</a></li>
<li><a href="http://www.freedreamweavertutorials.com/2012/03/conclusion-getting-started-with.html">Conclusion</a></li>
</ul>
<div class="byline">
by Alberto Medalla<br />
Lecturer, Ateneo de Manila University</div>
<br />
Welcome to Getting Started with Dreamweaver CS5. As the title suggests, this is a tutorial series that will introduce you to the Dreamweaver CS5 application. Dreamweaver CS5, which is part of the Adobe Creative Suite 5 bundle of applications, is a powerful piece of software that lets you design and manage web sites. We'll take a look at some of its tools and features in this series of hands-on tutorials.<br />
<br />
This tutorial series comes with activity files which you can download as a zipped file by clicking on the link below. Once you extract the zip file, you will get a folder named <b>learn-dw</b>. This folder and its contents will be used as we go through the lessons in this training series. If you're using a shared computer, I recommend that you create your own folder with your name on it, and place the <b>learn-dw</b> folder in there. Here is the link to the download page:<br />
<br />
<div style="text-align: center;">
<b><a href="https://sites.google.com/site/freedreamweavertutorialsfiles/exercise-files-for-getting-started-with-dreamweaver-cs5">[GO TO THE ACTIVITY FILES DOWNLOAD PAGE]</a></b></div>
<br />
Once you've downloaded the activity files, let's <a href="http://www.freedreamweavertutorials.com/2012/03/defining-site-getting-started-with.html">get started</a>.Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com2tag:blogger.com,1999:blog-7167270653890125956.post-59890782068394821132011-09-13T01:23:00.001-07:002011-09-13T01:24:01.333-07:00Welcome!Welcome to <a href="http://www.freedreamweavertutorials.com/">freedreamweavertutorials.com</a>!Dream Weaverhttp://www.blogger.com/profile/08868700959158745761noreply@blogger.com1