Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (10)
Andere mochten auch
Andere mochten auch (7)
Ähnlich wie Green Hectares Rural Tech Workshop – Website Design
Ähnlich wie Green Hectares Rural Tech Workshop – Website Design (20)
Mehr von Green Hectares
Mehr von Green Hectares (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Green Hectares Rural Tech Workshop – Website Design
- 2. www.greenhectaresonline.com www.zephyrtraining.ca info@greenhectaresonline.com info@zephyrtraining.ca THESE MATERIA A COPY LS RE RIGHTED WITH A RIGHTS A RESERV THIS DOCUMENT MA NOT IN WHOLE OR IN PA BE COPIED, PHOTOCOPIED, REPRODUCED, OR REDUCED TO A ELECTRONIC LL RE ED. Y RT NY MEDIUM OR MA CHINE-REA BLE FORM WITHOUT PRIOR CONSENT, IN WRITING, FROM Z R SOFTWA TRA DA EPHY RE INING LTD. A GRE HECTA S CORP. ND EN RE A SOFTWA COMPUTER, A PRODUCT NA MENTIONED A MA CTURER A PUBLISHER TRA NY RE, ND MES RE NUFA ND DEMA A A USED ONLY FOR THE PURPOSE OF IDENTIFICA RKS ND RE TION. Drupal is a registered trademark of Dries Buytaert. Google and Google sites are registered trademarks of Google In J oomla! Is a registered trademark of Open Source Matters Inc. Weebly is a registered trademark of Weebly Inc. WordPress is a registered trademark of Automattic, Inc.
- 3. Content Management S ystems Content Management Systems (CMS) are programs found on the internet which allow you to build websites without requiring technical knowledge of HTML, CS S or the uploading of files.
- 4. CMS Benefits • Y make changes inside any web browser. ou • Y don’t need any HTML knowledge. ou • Because content is stored separate from the site’s design, the content is always displayed with the same, consistent design.
- 5. Design Elements • Navigation bar • Fonts • Drop-Down Menus • Colours • The Fold • Images • Pages • Contact Form • Themes • Links • Blog
- 6. Navigation Bar The navigation bar is group of buttons common to all pages in your site that provides links for moving between pages.
- 7. Drop-Down Menus Drop-down menus are lists of options that appear below a link when a user hovers over it with their cursor.
- 8. The Fold The fold is the section of a website that is visible before a user has to use the scrollbar.
- 9. Pages Y have options with CMS sites to hide ou certain pages from public view or even use passwords to enable select visitors to your site access to specific pages.
- 10. Themes CMS sites include various themes that you can often change or swap back and forth with the click of your mouse!
- 11. Fonts There are two types of fonts: serif and sans serif.
- 12. S erif Fonts A serif is a short line at the end of the main strokes of a character or letter.
- 13. Browser Compatible S erif Fonts • Georgia • Times New Roman • Times
- 14. S ans S erif Fonts A sans serif font is a font in which letters have no serifs.
- 15. Browser Compatible S ans S erif Fonts • Arial • Verdana • Helvetica
- 16. More on Fonts • Never use more than two fonts on a website. • Keep font sizes consistent throughout pages on your website. (A paragraphs ll should be the same size, all titles should be the same size, etc.)
- 17. Colours Color choice is an important decision in every website design.
- 18. Images Images can enhance your site or fill it with clutter.
- 19. Contact Form A contact form enables users to contact you from directly inside your website instead of having to fill out email fields.
- 20. Links Links allow the reader to : • Move from one section of a web page to another section of the page • Move to a new web page • Go to another website
- 21. Blog Blogs are terrific for quick updates and add a personal touch to your site. Having a blog appear directly in one of your web pages enables users to stay inside your website while gathering all the information they need.
- 22. Popular CMS S ites Drupal http:/drupal.org / Google S ites https:/sites.google.com / Joomla! http:/www.j / oomla.org Weebly http:/www.weebly.com / Wordpress http:/wordpress.org /
Hinweis der Redaktion
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Welcome to Website Design - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Participants will explore a number of free hosted sites and choose one that meets their needs and will leave with homework on coming up with content, pictures, etc. in order to populate their web site. * Instructor notes will be distinguished by italics. Make sure that the following are installed / updated: Internet Explorer Other requirements: Internet Connection (High Speed Preferred) * This course should be taught by a person with a graphics / web development background.
- * It is wise to be well acquainted with a few CMS sites prior to teaching this workshop so you can offer specific advice and training to the participants. We suggest creating a demo site under Weebly or Wordpress to show participants. The reason CMS sites require little to no knowledge of HTML is because they most often employ something called drag-and-drop site building. The CMS will give you a list of items to incorporate in your website (paragraphs, titles, images, videos, maps, etc.) You simply click on and drag directly to the place you want it located on your website. This makes for incredibly easy site-building.
- Making changes to your website inside a web browser is great because you can edit your content from any computer with Internet access. This means faster updates and fewer bottlenecks. Instead of HTML and CSS knowledge, if you have a basic knowledge of word processing, you can create content easily.
- Navigation Bar You have the choice to place your navigation bar on the top of your webpage horizontally, or place it on the left/right side and list your main pages vertically. As long as your user can easily find your navigation bar with links to all your site’s pages, it doesn’t matter if you place it horizontally or vertically.
- You have the choice of placing all your pages in one list on your home page, or you can lump some of your pages into categories and use drop-down menus to access them. A drop-down menu appears when your mouse cursor hovers over the category you wish to select. This is beneficial if you do not have much room for a navigation bar, or if you have an extensive number of pages in your site.
- The term “fold” comes from the newspaper industry where essential front page content was literally located on the newspaper to be viewable in newsstands when the newspaper was folded. It is important to remember that important information ought to be placed above the website’s fold so it is quickly accessible to users. It is better to have web pages with little content on each page than having large pages that require lots of scrolling. If you don’t present content in a way that is easy for users to see, then they’ll have to work to find what they’re looking for. Most users are scanners, not detailed peruses.
- Choosing a theme is important because it represents your site visually. The benefits of using a CMS site’s pre-designed themes: You don’t have to know any code to create your site’s design. Every page is standardized to look the same instantly. You can see how each design will look with theme previewing.
- The purpose of a serif is to provide a visual guide from letter to letter in print. Serif fonts are excellent for long passages of text, such as in books or long paragraphs for easier legibility.
- To ensure that a user sees the fonts in your website, they must have the font installed on their computer. Unfortunately web creators have no assurance that desired fonts will be installed on the computer of the user. Therefore, when web pages are displayed, the pages may look different than you intended, because the desired fonts may not be present. So it is best to use browser-compatible fonts like those above and those mentioned in previous slides.
- The word “sans” in French means without . So a sans serif font is a font without serifs . Sans serif fonts are excellent for web pages because they are easily pixelated by computers. Often, serifs are either not displayed at all, or displayed too large.
- Fonts, like colour, emphasize your site’s visual identity. For your site to have be unified visually, you need to remain consistent. Choose a font that is legible, and meets the needs of both you and your audience.
- If you already have an established visual identity, your website should reflect it. Otherwise try to choose colours that reflect the essence of your business. (Hot pink doesn’t translate well if you are building a site for a funeral home.) Try to avoid lots of red or bright colours because they strain the eyes. Your website’s colours should be easy to see, and should not hinder users from reading text or navigating through your site.
- Images are hugely beneficial to your site if used appropriately. Images are highly engaging and add flavour to your webpages. Be sure that your images are clear and not too large. Bear in mind that the more images and the larger the image on your website, the longer it will take for a user to load your webpage. If you have images to showcase your products or examples of your work, feel free to show them! Users are more likely to buy your products if they have visual proof of your prowess.
- Most CMS sites will offer a pre-designed drag-and-drop contact form. You can even dictate to which email address you want your user’s message to go.
- Links are a fundamental part of the web. They are in fact what makes the web a web.
- Other Benefits of Blogging: To integrate a blog into the page of your site costs nothing with CMS sites. Updating a blog is easier and can be updated more regularly than a weekly/monthly newsletter. Search engines particularly like promoting blogs because they offer regularly updated content. If you allow users to comment on your blog (comments can be viewed privately or publicly), your company will appear more accessible to users. A blog enables you to speak more freely and in a more informal and personable style than your Web site does, and your readers will soon feel like they know you. The more they know, like and trust you the more likely they are to visit your main site, click your links and purchase your product. Allowing your visitors to leave comments can gain insight into your customers. With lots of content on your blog, you can pre-empt questions that users might have, which reduces unnecessary calls and emails.