网页风格指南

Every webpage should have a few larger sentences at the top—像这样的—that describe what will be covered on the page.

So: we're here to provide guidelines and styles f或者是 Bowdoin College website.

为什么要建网站?

Our webpages are here to provide helpful information to our visitors. College websites are not designed to be archives or storage areas for everything 你的 department has ever produced. 就像一座花园, they require regular weeding and feeding—so make time at least twice a year to check on 你的 content and how well it's helping 你的 audiences.

你知道吗?? You can schedule reviews for 你的 pages and you'll be reminded when it's time to update them!

This is a great feature for pages that contain data that updates regularly: like costs, 办公时间, 或时间表.

使用文本

Text areas are the most common element of 你的 webpages. They will contain tools that are familiar to you if you've used Microsoft Word, 谷歌文档, or other writing and editing software.

It's important to guide a reader through 你的 page by using visual cues: no one likes a giant wall of 文本! In addition to using headers like the one above, you can style 你的 文本, add lists and links, and insert helpful separator items like horizontal lines.


其他有用的工具

In addition to the features found in a standard 文本 area, there are several other ways to guide 你的 visitors to information that they need. We'll cover these below.

Using the content type "Callout Panel" will add a gray background to the area, which can help you break the page area into sections.
有链接

有链接

Think of these as very pretty buttons. They allow you to link to another page using an image, rather than just 文本. They have a few important rules:

  • You can select whether the 文本 on top is black or white, depending on if 你的 image is light or dark. The CMS will automatically lighten or darken the image slightly, to help make it easier to read, but you may need to use images that aren't very busy. 
  • Try not to cover any faces with 文本! If you have great photos with lots of faces—like group photos from a conference or trip—consider another use for those.
  • The number of characters you can use is limited, to ensure that these don't get distorted. If 你的 link title is very long, you may want to use another tool or shorten the 文本.
  • If you have a lengthy word that's pushing the boundaries, you can toggle between 文本 sizes—normal and small—to help things fit better.

手风琴

Consider using accordions to group similar items that might have lengthy details, like:

  • descriptions of clubs or student groups,
  • fellowship requirements, or
  • 政策.

Never put emergency or critical information inside an accordion! Put 你的self into the shoes of 你的 reader: you wouldn't want to use an extra click to find an emergency phone number or a timely weather update.


相关链接

This content module creates a special list for links, rather than depending on links within paragraph 文本. These are used to link to other pages on the mindtinkering.com网站: we're helping our visitors find what they need, even if it's not on our own pages.

The options for related links include the ability to display them in one or two columns, and you can choose from the following category headers:

  • 相关链接
  • 有关部门
  • 相关的办公室
  • 相关的形式
相关链接

Using horizontal line breaks and columns is another great way to break up information on the page. 

There are two automated content types that you can add to 你的 department or office homepages: Stories, 和事件. Each of these content types will pull data from another source—like the 校园日历 或者是 新闻网站—and put the relevant information on 你的 page.

Ready to move from Website 101 to Website 201? 

我们来谈谈 photos and photo galleries, or colors and typography.