第一章DW站点建立.docx
- 文档编号:16302215
- 上传时间:2023-07-12
- 格式:DOCX
- 页数:14
- 大小:414.19KB
第一章DW站点建立.docx
《第一章DW站点建立.docx》由会员分享,可在线阅读,更多相关《第一章DW站点建立.docx(14页珍藏版)》请在冰点文库上搜索。
第一章DW站点建立
第一部分:
网络编辑实务之一网站建设
第一章网站规划与网页设计
第一节站点建设
教学目的:
站点规划与站点的创建,是为网页制作前必须进行的设计,以便以后对整个网站维护与管理。
是极其重要前提。
时间安排:
4课时
教学重点:
站点建设
教学方式:
讲授+指导
教学过程:
序言
DW是美国著名的多媒体软件开发商MACROMEDIA公司推出的一套专业可视化网页开发工具。
它与FLASH、FIREWORKS并称为“网页三剑客”,其中FALSH是用来制作网页动画,FIREWORKS是用来网页图像制作,而DW是用于网页开发,可以用于各类素材的集成与发布,可视性强,而且支持FLASH、SHOCKWAVE、ACTIVE等许多外部媒体的发布,再加上使用简单、方便,到目前为止,全世界范围超过60%的专业网页设计师都在使用这款软件来开发网页,编织他们的梦想。
界面如下
●菜单栏:
包含10类主菜单,涵盖了几乎DW所有的功能。
●插入栏,包含很多可以插入的按钮。
●文档工具栏:
提供各种文档窗口的视图(如“设计”视图和“代码”视图)
●文档窗口:
显示当前创建和编辑的文档。
●属性面板:
用于查看和设置属性
●面板组:
是各种面板的组合,不需要的可以暂时关闭。
知识点:
规划站点:
DW是一个创建站点和管理站点工具,因为使用它不仅可以制作精美WEB网页,而且可以创建完整的WEB站点。
为了达到最好效果,在设计网页之前,首先都必须对站点进行设计和规划。
这个规划包括站点结构和导航系统的规划,网页模板和库的使用等等。
站点规划好之后,就可以根据规划绘制出一个网站结构草图,以便于有一个清晰的思路。
如何创建站点。
在正式开始制作网页之前呢,最好先定义一个新网站。
这样做目的是可以利用站点窗口对站点文件进行管理。
也可以尽可能减少一些错误出现。
比如路径出错或者链接出错。
(特别是对于我们这些初学者,更要注意条理性与结构性,一个文件放这里,另外一放那里。
或者所有文件都放在同一文件夹里,这样显得很乱,而且容易出错,所以创建站点是非常必要的。
1、创建本地站点
所谓本地站点就是本地硬盘中存放远程网站所有文档的地方(文件夹)。
建立网站的通常做法是:
在本地硬盘建立一文件夹用来存放网站的所有文件,以后就直接在这个文件夹中创建和编辑文档,那么等待网页设计和测试好之后,再把他们拷贝到网站上提供给浏览者来浏览。
也即:
在Dreamweaver中制作网站,您必须定义一个本地站点,它是您的计算机上任意位置的一个文件夹。
之所以一定要定义它,是为了告诉Dreamweaver您的文件存放位置,然后Dreamweaver就会将所有的设置针对该地址设置。
具体操作为:
步骤1:
在本地硬盘上建立一个用来存放站点的文件夹,这个文件夹就是本地站点的根目录。
这个站点可以是空的,也可以是非空的。
步骤2:
基本:
1.站点→管理站点—新建站点→基本(基本选项是指导用户一步一步地完成站点设置,如果用户宁愿在没有指导情况下编辑站点信息,则可以随时单击高级选项卡)—站点名称(为你的网站建立一个名字,这个名字仅仅起到识别的作用,不会在浏览器上显示,与网站发布后真正的名字无关,例如,这里起名叫“MySite”,而实际上我的网站的名字叫“雅心居”)→在对话框中选择是否使用服务器技术--------因为我们现在建立是一个静态站点,因为选择否,我不想使用服务器技术---下一步---默认编辑到我计算机上本地副本----点击本地根文件夹框右边的文件夹标志,在你的硬盘上查找并选择相应的文件夹(即设置站点在本地硬盘的位置,在硬盘上选择一个目录来存放站点的文件目录)(提示最好选择E或者F盘,不要放C盘)→不连接服务器---完成).
注意:
站点文件夹的名称必须是小写英文字母,不允许有空格和汉字,比如:
c:
\mywebs\
高级:
图示如下
如图:
2.点击OK,本地站定义完成,Dreamweaver会自动导入站点的所有文件及信息。
您可以在站点视窗中的本地站点窗口中查看。
2、定义远程站点
我们学习了如何创建本地站点,但要别人浏览到网站,还必须把本地站点内容放到远程服务器上。
浏览者通过单击网站域名或IP地址,才能浏览到网站上内容,所以创建远程站点,进行网站上传可以说是建设网站的最终步骤。
无论您制作的是个人主页还是公司网站,所有的文件都需要上传到网站服务器才能提供给访问者。
在Dreamweaver中内置了FTP工具,因此你无须切换到其他软件就可以连接网站主机,上传更新您的站点。
FTP:
(FileTransferProtocol),文件传输协议.
要使用Dreamweaver中的FTP功能,就必须定义站点的外部信息,具体操作方法为:
1.管理站点——编辑站点——远程信息——在访问下拉菜单里选择FTP方式
2.根据上传空间服务商提供的信息来填写相关的信息。
输入FTP相关信息例如:
FTP主机地址(比如:
)、主机目录或默认的远端文件夹(/public_html)、FTP登录用户名(申请时的用户名)、Password(FTP登录密码)
下图为定义FTP方式示例:
图:
定义FTP方式的外部站点
如果您是在局域网内操作不需要FTP方式,您可以选择本地网络方式。
或者您已经熟悉使用其他的FTP软件而不愿意使用Dreamweaver内置的FTP功能,因此您可能只是在本地机操作,但我仍然建议您选择此方式定义一个外部文件夹,从而起到备份站点文件的作用。
与FTP定义方式相类似,您只需要在访问中选择本地/网络方式,然后选择一个远端文件夹。
3.点击连接到远端主机。
如果连接上了,左边显示远端站点的内容,右边显示本地站点的内容。
新建站点到此结束。
4.打开本地站点和编辑站点属性
管理站点—编辑---进行编辑
第二节站点内容编辑
一、创建站点文件
1.打开站点,在站点下建立文件。
右键单击站点文件夹→新建文件→(我们给这个无标题页面起个名字,一般情况下首页的名字是“”。
浏览器打开某个网站,一般是先找“”,再找“”这个顺序是服务器决定的,而且绝大多数服务器都遵循这个原则,而且一般用户是无权修改这种设定。
所以在制作网站的时候,我们最好把网站的第一页命名为或.
2.把修改为(主页),双击主页文件,回到编辑区域,在标题栏里输入名字:
我的主页,然后保存(ctrl+s).
注意:
①页面的名称必须是小写的英文字母。
②htm是文件的后缀,也就是这网页文件的类型说明,表示这个网页是静态的htm文件,也可以用后缀html表示,以后大家一定记住将网页的后缀改为htm或html,否则上传到服务器上,浏览器就无法打开上传的网页。
3.同1,2,分别建立不同的页面。
比如:
;;.,并分别回到编辑区域给标题命名与保存。
4.在站点地图中显示文件标题
站点面板中——视图——站点地图--------显示网页标题。
二、创建站点下的文件夹
右键单击站点文件夹→新建文件夹。
比如:
image,flash,等。
文件夹不需要保存。
提示:
文件夹与文件的名称不允许出现汉字和标点符号
三、查看站点地图:
查看站点地图是在Dreamweaver8的“文件”面板的“视图”下拉列表框中选择“地图视图”选项。
四、编辑网页文件
1.双击我的主页,进入编辑区域。
打开窗口属性面板。
(在网页编辑中,经常打开是属性面板与站点文件夹)
2.修改——页面属性——选择页面背景的图片与颜色等——确定。
①在页面输入文字。
比如:
我的主页我的兴趣我的相册我的简历
②设置文字属性。
选中文字——在下面属性面板设置其属性(颜色、大小、粗细、位置)。
添加各种字体
关于字体:
注意:
别人的系统上未必装有与你相同的字体,所以不要将一些特殊的字体加到列表中使用,如果真需要特殊字体,必须做成图片之后再使用。
(民生学院主页文字显示)
关于换行:
(1)换行
①自动换行:
在输入文字时,若某一行的长度超过了Dreamweaver窗口的显示范围,文字将自动换到下一行。
②利用“Enter”键换行:
在输入文字后按“Enter”键,文字成段,且上下段之间空一行。
③利用“Shift+Enter”键换行:
如果想要将文字手动换行,中间又不能出现空白行,可以按“Shift+Enter”键。
3.图片的插入与应用
将插入点放到文档中要插入对象的位置上。
选择对象面板上的图像按钮,这时就出现一个对话框,要求你从磁盘上选择对象文件。
选择要插入的图像文件,同时在对话框里设置url的类型。
此时出现一个对话框:
你愿意将该文件复制到你的根文件夹里吗点确定。
保存到站点文件夹里的image文件夹里。
在文档里出现插入的图片。
修改属性。
保存,浏览效果。
提示:
GIF和JPEG是网页上常用的图象文件格式,在使用时采用以下规则:
需要图片保存为透明的背景,或者希望图象在显示时交错出现,或者是颜色不多,线条清楚的图片,选择GIF格式;而全彩的连续色调,没有明显边缘的图,则应选择JPEG格式。
4.动画插入与应用.swf
将插入点放到文档中要插入对象的位置上。
选择对象面板上的FLASH按钮,这时就出现一个对话框,要求你从磁盘上选择对象文件。
选择要插入的动画文件,同时在对话框里设置url的类型。
此时出现一个对话框:
你愿意将该文件复制到你的根文件夹里吗点确定。
(只有当flash文件在站点下的根文件夹里,才能在你所制作的网页上正常显示),然后保存在站点文件夹的flash文件夹里。
(如果没有flash文件夹,可以在此时建立,要养成不同的文件放入不同文件夹的习惯)保存过后,FLASH动画就插入文档中了,在属性面板上播放,并调整动画的宽高。
保存,F12浏览效果。
注意:
FLASH动画必须是SWF格式,名称不能有中文显示。
5.视频的插入与应用:
asf格式、wmv格式使用mediaplayer进行播放,要不就是rm格式用RealPlayer播放。
480*360,420*363,320*240
WAV格式视频:
插入——媒体-------ActiveX——
——属性设置如图
FLV格式视频:
插入——媒体------FLASH视频
————属性设置如图
效果图:
6.插入水平线。
有时,但靠段落来区分文章是不够的,这时需要插入一条分隔线,使页面区分更鲜明。
选择要插入的地方,然后选择对象面板里水平线按钮直接插入。
可以通过属性面板来修改其的长宽,极其所在的位置。
7.插入E—Mail选择对象面板上的插入邮件按钮,输入文本与邮件地址。
8.插入特殊符号
四、超链接:
超链接简介
超链接是WWW技术的核心,是网页中最重要、最根本的元素之一。
超链接能够使多个孤立的网页之间产生一定的相互联系,从而使单独的网页形成一个有机的整体。
(1)什么是超链接
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序。
而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。
当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。
按照链接路径的不同,网页中超链接一般分为以下3种类型:
内部链接、锚点链接和外部链接。
如果按照使用对象的不同,网页中的链接又可以分为:
文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。
(2)合理安排超链接
合理安排超链接在网页的制作中是非常重要的。
采用什么结构的链接会直接影响到网页的布局。
在这里给大家一些设计链接的建议。
①避免孤立文件的存在:
应该避免存在孤立的文件,这样能使将来在修改和维护链接时有清晰的思路。
②在网页中避免使用过多的超级链接:
在一个网页中设置过多超链接会导致网页的观赏性不强,文件过大。
如果避免不了过多的超链接,可以尝试使用下拉列表框、动态链接等一些链接方式。
③网页中的超链接不要超过4层:
链接层数过多容易让人产生厌烦的感觉,在力求做到结构化的同时,应注意链接避免超过4层。
④页面较长时可以使用书签:
在页面较长时,可以定义一个书签,这样能让浏览者方便地找到想要的信息。
⑤设置主页或上一层的链接:
有些浏览者可能不是从网站的主页进入网站的,设置主页或上一层的链接,会让浏览者更加方便地浏览全部网页。
1.文字链接:
链接硬盘上的文件:
选中文字——属性面板——链接后的文件夹选择站点文件夹选择index文件(或者站点下的图片)——保存——F12(浏览)——OK.
2.图片链接热点链接
a.选中---属性---设置链接地址
b.热点链接:
建立热区,插入一新的图片——属性面板——地图:
有
三个热区,选择其中一个在图像上建立热区,设置热区属性;目标:
_blank.链接:
硬盘上图片或者其它有效地址。
保存,F12浏览。
c.插入交互式图象。
插入——交互式图象-----鼠标经过图像——选择原始图像,鼠标经过的图像,输入文本解释,链接地址,确定,并保存,F12浏览。
3.网站链接:
在页面上输入[新浪][网易]等
选中[新浪]——属性面板——链接后直接输入地址:
——确认,恩回车键——CTRL+S存盘——F12浏览效果。
4.邮箱链接:
[给我联系][联系我们]
选中文字——属性面板——链接后——.——Ctrl+S存盘——F12浏览效果.
5.文件链接:
WORD,PDF,文件下载
6.创建空链接
空链接是一个未指定目标的链接,Dreamweaver的行为面板中列出了许多行为,这些行为相当于使用JavaScript编写的程序或函数,要想对文本设置行为,首先为文本建立空链接,这样行为才有效。
为文本建立超链接时,只要先在文档窗口选定文本,然后在属性面板中的“链接”栏中输入一个数值符“#”即可。
建立空链接的目的就是为了应用行为,其他情况下不必建立空链接。
7.创建锚点链接
在一些内容很多的网页中,设计者常常在该网页的开始部分以网页内容的小标题作为超链接。
当浏览者单击网页开始部分的小标题时,网页将跳到内容中的对应小标题上,免去浏览者翻阅网页寻找信息的麻烦。
其实,这是在网页中的小标题添加了锚点,再通过对锚点的链接来实现的。
锚点,也称为书签,用来标记文档中的特定位置,使用其可以跳转到当前文档或其他文档中的标记位置。
在网页中加入锚点包括两方面的工作,一是在网页中创建锚点,另一个是为锚点建立链接。
创建锚点的步骤如下:
将光标移到需要加入锚点的地方,一般是将光标放置在一行或是一段文字的开头部分;点击
在弹出的对话框中输入相应的锚点名称。
单击“确定”按钮。
执行完上述操作之后,则在光标处出现一个代表锚点的图标。
锚点命名要求:
①只能使用字母和数字,锚点命名不支持中文。
虽然在插入锚点对话框中能输入中文,但在属性面板上显示的则是一堆乱码,且在为锚点添加链接的时候,也无法工作。
②锚点名称的第1个字符最好是英文字母,一般不要以数字做为锚点名称的开头。
③锚点名称区别英文字母的大小写。
④锚点名称间不能含有空格,也不能含有特殊字符。
链接锚点
①创建锚点后,还必须链接锚点。
选择想要链接到锚点的文字或图片
②在属性面板中的“链接”文本框中,输入“#”和锚点名称。
或者在属性面板中拖拽“指向文件”,移动鼠标到相应的锚点位置上。
在链接锚点时,应注意以下事项:
①在#和锚点名之间不要留有空格,否则链接会失败。
符号#必须是半角符号,而不能为全角符号
作业与练习:
1.建立站点
2.编辑站点下的文件
3.如何实现图文混排
在DW里面首先在文本中间位置直接插入相应的图片,之后,设置图片属性框的"对齐"选项.左对齐或右对齐,自己看效果
教后小结:
注意事项:
1.站点根文件夹不允许有汉字和标点符号,空格,只能是英文小写字母
2.所有的站点下文件名称不允许出现中文汉字,可以是字母或者数字,否则,在浏览器下页面不能正常显示。
3.每做一步,需要保存CTRL+S,浏览效果F12
4.练习水平线和特殊字符的插入
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第一章 DW 站点 建立