Tips For Editing Websites

Tips for editing Allwebco web templates

Pinned Note Editing Tips
Here are a few tips and shortcuts used by professional developers and designers when editing HTML pages and other template files.

See Also…

Drag into Browser Dragging files into applications
Rather than choose "file open" when previewing in your browser or editing in Notepad or your HTML software, you can drag any of the HTML pages or files right into an open window to check your work or do an edit. Open the folder where your web template files are, open the application you want to open the file in, and drag the file into the application window.


Editing using view source
You can edit an HTML page in Internet Explorer by choosing "view source". Example, drag any .htm page into IE (see above paragraph). In the IE menu, choose "view" then "source". Do your edits and choose "save". NOTE: You can NOT edit pages on-line this way. You can only edit the files in your template folder on your hard drive. If you do an edit and it does not change, you may be trying to edit on-line pages.


Finding an image name
Open any HTML page. Right click on the image and choose "properties". Check the properties to see the exact image name and location on your computer. Or optionally, right click the image and do a "save as". The name will display in the popup box "File Name" field.


Finding a background image name
Open any HTML page. Right click in the background image area on the webpage and choose "Save Background As..". In the popup box "File Name" field you will see the name of the image. In the box under that you will see the type of image this is. It may be a .jpg, .png or .gif.


Copying .htm pages and other files
If you want to make a copy of a file, open the template folder on your hard drive, right click the file ( .htm .css .js or any other file type), choose "copy", then right click in an empty area in that same folder and right click and choose "paste". Rename your new file by right clicking on it and choosing "rename".


Quick file renaming
This may not work with some Microsoft keyboards unless you hit the "F Lock" first. Highlight the file you want to rename, for example, you have made a copy of the "about.htm" and it is now named "Copy of about.htm". Highlight your copy, then on your keyboard select the "F2" key. The file should be active and you can type in the new name.


Search and replace
In Notepad and also in HTML view (or source view) in most HTML editors you can do a search and replace to change items. Perhaps you want to change "Allwebco" to "Yourcompany" on every page. First, open the file (any template file) in Notepad, then choose "edit" then choose "replace". Enter the text to change in the first box and the new text to use in the bottom box. You can also search and replace any text phrase with nothing.

Search and Replace

Tip: Some editing software allows for "search and replace" across multiple open files.


Error checking your Webpages


Checking your work
After editing your template you may want to error check your work. See the following websites:

If you are using HTML editing software, check in the help section to see if error checking is included. You may want to back up your HTML pages before you use any "autocheck" functions.

W3C Vaildation Service
Error check and validate your HTML pages on-line, or by direct input.

CSE HTML Validator Lite
Free trial version available for download. Software used by Allwebco designers (standard version).

Pagespeed Insights
Check your webpages for speed.

Finding an error on a page
If a template page gets messed up and does not work right or extra code is showing, there may be an error somewhere. You can check this using the services listed above.

Fixing a totally messed up page
If a page gets messed up too much to validate, you may just want to recreate this page by making a copy of any other page. Open the bad page using Notepad, find the code between the "CONTENT TABLE" notes and paste this into the new page. This is a quick fix for header, sidebar or footer problems.


Finding an element on a webpage
Sometimes you may have an element on one of your webpages that is not working or you're not sure about the location on the page. If it already has a class assigned, edit the css file and add a background color or border to it.

If the element does not have a class, or you do not want to change the existing class, you can add a temporary class. Follow these steps:
  1. Add the following class to bottom of your css file:

    .find { background-color: #99FFFF; border: #FF0000 1px solid; }

  2. In the HTML page find the element. Give it the "find" class in one of the following ways:

    If the element has no class add one:

    <h1 class="find">About Us</h1>

    If the element already has a class, add a 2nd one with one space between classes:

    <h1 class="title find">About Us</h1>

Resizing tables on a page
(For HTML 4.01 templates only) Some pages in Allwebco templates may contain tables.

Adding an absolute positioned div element
You can use an absolute positioned "div", with css code, to easily place an item anywhere on an HTML page.

Taking a screenshot
This may not work with some Microsoft keyboards unless you hit the "F Lock" first. In Windows, hit the "Shift+PrntScrn" at the same time. Then open your graphics program and choose "new". Then choose "edit" and "paste". Then save the image as a .jpg image.




Related Topics:
Editing the HTML pages
Adding Links to Webpages
Adding Images to Webpages