Web Tools

After deciding what content and pages need included, 网站地图可以用来帮助建立导航和组织页面.

Download our example website outline template  to get started establishing the new or revised site map. 您将在本文中找到一个示例和一些建议.

提供需要在某个页面上显示哪些信息的基本信息. 然后，决定使用什么模板来正确显示该信息. For examples of different templates to use, view the Templates and Layouts page.

在确定你需要哪些页面并概述它们的内容之后, basic wireframes can created. 线框是单个网页或网页元素的“模型”. The webteam will reference these when building pages.

Not all pages require a wireframe. 很多时候，只有主页和主要登陆页需要通过创建线框的规划阶段. 内部或同意页面通常使用简单的布局，因此不需要执行此步骤. 

这些可以是页面的基本绘图和页面上内容的布局/顺序. 线框图可以用屏幕截图和注释来完成，也可以用白板或铅笔在纸上绘制.

Wire framing tools

• Pen and paper can be a good start
• Word or PowerPoint
• Adobe
• 威尼斯人在线正在研究可以在这里使用的其他工具 

希望更新个人网页的学校/部门的教职员工可以使用此功能 person page content template . 请将此文件与新入职或返校的教职员工分享. When completed these can be returned to webteam@ivantseng.com.

Note on Headshots:

• New faculty have an opportunity for headshots within the orientation time. 开学第一天，学校将安排一个多媒体服务时间.
• All others, 每个月的第一个工作星期一在工作室提供大头照(2)^nd floor, East Wing Admin). Visit the headshot appointment scheduler to select your time for a new or refreshed headshot.

If a program, major or minor, 页面需要更新，威尼斯人在线有一个内容指南，以帮助收集信息，威尼斯人在线的团队可以使用，以建立一个更新和相关的网页的程序. 

You can use this program page content template . 尽你所能填写这张表格，并专注于将想法联系起来，让威尼斯人在线的团队最终完成并填写表格. Then, share this document with webteam@ivantseng.com.

Self Service Photos: To find photos for the web, order prints, access high-quality, downloadable photos or a logo for a self-designed content, please visit the Northwest self service photos site.

请谨慎使用来自各种网络来源的照片，因为大学可能没有权利使用这些照片. 寻找开放的许可文件或使用Adobe stock等库存服务来确保照片来自合法来源. 

• 调整Windows/PC/大学笔记本电脑的大小-照片应用程序可能是调整图像大小的最简单方法. It's quick and simple,
  • Open the image you want to resize using the Photos app.
  • 单击顶部菜单栏上的省略号按钮，然后单击“调整大小”.
  • Choose from the default size options provided. 如果要设置特定的尺寸，也可以选择“定义自定义尺寸”.
  • 选择自定义尺寸还允许您更改图像的宽高比并设置最终图像质量, 为获得最佳文件大小和照片质量，建议设置为60-70%. 更高的质量设置将导致更大的文件，从而对用户体验产生负面影响.
  • Choose where to save the new image.
• 级联编辑工具可用，但仅限于调整大小、旋转和裁剪. See this editing image files in Cascade guide for more information. 
• Canva - offers free and paid services. 这些可以用来创建数字和一些打印用途的图形. 
• Affinity software -提供能够以相对较低的成本编辑照片的程序. 

TIP: Be sure your photos are in RGB mode, not CMYK

TIP: In general, use WEBP or JPG files on the web. 

• 一些照片大小的技巧:照片的大小取决于许多不同的模板，面板和设计.
• Some common sizes:
  • Header images are 1920x800px 
  • 主页或网站主页特征:1200x500px(你可以使用标题图像作为特征), they are the same proportion)
  • Headshots should be 2:3 ratio (200x300 or 400x600 are common)
  • Side-by-side panels are 3:2 ration (800x533px)
  • 在编辑页面时，可以在该字段的描述中找到其他照片尺寸. 

Header Image Safe Zone Template

这里是一个模板，帮助使标题图像在所有设备上看起来都很漂亮. Note the cropping that occurs on different screen sizes.

To use:

1. open the photo you wish to use as your header image. 将文件大小裁剪为1920 x 800 (dpi为72就足够了)
2. Right click, save as the photo below. Place the .png file as the top layer in your photo editing software.
3. Make sure no subject matter is covered by the black areas. They will crop on certain device sizes. 
4. If the photo looks ok even when cropped in, TURN OFF THE TEMPLATE LAYER and save as a .webp (or a jpg if needed).

在Cascade中裁剪标题图像的说明可以在这里找到:

• How to Add and Crop Header Images in Cascade 
• 注意:此方法不会测试照片是否适合所有设备的标题空间. 

Circle Photo Quote Template

这里是一个模板来创建圆形照片在照片引用面板.

To use:

1. open the photo you wish to use as your header image. 将文件大小裁剪为600 x 600 (dpi为72就足够了)
2. Right click, save as the photo below. Place the .png file as the top layer in your photo editing software.
3. Center your photo of the person in the quote, KEEP THE TEMPLATE LAYER VISIBLE  and save as a .webp (or a jpg if needed).

Adobe Reader is free to download. 但要进行编辑，需要使用adobeacrobatpro这样的软件，而且需要付费. If you do not have the software needed, 校园里的许多实验室计算机都有Adobe的企业许可证，包括acrobatpro. 或者，你也可以向网络或营销办公室的设计团队请求编辑.  

Comments on PDFs are very helpful to request edits. More info on PDF markup and comments from Adobe.

Adobe Acrobat Pro is required and has a cost to use. If you do not have the software needed, 校园里的许多实验室计算机都有Adobe的企业许可证，包括acrobatpro. 或者，您可以向web或营销办公室的设计团队请求可填写的PDF.  

To create a fillable form in Adobe Acrobat: (see original create a pdf form help guide from Adobe for more in depth instruction)

• Choose Tools > Prepare Form
• Select one of the following options:
  • 单个文件:转换现有的电子文档(例如, Word, Excel, or PDF) to an interactive PDF form.
  • 扫描仪:扫描纸质表单并将其转换为交互式PDF表单.
  • Create New:用空白页从头开始创建表单. For more information, see How to create a form from scratch.
• 如果希望其他人签名此表单，请选中“此文档需要签名”复选框.
  • Note: The form field auto detection is ON, by default. 要更改此设置，请单击change链接并选择适当的设置. For more information, see Forms preferences.
• Click Start. Acrobat创建表单并在“表单编辑”模式下打开它. The right pane displays options for editing the form. 工具栏包含用于添加其他字段的表单字段工具.
• Review the form fields Acrobat created. Add fields using the form field tools in the toolbar. Delete, resize, or arrange the fields as needed.
• To change existing text or images, click Edit in the toolbar. All the text and image fields are enabled for editing.
• To test your form, click the Preview button in the toolbar. 预览表单允许您以与表单接收者相同的方式查看表单，并为您提供验证表单的机会. 如果您正在预览表单，您可以单击Edit按钮返回到编辑模式.
• When your form is complete, save the form, 然后单击工具栏右侧的“关闭”按钮，关闭表单编辑.

More on PDF Forms from Adobe.