Dreamweaver Free Templates - Download as DOC

							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!