目录
a - z指数
 

网站的风格, Presets 和 Best Practices

Review some of our site-wide styles available for your site along with recommendations 和 directions to implement. 

有一个建议? If you have questions as to where you can find any styles or how to get a custom style made, 联络网页小组(webteam@hghgjm.com).

字体

When trying to match the web fonts for other designs, here are some recommendations. You can try downloading them from 谷歌字体. 或者你可以用 Adobe的字体 (with a valid Adobe CC subscription). 

  • Roboto (for use in headers, accents, etc)
    • 这里正在使用机器人
  • Roboto-Condensed (Titles, navigation elements, 和 secondary option for headers)
    • 这里用的是Roboto-Condensed
  • 板B 大胆的 (accent font for quotes 和 sparing use)
    • 这里使用的是B板
  • 游廊(通用网页字体)

标志 & 大学品牌

视图西北的 品牌指导方针, including logos, for use on the web.

格式(字体样式处理)

The WYSIWYG editor has many default formats you can quickly apply like 大胆的, 下划线删去. These are all available in the toolbar or the format menu. 

You can also quickly 和 consistently adjust the format of your text with our predefined styles using the Cascade editor.

  1. while in a WYSIWYG editor, select the text to stylize
  2. 导航到“格式”选项卡,
  3. 和 choose from the preset font styles or use custom styles
    1. 'Format' > 'Formats' 和 select from,
    2. heading options, the system default "Blocks" options, or the Northwest "Custom" options. Note that a shortcut to these presets is also available in the WYSIWYG toolbar. 
截图:所见即所得编辑器

第14段(铅字)

大胆的

斜体

下划线

透油

p-large - 段 Large (intro sections)

段落(标题类)

Block Quote + paragraph - this is fill copy to illustrate use of the block quote format. This is fill copy to illustrate use of the block quote format.

标题1

标题2

标题2(附 .H1类)

标题2(附 .h2类)

标题3

标题4

标题5
标题6

颜色

西北“熊猫”绿色 十六进制代码是#006747吗

Some other common colors to use as needed:

  • 口音的颜色
    • 强调亮蓝色#00B2E2
    • 强调亮绿色#A1CE5F
    • Accent Light Blue #D6EFF8 (background)
    • 强调深蓝色#003B70
    • 西北红#ee0000
      • When a high contrast color is needed to highlight something. This has been selected for web use to meet accessibility 和 contrast st和ards. Use the custom format to quickly apply this color.
      • In a WYSIWYG editor selec 'Formats' > 'Custom' > 'Northwest Red'

列表

To add or edit a list, open up the panel 和 navigate to either of the two buttons circles below. From here, you can choose which list style best fits your sites format. List examples are also displayed in the photo.

截图:列表

 

 

按钮

例如按钮

截图:链接按钮

 

 

创建按钮样式化的链接, this will apply a preset CSS class to the link to achieve the effect:

  1. while in a page editor, in a WYSIWYG click "insert/edit link" 和 
  2. apply the appropriate link (internal or external) then
  3. select "btn" or "btn light" from styling options on click 'ok'.  
截图:插入链接

 

重要的! Leave table width undefined (enter nothing in properties) or place 100% in the width to allow tables to be responsive.

Define a table head (THEAD) to create column headers. These headers serve as labels when viewing the table in a responsive format. You can hide said label by using the class "nolabel" on a specific cell.

名字 Title 电话 电子邮件
鲍比熊猫 吉祥物 660.562.1212 bearcat@hghgjm.com

Table Styles (can be set under Cell »  Table Cell Properties)

By default all tables have a light grey border around it 和 all cells. This can be disabled by adding using the class "noborder".

行用 .应用标题类
行,没有应用类
与人争吵 .应用子类
行,没有应用类
与人争吵 .应用Alt类

条纹表

You can create a whole table with alternating row colors by using the class "striped".

第1行
第二行
第三行
行4
行5
行6

* Alternatively, you can go to Row » Table Row Properties. Select Alt as the class 和 in the bottom left corner menu, choose to apply changes to either the even or odd rows.

表空间

If you spacing is uneven in a table, some cells may be in paragraph format 和 others may not. 段 format adds some extra white space before 和 after the text. You can add 和 remove this formatting in the "Formats" drop-down box (in the toolbar). If paragraph is already selected, selecting paragraph again will remove that formatting.

没有段落
没有段落

图片

View our uploading images guide for help with how to upload.

Here are some image recommendations:

  • 考虑文件类型.
    • For best results 和 reduced load times, 首选WEBP或jpg文件,
    • 不建议使用png格式 for most applications as they result in large files size 和 diminished SEO results 和 user experiences.
  • 一定要 适当调整文件大小.
    • Files should never be over 1 mb (1024 kb) 和 rarely should they be over about 400 kb.
    • small images in large designs will pixelate 和 look bad
    • large files in small spaces use an unnecessary amount of space 和 slow down web load times. 
  • 网页上的照片 总是在RGB模式, CMYK or grey scale greatly increases file size.

查看和记棋牌娱乐的 tools 和 resources recommendations for help finding options for sizing 和 editing photos. 

Float 图片 (AKA 'Text Wrap' Left or Right)

"Left" 和 "Right" text wrapping options displayed below. 

爪标志This is fill copy to display the float left 和 float right options for text wrapping images. This is fill copy to display the float left 和 float right options for text wrap. This is fill copy to display the float left 和 float right options for text wrapping images.This is fill copy to display the float left 和 float right options for text wrap. This is fill copy to display the float left 和 float right options for text wrapping images. This is fill copy to display the float left 和 float right options for text wrap. This is fill copy to display the float left 和 float right options for text wrapping images.This is fill copy to display the float left 和 float right options for text wrap.

西北的标志This is fill copy to display the float left 和 float right options for text wrapping images. This is fill copy to display the float left 和 float right options for text wrap. This is fill copy to display the float left 和 float right options for text wrapping images.This is fill copy to display the float left 和 float right options for text wrap. This is fill copy to display the float left 和 float right options for text wrapping images. This is fill copy to display the float left 和 float right options for text wrap. This is fill copy to display the float left 和 float right options for text wrapping images.This is fill copy to display the float left 和 float right options for text wrap.