| EL27720 home |
| Subject village? |
| Course schedule |
| Team projects |
| Study resources |
| Video conference |
| Web design guide |
| Networking |
| EL27720 map |
| EL27720 course description |
| John Morgan |
| jpm@aber.ac.uk |
Web design guidelines and the AU server
- Using your W: Drive
- Mapping a network drive
- Guidelines on publishing to the WWW at AU
- Basic principles of web design using Front Page
- How to create a document download link
- Using pictures and picture editing
- Making an anchored list page for frequently asked questions (FAQs)
- Current student links
- Facebook resources
- Things to include in your first web page as a design exercise
Your W: drive is a mirror of your M: drive, but can be used for live web editing. M: drive cannot be used for this purpose and if you use it, you will have to reset permissions for your site. As such it is highly recommended that you always reconnect to your W: drive before creating or editing any pages. NOTE: all web pages must be stored in your public_html folder.
Mapping your network drive
Use the start menu and right click on my network places. Select map network drive. Select W: from the list of drives. Type in the correct path:
- Staff: \\smb1\cswr
- Undergraduates with network log ins between aaa - kaz: \\smb3\cswr
- Undergraduates with network log ins between kba - zzz: \\smb4\cswr
- If you have problems connecting try \\smbhost\cswr
Even if you select reconnect at log on you will always need to reconnect each time you want to edit your pages. Please note that you should not edit your pages in M: drive as you will have viewing problems and will have to rest permissions to view the page in Kea term or Telnet.
Source: http://users.aber.ac.uk/resources/network-drivesch.shtml
Initial guidelines: these will help you to understand the nature of the W: drive http://users.aber.ac.uk/resources/cswr.shtml
Read: Guidelines on publishing to the WWW at AU http://www.inf.aber.ac.uk/regulations/www.asp
Disclaimer: the following disclaimer from the above web page is required on the opening page of all personal AU (i.e. "users") web sites:
The information provided on this and other pages by me, YOUR NAME (YOURLOGIN@aber.ac.uk), is under my own personal responsibility and not that of the Aberystwyth University. Similarly, any opinions expressed are my own and are in no way to be taken as those of A.U.
Start by copying this and pasting it into your own page, remembering to change the name and e-mail address to your own.
Basic principles of web design using Front Page
Open Microsoft Front Page on the network
- Type some text into the page, play with the buttons in the control panel to see what you can do with the text.
- Save the page as index.html
- Make sure that you save the page in your W: drive inside the folder named public_html
- If it is not inside public_html it will not be viewable on the web.
- Create another page and save it (e.g. page2.html). Make sure you have saved both pages before linking them together.
- Link the two pages together with the link command in the control panel. Link index.html to page2.html and link page2.html to index.html
- View the pages in a web browser. Your URL (uniform resource locator--web-site address) is http://users.aber.ac.uk/YOURLOGIN
- If you cannot
view the pages, check:
- Did you save all pages and pictures in public_html on W: drive?
- Did you create the pages on W: drive and not on M: drive?
- If you created them on M: drive and you see the message "you are not authorised to view this page", click here and follow this sequence in TELNET (go to Start menu, select "run", type in TELNET Central).
How to create a document download link
This is the simplest technique of all. Jusst put the documents you want to download in your public_html folder. Create a link title, select link and instead of linking to a web page link to the document itself. A download window will automatically open on the users computer when the link is selected.
Using pictures and picture editing
To download a picture, right click on the mouse, choose "save picture as" and save it to your W: drive in public_html
To insert it in a Netscape page, select the image button in the control panel and choose the picture you want to use.
To edit the picture (e.g. changing its size), do not try stretching it on the web page as it is hard to get it right without distortion. Double click the picture icon in your public_html folder, select the second button from the right on the bottom control panel and it will open in picture editor. In picture editor go the image menu and select resize.
Making an anchored list page for frequently asked questions (FAQs)
This page is structured around an anchored list with links from the top of the page to each section and reciprocal links back to the top of the page. This is very useful if you want your readers to be able to print information in linear sequence as it provides an contents list for information management.
Follow this link to a ready made FAQs page. Try making your own, but if you don't have time save this one to your W: drive.
Current students (semester 2, 2012/2013): default index is only visible until web content is created
Copy and paste the Facebook link to your web page:
- Ayeiza Afonso
- Arianna Cabrera Sanchez
- Daniela Carvalho
- Irene Costas
- Maite de Barros
- Paloma de Castro
- Maria Lopes Fernandes
- Antti Pievilainen
- Rocio Reinoso Santos
- Ruben Rodriguez
- drb
Copy and paste our Facebook link to your web page:
Use text:
- AberMas132 on Facebook
Use URL in html below:
Facebook for websites: developers resources (use of html required)
Add a Facebook logo and link
Code supplied by Facebook Badges<div align="center"><a href="http://www.facebook.com/YourLink"><img src="http://twitterbuttons.sociableblog.com/images/FB10.png" title="Facebook" width="200" height="60" border="0" /></a><br /><a href="http://twitterbuttons.sociableblog.com/facebook-badges.html">Facebook Badges</a></div>
Make sure you change the group URL to your own if you want a link to your own personal page
Add a "like" button for your Facebook page
http://developers.facebook.com/docs/guides/web
When you are more familiar with html, you can add Facebook features to your pages quite easily. For example if you want your viewers to be able to "like" your page on their own Facebook pages, add the following code to your page, but don't forget to change the URL indicated in red below to the URL of your own web page:
http://users.aber.ac.uk/your-user-name
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>
Things to include in your first web page as a design exercise
- Name
- E-mail address
- Disclaimer
- Links to any My Space, Facebook, Blogs or other networking pages that you have—if you are willing to share them.
- Nationality, hometown, first language
- Where you study and what you study
- Academic and professional interests
- Personal interests
- Social interests
- Any photos you have—that you don’t mind other people seeing