第2章 站点规划及建立
- 格式:doc
- 大小:311.00 KB
- 文档页数:12
第二章创建与规划站点课题:规划站点及创建静态站点一、教学基本内容1、站点规划概念2、站点规划的方法3、站点的组成4、定义站点二、课型:新授课三、课时:1个课时四、教学重点与难点重点:1、站点组成2、如何创建静态站点难点:1、站点的定义2、编辑、删除站点五、教学目的1、掌握建立静态站点的流程2、掌握静态站点的基本操作六、教学过程1、复习引入由上节所学习的建立HTML网页引出站点概念2、讲授新课(1)站点规划概念及方法概念:所谓本地站点,就是指定本地硬盘中存放远程站点所有文档的文件夹方法:规划网站一般需要从3个方面去思考,即网站的主题、网站的内容和网站的对象。
(2)创建本地站点站点组成:Dreamweaver 8站点由3部分组成,具体内容取决于环境和所开发的Web站点类型。
包括本地文件夹、远程文件夹、动态页文件夹定义站点:(01)选择“站点”|“新建站点”选项,或者选择“站点”|“管理站点”选项,在弹出的“站点管理”对话框中单击“新建”按钮,弹出对话框,在“基本”选项卡的站点名称输入框中输入所要创建站点的名称,如图2-5所示(02)输入站点名称后,单击“下一步”按钮,在弹出的是否使用服务器技术对话框中,根据自己所制作网页的类型,确定是否使用服务器技术。
在此制作静态页面,因此不使用服务器技术,如图2-6所示。
(03)单击“下一步”按钮,在弹出的设置站点文件夹对话框中,选择或输入一个本地文件夹作为“本地站点文件夹”,如图2-7所示。
(04)选择了本地站点文件夹后,单击该对话框中的“下一步”按钮,进入设置是否与远程服务器相连的对话框,在这里选择“无”,设置为不与远程服务器相连,如图2-9所示。
(05)单击“下一步”按钮,便会显示在站点定义向导中所选择设置的详细报告,如果感觉满意,单击“完成”按钮,完成本网站的创建,如图2-10所示;否则单击“上一步”按钮重新修改各项设置。
(3)站点的基本操作其基本操作包括编辑、复制、删除站点。
第二章站点规划及建立(一)教学要求1、理解建立站点的必要性。
2、掌握如何规划站点、管理站点。
3、熟练掌握创建Web站点的基本方法与步骤。
(二)内容提要1、站点的设计与规划。
2、合理组织站点内容。
(三)重点、难点1、重点:站点结构、组织站点内容、管理站点。
2、难点:站点规划。
第一部分站点的设计与规划Dreamweaver最强大的功能就是站点管理。
在Dreamweaver中制作网站,首先需要定义一个本地站点,因为只有在站点内才可以利用将在以后章节中讲述的模板、资源管理和库等高级功能编辑更新网站。
利用Dreamweaver 8中的【文件】面板可以解决多方面的问题。
其优点包括自动更新链接,自动复制文件到当前默认站点,自动生成站点映射并且可以保存输出,自动在整个站点中寻找坏的链接,利用自带的FTP功能及时远程管理用户的站点,而且采用所见即所得的形式,并且完全支持鼠标拖放。
模板的应用简化了页面的创建过程,并且使站点的更新变得非常容易。
在本章中,首先来了解Internet信息、服务器的安装与调试和如何建立站点以及管理站点。
2.1 创建站点站点管理是站点管理员的基本工作之一。
如果你并不只是需要编辑单个页面,那么最好让你的工作从建立一个站点开始,站点管理会让你的工作简单而富有成效,并且许多功能必须在站点中才能实现。
2.1.1 服务器种类2.1.2 安装PWS与IIS2.1.3 配置IIS2.2 课堂练习2-1:创建一个本地站点实验目标因为要把所有Web站点文件保存在站点的根目录中,所以一个本地站点需要一个名字和一个根目录。
不同的Web站点要有不同的本地站点。
定义本地站点,就是在自己计算机的硬盘上建立一个目录,然后将所有与制作网页相关的文件都存放在里面,以便进行网页的制作和管理。
因此,站点就可以理解成同属于一个Web主题的所有文件的存储地点。
在此就练习创建本地站点。
2.3 站点维护在管理站点之前,先来了解一下什么是本地站点,什么是远端站点。
第2章Dreamweaver入门2.1制作简单页2.1.1 站点的建立及规划用户设计的网页和相关素材,一般都要求放在同一个文件夹内,这样方便对网站进行维护和管理,特别是将网站发布到服务器上时,这点尤其重要。
我们建立站点的目的也在于此。
因此,大家在使用Dreamweaver软件设计制作网页之前,应先将站点建立好,同时将做好的网页全都保存在这一个站点内。
1.建立站点目录1)在E盘根目录下新建文件夹,命名为AABBB(其中AA为座号,BBB为姓名,例:01张三)做为站点文件夹。
注意:这里站点文件夹名可以为中文。
2)在此新文件夹(AABBB)里新建三个文件夹,分别取名为Files(存放除首页外的网页文件)、Images(主要存放图片)、Other(主要存放flash动画、声音等其它类型的文件)。
注意:站点文件夹里所有的文件夹或文件一般不用中文,而用拼音或英文表示。
2.定义站点01)打开Dreamweaver软件。
02)选择菜单命令[站点→管理站点…];单击→站点;在弹出对话框中,选择“高级”选项卡,如下左图2-1所示。
→图2-1 图2-203)输入“站点名称”(可以自己定义,一般要与网站主要内容或名字有关);选择“本地根文件夹”为刚才新建的文件夹(AABBB)。
如上右图2-2所示。
注意:这里“本地根文件夹”的选择,不要选择到Files、Images、Other其中之一。
04)单击确定后,回到“管理站点”对话框,如下左图2-3所示。
单击“完成”,屏幕右边出现如下右图2-4所示的面板。
2.1.2 第一页(站长简介,Resume.htm )的制作1.初始01)菜单命令[文件 新建],弹出如下图2-5所示的“新建文档”窗口,选择“基本页”。
02)单击“创建”,进入如下图2-6所示编辑页面。
图2-3 图2-4 图2-5其中,为常用工具条;单击,进入代码视图;单击,进入代码和设计视图;目前属,即设计视图。
图2-62.保存文档03)菜单命令[文件→保存…],保存在Files文件夹下,保存名为“Resume.htm”(此页我们要存放个人的简历信息)。
第二章站点规划及建立(一)教学要求1、理解建立站点的必要性。
2、掌握如何规划站点、管理站点。
3、熟练掌握创建Web站点的基本方法与步骤。
(二)内容提要1、站点的设计与规划。
2、合理组织站点内容。
(三)重点、难点1、重点:站点结构、组织站点内容、管理站点。
2、难点:站点规划。
第一部分站点的设计与规划Dreamweaver最强大的功能就是站点管理。
在Dreamweaver中制作网站,首先需要定义一个本地站点,因为只有在站点内才可以利用将在以后章节中讲述的模板、资源管理和库等高级功能编辑更新网站。
利用Dreamweaver 8中的【文件】面板可以解决多方面的问题。
其优点包括自动更新链接,自动复制文件到当前默认站点,自动生成站点映射并且可以保存输出,自动在整个站点中寻找坏的链接,利用自带的FTP功能及时远程管理用户的站点,而且采用所见即所得的形式,并且完全支持鼠标拖放。
模板的应用简化了页面的创建过程,并且使站点的更新变得非常容易。
在本章中,首先来了解Internet信息、服务器的安装与调试和如何建立站点以及管理站点。
2.1 创建站点站点管理是站点管理员的基本工作之一。
如果你并不只是需要编辑单个页面,那么最好让你的工作从建立一个站点开始,站点管理会让你的工作简单而富有成效,并且许多功能必须在站点中才能实现。
2.1.1 服务器种类2.1.2 安装PWS与IIS2.1.3 配置IIS2.2 课堂练习2-1:创建一个本地站点实验目标因为要把所有Web站点文件保存在站点的根目录中,所以一个本地站点需要一个名字和一个根目录。
不同的Web站点要有不同的本地站点。
定义本地站点,就是在自己计算机的硬盘上建立一个目录,然后将所有与制作网页相关的文件都存放在里面,以便进行网页的制作和管理。
因此,站点就可以理解成同属于一个Web主题的所有文件的存储地点。
在此就练习创建本地站点。
2.3 站点维护在管理站点之前,先来了解一下什么是本地站点,什么是远端站点。
严格地说,站点也是一种文档的磁盘存储形式,它同样是由文档和文档所在的文件夹组成的。
设计良好的网站通常具有科学的结构,利用不同的文件夹,将不同的网页内容分门别类地保存,这是设计网站的必要前提。
结构良好的网站,不仅便于管理,也有利于更新。
2.3.1 管理站点2.3.2 使用站点地图2.3.3 在站点地图中管理网页2.4 上传和下载资源从Internet服务器下传到本地计算机这个过程称作下载,而资源从本地计算机上传到Internet服务器上的这个过程称作上传。
实际上,在正常的浏览过程中,经常会进行上传和下载的操作。
比如在本地计算机上浏览网页,实际上就是将Internet服务器上的网页下载到本地计算机上,然后进行浏览;而很多网站比如免费电子邮件网站,都会要求用户输入用户名和密码,这实际上就是将用户的信息上传到Internet服务器上。
2.4.1 设置远端服务器和FTP属性表6-1站点子面板中的各种参数以及功能总是显示设置本地文件和远端文件在站点管理窗口中的显示位置相关文件设置下载/取出、上载/存回时是否提示FTP连接设置空闲多少时间后离线FTP作业超时设置在连接失败多少秒后终止尝试防火墙主机设置防火墙的主机地址防火墙端口设定防火墙的端口号上载选项上载前先保存文件移动选项要移动服务器上的文件时提示2.4.2 上传文件2.4.3 下载文件2.5 文件遮盖在开发网站的过程中,有些文件属于中间文件,也就是这些文件只参与页面设计,而不必进行上传和下载操作。
利用Dreamweaver 8的文件遮盖功能,就可以设置站点中的某些文件或者某些文件不参与上传和下载操作。
将文件上传到Internet站点时,文件遮盖功能就显得非常有用了,它不仅能减少上传文件的数量,节省带宽,也可节约Internet服务器磁盘空间。
实际上,文件遮盖不仅仅用于遮盖那些中间文件,也可用来限制某些文件被用户上传或下载。
2.5.1 文件遮盖影响及设置2.5.2 激活和关闭文件遮盖2.6 站点测试网站制作完成后,在没有上传之前,还要进行一项比较重要的工作,就是在本地对自己的网站进行测试,以免上传后出现这样或者那样的错误,给修改带来不必要的麻烦。
本地测试包括链接测试、不同浏览器的测试和不同分辨率的测试等。
2.6.1 检查文件间的链接2.6.2 修复损坏的链接2.6.3 浏览器测试表6-2 浏览器参数和功能此按钮用于向列表框中添加一个新的浏览器此按钮用于删除列表框中选定的浏览器编辑用于修改选定浏览器的设置默认选择默认的浏览器主浏览器将选定的浏览器设置为主浏览器次浏览器将选定的浏览器设置为次浏览器使用临时文件预览选择在预览时是否使用创建的临时副本2.7 网页过渡效果网页过渡是指当浏览者进入或离开网页时,页面呈现的不同的刷新效果,比如溶解、卷动等。
这样你的网页看起来更具有动感,不过也要注意适可而止,否则太花哨的变化也容易引起浏览者的反感。
在设置网页过渡效果META对话框中,在【属性】下拉列表中选择HTTP-equivalent选项;【值】文本框中输入Page-Enter,表示进入网页时有网页过渡效果,或者是Page-Exit,表示离开网页时有网页过渡效果;在【内容】文本框中输入的Revealtrans(Duration=4,Transition=2),Duration=4表示网页过渡效果的延续时间为4秒,Transition表示过渡效果方式,值为2时表示圆形收缩即可。
网页过渡效果有20多种可供选择,具体效果和设置如表2-3所示。
表6-3 网页过渡效果种类2.8 课堂练习2-2:动态检测浏览器实验目标在Dreamweaver 8版本中,除了多浏览器检测页面运行错误的功能外,还新增了验证标记功能。
当我们精心制作了一个网页,在有些浏览器下运行可能会出现错误,有时候甚至连文字链接、版式都不统一了。
为了避免这种情况的发生,从Dreamweaver 2004版本起增加了支持多款浏览器检测功能。
而Dreamweaver 8版本中的验证标记功能则可以查明代码是否存在标签错误或者语法错误。
因此,使用动态检测浏览器功能就可以在设计和制作网页时减少或者避免由于浏览器不同而造成网页版式、链接的混乱,影响网页效果。
2.9 思考与练习第二部分动态站点的运行环境配置2.1 ASP 运行环境的配置1、IIS配置:运行ASP页的前提是要有IIS的支持。
IIS(Internet Informatiom Server )是集成于Windows 2000/NT/XP/2003的WEB服务器。
利用IIS可以发布信息到浏览器中,可以容纳多个WEB站点。
配置IIS服务器(以Windows2003为例):默认情况下安装win dows并未安装IIS,因此需要手动添加,打开Windosw的控制面板/添加删除程序/windows组件打开图示对话框:选择[应用程序服务器],单击[详细信息],打开[应用程序服务器]对话框:勾选(如果需要制作页);选择[internet信息服务(IIS)],单击[详细信息]按钮,打开对话框,勾选[FrontPage 2002 ServerExtensions]和[Internet 信息服务管理器],然后连续单击[确定],开始安装IIS,如果提示放入安装盘,请将Windows的安装盘放入光驱中,过一会儿提示安装成功,这样便配置了IIS。
2、设置站点或虚拟目录:设置好IIS后,会自动生成一个默认的站点,其默认路径是(如果Windows安装在C盘)c:\Inetpub\wwwroot\如果需要修改或添加虚似目录可以在Windows的控制面板中找到[管理工具]/[Internet信息服务(IIS)]打开图示的对话框:右击[默认站点],选择[属性],打开对话框,可以设置和修改目录如图示:在该对话框中选择[主目录],然后设置虚似目录的本地目录,设置对文件的读写权限等。
单击[配置]可以打开应用程序配置对话框,在该对话框中的[选项]中可以设置[会话超时]即[ASP脚本超时]等。
3、新建网站(以Dreamweaver MX2004 为例)、打开Dreamweaver,单击菜单[站点]/[管理站点],在弹出的对话框中选择新建。
然后在[您打算为站点取什么名称]中键入站点的名称,如web,单击下一步弹出图示对话框。
选择一种服务器技术如[ASP VBScript],然后单击下一步,弹出图示对话框。
选择[在本地进行编辑和测试],在[你将把文件存储在计算机上的什么位置]中键入文件的保存路径,这里要键入绝对路键(与前面虚似目录的绝对路径最好相同),单击下一步,弹出图示对话框,键入测试服务器名称,即虚似目录如:http://localhost/web1/注意:这里的web1即是在IIS中设置的虚似目录的别名。
然后连续单击下一步两次,这样就完成了一个ASP站点的设置。
实验二动态站点的运行环境配置[实验学时]4学时[实验目的]通过实验,使学生能正确配置ASP、PHP、JSP运行环境。
重点掌握在window系统中配置IIS及虚拟目录的设置。
[实验内容]1、IIS的配置、设置虚拟目录;2、PHP运行环境的配置;3、JSP运行环境配置。
[实验设备] 电脑(P4以上计算机)、操作系统及ASP相关软件[实验过程]:一、ASP 运行环境的配置1、IIS配置:配置IIS服务器(以Windows2003为例):默认情况下安装wind ows并未安装IIS,因此需要手动添加,打开Windosw的控制面板/添加删除程序/windows组件打开图示对话框:选择[应用程序服务器],单击[详细信息],打开[应用程序服务器]对话框:勾选(如果需要制作页);选择[internet信息服务(IIS)],单击[详细信息]按钮,打开对话框,勾选[FrontPage 2002 Server Extensions]和[Internet 信息服务管理器],然后连续单击[确定],开始安装IIS,如果提示放入安装盘,请将Windows的安装盘放入光驱中,过一会儿提示安装成功,这样便配置了IIS。
2、设置站点或虚拟目录:设置好IIS后,会自动生成一个默认的站点,其默认路径是(如果Windows安装在C盘)c:\ Inetpub\wwwroot\如果需要修改或添加虚似目录可以在Windows的控制面板中找到[管理工具]/[Internet信息服务(IIS)]打开图示的对话框:右击[默认站点],选择[属性],打开对话框,可以设置和修改目录如图示:在该对话框中选择[主目录],然后设置虚似目录的本地目录,设置对文件的读写权限等。
单击[配置]可以打开应用程序配置对话框,在该对话框中的[选项]中可以设置[会话超时]即[ASP脚本超时]等。