首頁 > web前端 > css教學 > CSS編輯工具Topstyle輕鬆打造網頁風格_CSS/HTML

CSS編輯工具Topstyle輕鬆打造網頁風格_CSS/HTML

WBOY
發布: 2016-05-16 12:10:49
原創
1960 人瀏覽過
本文特意为你找来了一款CSS编辑利器——Topstyle,利用它你能轻松做出更有风格的网页来!

     精彩、漂亮是每一个设计者在制作网页时的不懈追求,而网页的精彩几乎都离不开CSS的强力“支撑”;CSS是一种为超文本标签语言提供增强补充服务的技 术,可对每一个html的标签做精雕细刻的修饰。活用CSS,将会使网页更加生动活泼。不过,普通的网页编辑工具在CSS方面,表现难能让人满意;为了充 分发挥CSS潜能,设计出更加美丽的网页.

  最新版本:3.11
  文件大小:3836KB
   软件性质:共享
   使用平台:Win9x/Me/NT/2000/XP

  软件功能

   该程序是一款功能强大的CSS编辑设计工具,功能相当多,不但你可以轻松创建各种样式的文件,而且方便对已有的样式进行编辑,其内置的CSS码检查功 能,可以让你减少写错的机会。特别是它的HELP文件中详细的各种CSS指令介绍,很适合用作参考文件和初次接触CSS的用户学习使用。

  下载安装

   Topstyle是一款专门用来让设计和编辑样式的工具,它的大小已经达到4M左右,可以说该软件是那种“强壮剽悍”型的,不过身材庞大也意味着该软件 实现的功能是比较新颖、实用和强大的。利用该软件,我们可以随心所欲地创建各种样式表文件,并且能为网页轻松设计出各种令你感到非常满意的视觉效果。从网 上下载下来的Topstyle是一个扩展名为exe的可执行文件,大家在进行安装之前,可以直接用鼠标双击它,这样系统就能自动打开一个标准的 windows程序安装界面,我们只要按照界面的提示,一路单击next按钮就能顺利完成安装了。该程序在没有注册的情况下,可以在同一台计算机中使用 20次;随Topstyle一起安装到系统中的还有一个名为Topstyle lite的程序,该程序在使用次数上没有什么限制,不过在功能方面肯定会有所限制,但对于普通个人用户来说,它提供的功能已经足够了!

CSS编辑利器——Topstyle
图1

   安装完成后,程序在默认状态下会自动在系统的开始菜单中添加一个Topstyle程序运行菜单项。此时,我们要是想运行Topstyle程序的话,可以 用鼠标依次单击“开始”/“程序”/“Topstyle 3”,屏幕上首先会出现一个样式定义向导窗口,在初次使用该程序时,可以先一路单击“next”按钮,这样就能打开一个如图1所示的程序主操作界面了。为 防止日后用户暂时不需要该软件时,该程序会占用的系统资源可能较多,我们可以在控制面板窗口中,利用添加删除程序来将Topstyle程序的所有组件彻底 从系统中清除,因此从这个意义上来说,该软件还可以称得上是一款绿色软件。一旦运行该程序后,该界面就是一种完全的XP风格,让人感到亲切、柔和!

  创建新的样式

   Topstyle程序为我们提供了几种创建新样式文件的方法,其中比较简单的一种就是使用向导功能来创建样式文件;在使用这种方法时,可以先用鼠标单击 主界面中的“file”菜单项,从打开的下拉菜单中执行“New style sheet wizard”命令,这样就能打开一个如图2所示的向导设置界面;用鼠标单击“next”按钮,在接下来出现的界面中,你就能对网页中的文字颜色以及背景 颜色进行合适的设置;设置完成后,继续单击“next”,接着为网页中文字选择一种合适的字体,需要哪种字体时,可以在对应字体前面的方框中打上勾号;完 成了这步设置后,下面你还可以设置网页中文字的大小,文字的加粗属性,网页中超级链接的正常显示颜色以及单击后的颜色变化,完成所有相关参数的设置后,向 导设置框还会打开一个如图3所示的预览界面;要是对设置的效果感到满意的话,可以继续用鼠标单击“next”来完成最后的样式创建任务。倘若对设置的效果 不满意的话,还能在这里单击“previous”按钮,来返回到前面的设置页面中,重新调整网页的样式属性,直到自己满意为止。最后,我们可以为上面创建 的样式文件起一个名称,同时选择好文件保存的位置,并单击向导界面中的“finish”按钮结束样式文件的创建工作。

CSS编辑利器——Topstyle
图2


CSS编辑利器——Topstyle
圖3

   編輯已有樣式

   除了建立新的樣式外,我們還能對目前已經存在的樣式檔案進行編輯和調整。編輯調整時,可以在主介面中依序執行「file」/「open」指令,將現有的樣式檔案打開,任何在Topstyle程式介面中,利用工具列中的各種工具按鈕,來對樣式文件進行任意修改;如果自己非常熟悉網頁原始碼的話,可以選擇在原始碼視窗中來進行修改(如圖4所示),倘若對原始程式碼比較「感冒」的話,我們還能在Topstyle程式介面右上角的「Style Inspector」子視窗中來修改,這樣可以更直接一點,而且在這裡我們幾乎也能修改樣式中的任意參數,比方說網頁文字的大小、字體、顏色,網頁的背景顏色、超級連結的顏色等。此外,執行選單列中的「file」/「open from web」指令,在隨後開啟的視窗中直接輸入某網站的網址,我們就能對指定網站上的網頁樣式進行修改和編輯了。

CSS编辑利器——Topstyle
圖4

  檢查樣式錯誤

   在編輯修改樣式的過程中,可能會因操作不慎,出現這樣或者那樣的錯誤,此時你大可不必擔心,因為Topstyle程式為我們提供了CSS碼的錯誤檢查功能,這樣我們在修改過程中,產生的任何錯誤Topstyle程式都不會忽略。我們對樣式的任何一步修改和創建工作,都在Topstyle程式的「監控」之下,一旦修改出錯的話,程式會馬上彈出一個對話框,如圖5所示,來提醒我們當前樣式中出現了錯誤;同時在主介面的原始程式碼編輯子視窗中,我們會發現程式在出錯的地方以紅色顏色來突出顯示;而在「Style Inspector」子視窗中,程式會以藍顏色將出錯的地方突出顯示出來;一旦我們將錯誤調整過來後,對應位置的突出顯示顏色也會自動消失。

CSS编辑利器——Topstyle
圖5

  預覽樣式效果

   Topstyle程式也為我們提供了即時預覽功能,利用該功能,我們對樣式參數每一步的修改效果都能被即時顯示出來。主介面中的「Output」子視窗就是用來即時預覽樣式效果的,在該子視窗中,我們發現它包含了五個標籤頁面,用滑鼠點擊「preview」標籤,就會看到具體的樣式預覽效果了;由於Topstyle程式支援各個版本的IE瀏覽器、Netscape瀏覽器以及Opera瀏覽器,因此我們可以對各種樣式進行邊修改邊預覽,從而保證了樣式編輯的效率。此外,在「Style checker」標籤頁面中,我們能很清楚地看到目前樣式檔案中,有哪些語法上的錯誤,用滑鼠點擊其中的某一錯誤內容後,Topstyle程式還能彈出一個訊息提示,來知道我們該如何正確改正語法錯誤。在其他的標籤頁面中,我們還可以了解到當前樣式表的一些註釋和統計信息,例如樣式文件中包含了多少行內容 等。

  輔助學習功能

   Topstyle程式特別為那些剛接觸CSS的菜鳥使用者 們,提供詳細的幫助功能。利用該功能,使用者可以從該程式內建的help檔案中,查詢到與CSS相關的各種指令的詳細用法介紹,以及編寫CSS原始程式碼的一些小技巧,菜鳥完全可以將它作為一個很好的CSS資料來學習使用。

   此外,與Topstyle程式一起安裝的Topstyle Lite版本,相對來說,功能更簡潔明了,我們可以在Topstyle程式的安裝目錄中運行這個簡裝版程式;該程式只為我們提供了簡單的樣式檔案的編輯、 創建以及預覽功能,而沒有嚮導創建功能、CSS碼檢查錯誤功能等,不過這些功能對菜鳥用戶來說,已經是綽綽有餘了!

   總之,Topstyle程式的整體性能很不錯,是一款不可多得、不可不用的樣式表編輯工具。有了Topstyle課程的幫助,相信你一定會成為一位出色的CSS編輯和設計專家。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板