Instructions to edit this site

Page last Updated On: October 3, 2013

Access the remote files using ftp

  1. You need to use a ftp client to get to the remote site. A recommended client is FileZilla.
  2. Please contact me to get the following ftp connection details
    1. Host
    2. Username
    3. Password
    4. Directory on the remote machine
  3. Assuming you are using FileZilla, once you login, you should have the remote files on the right panel.
  4. Download the entire folder "v03" onto a folder on your computer. Downloading the entire folder will allow you to validate any edits you make before you copy them to the remote site (more later).

Edit the text in any of the files

  1. All the files that contain the text are located in the "v03" folder with the ".html" extension. index.html is the file which has the main page information. The rest of the filenames should make their contents self evident.
  2. It is recommended to use a HTML editor - recommended editor is Kompozer.
  3. Assuming you are using Kompozer, use the menu option File -> Open File, navigate to the "v03" folder and open the .html you want to edit.
  4. If you want to just change some text in the file, you should be okay. Just change the text and save, close the file.
  5. If you want to make other changes - such as add a new table row (the whole site is built using a bunch of tables) or something else, you can still go ahead and do it, but realize that you should definitely verify (see below).
  6. Once you have saved and closed Kompozer, open the file from your computer in any browser (Internet Explorer, Google Chrome, Firefox or Safari). Assuming you downloaded the entire folder onto your computer, you should be able to navigate and verify everything right on your computer, before uploading it to the remote site.
  7. Once verified, using the ftp client and instructions mentioned earlier, replace the modified files on the remote site with the ones from your computer.

Edit the images

  1. First some facts about the images
    1. All the images are located in the folder "v03/images"
    2. The header image on all the sites is "VipulEngineersHeader_Menu_1100_125.png"
      1. The header image is of the size "width=1100 pixels or px, height = 125 pixels or px"
      2. If you need to change the header image, please CONTACT me.
    3. The page background image is VipulEngineersBackground.png
      1. If you need to change the background image, please CONTACT me.
    4. The "slideshow" images are the ones with the following text in their name "_with_text_1100_300.png"
      1. All slide show images are of the size "width=1100 pixels or px, height = 300 pixels or px"
      2. All slide show images are of the type ".png". (not .jpg or .gif or .pdf or .bmp)
  2. If you need to "replace" an existing slideshow image with another one, then follow these steps
    1. First make sure the new image is resized to exactly "1100 px to 300 px". If not, the slideshow will not work right.
    2. Make sure you save the image as of the type ".png"
    3. Rename the new image to be exactly that of the image you want to replace.
    4. And, you should be done. Use the steps mentioned earlier to verify if you website looks fine on your computer before you upload the new image to the remote server using the ftp instructions mentioned above.
  3. If you need to "add another image" to the slideshow, then follow these steps
    1. First make sure the new image is resized to exactly "1100 px to 300 px". If not, the slideshow will not work right.
    2. Make sure you save the image as of the type ".png"
    3. Copy the file to the "images" folder.
    4. Use the "Edit the text in any of the files" instructions above and edit the file "index.html". For this operation, it would be preferable to edit the file using a text editor.
    5. Find the following section in the file
      <div id="slideshow"> 
        <img src="images/wave_soldering_machine_with_text_1100_300.png" alt="Slideshow Image 1" class="active"> 
        <img src="images/sockets_switches_with_text_1100_300.png" alt="Slideshow Image 2">
        <img src="images/pcb_layout_with_text_1100_300.png" alt="Slideshow Image 3">
        <img src="images/pcb_assembly_with_text_1100_300.png" alt="Slideshow Image 4">
      </div>

    6. Add your new slideshow image entry, as shown in example below
      <div id="slideshow"> 
        <img src="images/wave_soldering_machine_with_text_1100_300.png" alt="Slideshow Image 1" class="active"> 
        <img src="images/sockets_switches_with_text_1100_300.png" alt="Slideshow Image 2">
        <img src="images/pcb_layout_with_text_1100_300.png" alt="Slideshow Image 3">
        <img src="images/pcb_assembly_with_text_1100_300.png" alt="Slideshow Image 4">
        <img src="images/your_new_image.png" alt="Slideshow Image 5">

      </div>

    7. Save and close the file index.html.
    8. And, you should be done. Use the steps mentioned earlier to verify if your website looks fine on your computer before you upload the new image and the updated index.html file to the remote server using the ftp instructions mentioned above.
Click Here to go back                                                                                                                                                  Instructions provided by MoRoMa