Recently in Dreamweaver Category

Dreamweaver: FTP to Caribou, Shakti, Prog

| No TrackBacks
This blog post contains useful information for people interested in FTP-ing their websites residing on one of Trinity's servers, cribou.cc.trincoll.edu, shakti.trincoll.edu or prog.trincoll.edu. For this blog post we are going to FTP each of these servers using Dreamweaver and the settings we use should be similar to other FTP clients such as FileZilla 
(for more information about FileZilla consider this blog post http://b27.cc.trincoll.edu/weblogs/sta/2009/10/filezilla_uploading_files_to_a_website.html )

To FTP to caribou.cc.trincoll.edu, prog.trincoll.edu or shakti.trincoll.edu you first have to open up Dreamweaver and go to the Site menu and select Manage Sites. Within the Manage Sites window click New and select FTP & RDS server. At this point you should see the Configure Server window similar to the one in Figure 1.

caribou.cc.trincoll.edu
Once you access the Configure Server window you can use the settings from Figure 1 to access your online website.

FTP_caribou.jpg
Figure 1: Dreamweaver, Settings for FTP-ing caribou.cc.trincoll.edu

Please note that for Host directory you have to use your Trinity username. The same goes for the Login information: cmpcntr\user
Click OK once everything is done and you should see Dreamweaver connect to your website.

If you get the error visible in Figure 2 that means the settings you used in the Configure Server window are wrong. Make sure everything is typed correctly and try again.

FTP_error.jpg
Figure 2: Dreamweaver, FTP access error


For any username/password errors, make sure your username/password is correct or that you have FTP access to the server. 

prog.trincoll.edu
FTP-ing prog.trincoll.edu is done in a similar way as you would FTP caribou. Once you access the Configure Server window you can use the settings from Figure 3 to access your online website.

FTP_prog.jpg
Figure 3: Dreamweaver, FTP-ing prog.trincoll.edu

Please note that for Host directory you have to specify the folder that the website resides in. So, if you would FTP prog.trincoll.edu/lingua, you should put /lingua/ in the Host directory. Also, make sure that you typed the settings correctly and that you have FTP access to the server. 
Click OK once everything is done and you should see Dreamweaver connect to your website. 

shakti.trincoll.edu
FTP-ing shakti.trincoll.edu is done in a similar way as you would FTP caribou or prog. Once you access the Configure Server window you can use the settings from Figure 4 to access your online website.

FTP_shakti.jpg
Figure 4: Dreamweaver, FTP-ing shakti.trincoll.edu

Please note that for Host directoryin this case remains blank while the FTP host, shakti.trincoll.edu, contains /~user/ at the end. Also, make sure that you typed the settings correctly and that you have FTP access to the server. 
Click OK once everything is done and you should see Dreamweaver connect to your website.

Conclusion
These are the settings that you would normally use to FTP to caribou, prog and shakti. For more information on how you would use Dreamweaver to update your website once you have connected to the server, please consult this blog post http://b27.cc.trincoll.edu/weblogs/sta/2009/12/dreamweaver_updating_your_website_using_ftp.html 

If you have any questions or suggestions, feel free to contact us at sta-help@trincoll.edu or by phone at x2589.
 

Retrieving Lost HTML Files

| 1 Comment | No TrackBacks
Perhaps the best method to not lose any digital data is, obviously, back-up. Be it a video project, a PowerPoint presentation, or your whole blog: there is little room to go wrong when you have copies of all your data in a folder on the same computer, on flash drive or an external hard drive. You can almost always come back to it and retrieve anything you may have damaged or lost while working on the originals.

Losing HTML files for a website is frustrating, and if you do not have proper backup, there is ample space for one to lose his files, especially if you are FTPing files to a server.

If you have indeed lost your HTML files for your website by, for example, overwriting your new homepage file with an old one, it might as well be an emergency, and you might have to redo all your changes. This might not only cause you to spend hours and hours redoing all your edits, If you remember them, but it would also be very frustrating.


Fortunately, there may be a small trick to go around this, and it uses Google Cache.

Google's Cached pages are to an extent an archive of websites. Website "snapshots" are taken at certain periods in time, and unlike other archive machines like the Wayback Machine --   whose purpose, as the name suggests, is to check websites that are no longer existing or just very old version of them -- Google's cache service provides more recent version, and its primary purpose is to help you with your searches. You are expected to check cached versions when a search time can no longer be found in the website after you click on it from the search results, or the website is down, and the cached version will probably have the results you need.

To access a Google-cached page, search for it and click on "Cached":

Picture 1.jpg

For the purpose of this blog, I will continue using the STA website to demonstrate how to retrieve your file.


The following is a snapshot of the cached page:

Picture 4.png
Note that the first post is by Tashi and it is dated December 18, 2009. Today is February 21, so it means that the cached version is around two months old. Also note the gray box at the top from google indicating that this is a cached website. You definitely do not want that to appear on your website in case you retrieved the same site.

So what you should do next is save the current page to your computer.  To do so, click on File > Save As from your browser, and then give it a name and hit save.

Next you will need to open this page with an HTML editing tool to make the editing process easier. To do so, I will open it with Adobe Dreamweaver on a Mac.

Picture 5.png
Now a quick and easy way to delete the box is to highlight its outer border, and simply hit delete and it should be gone.

Save your page, and give it the original name (granted this is the version you need of the page) and upload it to your website through FTP or any other method you are using to edit your website. (For further information on updating your website using FTP on Dreamweaver, check Nick's excellent post on that matter.)

Your page is ready, your website it back to normal, but for next time, be sure to back-up your files!

Dreamweaver: Updating your website using FTP

| No TrackBacks
The purpose of this blog entry is to explain how one would go about updating a website in Dreamweaver using the File Transfer Protocol (FTP). Emphasis is placed on how to establish the connection to the server hosting the user's website as well as downloading the website to make any changes. For this purpose, I will demonstrate the technique using my personal account hosted on shakti.trincoll.edu/~ndragu.

Using FTP to connect to the website
Follow these steps in order to create a connection between Dreamweaver and your website in order to download the website and make changes:
1. Open Dreamweaver CS3. All computers in the Blume Language in Raether Library lab have Dreamweaver on both the MAC and the Windows side. Dreamweaver is also accessible in the computer labs on level B in Raether Library.
2. Click the Site menu on the top of the interface and then on Manage Sites...
3. Press New. This will enable access to connection information. As soon as you press the New button you will be presented with a submenu in which you have to select the FTP&RDS Server option.
4. Type-in a name for your website in the Name field.
5. Under FTP host you have to type the name of the server (the URL). Since my website is hosted on shakti.trincoll.edu, then I have to type in shakti.trincoll.edu
6. Under Host directory you have to type the folder location of your website. For my website, I have all content located in the public_html folder. If you have more folders one inside each other, then you have to type something like this: /folder1/folder2 ... etc.
7. Finally, for establishing the connection with your server's website, you have to type your username in the Login field and your password in the Password field. If your website is located on a college server at Trinity College, than your username and password are those that you would normally use when accessing webmail. Please note that depending on the server, your username might have to be preceded by cmpcntr (like this: cmpcntr\username).
8. Press Ok to establish the connection with your website's server.
See the screenshot below for a visual guide:

dreamweaver_server connection.png
Using the information on the server
Now that you have a working connection to your website server you can probably see a new window showing in the Dreamweaver interface containing the folders present on the server. See the figure below to understand what exactly I am referring to:
dreamweaver_site.pngNow, in order to get any of the web pages that you see and start editing them you have to double click on the webpage that you want to edit. You will be presented with a pop-up window asking you if you want to get the dependent files or not. This is basically asking you "Do you want Dreamweaver to download the current web page, as well as any other files that that web page uses?". The best option is to click Yes in that window because you need all the elements of your website in order to make changes throughout your website. See the image below for a visual guide:

dreamweaver_get dependent files.jpgAt this point you should have the webpage visible in the interface to work on. The rest of the process is simply a matter of updating your website: updating old links, adding new images, replacing text etc. If you don't know how to do any of these things, please consider the links below for some "starting-out with Dreamweaver" tutorials:

http://www.adobe.com/devnet/dreamweaver/articles/dwcs4_getting_started/popup_00.html
http://www.adobe.com/devnet/dreamweaver/articles/dwcs4_getting_started/popup_01.html
http://www.adobe.com/devnet/dreamweaver/articles/dwcs4_getting_started/popup_02.html

There are other useful links at this website: http://www.adobe.com/devnet/dreamweaver/articles/dwcs4_getting_started.html
All articles and tutorials are owned by Adobe.

If you have any comments or suggestions feel free to contact the STA office!

Key Elements of Web Design - Languages & Scripting

| 1 Comment | No TrackBacks
The very first time one opens Macromedia Dreamweaver, he is greeted with an array of different options - HTML, CSS, XHTML and Javascript to name just a few. Trying to make sense of all these different (but apparently important) elements of web design can be a bit daunting at first. For someone trying to simply learn the ropes of basic web design, the thought of all these languages and scripts might be overwhelming but this blog post will try and reveal the 'method' behind this apparent 'madness.'

00001.jpg

At the very basic level a web site is a collection of text, images, sounds and videos. Advanced web sites then include features like interactive videos, username/password logins and links to other videos. Evidently the more advanced the website the more features and formats it needs to be able to integrate seamless and efficiently. This is where the different languages and scripts come to play.

A very basic website with only a few images and text can be handled sufficiently with HTML. However, start adding videos (that use flash or silverlight), interactive menus, secure encryption channels for password logins and then the complexity increases exponentially. This is why it clearly makes more sense to have separate mediums to edit and create separate aspects of web design, aspects I will try and clarify.

MARKUP LANGUAGES: (HTML, XHTML, XML)
The key function of a markup language is to enable the designer to annotate text which is syntactically distinguishable from that text. This is why HTML (Hyper Text Markup Language) uses '<>' and '<>/' to distinguish the content from the annotations. These annotations (which lie within the '<>') indicate information regarding a particular text. Examples of markup languages are HTML (the standard) and newer languages like XHTML and XML.

Picture 00004.jpg
STYLE SHEET LANGUAGES: (CSS, XSL)
Markup languages help annotate text, style sheet languages help edit and manage the layout of structured documents (this includes text and other 'marked up' content as well). Style sheet languages essentially describe how the content is to be displayed on your browser. However, the function of style sheet languages is much more than just basic visual presentation of content. They allow the designer to process the content and provide a suitable output when options like the font size, font type, colors as well as orders of appearance are changed. A good designer is able to create logical structures that help clearly and easily edit the positioning and design of his content. The primary language used is Cascading Style Sheets (CSS).

Picture 00009.png

SERVER SIDE SCRIPTING: (PHP, ASP)
Okay, you now have a great looking site with text all beautifully organized, images in the right locations and the overall layout is just perfect. But, wait a minute, isn't the website no better than a wallpaper? Think about it, you can't interact with it and you can't explore anything. This is where server side scripting comes into play. Suppose you go to the Apple home page. Now you click on the tab that leads you to the iPod section. After an instant the page with information on iPods loads up. Server side scripting just kicked into action the moment you clicked the iPod tab. Essentially programs, these scripts are made to identify when a user performs a specific action or request (like opening the iPod page) and accordingly loads up the correct page. Scripts understandably include much more complicated functions but for all practical purposes their essential function is to detect certain user requests and actions, transfer the necessary data from the data server to the user's computer and display them as a web page.

Picture 00008.jpg

CLIENT SIDE SCRIPTING: (Javascript, VBscript)
Anyone who is even the least bit savvy about computers must have heard about Javascript or Java in short. Java is a scripting program that dictates how the webpage interacts to the user. For example you go onto the Sony website (www.sony.com). When you take the mouse button over the PLAYSTATION tab the tab expands to 'reveal' sub options like the PS3/PS2/PSP. I use the word reveal because the content is already present in the web page. Scrolling the mouse button over the particular tab activated the 'hidden' content to be revealed. Client side scriptin allows web designers to pack in a lot more extra content that is revealed according to the actions of the user. Client side scripting is primarily conducted by the browser (since it involves analysing and displaying ouput already present in the webpage). But server side scripting and client side scripting sound similar right?
 
Take this example:
Stay on the sony website. Scroll over the PLAYSTATION tab, almost instantly an attached sub group appears with further options (PS3/PS2/PSP). Now scroll over and press the PS3 sub-tab, again almost instantaneously another sub group (systems/accessories/features)00002 copy.jpg appears. Now click on the systems sub-tab, this will lead to the page reloading (which takes considerably longer time) as it opens the requested page. Can you guess which parts involved client side scripting and which part involved server side scripting?
Client side scripting essentially enable web sites to have different and changing content depending on user input or other variables. They are faster as well as more efficient than server side scripting for the same purpose. Imagine a web page reloading every time you scroll over a tab just so that the page can be displayed with that particular tab highlighted.  

Archives

Map LITC Level 1.jpg

Locations of visitors to this page

Twitter_Final_Button.jpg