Create 5 Linked Pages for Personal Website
We've already done this by hand in the Hand Code Starbuzz Coffees assignment, so we know how to do it the hard way. Deep cleansing breath!
Now we'll do it using the Dreamweaver Graphical User Interface and the Template we have chosen based on our design sketch for the personal website. It may seem "harder" at first, but that's only because we're still learning the interface.
Use the SCREENCASTS if you're having trouble. They exist to help you.
Your Task
- Armed with the Dreamweaver Template (.dwt file) with the layout you prefer, use the content you wrote for your personal website (revised based on peer comments, of course!) to create a FIVE PAGE website with navigation that links each page to all other pages.
Here's how:
- In Dreamweaver, use File-New-Page from Template to create the 5 new pages. Make sure you give each page an appropriate name in the PAGE HEADING portion of each page. Save the pages with the following filenames: index.html, hobbies.html, neighborhood.html, major.html, & portfolio.html.
- Paste the content you wrote into the appropriate page (for example, Home is "index.html" and it should have your brief description of yourself). Use subheadings (<h3>s), paragraphs (<p>s), and lists (<ol> and <ul>) as appropriate to establish the Proximity that will group related content within each page. Leave the portfolio.html file empty for now. Make sure to save each page after you add the content. You now have five pages for a website.
- We made 5 webpages using the "new page from template" approach. Now we need to "modify the template" so we can link all the pages up to each other. Open your Dreamweaver Template (.dwt file) and establish the links to your 5 pages in the "<div id="mainnav">" PAGE ELEMENT. Need a hint?
- Give your links meaningful names. I recommend Home, Hobbies, Neighborhood, Major, and Portfolio. Feel free to customize. If your hobby is knitting, why not call the link (and the page) Knitting?
- Save your Template file and watch Dreamweaver do its work. You SHOULD get a dialog box asking if you want to update your 5 pages. Click YES and your pages will all get the right links set up. Did something go wrong in the update?
- Update your Site Information on the template so it has YOUR information and not mine! Go back into your Dreamweaver Template and make the appropriate modifications to the "<div id="#siteinfo"> area. Here's how:
- As with the MAINNAV, you may need to make your modifications in CODE VIEW. But it's not scary because you've done some hand coding! Need a hint?
- Change the text so it doesn't have my name in it.
- Change the email link so it goes to YOUR email and not mine. The code for an email link, as we know, is "<a href="mailto:yourname@youremailaddress">"
- Save your Template and watch all your pages get the update delivered to them.
- Now upload your emerging website to your server space and you're ready for a nice cold... ummm, a cup of coffee.
- Over in the Files pane on the right side of Dreamweaver, select those 5 files you modified.
- Hit the BLUE UP ARROW and they'll get uploaded to your web server space.
- Once the "index.html" file is uploaded you will replace the temporary file we put on your site. Go to http://students.york.cuny.edu/~username to make sure it worked. If all 5 files successfully uploaded you SHOULD have a working 5-page website. Send me an email so I know you got thing uploaded! Now it's time for that... coffee.
HINT FOR MODIFYING LINKS. You know this! We're just making some links in the Template. If you can't do it in DESIGN VIEW because the CSS presentation stuff is messing with Dreamweaver, you have two options. You can go into CODE VIEW and do it there. Or you can COMMENT OUT the CSS link code in the HEAD of your Template to temporarily remove all presentation from your Template. You should then be able to use DESIGN VIEW to make the links.
DID SOMETHING GO WRONG IN THE UPDATE? No worries! Your pages somehow got separated from the Template. We've seen this before, and we'll see it again. We can manually re-connect them up. Get the lost page open in Dreamweaver and use Modify-Templates-Apply Template to Page to find the master page and get things connected again.
Don't like the look? Restyle!
Dr. Reid | Produce | Wikiwiki | Escher
| Cloisonne | The
Blues | Negative | Skinless