Page tree
Skip to end of metadata
Go to start of metadata

 



Before you create content for the web please read the digital team's pages on writing for the web.

You will have to have access to the test server in order to be able to edit web pages or files.

You will have to notify web support and follow these instructions in mapping your network drive.

You will then be given access to the Test server or Testing environment, unless otherwise allowed access to the Live (pages that can be seen by everyone on the internet).

Site definition

First you have to set up the site in Dreamweaver

Editing the page

*expect variations on layout 

Opening up Dreamweaver (your view may be slightly different)

My view includes the list of files on the right hand side

Double click on your chosen file or right click in your folder and Edit in Dreamweaver

Edit view

Open up your document in Dreamweaver and you will have the option of seeing all the code or the design or both. It may be best at times to switch between these options, depending on what you are doing.

At the top of the document in the code view you can something similar to this

This example shows that you are working in a faculty profile.

Top left gives you the file name and top right gives you the path of where the file is.

In the code you will see the text below 

<title>About - Professor Richard Jackson</title>

You need to be check the title is right as this is what you will see in the browser tab/window and also what you will see in the search results.

You should also make sure the meta description tag is filled in. Search engines will use this in search results. The meta description tag should provide a concise summary of what a user would expect to find on the page. You should try to limit page descriptions to 160 characters. Here's an example:

<meta name="Description" content="Richard Jackson is a Professor of Accounting and Finance. Research interests include corporate insolvency, prudential regulation, derivatives and earnings." />

 

Attaching files to web pages

When you need to include an image, pdf, word doc or any other file you to make sure you add that file to right folder and in the html file you need to use the right path.

In the below example you can see that the picture of Richard is in the following folder 

this means that when you refer to the image in webpage you must use the same file path so that the web page can locate that file.

Below is highlighted the file path /management/images/staff/richard_fairchild.jpg

when you press F12 you can view the webpage in the browser it knows to include the picture.

Testing the page works

Check errors

Dreamweaver has a built in output component that alerts you if there are any errors in the page you are working on. 

once the error has been checked and completed then the red cross turns to a green tick

If you don't see the red/green icons, you might need to activate linting in Dreamweaver ('edit'->'preferences'->'linting')

Check browsers

Checking your code works and in each browser and devices if possible.

To preview a page you can press F12 or click on the little world icon bottom right of Dreamweaver's editing page

(you may need to set up your browsers)

Make sure you have various browsers installed, these are the most popular ones.

Internet Explorer generally looks slightly different but you may see little variations in your pages. If they don't impact too much with the flow or functionality of the page, I wouldn't consider them to be big issues.

Make sure your links are going to the right places

link path is important to get right as this break if not done correctly

all links must be lower case with hyphens between spaces

For example:

If you are editing an existing page to link to a new page then the new page will not exist on the live server until all details have been confirmed to make this live.

So instead of linking to the new page like www.bath.ac.uk/management/faculty/richard-jackson.html 

its make more sense to link like this /management/richard-jackson.html as this links to the file regardless of whether its on the live or the test server.

Also when uploading text/word docs/pdf files that need to be attached, make sure they are in the right folder and you've added the right file path.

Check images

Images should have the correct path and load when you check in the browser and they have the correct alt text (these are the words you see when you hover over the image)

Here's an example of what the code could look like in the image source tag

 

<img src="../images/staff/richard_fairchild.jpg" alt="Dr Richard Fairchild" width="98" height="150" border="0" />

 

Check devices

Only if you have access to various devices, but if you own a smart phone you can check on there.

Its worth checking other devices when adding some new functionality to the site/web page as this may be a different experience on a smart phone or tablet.

Its always a good idea to check other colleagues computers nearby if you are unsure and to double check if things are loading properly

Sending it

Sending the test link out is a great way of getting final sign off of the page/s before they go live.

The test link will always begin with http://mnsv-laszlo.campus.bath.ac.uk/management/...

Make sure you tell them to refresh the page as the old page may be cached. If this page is not updating on the live site we can give this page and extra nudge to update.

Making it Live

You can send the links on the test in an email to the Web team asking them to make them live, provided you have error/browser checked.

If you have been trained and are confident with HTML we can set you up to make files live.

This can either be done through Dreamweaver or just copying files from the corresponding test to live folders.

Things to remember

Style guide

The University has its own style guide that you should follow. This covers things like how you should write dates, titles and qualifications.

The School's styleguide covers more code-specific things.

Don't use 'click here' or 'more'. Where possible, a hyperlink should be decriptive and it should be clear from the text where a link will lead. Be active with calls to action. Use keywords near the start. Larger links are better for users on touch screen devices.

Bad: For more information on hyperlinks click here.

Good: Read more about writing good hyperlinks on this blog post.

And the good folk over at Nielsen Norman have a really in-depth article on writing good link text.

Heading structure

Pages should be ordered sensibly, and the use of header tags should be hierarchical. This is important for accessibility.

You should only have one <h1> tag per page, and should avoid jumping from e.g. <h1> to <h3>.

Common errors

Don't use empty <p></p> tags to space out pages (Dreamweaver will add these in automatically when you use hard returns in the design view). You can use <br /> to enter line breaks.

<div> that are not closed will results in errors in your page, so you make sure your <div> is closed with another </div>

File naming

When naming files delete spaces from files e.g 'Seminar on European policy conference v3 .pdf' should be seminar-on-european-policy-conference.pdf

Use hyphens to separate words, not underscores. Don't include e.g. 'v3' or 'final-version'. No special characters (%, ^, & etc) and avoid capital letters.

 

 

  • No labels