Treko - 軟體與新創公司登陸頁範本

文件

• 創建日期：08 / 14 / 2020

歡迎！ 首先，我們要感謝您購買我們的登陸頁面套件
我們非常感謝每一次銷售。如果您喜歡我們的作品，請不要忘記給予評價。這有助於我們開發 新的、更好的項目

有關基本 HTML、JavaScript 或 CSS 編輯的問題 - 請快速提問 Google 或訪問 W3Schools 因為範本問題會得到最高優先級處理。您需要具備一些 HTML/CSS 知識才能編輯此範本。

使用 Firebug 或 Chrome 開發人員工具。

不要從頭開始，使用演示中的現有頁面並進行修改以了解其工作原理。

使用瀏覽器的「頁面查找」功能，通常是 Control + F，可以快速找到您在此文件中尋找的內容。

許多時候插件是導致網站失敗的原因，如果您遇到無法解決的錯誤，請務必嘗試禁用任何第三方插件。

不要忘記重新探索實時演示以獲取佈局、使用想法和範例程式碼

將下載的文件解壓縮到您計算機的本地磁盤。解壓縮的資料夾中將有一個包含 文檔的資料夾和一個包含 html 範本的資料夾。

由於 Treko 是一個 HTML 範本，它使用多個 .html 頁面（18 個演示頁面 + 9 個額外的內部頁面）以及 CSS 樣式表和多個 JavaScript 插件。以下是對文件的簡要概述以及對 一些顯著功能的介紹。

• css （主 CSS 文件，bootstrap4 CSS 文件等）
• fonts （flaticons）
• images （所有圖片）
• js （範本 js）
• php （heroForm.php 等 - 表單 PHP 文件）
• demo-x.html - 18 個 html 文件（演示編號）

將下載的文件解壓縮到您計算機的本地磁盤。解壓縮的資料夾中將有一個包含 文檔的資料夾和一個包含 html 範本的資料夾。Treko 是一個 HTML 範本，所以 沒有真正的「安裝」 要求 只需解壓縮您從 Themeforest 下載的主要文件，解壓縮後您就可以使用所有 範本了。

1. 選擇您將在項目中使用的佈局和額外的內部頁面
2. 重命名一個 demo-x.html 在 index.html
3. 進行必要的更改（添加您的文本、圖片等）
4. 將您將在項目中使用的所有資料夾和 html 頁面複製到您的 www 或 public_html 伺服器或本地計算機上的目錄，使用 FTP 客戶端或文件管理器（或類似工具）

Treko 範本基於 Bootstrap v4.5.0 一個 CSS 和 JS 文件集合，可以幫助您快速開發在任何尺寸下看起來都很漂亮的網站，無論是 17" 筆記本電腦屏幕還是 iPhone。

Bootstrap 的基礎網格是網格系統的一個變體。語法簡單，跨瀏覽器有效，但最棒的部分是它還具有像冠軍一樣適應移動設備的靈活性。您可以非常輕鬆地自定義站點的任何部分或構建新的。

Bootstrap 的網格系統使用一系列容器、行和列來佈局和對齊內容。它基於 flexbox構建，並且完全響應式。

該 index.html 是包含範本 HTML 結構的主要範本文件。這是 通用結構（已縮短）：

HTML 標記

如果您需要更多信息，請訪問此網站： https://getbootstrap.com/docs/4.0/layout/grid/

所有 CSS 文件 css 文件都存儲在“css”資料夾中。以下是我們在此範本中使用的樣式表文件列表。您可以通過打開每個文件找到更多信息：

1. dropdown-effects - 包含響應式巨型菜單的下拉效果的資料夾
2. animate.css - 跨瀏覽器 CSS3 動畫庫
3. bootstrap.min.css - 這是主樣式表，對於基本的範本樣式（如表單、 輸入框、div、列表元素等）是必需的。
4. brick-theme.css - 磚紅色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）
5. dimgreen-theme.css - 深綠色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）
6. flaticon.css - 一套完整的 200 多個細長矢量圖標
7. green-theme.css - 綠色配色方案的主 CSS 文件
8. indigo-theme.css - 靛藍色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）
9. magnific-popup.css - 響應式燈箱樣式表
10. menu.css - 響應式巨型菜單的 CSS 文件
11. orangered-theme.css - 橘紅色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）
12. owl.carousel.css - 響應式輪播滑塊
13. owl.theme.default.min.css - 響應式輪播滑塊自定義文件（如果您 想要默認的導航控件，如點或下一個按鈕，則需要它）
14. pink-theme.css - 粉紅色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）
15. red-theme.css - 紅色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）
16. responsive.css - 此樣式表包含響應式規則，用於將範本適應任何分辨率， 從桌面到小型移動設備。
17. royalblue-theme.css - 王藍色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）
18. skyblue-theme.css - 天藍色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）
19. violet-theme.css - 紫色配色方案的主 CSS 文件（包含一些通用樣式，如錨點顏色、字體大小等）

如果您創建自己的樣式，則必須檢查所有響應式尺寸，以便一切正常工作，如果您需要在特定尺寸更改 您的樣式，則在 responsive.css 中進行。

每個部分的 *.css 文件都已註釋，因此我們相信您在編輯時不會遇到問題。例如，標記 標誌著標頭包裝部分開始的註釋看起來像這樣：

如何編輯樣式

如果您想編輯站點的特定部分，只需在 CSS 文件中找到相應的標籤，然後向下滾動 直到找到需要編輯的相應樣式。例如，如果您想編輯背景顏色，請打開 文件（文件名取決於您將使用的配色方案）並執行以下操作： *.css 如果您發現新樣式沒有被覆蓋，很可能是因為特異性問題。在您的

文件中（文件名取決於您將使用的配色方案）向下滾動，並確保沒有類似的樣式具有更高的權重。 *.css 此範本使用多個腳本，其中許多已在範本的代碼中進行了記錄。如果您是開發人員，您會發現這點特別有用。以下是包含的 Javascript 文件：

- 此框架提供了額外的用戶界面元素，如對話框、 工具提示、輪播等。

1. - 用於評論表單的 jQuery 插件 bootstrap.min.js
2. - 用於聯繫表單的 jQuery 插件 comment-form.js
3. - 此文件包含用於 scrollup 插件、聯繫表單驗證等的通用 jQuery 設置。 contact-form.js
4. - 此腳本是為舊版 Internet Explorer 啟用 HTML5 分區元素使用的標準方法。 custom.js
5. - 是一個 JavaScript 庫，大大減少了您必須編寫的代碼量。 html5shiv.js
6. - 用於 MailChimp 訂閱表單的 jQuery 插件 jquery-3.4.1.min.js
7. - 用於跟踪元素在瀏覽器視口中出現的 jQuery 插件 jquery.ajaxchimp.min.js
8. - 提供高級緩動選項的 jQuery 插件。 jquery.appear.js
9. - Magnific Popup 是一個響應式燈箱和對話框腳本 jquery.easing.js
10. - 平滑滾動到 DOM 中的任何元素 jquery.magnific-popup.min.js
11. - jQuery 表單驗證插件 jquery.scrollto.js
12. - 用於視頻背景的 jQuery 插件 jquery.validate.min.js
13. - 用於響應式巨型菜單的 jQuery 插件 jquery.vide.min.js
14. - 是一個 JavaScript 庫，可檢測用戶瀏覽器中的 HTML5 和 CSS3 功能。 menu.js
15. - 響應式輪播滑塊 jQuery 插件 modernizr.custom.js
16. - 用於請求表單的 jQuery 插件 owl.carousel.js
17. - 用於註冊表單的 jQuery 插件 request-form.js
18. - 適用於 min/max-width CSS3 Media Queries 的快速輕量級 Polyfill（適用於 IE 6-8 及更高版本） register-form.js
19. - 在您向下滾動頁面時顯示 CSS 動畫的 jQuery 插件 respond.min.js
20. 選擇您想要的佈局並進行以下更改。 wow.js

更改圖標：

圖標位於

文件夾中 - /images/ favicon.ico。您無需對 HTML 進行任何更改，只需 用您的圖標替換該文件即可。請務必強制刷新瀏覽器的緩存，以便看到新的圖標。

您可以在此輕鬆生成您的圖標： 圖標和應用圖標生成器

不要忘記為 IOS 設備替換圖標 - apple-touch-icon-152x152.png , apple-touch-icon-120x120.png, apple-touch-icon-76x76.png 和 apple-touch-icon.png. 這些圖標也位於 /images 文件夾中

更改字體：

Treko 使用兩種不同的字體 "Roboto" Google WebFont 用於文本和 "Noto+Sans+TC" Google WebFont 用於標題。要更改嵌入的字體，請查看網站的 head 部分，您會找到此標籤：

要更改字體，首先轉到 http://www.google.com/fonts/ 選擇一個字體並 使用生成的代碼。

更改 Logo：

打開 images 文件夾並替換 logo-x.png 和 logo-white.png 圖片，替換為您的 Logo。Logo 的尺寸為 155 x 36 像素。Retina 圖像的基本概念是您使用較大的圖像，其像素數量是您圖像顯示的兩倍（例如 310 x 72 像素），並將圖像設置為 填充其中一半的空間（155 x 36 像素）。

不要忘記更改移動菜單的 Logo：

選擇範本佈局：

Treko HTML 範本包含 18 種不同的範本佈局 和 9 additional inner pages :

注意！ 开云体育官网3专注开云集团，为用户提供专业可靠的体验。

1. 围绕汇聚全球海量赛事，满足不同用户需求。，开云体育官网3持续打磨更优质的服务。
2. 重命名一個 demo-x.html 在 index.html
3. 开云体育官网3深耕实时更新比分与动态，不错过任何精彩瞬间。领域，用心服务每一位用户。
4. 在专业数据分析，助力用户洞察赛事走向。方面，开云体育官网3提供贴心周到的支持。 www 或 public_html 开云体育官网3以简洁易用的操作界面，带来流畅观赛体验。为核心，带来高效便捷的体验。

Choosing Color Scheme:

Treko HTML template includes 10 color schemes. Inside the css folder there are 10 css files for diferent color schemes. You can use one of predefinied colors or build custom CSS with color which you want.

It's easy to change color scheme of this template, you just need to do following:

1. 打開 index.html file.
2. Find these lines of code in <head> section (skyblue-color scheme set as default!!):




3. Choose your favorite color (for example you want to change the skyblue-color scheme to the green) with remove one of the comment tag like this:





4. Save and see the result!

Background color for navigation menu:

Treko HTML Template includes 2 different styles for navigation (no background color and white background color). It's easy to change the header type, you just need to do following:

1) Most of the headers don't have the background color

HTML Markup:

tra-menu - No Background Color

2) To set the white background color for navigation menu just change the class tra-menu to white-menu

HTML Markup:

white-menu - White Background Color

Navigation Menu: Scrolling to a spot :

Scrolling to a spot in an HTML page is pretty simple to do. You have a lot of IDs on the page to scroll to. Write your anchor tags just as you normally would with the href attribute pointed at the ID you would like to move to (e.g. href="#content-7".) This means that if JavaScript is turned off, your menu will continue to function normally.

Background color for section:

Most of the sections don't have background color. But if you want you can change the background color manually:

1. 打開 index.html file in your text editor (I use Sublime Text (http://www.sublimetext.com/3) .
2. Find the section you want to change the background color (for example content-1):




3. Select the background color you want to apply:




4. Add the class of the background color to the section (for example you want to change white background color to the skyblue, so you can add the class bg-skyblue to the section):
5. Add the class white-color to the container to change the font color from black to white:




6. 想了解更多开云体育官网相关内容，尽在开云体育官网3。

Lightbox Customization

The lightbox is driven by the Magnific Popup jQuery plugin. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

HTML Markup:

It is very easy to customize just add suitable class video-popup1, video-popup2 or video-popup2 to the link you want Magnific Popup to be enabled on and video link into the tag a

Initializing popup

Popup initialization code is situated in the custom.js file. There are 3 ways for video (class="video-popup1, video-popup2 or video-popup2") to initialize a popup (in this place you need only enter your video link):

For more information visit their website and check the documentation

Treko uses Flaticons Pack (250+ Icons), FontAwesome Icons (675+ Icons) and Flat PNG icons (300+ Icons)

HTML Markup for FlatIcons:

Flaticons icons use the 'span' element and each have their own unique class. For a full list of available classes, see here

HTML Markup for FontAwesome Icons:

UniSet uses also the FontAwesome Icons. Using these icon packs is a simple matter of knowing the correct class to use. If you need more information, please visit this site: http://fontawesome.io/

FontAwesome icons use the 'i' element and each have their own unique class. For a full list of available classes, see here

HTML Markup for Flat PNG Icons:

The class img-85 shows the image resolution (for example: .img-85 = 85x85px etc.)

Mailchimp Subscribe Form

If you want to use the newsletter you need to have a MailChimp account (the funcional Newsletter works only with MailChimp - http://mailchimp.com/).

Open the custom.js file in your code editor, changes needs to be made here :

http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx

You need to change three value

How to find mailchimp form action URL?

Just go to your mailchimp account. Then your list. Then Signup forms. Select Embedded forms. You will find form action URL in this page.

Here you'll learn how to add an embedded form to your site, and which third-party sites accept MailChimp Add an embedded form to your website

One notice: this will be functional only on your server, php file can not be executed on your local computer.

Contact Form / Register Form / Request Form / Comment Form:

Treko also uses the PHP engine for activate contact process. The message direct send to your email address, so you can edit your email address in php/contactForm.php, php/registerForm.php, php/requestForm.php or php/commentForm.php file. This will not be available for anyone to see, it is only used by the server to send your email. You can also specify an email subject line (or just leave the one which is there). To do this, please open php/contactForm.php, php/registerForm.php, php/requestForm.php or php/commentForm.php file and change these lines:

开云体育官网3围绕开云不断创新，回应用户的真实需求。

File Names: contactForm.php, quickForm or commentForm (you must use these file names exactly)

Fonts:

  Google Fonts - http://www.google.com/webfonts
  Icons Font-face - http://fortawesome.github.com/Font-Awesome/

Scripts:

• Bootstrap Framework - http://twitter.github.com/bootstrap/
• Lightbox - http://dimsemenov.com/plugins/magnific-popup/
• jQuery - http://www.jquery.com/
• jQuery.ScrollTo - https://github.com/yckart/jquery.scrollto.js
• jQuery scrollUp - https://github.com/markgoodyear/scrollup
• Form Validation - http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.

Support does not include:

• solving problems for plugins not packaged with our framework and templates;
• plugins integration;
• adding new features or extending the features currently available;
• any type of modification or customization.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Best Regards,
Jthemes