Web Design/Build a small website

1

Web Design/Build a small website
This page is part of the Web Design project.

So far we should feel confident to Build a basic web page using headings (<h2>...</h2>) and paragraphs (<p>...</p>), images (<img />), lists (<ul>...</ul>) and links (<a>...</a>). We should also be okay with linking our HTML to a stylesheet (<link />) and setting up some basic styles (fonts, sizes, colours, margins and padding). If you're unsure, have a look through the check-list on Build a basic web page and see if you are confident with the skills listed there, or see if you can answer the basic HTML exam questions or CSS exam questions! Now we're ready to learn more about [1] structuring our HTML so we can A small website design called Red Tie from OpenSource Web Design control more of the style with our CSS as we create our first small website from scratch! We'll also learn why it's worthwhile creating semantic (i.e. meaningful) markup.

Checklist
The activities here aim to get us creating our first small website while at the same time raising our awareness of the different types of HTML documents that we can create – as well as how we can check (validate) our HTML to make sure it's correct. We'll also learn how to divide our content into meaningful sections that we can style with our CSS. Specifically we'll investigate how to: • • • • • Use semantic (ie. meaningful) markup (something we're already doing, but realising why we're doing it!). Use HTML tables for tabular data (not for page-layout!) Group HTML content using <div>...</div>'s. Use id's and class selectors. Use more complex CSS selectors.

• Create user forms for gathering user input. • Create navigational elements using simple lists

A great tutorial for creating a fixed-width 2 column layout with CSS (that shows you some of the bugs to avoid!) • Suckerfish Dropdowns [10] .How to create rounded corners for elements of your pages.Written by experience webmaster on good practices for creating good websites. • Mountaintop Corners [11] . Articles worth reading • 22 steps to create a good website [5] .After your demonstration of your step-by-step web design project you might feel ready to take on your first small website project (scenarios available). • Robust CSS Drop Shadows [12] .0 DOCTYPEs 2 Suggested Activities The following activities (together with the learning resources below) may help you apply the skills outlined above as you learn them in the context of a small project.Step-by-step instructions for creating CSS-based drop-down menus.Find out a bit about DOCTYPEs and why you should use them! • A roadmap to Standards [7] . • Find out why you should learn about current standards for HTML and CSS (see articles below) Your learning resources There's lots of excellent tutorials out there for learning HTML. • Choose 2 of the HTML or CSS tutorials below that you haven't yet seen and work through.An excellent introduction to the 'extra-bits' required for designing sites with XHTML/CSS.Web Redesign [2] • HTML Challenges .01 and XHTML 1.Creating drop-shadows for images or any other element of your page. lists and forms (each challenge includes links to tutorials). please do!. • A small website project . but try to limit each list to 5). Videos worth watching • Live CSS editing and debugging with Firebug [3] .the first part of this video shows an excellent way to debug your CSS! • Using the Web Developer Toolbar [4] .A video demo of the Web developer toolbar for Firefox. Here's a few resources that some of us have found useful: (please feel free to recommend others. • CSS challenges . If you can improve them. • Fix your site with the right DOCTYPE [6] .Web Design/Build a small website • Learn the strengths and weakness of the different HTML 4.5 will get you started with html tables.Challenges 3 .Gradually build your CSS skills for page layout as you attempt challenges 3 and 4. . Includes a pop-quiz for removing presentation stuff from your code! • CSS Problem Solving [8] . but there's also lots of old or even obsolete tutorials too.Some very practical tips for solving those CSS issues with your site! CSS Techniques • A simple 2 column layout [9] .

Excellent tutorial for learning how CSS selectors work. com [17] http:/ / www. edu/ itss/ support/ Training/ Online/ webdesign/ [19] http:/ / www. Accessibility. html . forms and DOCTYPE's • Web development lessons.Books [20] -List includes CSS. sixapart.000 links) of information and articles about web design and development. Color. mezzoblue.. Related Qualifications • Cert IV Websites Qualification in Australia References [1] http:/ / www.everything you'll ever need to remember about CSS all packed onto one page! • Web Design References [18] . Dreamweaver. d. div's. giving you more control over your page's style! • CSS Selectors .Includes intro. oswd. com/ articles/ doctype/ [7] http:/ / www.From WebDesignFromScratch. com/ lab/ developing_with_web_standards/ csslayout/ 2-col/ [10] http:/ / www. Typography. Writing. 456bereastreet. d.A huge mega-reference (nearly 6. PHP. alistapart. and much more. maxdesign. It is dedicated to disseminating news and information about web design and development with emphasis on elements of CSS. edu/ itss/ support/ Training/ Online/ webdesign/ books. com [3] http:/ / showmedo. Web Standards. accessibility. com/ knowledgebase/ build-website/ [6] http:/ / www. umn. Evaluation. (X)HTML. uiredesign. JavaScript. tutorials. alistapart. It typically goes out once a week. user experience.. Books • . • . google. • HTML tables [14] . intermediate and advanced tutorials/reference on HTML tables. com/ html-tables. com/ archives/ 2004/ 04/ 30/ a_roadmap_to/ [8] http:/ / www. and much more [16] Online Reference • CSS Cheat Sheet [17] .Web Design Update [19] A a plain text email digest newsletter. cfm [15] http:/ / www. web standards. Project Management. com/ articles/ dropdowns/ [11] http:/ / www. Information Architecture. dotservant. html [20] http:/ / www. com. com/ css/ css-cheat-sheet/ [18] http:/ / www. htm [14] http:/ / webdesignfromscratch. com/ videos/ video?name=webdevNewlandFirebug& fromSeriesID=51 [4] http:/ / video.Work through this excellent chapter of the CSS Wikibook. umn. All web designers and developers are invited to join. com/ videoplay?docid=-7091341557056577403 [5] http:/ / www. mezzoblue. html [13] http:/ / css. landofcode. org/ design/ preview/ id/ 3699 [2] http:/ / www. com [16] http:/ / www. yet another excellent resource from Ben Hunt showing you how to create HTML tables! • htmlDog [15] . com/ archives/ 2004/ 03/ 10/ css_problems/ [9] http:/ / www. Usability. com/ articles/ mountaintop/ [12] http:/ / www. ilovejackdaniels. edu/ itss/ support/ Training/ Online/ webdesign/ webdev_listserv. com/ pronet/ articles/ ydsf_-_robust_c. spans.Web Design/Build a small website 3 CSS/HTML tutorials • MaxDesign's Select Tutorial [13] . htmldog. umn. alistapart. au/ selectutorial/ index. d. Navigation.

McCormack. org/ licenses/ by-sa/ 3. Jones. Jguk.wikiversity. Licenses and Contributors Image:DeliciousFruitFromOSWD.png  Source: http://en.png  License: GNU Free Documentation License  Contributors: Author of design is http://www.png  Source: http://en.php?title=File:CSSZenGardenLikeTheSea.php?oldid=665703  Contributors: *nix.5  Contributors: Lars Daum. www.org/user/profile/id/19679 License Creative Commons Attribution-Share Alike 3.wikiversity.png  License: GNU Free Documentation License  Contributors: OSWD Design by http://www.org/w/index.org/w/index.png  License: Creative Commons Attribution-Sharealike 2.0 Unported http:/ / creativecommons.wikiversity.php?title=File:RedTie_-_OSWD. 0/ .Article Sources and Contributors 4 Article Sources and Contributors Web Design/Build a small website  Source: http://en.wikiversity. Klingoncowboy4. SB Johnny.de Image:RedTie_-_OSWD. Draicone.png  Source: http://en.php?title=File:DeliciousFruitFromOSWD.org/user/profile/id/10642 Image:CSSZenGardenLikeTheSea. Remi. Sadharan.oswd.org/w/index.oswd. 14 anonymous edits Image Sources. Michaelnelson.org/w/index.redrotate.

Sign up to vote on this title
UsefulNot useful