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 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).
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
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
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:
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
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')
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 _- between spaces
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.
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
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.
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
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. Larger links are better for users on touch screen devices.
Bad: For more information on hyperlinks click here.
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>.
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>
When naming files delete spaces from files e.g 'Seminar on European policy conference v3 .pdf' should be seminar-on-european-policy-conference.pdf