Dreamweaver Free Templates - Download as DOC
Dreamweaver Free Templates document sample
Shared by: hat10029
Editing the Portfolio Templates Purpose This guide is designed to assist you in personalizing your UT Tyler Online Portfolio and publishing it to the Internet. There are several steps involved in publishing your Portfolio, but it is not an overly difficult task – so long as you know what information is required and where to get it. Tools and Supplies This guide uses a trial version of Adobe Dreamweaver CS3 for editing and publishing your site. Dreamweaver is the industry standard for web designers, and the 30 day trial provides ample time to complete your Portfolio. You also will need either your own hosted domain, or some hosting provided on the Internet. A host is basically an online server that allows you to copy files to it and make them public online. Domains, such as www.uttyler.edu, point to a host where the published web content files are located. The final things you need are the portfolio files obtained from the UT Tyler website. It is important to remember where you put these files. For simplicities sake, I usually put my web projects in a Web Projects folder in My Documents. For this guide, we will assume that your UT Tyler portfolio files are located in “C: \UT Tyler Portfolio”. Steps Dreamweaver The first step is to obtain Dreamweaver. A trail of the latest version of Dreamweaver can always be obtained from Adobe’s web site (Link: http://www.adobe.com/products/dreamweaver/). You should see a link to download the trial version. You will have to register for a free Adobe account. Once you have registered, you will be able to download the trial. It is available in multiple languages and there are versions for both Mac and Windows. Choose your preferred platform and proceed to download the trial, which is around 300MB. This is a large file, and I would not recommend attempting to download over a narrowband connection such as dial up Internet access. Once you have the file downloaded, proceed to install Dreamweaver leaving all settings at their defaults. When prompted to enter a serial number, just select the option to try Dreamweaver free for 30 days. Leave the default selections for the next window, and just click next. Domains Your next step is to obtain a domain and hosting. Usually a domain is sold with hosting as an option. Web hosting generally has a monthly charge associated with it. Just for reference, 1 & 1 hosting offers a cheap solution for hosting your portfolio (link: http://www.1and1.com). You can choose their beginner package which comes with a free domain, email at your domain and more hosting space than you could possibly need for about $4 per month. Hosting and domain management are out of scope for this document, and there are plenty of online resources to help you if you would like to learn more (link: http://en.wikipedia.org/wiki/Web_hosting). After purchasing your domain and hosting, you will need a few pieces of information in order to publish your site. You will need your FTP server name (which is usually your domain: www.myportfolio.com), your user id and your password. Editing When Dreamweaver opens, the first thing you want to do is expand your Files dialog if it is not already visible. You should see a row of tabs on the right hand side of the screen, and in that set of tabs, you should see a Files tab. If the Files tab is not expanded already, click the word Files to expand it. Once expanded, select the ‘Local Disk (C:\)’ option from the dropdown. You should then see your local hard drive ‘C:\’ available for you to browse. Click the ‘+’ icons to browse to your portfolio files. You should see the 5 files that need to be edited with your information. Double click the ‘index.html’ file to begin editing (index.html is the default homepage for your site). At this point, you might want to consider getting a professional photograph of yourself for your site. The template allows for a personal photograph at 170 width x 255 height. If your not proficient at editing photos, it might be best to call a design savvy friend to help since improperly edited images can destroy the impact of a well designed portfolio. If you have an image you would like to use, then you need to copy it to the ‘C:\UT Tyler Portfolio\images’ folder. See below for the page editing screen: To put your personal photograph in your page, you need to click the existing photo on the right side of the page. Your context sensitive property panel at the bottom of the screen will change to reflect the image you have selected: See the crosshairs to the right of the ‘Src’ textbox? That is a file selector that allows you to easily change what photo goes there. So click and drag the crosshairs to your photo which should be located under the ‘images’ folder in your Files panel. Your new picture should be automatically updated in the page. After this, you can edit the text on the page just as you would with Microsoft Word. Select the text you would like to change and just type over it with your new text. After you have entered all of your changes, you need to save your file by going to the File menu and selecting Save. Proceed to update all of your pages with your own personal information. When you get to the UTTyler.html page, you will need to do some extra legwork. On this page, there is a table representing the competencies you have met for each course. For each competency you have met, you must find the work you created for that course and copy them to a new folder in your ‘UT Tyler Portfolio’ folder. For this document I will use the folder name ‘Course Work’. After collecting all your UT Tyler course work and copying it to your ‘Course Work’ folder, you will need to create links from each competency cell to its corresponding document. In Dreamweaver, expand the ‘Course Work’ folder in your Files panel and see your documents listed. For this example, I will use the second competency for the HRD 4332 course. Find that cell in the table, and select the text ‘Competency Met’. You will notice that the context sensitive properties panel at the bottom of the screen will change to reflect the text you have selected: To link this text to your course work document, we will use the crosshairs for the Link drop down. Click and drag the crosshairs over the course document that corresponds with that competency: Complete these steps for each competency and save your work. Publishing Dreamweaver has an FTP client built into its sophisticated site management capabilities. We have not used Dreamweaver’s advanced site management capabilities as of yet, since they are quite in depth and require some study to fully understand. In order to publish, we will have to create a site for our ‘UT Tyler Portfolio’ folder in Dreamweaver. Your first step is to go to the menu item Site and select New Site. You will be presented with a dialog, from which you will want to ensure that the Basic tab is selected. The first field is a site name, which you can call whatever you like. I will call it ePortfolio. The next field is your HTTP Address (URL). This is your domain, such as http://www.StudentPortfolio.com. The next screen asks if you will be using a server technology. Select ‘No’. The next page will ask how you want to edit your files. Select ‘Edit local copies’. On the same screen, you are asked where your site is located. Click the folder icon to browse to your ‘UT Tyler Portfolio’ folder: The final tab will ask how you want to connect to your remote server (this is your web host). Select FTP from the drop down box and a bunch of additional fields will appear. The first field, FTP Address, is your domain. The second field should be left blank in most cases (this is for sub folders on the host). The third field, FTP Login, is your FTP username supplied by your host. The fourth and final field, FTP Password, is the password supplied by your host. (Click the Save box to save your username and password to keep you from having to re-enter it each time you connect) Use Secure FTP can be left unchecked. After entering your information, click the Test Connection button to ensure your settings are correct. You should get a success message: Once you have established a successful connection, click ‘OK’ to close the success message box and click ‘OK’ to close the Site Definition box. The only step left is to upload your files. Back on the files panel, select your new site from the drop down box. You should then see an icon on the far right hand side that has a tool tip that says “Expand to show local and remote sites”. When you click this icon, it expands your file panel to take up the entire screen: Ensure the ‘Remote’ icon is selected: (Not the icon with the organizational chart or lightning bolt) Now click the ‘Connect’ button: . Now the panel on the left has your remote webserver files, and the panel on the right is your local files that you have just edited. See mine below: My screen has a /uttyler/ folder listed, whereas yours will not. Now select the folder on the right that begins with “Site –“. This folder represents your entire website. Now click the blue Up arrow icon to upload, and Dreamweaver will ask you if you want to “put the entire site”. Click ‘OK’ begin publishing your files to the webserver. You can repeat this process every time you update your Portfolio and it will put your new changes on the website. After Dreamweaver has finished copying your files, you should try to view your portfolio online. Browse to your domain and you should see your new portfolio up and running!