您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习教材>>>Dreamweaver教程>>>网页制作——第二课:界面与站点
网页制作——第二课:界面与站点
发表日期:2007/3/31 8:00:00 出处:闪客启航 作者:未知 发布人:aypy1020 已被访问 2752

录音下载

第一节:初识网页

什么是HTML标记

当我们在互联网上浏览各类网页的时候,除了赞叹那些网页的精美之外,是否也想自己动手建立一个属于自己的网络家园呢?自己制作网页很难吗?不!只要您在电脑上编辑过任何一种文本您就能随心所欲的建立自己的网页了。我们首先来作一个试验。

    您复制下面的这行文字,并把它们粘贴在下面的文本框内,然后按下“确定”按钮,您看到了什么?一个属于您自己的网页就这样诞生了!
<font size=5 color=red>我也能够做网页!</font>

在下面的文本框上写上代码,按确定即可欣赏您的第一个网页

    您可能要问,我输入的是黑色的文字,怎么在浏览器里面变成了红色呢?我们注意到刚才我们在文本框内输入的内容除了汉字之外还有一些尖括号以及里面的代码,正是这些汉字以外的内容被浏览器识别并显示出效果,这就是制作网页所共同遵循的HTML超文本标记。

    我们之所以把HTML叫做标记而不是语言,是因为本来HTML就是给文本做上一个能够让浏览器识别的标记,让浏览器来显示我们预期设计的效果。例如刚才的例子里面文本是“我也能够做主页”而在尖括号里面我们定义了字体大小为5号;字体颜色为红色,因此我们在浏览器里面就看到了很大的红色的字体。根据这个原理,我们就能在一个文本文件里面定义出各种各样的颜色,大小和其他的效果了。我们在网络上看到的五颜六色的网页都可以这样定义出来。大家是不是觉得很简单,但也很繁琐呢?有没有一种简单的方法就像WORD软件那样随心所欲的编辑呢?有!Macromedia公司的Dreamweaver MX 2004是一款所见即所得的网页编辑工具,它把那些繁琐的代码都封装在一起,我们不用再背记和一一输入诸如color=red(颜色=红色)这样的标记,而同样能达到我们预期的效果。

    就跟我们在日常生活中一样,使用任何工具我们都应该首先熟悉它的特点和功能,这样我们在使用过程中才能得心应手。现在我们就一起来熟悉Dreamweaver MX 2004的界面吧!

 

第二节:界面介绍

  第一次运行Dreamweaver MX 2004的时候会出现这样的选择界面:

 

    【设计者】为用户提供了一种“所见即所得”的可视化的创建环境。
    【代码编写者】主要为喜欢用手写代码的用户设计的。
    我们不想使用手工输入太多的HTML,因此我们选择“设计者”然后确定。

    现在DW开始运行了,我们看到如下界面:

 

    【菜单栏】主要包扩10个菜单,其功能见下表。程序的所有功能基本上都能在菜单栏上实现。

Dreamweaver MX 2004 菜单功能一览表

菜单名称
功能
文件
用来管理文件。例如新建,打开,保存,另存为,导入,输出打印等。
编辑
用来编辑文本。例如剪切,复制,粘贴,查找,替换和参数设置等。
视图
用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入
用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。
修改
具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。
文本
用来对文本操作,例如设置文本格式等。
命令
所有的附加命令项
站点
用来创建和管理站点
窗口
用来显示和隐藏控制面板以及切换文档窗口
帮助
联机帮助功能。例如按下F1键,就会打开电子帮助文本。

    其他各个面板的功能我们在后面的操作实践中边用边理解。只要大家能记住各个面板的名称,然后跟我们来一起做就可以了。

 

第三节:建立站点

从这一小节开始,将进入 Dreamweaver MX 2004 实质性的学习。建设网站之前要有一个计划,建议大家能事先画出一个网站的设计草图,这样网站的主要内容、分支名称、网页的数量就一目了然了。当然不可避免的在实际制作过程中会有所改变,但是有了最初的设计思想,就能有的放矢。

    有了设计草图之后,就要根据它来创建网站的基本框架。通过 Dreamweaver MX 2004 的站点管理功能,我们可以轻松的创建网站站点。

站点能更好管理网站文件,也尽可能的减少一些错误的出现,如路径出错,链接出错(特别是新手)

在建立站点的过程中,请注意用小写英文或者拼音给文件命名,不能使用中文的名字。

    打开 Dreamweaver MX 2004 的操作界面后

  • 在菜单栏【站点】菜单中选择【管理站点】
  • 在弹出的【管理站点】对话框中点击【新建】按钮,出现【站点】和【FTP】两个选项。
  • 选择【站点】弹出【未命名站点1的站点定义为】对话框
  • 在【未命名站点1的站点定义为】中选择【基本】选项卡,出现下图所示界面:

   

  • 【您打算为您的站点起什么名字?】文本框中填写您站点的名字,它仅仅做为管理和识别用。
  • 单击【下一步】按钮,进入下一步。

 

  • 我们要建立的是静态网页,因此我们选择【不,我不想使用服务器技术】
  • 单击【下一步】按钮,进入下一步。如图:

 

  • 【在开发过程中,您打算如何使用您的文件】鉴于我们网络的实际状况(主要指连接的稳定性)建议大家选择软件推荐的方式,尤其是新入门的朋友,这样做,在本地测试完全正常之后再上传,能避免做“无用功”
  • 【您将把文件储存在计算机的什么位置】实际上就是网站的文件夹在自己电脑的位置,即物理路径。手工填写或者点击文件夹图标选择路径都可以。

 

 

  • 【您如何连接到远程服务器】现在,已经为您的站点定义了一个本地根文件夹。暂时我们还不登陆远程服务器,因此选项中选择“无”
  • 单击【下一步】按钮,进入下一步。

 

 

上图给出我们刚才设置的总结报告,单击【完成】按钮,结束站点设置。

 

第四节: 创建文件夹与页面

本机站点建立完毕,就好像我们盖好了一所房子,房子还是空空四壁,摆放好家具用品之后才能叫做家。前面我们提到在建立网站之前,应该有设计草图,现在我们就假设建立一个启航的网站来设计草图。

   

    草图设计完毕,我们来讨论一下文件(文件夹)的命名规则,以便给草图中的文件和文件夹命名。

【文件命名规则】

    一个网站中少则几个文件,多则几十个上百个文件,一个大型网站有成千上万个文件,这时,文件名成为管理它们的唯一途径,一个人单独制作网站,遵循命名规则方便今后自己修改;多人合作制作,遵循命名规则会使合作方便很多。

    一般而言首页文件名为“index.htm”或“index.html”,如果用ASP语言编写,则为“index.asp”其他的文件则可以用下面两种种方法命名:

  • 拼音:或者汉字声母缩写,可以根据页面主题命名,如启航公告可以命名为“qhgg.htm”或“qihanggonggao.htm”
  • 英文:或者英文原文缩写。

请注意:

  • 文件名不要使用中文,因为如果空间是UNIX系统,中文文件名将不被识别。
  • 文件名不能使用运算符等符号。
  • 建议最好不要用数字作为文件名的开头。

 

【文件归类管理】

    分支页面的文件应该分别放置在单独的目录中,避免和其他文件放置在一起,各种类型的文件又分门别类放置在自己的文件夹中,以上图为例“动画制作”“网页制作”“学员作品”就可以建立三个文件夹,来放置相关文件,图像文件也放在单独的文件夹中,这样您的网站就井井有条,维护管理十分方便。

 

【创建文件夹】

    1、打开【站点管理器】窗口,选择【文件】选项卡,用鼠标右键点击【站点】文件夹图标,在弹出菜单中选择【新建文件夹】

    2、命名文件夹,将“动画制作”分别名为“dhzz”

    3、重复上面的步骤,创建所有的文件夹和子文件夹

    提示:“images”一般用来放置图像文件,初学者往往喜欢将所有的图片都放在根目录下的图片文件夹中,当网页多了以后才发现,当修改某个分支页面时,都要到根目录的图片文件夹中查找相应的图片,如果将一个分支移动,分支里所有所有页面里的图片路径都要修改。这样做相当繁琐,因此希望开始学习制作网站的朋友养成将分支页面的图片分别放在各自的图片文件夹下的习惯。下面是根据草图建立的文件夹。

 

【创建首页文件】

    文件夹创建好了之后,就可以对号入座了,现在可以在各个文件夹里面创建空白页面文件。作为一个网站,当然首先出现的是首页,下面来创建首页文件——“index.htm”

1、用鼠标右键点击站点根目录文家夹,在弹出菜单中选中【新建文件】命令

 

2、将文件命名为index.htm,然后按键盘【回车】键。

 

3、在【站点管理器】中选中相应的文件夹,用鼠标右键点击,在弹出的菜单中选择【新建文件】然后根据“命名规则”进行命名,重复以上步骤,根据草图建立所有的页面文件,下图是建立好的文件夹以及相应的页面文件。

 

4、至此我们可以去分别编辑各个网页,添加内容了。

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

兰幽空间 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:心梦、劳拉