Please DO NOT read this unless you have searched for solutions to problems in building your own website. This blog is too long and boring for the casual reader.
Building a Dreamweaver website from scratchPart 1 – General list you need to follow1 Create folder
2 Add four folders: css, images, html, working
3 Dreamweaver: SITE > New Site > Connect > Connect to your new folder
4 Create new html template.html
5 Create CSS: File >new > blank page > css
6 link html and css page: be on template page > click on link symbol (CSS Styles Panel) and find styles.css
7 Create css * style: NEW CSS Rule > [COMPOUND] [*]
8 create wrapper (typically 960 wide or 650 wide): LAYOUT > insert div tag >
Add after start of tag #wrapper // add after end of tag #mainbox etc
Now there is obviously much more to Dreamweaver than the above – but this is not a how to article. This guide aims to simplify the problems I cam up against when creating, adding flash and uploading my website.
Some of the problems were complicated, some were simple – but, at the time, all were incredibly frustrating.
Part 2 – Adding a Soundslides showSoundslides is a paid-for program written by a photojournalist I use to add music or audio to a set of images.
To add a Soundslides show onto Dreamweaver do not use the Insert > media >SWF button. It does not work.
You don’t need to convert your Soundslides show into an avi movie.
Set the size of show you require within the Soundslides program (and remove titles/captions to your preference).
Simply create it as usual, then copy the folder (which includes _notes/custom/full_screen folders and all other files into a Soundslides file in your Dreamweaver web page directory.
Then drag the Soundslides shockwave flash file onto the page where you want your slideshow to appear.
The slideshow should now work.
On your Dreamweaver page, set the height and width of your box to ensure the Soundslides show will fit inside it.
If, on testing it, the Soundslides show buffers quickly (and by that I mean it does not run smoothly) then something has gone wrong. Create the show again. This has happened on a few of my shows but I’m not sure why – possibly I exported before Soundslides had finished saving any new changes I had just made.
Part 3 – Adding an AutoViewer slideshow to Dreamweaver (these notes should be applicable to similar sister slideshows like SimpleViewer). AutoViewer is free, or paid-for with increased flexibility.
Make sure you have Adobe Flash
Download AutoViewer script into Adobe Photoshop.
Warning: The newest version – Photoshop CS4/CS5 - for of this did not work on my Photoshop CS4 system.
I had to download the earlier CS3 version. There is no apparent reason for the CS4/CS5 script not to work.
Use the script (FILE > scripts > autoviewer)
Set source folder (where your images are) and destination folder (where you would like the converted files to appear). I created a new folder for this.
Copy converted image files to Pages>images folder in your Dreamweaver website folder. They must be in a folder called images inside the pages folder for the slideshow to work.
NOTE: Never copy the index.html file – it will copy over your own index.html homepage.
Rename the gallery file as gallery_XXXX (XXX denotes whatever you want to name your new AutoViewer show). Copy this renamed file into the pages folder.
Copy the following html text into web page where you want AutoViewer show to appear:
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player.
Get Flash.</div>
<script type="text/javascript">
var fo = new SWFObject("autoviewer.swf", "viewer", "100%", "532", "8", "#FFFFFF");
fo.addVariable("xmlURL", "gallery_XXXX.xml");
fo.write("flashcontent");
</script>
NOTE: To make the AutoViewer go the full width of the webpage, I have changed the value in the var fo = line to “100%”
Change the gallery.html line to gallery_XXXX.html (the name of your new gallery file which you have copied into the pages folder) – this will link it to the right images.
NOTE: The source code you can get from the AutoViewer website does not include the extra line I’ve added here before the f0.write This line you have to get from elsewhere on the site (or you can cut and paste the whole of the script I have provided here).
To change the following:
removing PLAY button or ARROW buttons
changing background colours,
brightness of images either side of central images in the slideshow:
These changes will affect every slideshow on the website as each AutoViewer slideshow uses the same swf source file.
NOTE: If you change the width/height of the slideshow in this code, it will only affect this one slideshow on this particular page.
In your AutoViewer folder (which you have downloaded) go to source > \source\com\airtightinteractive\apps\viewers\autoviewer\Options.
Save and then republish the SWF file – by opening source/autoviewer.fla in Adobe flash and FILE > Publish.
Copy this new autoviewer.swf file (which you will find in the AutoViewer web folder into the pages folder of your Dreamweaver site.
Part 4 – Uploading to your completed website to DreamwaverI used
FileZilla.
Biggest problem here was the all the page files need to go directly into the wwwroot directory (if they are in a folder on the wwwroot directory your website will not work).
Once uploaded, you must manually, in FileZilla or Dreamweaver, move everything in the pages into the wwwroot folder. But you will also have to move the images in the pages > Images folder into the images folder (as these images have to be in the fodler directly next to the html pages themselves.
Another note of caution: If you then upload new or amended pages through Dreamweaver they may go directly into the pages folder. You will then have to drag them out of there and into the wwwroot folder.
I have been dragging any updated html files in FileZilla – but this does not work unless you delete the html file you are replacing first (FileZilla offer the option to replace existing file for you, but this does not seem to work and updated pages are not visible when you check online).
If you add any images/logos to a page, don’t forget to copy them into the images folder in the wwwroot directory.
And finally...
Part 5 - Linking your uploaded files to your serverNightmare this was.
It is going to change from server to server, where the name of their folders and files are not exactly the same as those in Dreamweaver.
In Dreamweaver:: SITE > mange site > select your project in the pop-up box > EDIT
Click on Testing Server (CS4):
Server model: [none]
Access: [FTP]
FTP host: [your host website login]
Host directory [/wwwroot – though this may differ for other website host companies]
Login: [your host website login]
Password: [your host website login]
URL prefix: [something like this: ftp://XXXXXX@XXXXXX/wwwroot/]
Then click on TEST
Hopefully this will now connect with your webhost.
NOTE: Getting the URL prefix was not easy. I emailed my webhosting company several times – they were no help. To be honest, I’m not sure where I actually got for the prefix from in the end – possibly SITES > Manage > unnamed server > edit. Comments here welcome.
The End.
Thanks for sticking with me. This guide is far from comprehensive - but it may just save your sanity.
