你的位置:HBcms宏博内容管理系统 建站经验 正文
内容搜索
热门内容
  1. 网站logo在线设计,免..
  2. 域名解析文件hosts文件..
  3. 教你如何做网线接头:..
  4. qq怎么截图?如何在qq..
  5. 雅虎yahoo邮箱smtp和p..
  6. 新注册126邮箱或163邮..
  7. 幻灯片式的网页图片滚..
  8. 做网站怎么赚钱?什么..
  9. com域名和cn域名net域..
  10. Google支付系统(Googl..
推荐内容
  1. 做一个商业网站要多少..
  2. 国外服务器租用(国外..
  3. 深圳做网站的公司!=深..
  4. 网络原创投稿,转载精..
  5. 美国服务器租赁Window..
  6. 699元的美国服务器出租..
  7. 添加友情链接,速度别..
  8. “原始人”卷款潜逃事..
  9. 设置Godaddy支持zend ..
  10. 网页设计中常用的CSS命..
阿蒙建站故事
  • 原作者:purefei 添加时间:2007-09-24 发表时间:2007-09-23 人气:226
  •         话说时间的年轮走到了公元2007年,正是互联网大行其道的年代,各界“虾、虫、鸟”都摩拳擦掌,准备大干一番,阿蒙可是已有2年网龄的老网虫啦,最近在聊天室里碰到几个家伙都牛气冲天,说他们的主页做得如何如何,听得阿蒙心里老大不痛快的,怎能咽下这口气?对,咱也做一个让他们瞧瞧——哼!

    故事之一 ——主页快建

    听说Dreamweaver可是个网页大师,于是阿蒙就赶紧在自己的电脑里面装了一个。可是自己对这斯并不熟悉,怎么办呢?这日鸣涧路过家门,恰好被阿蒙抓了壮丁,于是一番甜言蜜语,鸣涧最受不了别人的吹捧了,几顶高帽带上,心甘情愿成了免费劳力——教阿蒙制作主页。

    对于如你这样的初学制作主页的人来说,总是希望在最短的时间内就制作出自己的主页来,那我先来教你如何使用Dreamweaver快速地建立起自己的个人主页,不过这只是一个入门阶段,更精彩的以后慢慢讲给你。这边鸣涧摇头晃脑地正说着,那边阿蒙可急了,少废话……

    定义本地站点

    在开始制作网页前,需要先定义一个本地站点。也就是说在硬盘上建立一个目录,将所有的网页和相关的文件都放在里面,以便制作和管理。

    执行主菜单“Site/New Site”命令,打开“Site Definition”对话框。在“Category”列表中选择“Local Info”选项,然后在右侧“Site Name”中输入站点名称:鸣涧动力,单击“Local Root”右侧的文件夹图标,选择E:\web作为网站本地存放目录。同时选中“Refresh Local File List Automatically”选项,这样可以在网站更新时自动刷新本地文件列表,选中“Use Cache to Speed Link Updates”为站点创建一个高速缓存文件。最后单击“OK”按钮完成。

    站点管理器的使用

    建立一个新站点后,会打开一个站点管理器对话框(如图1),用鼠标右键单击根目录,弹出一个快捷菜单,执行“New Files”命令,建立一个名为“index.htm”的网站首页文件。然后再执行“New Folder”命令,建立一个image文件夹,用于存放站点内的图片文件。


    图1

    页面属性的设置

    双击刚才建立的首页文件,在Dreamweaver主窗口中打开它,此时是一个空白页面,下面来设置网页页面的一些属性。按下“Ctrl+J”键,打开“Page Properties”对话框(如图2)。在“Title”中输入当前页面的标题文字,然后单击“Background Image”框右侧的“Browse”按钮,在打开的对话框中选择事先准备好的背景图案。在“Top”中还可以设置页面距顶边距离、“Left”为页面距左边距离、“Margin Height”表示边距高度、“Margin Width”表示边距宽度,可以根据实际情况设置好相应的数值。


    图2

    添加文字与格式编排

    在网页中输入一段文字后,选中标题文字,按“Ctrl+F3”调出“属性面板”,点“居中”按钮,使文字居中对齐,然后点击“Size”下拉列表框,选择字号为6,设置文字颜色为蓝色,将文字加粗(如图3)。在正文文字前加两个空格的方法是,打开输入法,并设置为全角方式,按下空格键即可在段首前加空格了。


    图3

    加入图形

    单击“Object 面板”中的“Insert Image”按钮,在弹出的对话框中选定一幅图片,点“Select”按钮,将图片插入到文档中。此时图片将段落分开了,需要进行对齐方式设置。选中图片,在属性面板中单击“Align”下拉列表框,选择“lEFT”,实现图文混排。此时文字和图片的间距太小了,可以在“属性面板”中的“H Space”框中输入“10”,按下回车,这样图的左右各出现10个像素的间距。同样,在“V Space”框中输入相应数值,使图的上下也与文字有一定的间距(如图4)。


    图4

    设计超链接

    下面来为网页栏目设计链接,选中“原创作品”四个字,单击“属性面板”中“Link”列表框右侧的文件夹图标,选择已经做好的“text.htm”文件,再单击“Select”,这样文字的超链接做好了。然后点击“Target”列表框,选择“_blank”(如图5),这样点击此链接后,页面会在一个新窗口中打开。图片的超链接制作方法是,选中图片,在属性面板的“Link”项中加入超链接地址。


    图5

    网页预览

    保存当前网页,然后按下“F12”键,即可在一个新打开的网页浏览器中预览当前设计的网页了。此时需要做的,就是检查页面链接是否正常,同时还需要检查网页页面设计是否合理等因素。

    阿蒙听得正入神,发现鸣涧揉揉眼睛,没有讲下去的意思了,心里好大的不痛快,不过今儿个倒是学会了快速建立自己的主页,那么下次教我什么阿?鸣涧诡秘地一笑,“当然是主页设计过程中最常用到的东东了,暂时保密,下次我来的时候,你自然就知道了……”

    故事之二——表格的妙用

    自从鸣涧上次给阿蒙卖了一个关子后,家里的电话总是响个不停,阿蒙按照上次鸣涧所说的方法制作出来的主页,总是感觉没有别人的好,版面格式编排设计也不满意,心里很不平衡。打了一百多个电话后,鸣涧终于不耐烦了,“好了,好了,我求求你千万别打电话了。在网页制作过程中,表格的应用是非常广泛的,在表格中组织和编排文本图形会更加灵活,可以制作别具一格的网页作品,我现在就告诉你如何使用表格吧。”

    还别说,阿蒙一边听着电话那边鸣涧说,一边在电脑上操作,就基本掌握表格使用了,“哈哈,原来如此简单”。放下电话后,阿蒙决定自己再温习一下,仔细琢磨琢磨如何在Dreamweaver中使用表格。

    插入第一个表格

    我们要设计的网页的布局是,在页面最上方放置Logo和Banner广告条,中间的部分为栏目导航,下方为网页正文。单击“对象面板”中的插入表格图标,弹出“Insert Table”对话框(如图1)。设置Rows(行数)为“1”,Columns(列数)为“2”,表格Width(宽度)为“75Percent”, Border(表格线宽度)为“0”,完成后单击“OK”按钮。


    图1

    表格的属性

    将光标放置在表格的第一个单元格中,此时在状态栏左侧的标签选择器处会显示“{body}{table}{tr}{td}”,如果点击“table”则选择整个表格,“tr”选中当前行,“td”选中单元格,现在“td”被加粗显示,说明光标处在单元格内。单击一下{table},此时表格周围显示一圈黑线,表示表格被选中,四周同时有黑色方块,可以拖动来改变表格的大小。

    选中表格后,打开“属性”,可以查看表格属性,如果要改变表格属性,可以在“属性”中进行相关的修改(如图2)。


    图2

    插入图形

    在第一个单元格内插入Logo图片,然后选中图片,发现图片宽度为205个像素,然后调整此单元格宽度也为205像素,这样单元格刚好可以容纳刚才插入的图形。完成后,再次选中图片,在“属性”中设置图形“Border”值为“1”。同样道理将Banner图形插入第二个单元格,同时选择第二个单元格,并在“属性”面板中单击“居中对齐”方式,使Banner图形居中显示。

    制作栏目导航

    打算设计栏目为5个,所以插入一个1行5列的表格,此时设置表格“boder”值为1,“Cell Spacing(单元格间距)”为“0”。选中插入的表格,在“属性”面板中设置表格高度(H)为“30 Pixels”(如图3)。


    图3

    制作立体导航

    选中表格,在“属性”面板中设置“Cellspace”为“1”,设置“Bg Color(背景颜色)”值为“#000000”,“Brdr color”为“#FFFFFF”。接着单击状态栏“tr”,选中当前行,在“属性”面板中,设置“BG”为“#99CC99”,“Brdr”为“#FFFFFF”(如图4),这样就可以制作出一个带有立体效果的单航边框了。然后在表格中加入栏目名称,并使文字居中显示。


    图4

    设计正文区

    在正文区域插入一个3行2列的表格,然后选中第一行两个单元格,点击鼠标右键,执行“Table/Merge cell”命令合并两个单元格并设置其背景色(BG)为“#CCCC99”。接着调节第2、3行的列宽,并合并2行2列、3行2列,并将正文插入到合并后的表格中。再设定左侧1列BG值为“#009966”,同时还可以根据自己的需要插入新的表格,并设定相关的内容,这里就不多说了。

    基本设计好了,阿蒙觉着自己的主页漂亮多了。于是赶紧向鸣涧报告战果,当然啦,还得告诉鸣涧下次可得快些去他那里,否则电话就别想消停^_^。

    故事之三——巧用框架

    且说阿蒙那日学会使用表格进行网页排版后,心里高兴的很。前几天见了鸣涧就炫耀自己的网页,不过过了一会儿又说,使用表格进行网页排版的确非常好,也很容易制作出美观大方的网页来,可是有没有更加简单的方法可以制作网页呢?当然有啦,鸣涧诡秘地一笑,嘿嘿,我还留了一手,今儿个心情好,就一并告诉你吧,除了可以使用表格制作网页外,还可以使用框架,这里所说的框架就是可以把浏览器窗口划分为若干个区域,而每个区域可以分别显示不同的网页内容。

    建立框架

    首先打开“Object”面板,单击“Common”下拉菜单,选择“Frames”命令,这里提供了可以制作不同格式框架的命令按钮。单击“Insert Top Frame”按钮,此时整个页面就被分为上下两个部分了。框架上部名称为topFrame,下部为mainFrame。选中topFrame即可选定此框架,还可以对其进行编辑。选中mainFrame,然后单击“Object”对话框中的“Insert Left Frame”按钮,此时即可将下部的框架拆分为左右两部分(如图1)。


    图1

    框架的属性

    首先我们需要制作好4个网页,分别为top.htm、left.htm、1.htm、2.htm,分别作为填充框架的页面。然后选中页面上部的topFrame,打开“属性”面板,如果要修改框架名称,可以在“Framename”中命名,链接此框架页面文件,可以单击“Src”文本框右侧的文件夹按钮(如图2),在打开的对话框中选择“top.htm”后,即可在上面的框架中显示了。框架与内部网页之间有一段空隙,显得很不美观,可以将其去掉。选中上部框架,然后在属性面板中设置“Margin Width”、“Margin Height”值为“0”,可以使用框架刚好容纳内部网页。


    图2

    将鼠标指针放在上下框架的分界线上,当变为上下双箭头时,按下鼠标左键进行拖动,改变框架高度以适应网页页面大小。同样道理,填充其他两个框架。

    右下方属于正文区域,如果网页页面过长,会影响浏览的效果,此时可以为其设置滚动条。选择右下方框架,然后在属性面板中,在Scroll列表中选择“Auto”选项,此时框架就会自动出现滚动条了。设计的效果如图3所示。最后执行“File/Save all Frame”命令,将主框架体保存为frame.htm。


    图3

    框架的链接

    那么如何实现点击左侧框架中的主题,会在右侧的框架中显示呢?这里就来介绍一下框架之间的链接。首先选择左侧框架中需要链接的图片热点,然后打开属性面板,在Link对话框右侧单击文件夹框中选择网页文件2.htm,然后单击“target”列表框,选择要显示此内容的框架名“mainframe”(如图4),此时只要单击左侧链接,即可在右侧打开相应的网页了。使用此方法可以建立多个栏目导航或者文章页面导航选单,而且使用也非常方便。


    图4

    框架的分隔线

    为了使页面更加美观,我们可以将框架的分隔线去掉。首先选取整个框架集,然后在属性面板上,从“Borders”下拉菜单中选择“No”(如图5)。另外,如果将框架体的“Borders”宽度值设置为“No”,也可以取消框架边线。相反,如果在“Borders”下拉菜单中选择“YES”,并设置了框架体的边框宽度“Borders”后,可以恢复框架的边框。


    图5

    充分使用框架,并结合使用表格,可以制作出更加美观的网页页面,阿蒙迫不及待地想试试了,“你小子还真有两下子!”他捶了鸣涧一下,然后不管鸣涧在一边嘟嘟囔囔地抚摩自己受伤的手臂自顾自地修改主页去了……

    故事之四——用图层导航

    阿蒙一日上网游玩,发现一些网页上有一些动态导航下拉选单,不禁来了兴趣,琢磨着该如何在自己的主页上加入这种效果。鸣涧来的真不是时候,本来是打算找阿蒙一起出去玩,不想被他抓了个正着,好在这种效果实现也不是很麻烦,只要使用Dreamweaver提供的图层工具就可以了,于是耐着性子给阿蒙做了一个范例。

    那么图层是什么呢?其实图层就好比多张叠放在一起的包含有文字、图形等对象的层,在这里可以放置诸如文本、图片、表格、插件等多种对象,而且还可以在页面上精确定位。

    建立菜单项

    选择“Insert”选单上的“Table”选项,插入一个1行5列的表格,分别为表格各个单元格填写导航栏目名称。然后选定表格,设定表格背景色为灰色。完成后选择单元格,设定字色为蓝色(如图1)。这样即可得到一个导航选定栏。


    图1

    增加选单选项

    单击工具箱的图层按钮,在第一个菜单栏下方画出一个图层区域。选中此图层,在图层中输入此选项文字选项。移动此图层的位置,使之刚好位于选定栏的正下方。然后选择图层属性面板,设置图层的背景颜色。同样道理,制作出其他几个菜单项的子选单(如图2)。


    图2

    设置选定的可视性

    我们可以通过“显示/隐藏层”属性来实现动态菜单的制作,这也是为什么要使用图层来制作子菜单的原因。按下“F2”键,打开“Layers”层窗口,由于我们不需要在网页打开时显示子菜单,可以在层窗口中将两个层设置为不可见。只要用鼠标单击层窗口中的眼睛图标,并使其闭上即可。同时,还需要选取“Prevent Overlaps”复选框,以防止层的重叠(如图3)。


    图3

    如何显示子菜单

    为了使浏览者将鼠标指向选单项时出现对应的子菜单,可以执行“Window/Behaviors”命令打开“Behaviors”窗口,然后从导航选单栏中选择一个选单项,比如“软件.net”,然后单击Behaviors窗口中的“+”按钮,在弹出的菜单中选择“Show-Hide Layers”选项命令,此时会打开一个“Show-Hide Layers”对话框,选择Layer1,并单击“Show”按钮以设置“Layer1”为显示方式,同时设置Layer2为“隐藏(Hide)”方式。完成后单击“OK”按钮。然后单击Behaviors窗口中的(如图4)下三角按钮,在打开的事件选单中选取“onMouseOver”事件,这样就可以设置鼠标指向“软件.net”后会显示对应的子菜单了。同样道理,可以分别设置其他几个菜单选项的对应子菜单。


    图4

    设置链接和预览

    最后我们还需要将子选单中项目指向对应的栏目页面,同设置超链接的方法一样,选中文字后,在属性对话框中单击“文件夹”按钮,选择指向的网页就可以了。最后按下“F12”键即可预览最后的网页设计效果了。

    阿蒙看着最后的效果,不觉嘿嘿地笑了起来,呵,没想到Dreamweaver还有这么一手啊,不知道还有些什么?鸣涧怕他再捶自己,赶紧躲到一边去了,休息休息吧,下次见了:)。

    故事之五——巧用模板

    嗨,好久不见,你们好吗?为了帮助大家度过一个愉快、充实的春节,阿蒙不得不为春节期间的专题让出位置,直到现在才又与大家见面,想我了吗?我们来继续讲故事吧。

    话说阿蒙的主页建设的也差不多了,不过问题也出现了,为了使整个网站的风格保持一致,很多网页的版式都是相同的,但是每次都做一个版面风格相同的网页势必很麻烦,况且阿蒙本来就是一个懒人。鸣涧看不过去了,告诉阿蒙还是使用模板吧,这样可以方便许多。

    阿蒙不解,模板是什么意思啊?打个比方吧,在一批版面风格类似的网页中,比如网页上面的标题、导航都是相同的,而下方的正文部分不同,那么就可以使用模板了,建模板可以将网页中无需变化的对象固定下来,然后再用来应用到其他风格类似的网页中。这样就可以实现,只修改部分页面就可以快速实现网页制作了。下面就来介绍一下如何制作模板。

    制作一个网页

    首先需要制作好一个网页(如图1),制作这个网页过程中,需要注意的是,凡是页面上无需变化的部分都预先制作好,并确定在固定的位置上。将需要填写正文文本内容的部分预留出空间,比如文章的标题区和文本正文区。


    图1 哪些是固定的,哪些是变化的?

    保存模板

    执行菜单“File→Save As Template”命令,选择“另存为模板”,在打开的系统对话框中输入模板名称后单击“Save”按钮。保存后,此时窗口中的标题栏已经发生变化,在标题栏中出现了“<>”的字样,表示当前编辑的页面已经是模板了。

    设置模板可编辑区

    最重要的工作就是设置模板可编辑区域,否则的话,使用此模板生成的页面将是无法编辑的。首先我们选中页面标题区的单元格,然后执行菜单“Modify/Templates/New Editable Region”命令建立一个新的可编辑区。此时会打开一个对话框(如图2),输入可编辑区域名称为“edit1”,然后按下“OK”按钮,这样页面中就生成了一个{}包围的可编辑区域的标记,表示当前区域为可编辑区。同样道理设置好正文可编辑区域。并将模板保存退出。


    图2 填入可编辑区名称

    应用模板

    在Dreamweaver中建立一个新页面,然后执行菜单“Window/Templates”命令打开模板控制面板,在模板列表区域选择一个已经建立好的模板,然后单击面板上的“Apply”按钮即可将此模板应用到页面上了(如图3)。需要注意的是,应用以后,页面中黄色部分是不可编辑区,此时可以在可编辑区中将{}包含的文字删除,填写相应的内容,这样就可以快速制作出一个网页文件了。


    图3 模板的应用就是这么简单

    更新模板

    有的时候需要修改某个模板,改变网页的风格。此时可以打开模板文件,然后进行修改即可。模板修改并保存后,系统还会弹出一个对话框(如图4),提示是否同时更新模板所关联的相应网页,此时只要单击“Update”按钮即可立即将所有采用此模板制作的网页同时更新,从而实现了修改一个页面即可使整个网站面貌焕然一新,大大地提高了工作效率。


    图4 轻松一点就修改了一批网页

    阿蒙狠狠地拍了一下头,哈,原来如此啊。鸣涧拍了拍阿蒙的脑袋,“嘿嘿,这些日子以来,我给你介绍了Dreamweaver一些常用的基本操作,日后就经常练习吧,到此你就算毕业了。”

  • 点这里复制本页地址发送给您QQ/MSN上的好友
  • 相关文章
  • 相关评论
  • 本文章所属分类:首页 建站经验