Scribd Logo
Hochladen

Willkommen bei Scribd!

  • 01 Firstweb

    Hochgeladen von

    Raajethery Zubair Hassan
    10 Ansichten3 Seiten
    Tutorial 1 - your first web page BB115004S - Web Design for Business. Create a folder called webdesign1 and place it at the top level of your drive. Create your first web page and save it into the new folder webdesign1.

    Originalbeschreibung:

    Originaltitel

    01_firstweb

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    DOC, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Tutorial 1 - your first web page BB115004S - Web Design for Business. Create a folder called webdesign1 and place it at the top level of your drive. Create your first web page and save it into the new folder webdesign1.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOC, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    10 Ansichten3 Seiten

    01 Firstweb

    Hochgeladen von

    Raajethery Zubair Hassan
    Tutorial 1 - your first web page BB115004S - Web Design for Business. Create a folder called webdesign1 and place it at the top level of your drive. Create your first web page and save it into the new folder webdesign1.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOC, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 3

    Tutorial 1 - Your first web page

    BB115004S Web Design for Business

    Tutorial 1: Understanding your environment and building a first web site


    Learning activities
    Preparation First ensure you have a working university computer account i.e. you can log on anywhere successfully with your own username and password. Make sure you can access your personal network drive space, this is shown as drive H (your Home drive). Now open My Computer Step 1 Create your folder Open My Computer, and create a new folder. Call the folder webdesign1 and place it at the top level of the H:/drive or onto your memory stick. First Golden Rule: ONE SEPARATE FOLDER PER INDIVIDUAL WEB PROJECT DO NOT HAVE UNRELATED DOCUMENTS IN THE SAME PLACE! THIS IS REQUIRED LATER ON AS NOT HAVING ALL THE FILES IN A DIRECTORY TOGETHER WILL CAUSE YOU MANY PROBLEMS WHEN UPLOADING TO A SERVER LATER ON! REFERENCES TO My Documents WILL NOT WORK. SO, KEEP YOUR WEBSITE TOGETHER IN ONE FOLDER (YOU CAN CREATE SUB-FOLDERS TO ORGANISE FILES).

    You should get something roughly like the above a brand new folder with absolutely nothing in it. Step 2 Create your first web page (and save it into the new folder) Open up Notepad and type in the following text

    <html> <head> <title> Welcome to my website! </title> </head> <body> This is truly awesome! </body> </html>
    Now click Save As, and make very sure you save the file into the new folder webdesign1. Give it the file name index.htm ALL your web page documents should have the .htm extension. Index.htm tells the user that this is the first page. You have to type the entire file name otherwise Notepad will just add .txt as normal. Page 1 of 3

    Tutorial 1 - Your first web page

    BB115004S Web Design for Business

    Second Golden Rule: USE LOWER CASE THROUGHOUT Make a point of typing EVERYTHING in lower case: filenames, HTML code etc. The only exception should be in pure text for display like the T in This above. Professional tips like this save you much pain later. Why index.htm? Home pages (start points) are by convention called index.htm use the conventions they make sense. Third Golden Rule: AVOID SPACES IN FILE NAMES STICK TO SINGLE WORDS OR USE UNDERSCORES Note that you do not need to close NotePad each time you save as long as you have saved the index.htm file in the right folder correctly. It is normally a smart move to keep Notepad open. Note that it will not save the file automatically if you make any changes then you need to save the file manually again. Step 3 Review the result This is the easy bit. Open Internet Explorer or Firefox. If it tries to connect to an internet connection, decline it. We are developing completely offline here: no need at all for a live internet connection. Type H:\webdesign1\index.htm into the Address box, where you would generally type in the required web site address of interest. You should get something like:

    When you have achieved the above well done! Now proceed to amend the web page by adding the line:

    A 50,000 salary and company Lexus will be mine before long


    underneath the first sentence. You should be able to appreciate that it should be pretty easy to go back into NotePad, edit the original index.htm file and save it again. HINT: Inserting the tag <br /> into your HTML will force a line break at the point where it is inserted. The new version can now be viewed simply by pressing the Refresh option in IE .

    This is the basis of a cyclical development approach which in simple terms just means developing some code, saving your changes to the file, checking it works OK and so on until a complex bug-free end product is achieved.

    Next Step:

    Page 2 of 3

    Tutorial 1 - Your first web page

    BB115004S Web Design for Business

    When all the above is mastered work through the HTML tutorials at: http://www.w3schools.com/html/ Do use the feature which will show you the notepad programming view and what it will look like in the browser next to each other. For your reference, here is a list of Hexadecimal colour codes: http://www.w3schools.com/html/html_colors.asp
    Next Activity Create a new web page of your own that appears exactly as follows:

    Ashcroft International Business School Anglia Ruskin University East Road Cambridge CB1 1PT Or

    Ashcroft International Business School Anglia Ruskin University Bishop Hall Lane Chelmsford CM1 1SQ

    Oh and by the way, the page background should be light grey and the words Ashcroft International Business School should be dark blue.

    And if you find the time Read carefully through the web design assignment brief and start thinking about the concept design for your assignment. If you are unsure about anything at all, ask the tutor for clarification.

    Page 3 of 3

    Das könnte Ihnen auch gefallen