So finally the landing page for the Letters is done. BUT. I swear there are gremlins in my site. Every time I fix something, something else gets out of joint. Not fair! I have spent such a long time on this site and it has been such a steep learning curve too. Here’s how I set up the page:
I followed the exercise we did with Maria to create and modify a table. But I did this in the template I created already with the same banner, etc. I inserted a table by going to
Insert > Table and setting the parameters in the dialog box for the number of columns and rows I required. Fine. I didn’t really have to modify the table as it was a straightforward table for the categories and the 2 letters to go under each category.
Now, I centered the table and it looks fine and centered in standard view. When I switch to Live View or preview in a browser, it has aligned to the left! I can’t see what has to be tweaked for it to stay in the centre. Sob.
I wonder if I should have the link for a page stay a different colour once clicked, so that the visitor knows that they are on that particular page? OK I’ve just de-linked them so they do not look like links when you hover over them. I did this by deleting the <a ref=”#” tag from that particular list item on the navigation bar.
But I am still having browser compatibility issues, but on Firefox it’s on some pages and not on others. ?
I realise too that for the Letters page, there will be a list of all the letters under their categories. But I will not be able to click from one letter to another letter as to do that I will have to have the letters in some kind of sub-navigation from the Letters page link, for example as a drop down menu, or as a vertical navigation bar in the body of the Letters page. Similarly, you will not be able to view a particular letter directly from any of the main pages, except from the Letters page. So when you finish reading one letter, you will have to go back to the Letters page in order to select another letter : (
I know this is not ideal or good practice but I don’t think I can do something like that in time for the deadline as there are so many letters! My website has way more than the 5 pages I started out to create, but I so proud of them and am actually beginning to like doing this. I think that is the most important thing i have gained from the whole exercise – losing my technophobia.
Hoorayyyy! I found out why my linked title words were not actually connecting to the index page. It was very simple after all (again). I had not linked the index file inside the html folder. As soon as I did that, (trumpet fanfare) one click and it took you to the home page. What a relief! I am so proud that I am solving these problems by myself. But there are still some little bugs I have to remove.
When I tried to link the title to the index page again it actually worked so I must have overlooked something. I highlighted the words I want to link, then in the very cool Properties panel, clicked on the folder icon next to the link field. I then navigated to the index.html file and clicked to choose it.
After linking the website title ‘Labcoats and Letters’ to the index page, I made the title words change colour from red to green on mouse rollover. I made the rollover colour match the green in the banner to keep the colour coordination to a few colours. It was simple to do too. I went to the Properties panel, then Page Properties and under the Links categories, you can also specify the colour, whether you want a rollover colour, etc. in the same box. I also chose not to have the linked words underlined in exactly the same way.
Earlier when I tried to do it, the words turned blue and I didn’t know how to prevent that. I found out how to sort that by using the Page Properties box in the Properties panel. By choosing the colour you want the linked words to be in, you avoid the garish blue with underlining.
So now all the titles on all the pages are linked to the index page, and the words are in the colour of my choice, which in my case was the red of the website title.
I have been trying to add a Facebook Like button too as I wanted this from the start. I followed instructions I found online and got the code from the FB developers website and it did not work. I tried to use the code using the iframe tag and made sure I was logged into FB first. I can’t see what I am doing wrong in order to correct it. : (
I think I will have to forego making a sitemap as I originally wanted to do. I have other urgent matters to resolve first and I don’t think I will have time to get my teeth into a sitemap.
Now I’ve been researching how to link the words ‘Labcoats and Letters’ to the index page and found instructions to link images and text. I tried doing this (from http://www.sitewizard.com):
- Click once on your site logo, or any other image that you want to make into a clickable link, to select it.
- Look at the PROPERTIES panel at the bottom of your Dreamweaver window (see picture).If you want to use an absolute URL for your link, enter the URL manually into the Link field. For example, if the main page of your site can be found at “www.example.com” and you want your picture to link to it, type “
http://www.example.com/” (without the quotes) into that field and hit the ENTER key (or the RETURN key if you use a Mac). If you’ve forgotten what an absolute URL means, please return to the section on absolute and relative URLs.On the other hand, if you want to use a relative URL for your link, click the icon that looks like a folder near the URL field. (It’s actually a clickable button.) A dialog box entitled “Select File” will appear. Select the file you wish to link to, and click the “OK” button. As is obvious from this dialog box, you can only use this method for web pages that you have already created, and that are located on your own website. As mentioned earlier, if you’re linking to some other website, you’ll have to use an absolute URL.
- Enter “0” (zero, without the quotes) into the “Border” field of the PROPERTIES panel. If you don’t do this, some browsers will show a blue border around your picture to indicate that it is a clickable link. By entering “0”, you are giving the border a width of zero, effectively removing it.
Now I did this, zeroing the border field in the properties panel, and the words were indeed linked to the index page (I tested it by clicking on the title on the About page and it took me to the index page pronto). But, the text appeared underlined in blue, so something obviously is wrong. Guess what I will be working on tonight.
Yes I did find out how to do this with target=”_blank”. But I was putting it in the wrong part of the <alt> code, ie. right at the end of the string. Maria sent an email around too – thanks Maria! By trial and error I got it right:
<p style=”text-align: center”><a href=”../images/newton_letter.JPG”target=”_blank”><img src=”../images/newton_min.png” width=”200″ height=”267″ alt=”newton_letter”/></a></p>
All this is taking such a long time. There is still so much to do.