主页“换肤”好轻松──网站改版经验谈

对于大多数网站来说,一个页面除了主题内容外,其他内容一般都是所有页面共有的网站标志、菜单导航等公共元素。因此,我们在改版时主要也就是重新设计一下菜单、背景以及排版方式等公共元素,而中心文字或图片内容并没有改动。我们所指的“换肤”,也就是指对公共元素的替换。因此,设计出几套精美的“皮肤”(Skins),即主页模板,是我们工作的主要内容。
   想要完美“换肤”,除了有精美的Skins,我们还必须对中心主题内容有所要求。为了在改版时获得较大的弹性,整个页面主体排版的工作我们将完全交给“皮肤”,因此主题内容里面最好不要包含各种经过特殊排版的内容,特别是绝对定位层(Layer),或者是规定了可能超过以后新页面主表格宽度(就是以后新页面放中心内容的地方)的表格,因为它们可能破坏新页面的显示效果。究其要求,以网页的中心内容能轻松放进新页面主表格为宜,例如新闻、歌词和其他各类文章。同时,为了和以后新页面的整体风格相适应,最好不要单独指定各种文字和表格的颜色或字体属性,如果必须加以区别显示,请尽量用CSS表格来指定。
   在“换肤”前,我们必须对以前的文件进行处理,将各种旧的公共元素统统去掉,只保留中心内容。一个标准的页面,源文件应该如下:
  
  
   文件标题<br>    </Head><br>    <Body><br>    <P>(注:这里是页面的中心内容)<br>    </Body><br>    </html><br>    现在我们就可以正式开始“换肤”了。其实,无论是FrontPage还是Dreamweaver,都给了我们一个轻松“换肤”的方法,那就是使用公共模板(Templates)。<br>   #1 1.在Frontpage2000中的“换肤”技巧<br>    以FrontPage2000为例,打开站点的一个页面后,按鼠标右键选取“共享边框”。选择“应用到所有网页”,然后根据需要选择“上”、“左”、“下”、“右”的边框。确定以后,我们可以发现原来的页面周围多出了几个用虚线标出的方框。根据提示,将自己的网站标志、菜单导航等内容放入框中。一旦保存,站点内所有页面都会披上新的Skin。以后只要更改任何一个页面的共享边框,整个站点的页面都能够同步更新。同时我们还可以建立一个CSS样式表文件,用以控制网页的文字和背景等各种属性。选择菜单上的“格式”,“样式表链接”,将其用在所有网页上。<br>   #2 方法综合评价<br>    优点:使用简单、方便,适合初学者。<br>    缺点:边框可选择的方式太少,不能完成较复杂的排版。平时只要对边框内容有一点不经意的改动,FrontPage就会自作聪明地更新所有页面,导致UpdateNow等ftp软件上传整个站点文件。<br>   #1 2.在Dreamweaver中的“换肤”技巧<br>    和FrontPage相比起来,Dreamweaver的功能就强大多了。 首先我们必须将新设计好的页面在Dreamweaver里打开,转存为模板(Save as Template)。由于Dreamweaver是依靠“可编辑区域(Editable Region)”来确定网页中心内容位置的,因此无论新页面排版多么复杂,只要我们指定了“可编辑区域”,Dreamweaver就能够自动对中心内容套用模板。选择模板文件中将替换为中心内容的文字,打开 Modify→Template→New Editable Region对话框),给可编辑区域取一个名字,比如“Maincontent”。<br>    保存模板后,打开一个已经过处理的待“换肤”文件,选择Modify→Template→Apply Template to Page选中刚才新做的模板。这时可能出现一个“Choose Editable Region for Orphaned Content”对话框。这是因为此网页原本没有使用模板,因此没有Editable Region标记,Dreamweaver不知道中心内容是哪些而无法自动进行套用。由于经过我们处理的文件所有内容都要保留,在此直接选择“maincontent”即可。遗憾的是,Dreamweaver没有对全站已有旧文件自动套用模板的功能,所以对于原来的内容我们只能手动逐个修改(也可以用“查找替换”功能给站点旧文件加上标记),所以它更适合一个新站点。对于以后的新网页,我们需通过File→New from Template建立。<br>    以后如果想给站点“换肤”,只要改动模板文件就行,不过别忘了加上“Maincontent”这个可编辑区域。<br>   #2 方法综合评价<br>    优点:功能更强,排版更灵活,“换肤”更彻底。<br>    缺点:套用模板时,对旧文件的处理很不方便。同时和FrontPage一样,“换肤”后需要上传所有文件。使用时比FrontPage稍复杂,需要有一定Dreamweaver使用经验。</p> </article> <div class="page-nav"> <a href="index.html">返回本期目录</a> | <a href="../../index.html">返回总目录</a> </div> </div> </div> <div class="status-bar"> <p class="status-bar-field">完毕</p> <p class="status-bar-field"><a href="https://software-archive.tifan.la/" target="_blank">software-archive.tifan.la</a></p> <p class="status-bar-field"><a href="https://software-archive.tifan.la/README.html" target="_blank">关于本站</a></p> </div> </div> <div class="cpcw-search-overlay" id="cpcw-search-modal" data-search-overlay hidden> <div class="cpcw-search-backdrop" data-search-close></div> <section class="window active cpcw-search-panel" aria-modal="true" aria-labelledby="cpcw-search-title"> <div class="title-bar"> <div class="title-bar-text" id="cpcw-search-title">搜索《电脑报》</div> <div class="title-bar-controls"> <button type="button" data-search-close aria-label="Close"></button> </div> </div> <div class="window-body cpcw-search-window-body"> <header class="cpcw-search-header"> <div> <p class="cpcw-search-kicker">电脑报档案</p> <h2>站内搜索</h2> </div> </header> <form class="cpcw-search-form" data-search-form> <input type="text" name="q" class="cpcw-search-input" placeholder="输入标题、作者、栏目或正文关键词" autocomplete="off" spellcheck="false" data-search-input > </form> <details class="cpcw-search-advanced"> <summary>高级搜索</summary> <div class="cpcw-search-filter-panel"> <div class="cpcw-search-filter-actions"> <button type="button" class="cpcw-search-filter-button" data-search-years-all>全部年份</button> <button type="button" class="cpcw-search-filter-button" data-search-years-clear>清空</button> </div> <div class="cpcw-search-year-grid" data-search-year-filters></div> </div> </details> <div class="cpcw-search-meta" data-search-meta>至少输入 2 个字符。按 Enter 跳转首条结果,Esc 关闭。</div> <div class="cpcw-search-results" data-search-results></div> <div class="cpcw-search-pagination" data-search-pagination hidden></div> </div> </section> </div> </body> </html>