Uploading Files to the Remote Server

There are several methods for uploading your files to your remote server. Expand the Site panel out a little bit more so you can see the full panel. There are a series of icons above the files Files panel the far right one is the Expand icon.   Click that.    This is what comes up. Connect to your remote server by clicking. This can be found on the left panel. It can also be found in the files panel.     The left pane is the live site and right pane is the local site. . There are a couple different ways upload to the remote site or to download from it to the local site. First, select a file or series of files, and click    The down arrow gets files from the remote server and the up arrow sents files to the remote server. Anytime you upload or download a file, Dreamweaver is going to ask if you want to get any of the dependent files. Dependent files would be files that are linked to the page such as CSS files or images, script. etc. Sometimes you want the dependent files to upload or download, and sometimes you don't. Moving your files to and from the remote and local site makes it easy to maintain your files and keep your pages current.

Adding Remote Servers

Today we're going to talk about adding remote servers to your Dreamweaver site. There are several ways to open up the Site Setup dialog box and add a remote server. One would be to go up to the menu and go to Sites > Manage Sites. You can go to the Application toolbar, find the Site pull-down menu and choose Manage Sites. The easiest way is to go to the Files panel and double-click the name of your current site.

Click on Servers on the left-hand side and click the plus symbol .That will bring up the server dialog box.

Name the server; you can name this anything you want. I named this one Project.  Dreamweaver can connect to the site to various protocols.   The default is FTP and that is the standard protocol for most web hosting companies.  Each account is going to have its own specific information.  Contact your hosting company to get your sites information.  Type in the FTP address you got from the hosting company.  I typed in ftp.dddaaa.com, Of course this is a dummy address.   Enter in a username. Again I just typed in dummy information.  This is also the information that you get from your hosting company.  Finally enter in your password and the folder name where your information will be stored. You can choose to have Dreamweaver save this password or not.  Test the server connection. If the information correctly, Dreamweaver will give you a message that says Dreamweaver connected to your web server.

Click OK. Dreamweaver connected to my server, found the information.

Next, we'll take a look at using our remote server to upload files.

Managing Sites In Dreamweaver

Managing your sites in Dreamweaver is extremely easy. One of the easiest ways access Site Management is to use the menu.

 

You can also go to the Files panel, grab the pull-down menu, and go to the link for Managing Our Sites.

We can create a New site, edit an existing one, duplicate it, or we can remove it entirely. 

We are going to edit a site. I am going to select my VFW site and click the Edit button. 



This will bring up the site dialog box.

If we want to change or add some information we will to click on the Advanced Settings category on the left-hand side.

There are a couple of things that we can do here.

The first thing is to define where the Default Images folder is. You want to do that because if Dreamweaver ever has to create some graphics for you based on some widgets that you placed on the page, for example, or some of the other objects that you can place on a page, Dreamweaver now knows where to place those images.

Click the Browse icon. It takes you into the root directory find the _images directory and double-click that, then the Select button.

I can also choose whether I want to make my Links Document or Site Root relative.  We will leave it as document relative. We can also set a Web URL. We do not have that information yet so we will leave that blank.

We also have options for Templates and where to place any Spry Assets, such as External JavaScript in CSS files necessary for any Spry widgets we add to our site. We won’t change any of these right now. Once we are finished making the changes, we are going to click Save, and it's going to re-cache our site.

We can click done, and we are finished with our editing process.

Next time we will talk about how to set up remote servers .



How to Imbed a Video From You Tube on your Web Page

This week I learned how to imbed a You Tube vide on a web page.  First you go to the video you want to imbed.  I made a video based on last week’s blog to use for this demonstration.

Select Share/Share or embed this video and select embed.

Select and copy the code.

Open your page in split view in Dreamweaver.  Paste the code where you want the video to be.

Here is a screen shot of the page in the browser.

Wasn’t that easy?  It is even easier to insert it on this page.  All I had to do was :

And here it is:

I didn't put any sound in because I just made it for this page.

How to Embed a Google Map on Your Web Page

This week I learned how to imbed a map into a web page.  This is a very easy thing to do.  First you go to Google Maps and enter the address you want to imbed.  I entered the address to my son-in-law’s barber shop.

Click on link icon as shown below.

Copy the code as shown below.

Open your page in Dreamweaver in code view and paste the code as shown.

This is how it looks in design view.

This is how it looks in the browser.  When you click on the View Larger Map link you are taken to the Google Map site and the map is full size.

Wan't that easy. Next week I will show you how to imbed a youtube video.

Using Widgets on Web Pages

This week in my Web 2 class we learned all about Widgets.  Widgets are Widgets are pieces of HTML, CSS and JavaScript that provide advanced functionality to web pages.  External Widgets are third party applications that enhance certain website user experience.

Adobe has an added feature built into Dreamweaver that lets you download different kinds of widgets to use on your web pages.   Some of the widgets available are Menus, buttons, gradients, and photo viewers.

The one I used is called the Spry Image slide show.  I opened a new page from my template and went to Insert, Widget

I then selected the Widget browser

Here are some of the selections that are available.  I chose the Spry Image Slideshow.



After it loaded onto my page I went into code view and changed the names of the images to the one’s I wanted to use.

Here are the images I used.  These are photos I took for my photography landscape assignment. 

 

Writing For the Web>

We are still working on the project that I described last week in my Web Design class.  In my Interactive Digital Media class we desighned a tutorial in PowerPoint.  Mine was on How to Write for the Web.  I converted the Powerpoint presentation to an video using Camtasia Studio.  I decided for my blog entry this week I would share it with you.  I hope you enjoy and learn something.

Designing Pages For Handheld Devices

This week in my Web Design class we designed pages that good be viewed on handheld devices.  Dreamweaver makes this so easy.  Until just recently pages for handheld devices had to be designed completely for them to work.  Now through the Media queries function in Dreamweaver, all that has to be changes are the css files for each device.
This is a link to the original page.

First open up the main css file in Dreamweaver and save it as phone.css.  then save it again as target css.

Open the Multiscreen Preview window and click on Media queries.

Enter the css files you just saved as shown below.

Now you can choose what you want to change in each css file.

Here the examples of the pages I changed.

iPad

iPhone page

Making your Web Pages Printable

Have you ever seen a web page that you wanted to print but that had so many graphics or things that you actually did not want to print.  Well you could always highlight the content you want to print and print selection only but this was time consuming and doesn’t always give you the results you want.  This week in Web Design we learned a way that the designer can optimize the page for print and include a "Print" link on the page so that they can be printed more effectively using the style rendering tool bar and a cascading style sheet made just for printing.

In Dreamweaver:

1.      In the Files panel, double-click on the main css file to open it.

2.       Choose File > Save As.

3.      When the Save As dialog box opens, type print_styles.css in the File Name

4.      Click Save.

 Open the page you want users to be able to print.

Click the icon circled below to attach the print.css file to the page.

5.      Click ‘Browse

6.     Choose print.css from the list.

       7.    Add as link and choose print media.

8.      In the Style Rendering toolbar, click the Render Print Media Type shown circled below.

9.    In the CSS Styles panel, double-click the .siderbar in the print_styles.css rules.

      10. From the Block category, choose none from the Display field menu. Click OK.



The sidebar disappears from the document window but the div> has not been deleted. Dreamweaver has simply stopped rendering it long as the Print Media Type icon is selected.

      We will do the same thing to the header to make it dissapear also.

      Click F 12 to view the page in the browser.

      This how the page appears.

Right Click and choose Print Review:

             This is what will print: