Directory
A-Z Index
 

网页样式,预设和最佳实践

查看威尼斯人在线网站范围内可用的一些样式,以及如何实施的建议和指导. 

Have a recommendation? 如果你有问题,你可以在哪里找到任何风格或如何得到一个定制的风格, contact the Web Team (webteam@tjkltm.com).

Fonts

当你试图匹配其他设计的网页字体时,这里有一些建议. 你可以试着从 Google Fonts. Or you can use Adobe Fonts (使用有效的Adobe CC订阅). 

  • Roboto (用于标头、重音等)
    • Roboto in use here
  • Roboto-Condensed (标题、导航元素和标题的次要选项)
    • Roboto-Condensed in use here
  • Circe Slab B 粗体(引号的重音字体)
    • Circe Slab B in use here
  • Veranda (generic web font)

Logos & University Branding

View Northwest's brand guidelines,包括徽标,以便在网络上使用.

Formats (Font Style Treatments)

所见即所得编辑器有许多可以快速应用的默认格式 bold, underline and strike through. 这些都可以在工具栏或格式菜单中找到. 

您还可以使用Cascade编辑器快速一致地调整文本的格式,并使用威尼斯人在线预定义的样式.

  1. 而在所见即所得编辑器中,选择要样式化的文本
  2. navigate to the 'Format' tab,
  3. 并从预设字体样式中选择或使用自定义样式
    1. 'Format' > 'Formats' and select from,
    2. 标题选项,系统默认的“块”选项,或西北“自定义”选项. 请注意,所见即所得工具栏中也提供了这些预设的快捷方式. 
Screenshot: WYSIWYG editor

Paragraph (14pt Verdana)

Bold

Italics

Underline

Strike-through

p-large -段落大(介绍部分)

PARAGRAPH (ALTHEADING CLASS)

整段引用+段落-这是填充副本,以说明使用整段引用格式. 这是填充副本,用于说明块引号格式的使用.

HEADING 1

Heading 2

HEADING 2 (WITH .H1 CLASS)

Heading 2 (with .h2 class)

Heading 3

Heading 4

Heading 5
Heading 6

Colors

Northwest "Bearcat" Green is hex code #006747

根据需要使用的其他一些常见颜色:

  • Accent Colors
    • Accent Bright Blue #00B2E2
    • Accent Bright Green #A1CE5F
    • 浅蓝色背景#D6EFF8
    • Accent Dark Blue #003B70
    • Northwest Red #ee0000
      • 当需要高对比度的颜色来突出某些东西时. 这已被选择用于web,以满足可访问性和对比度标准. 使用自定义格式快速应用此颜色.
      • In a WYSIWYG editor selec 'Formats' > 'Custom' > 'Northwest Red'

Lists

要添加或编辑列表,请打开面板并导航到下面两个圆圈中的任意一个按钮. 从这里,你可以选择哪种列表样式最适合你的网站格式. 列表示例也显示在照片中.

Screenshot: Lists

 

 

Buttons

Example buTTON

Screenshot: Link button

 

 

To create a button stylized link, 这将应用一个预设的CSS类的链接,以达到这个效果:

  1. 而在页面编辑器中,在所见即所得中单击“插入/编辑链接”和 
  2. 然后应用适当的链接(内部或外部)
  3. 在样式选项中选择“btn”或“btn light”,点击“确定”.  
Screenshot: Insert link

 

Tables

IMPORTANT! 不定义表的宽度(在属性中不输入任何内容),或者在宽度中设置100%,以允许表响应.

定义一个表头(THEAD)来创建列头. 当以响应式格式查看表时,这些标头用作标签. 您可以通过在特定单元格上使用“nolabel”类来隐藏该标签.

Name Title Phone Email
Bobby Bearcat Mascot 660.562.1212 bearcat@tjkltm.com

表格样式(可以在单元格»表格单元格属性下设置)

默认情况下,所有表格和所有单元格周围都有浅灰色边框. 这可以通过添加类“noborder”来禁用。.

Row with .heading class applied
Row with no classes applied
Row with the .sub class applied
Row with no classes applied
Row with the .alt class applied

Striped Table

可以使用类“striped”创建行颜色交替的整个表.

Row 1
Row 2
Row 3
Row 4
Row 5
Row 6

或者,您可以转到行»表行属性. 在左下角的菜单中选择Alt作为类, 选择将更改应用于偶数行或奇数行.

Table Spacing

如果表格中的间距不均匀,则一些单元格可能采用段落格式,而其他单元格可能不采用段落格式. 段落格式在文本前后增加了一些额外的空白. 您可以在“格式”下拉框中(在工具栏中)添加和删除此格式。. 如果段落已经被选中,再次选择段落将删除该格式.

Paragraph

No paragraph
No paragraph

Paragraph

Images

查看威尼斯人在线的上传图片指南,了解如何上传.

以下是一些图片推荐:

  • Consider file type.
    • 为了获得最佳效果和减少加载时间, WEBP or JPGs files are preferred,
    • PNGs are not recommended 对于大多数应用程序,因为它们会导致大文件大小,降低SEO结果和用户体验.
  • Be sure to size your file appropriately.
    • 文件不应该超过1mb (1024kb),也不应该超过400kb.
    • 大型设计中的小图像会像素化,看起来很糟糕
    • 小空间中的大文件会占用不必要的空间并减慢web加载时间. 
  • Photos for web should always be in RGB mode, CMYK或灰度会大大增加文件大小.

Check out our 工具和资源推荐 有关查找大小和编辑照片选项的帮助. 

浮动图像(又名“文本换行”左或右)

“左”和“右”文本自动换行选项如下所示. 

Paw logo这是填充副本,用于显示文本换行图像的左浮动和右浮动选项. 这是填充复制,用于显示文本自动换行的左浮动和右浮动选项. 这是填充副本,用于显示文本换行图像的左浮动和右浮动选项.这是填充复制,用于显示文本自动换行的左浮动和右浮动选项. 这是填充副本,用于显示文本换行图像的左浮动和右浮动选项. 这是填充复制,用于显示文本自动换行的左浮动和右浮动选项. 这是填充副本,用于显示文本换行图像的左浮动和右浮动选项.这是填充复制,用于显示文本自动换行的左浮动和右浮动选项.

Northwest logo这是填充副本,用于显示文本换行图像的左浮动和右浮动选项. 这是填充复制,用于显示文本自动换行的左浮动和右浮动选项. 这是填充副本,用于显示文本换行图像的左浮动和右浮动选项.这是填充复制,用于显示文本自动换行的左浮动和右浮动选项. 这是填充副本,用于显示文本换行图像的左浮动和右浮动选项. 这是填充复制,用于显示文本自动换行的左浮动和右浮动选项. 这是填充副本,用于显示文本换行图像的左浮动和右浮动选项.这是填充复制,用于显示文本自动换行的左浮动和右浮动选项.