网页设计与制作教程与实训.ppt
《网页设计与制作教程与实训.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作教程与实训.ppt(76页珍藏版)》请在三一办公上搜索。
1、网页设计与制作教程与实训,2.1 Dreamweaver 8简介,Dreamweaver8利用 Dreamweaver8 中的可视化编辑功能,快速地创建页面而无需编写任何代码。查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。在 Macromedia Fireworks 或其他图形应用程序中创建和编辑图像,然后将它们直接导入Dreamweaver8,添加 Macromedia Flash 对象。从而优化您的开发工作流程。在于能够进行多任务工作,是一种更富于工作效率的操作系统。它在操作方法、界面风格具有更加时尚化。,Dreamweaver 8新增功能1.【样式呈现】工具栏2.插入Fl
2、ash 视频内容3.支持ColdFusionMX74.支持PHP55.CSS样式:CSS 布局可视化、新的标准 CSS 面板、改善的 CSS 呈现功能,2.2 Dreamweaver 8 的工作界面,2.3 常用面板的使用,2.3.1 使用插入栏【插入】栏包括图像、表格、层等对象按钮,单击这些按钮可以为网页添加相应的元素。默认的插入栏为标准插入栏。单击插入栏左侧的下三角按钮,可以更换为其他工具栏。,2.3.2 使用属性面板 属性面板并不是将所有的对象和属性加载到面板上,而是根据用户选择的不同对象来动态地显示对象的属性。制作网页时,可以根据需要随时打开或关闭,或者通过拖动属性面板的标题栏将其移到
3、合适的位置。,2.3.3 使用文件面板1.启动【文件】面板2.设置站点参数,3.定义站点主页的操作方法有如下两种。在【文件】面板中,从弹出菜单(当前站点、服务器或驱动器显示在该菜单中)中选择一个站点。右击要设为主页的文件,从弹出的快捷菜单中选择【设成首页】命令。在【我的站点的站点定义为】对话框中,打开【高级】选项卡,在【分类】列表框中选择【站点地图布局】,通过【主页】文本框后的【浏览文件】图标选择一个文件作为主页。,2.3.4 资源面板 资源包括存储在站点中的各种元素,如图像或影片文件。【资源】面板提供了两种查看资源的方式。【站点】列表显示站点的所有资源。【收藏】列表仅显示明确选择的资源。,2
4、.5 站点的基本操作,2.5.1 定义站点创建本地站点设置远程站点,2.5 站点的基本操作,2.5.2 编辑站点1、编辑站点在创建站点之后,可以对站点属性进行编辑,具体操作方法如下。(1)选择【站点】|【管理站点】命令,如图所示的【管理站点】对话框。(2)从列表中选择要编辑的站点名称。单击【编辑】按钮,即可打开对话框,对该本地站点进行编辑。(3)编辑完毕,单击【确定】按钮,可以返回【管理站点】对话框。单击【完成】按钮,完成编辑操作。,2.5 站点的基本操作,2.5.2 编辑站点2、删除站点如果不再需要利用Dreamweaver 8对某个本地站点进行操作,同样可将其从站点列表中删除。具体操作步骤
5、如下。(1)【管理站点】对话框中,单击【删除】按钮。(2)系统会弹出一个提示对话框,询问用户是否要删除本地站点,单击【是】按钮,即可删除选中的本地站点,返回【管理站点】对话框,单击【完成】按钮,完成操作。,提示:该操作实际上是删除了Dreamweaver同本地站点之间的关系,但是实际上本地站点的内容,包括文件夹和文档等,都依然保存在磁盘相应的位置上,用户可以重新创建指向其位置的新站点,重新对其进行管理。,2.5 站点的基本操作,2.5.2 编辑站点3、复制站点在【管理站点】对话框中选择要复制的站点,单击【复制】按钮,即可将该站点复制,新复制出的站点名称将会出现在【管理站点】对话框的站点列表中。
6、该名称采用原站点名称后添加【我的站点复制】字样的形式。】如有需要,可以选中新复制的站点,然后单击【编辑】按钮,对之进行编辑,例如修改站点名称等。在【管理站点】对话框中单击【完成】按钮,完成对该站点复制的操作。,2.5 站点的基本操作,2.5.3 操作站点文件利用【站点】窗口,可以对本地站点的文件夹和文件进行创建、删除和复制等操作。1.创建文件和文件夹,提示:如果要修改文件的名称或文件夹的名称,可以单击文件的名称或文件夹的名称,或按下F2键,激活文字编辑状态,然后输入想要的名称即可。,2.文件的移动和复制 与大多数文件管理器一样,用户可以利用剪切、复制和粘贴操作来实现文件或文件夹的移动和复制。,
7、提示:移动或复制文件,由于文件的位置发生了变化,其中的链接信息(特别是相对链接)可能发生了相应的变化。Dreamweaver8会打开如图2.37所示的对话框,提示是否要更新被移动或复制的文件中的链接信息。如果需要更新,则从列表中选择要更新的文件,单击【更新】按钮,则更新文件中的链接信息。,3.删除文件 要从本地文件列表中删除文件,可以按照以下方法进行。(1)选中要删除的文件或文件夹。(2)在【编辑】菜单中,选择【删除】命令,或是按下Del键。(3)这时系统会出现一个提示对话框,询问用户是否真的要删除文件或文件夹,单击【是】按钮,即可将文件或文件夹从本地站点中删除。,提示:与站点的删除操作不同,
8、对文件或文件夹的删除操作,会从磁盘上真正地删除相应的文件或文件夹。,1.1 与网页制作相关的术语,1.1.1 网站与网页 当我们在浏览器中输入一个已知网址后,即可打开一个页面,让我们了解有关这个网址的一些信息和内容,这个页面就是我们通常所说的网页,而打开网络由网址进入时第一个看到的页面,我们通常把它称为首页(home page)或主页,所有的信息都会清楚地整理在这个页面上,目的就是为了让用户在使用这个网页时能快速链接到需要的资料,它既是一个单独的网页,同一般网页一样可以存放各种信息,又是一个特殊的网页,是整个Web站点的起始点和汇总点,是用户开始浏览站点的“入口处”。由首页所延伸下去的页面,就
9、是一个个网页。网页又称Web页面,是网络文件的组成部分,是可以被浏览器访问的单个HTML超文本文件,它由文字、表格、图片、声音、视频以及各种功能按钮等组成,这些文字、图片、按钮往往又是指向别的主页的连接点。在Internet网上,这些连接点又叫超级链接。所有由首页链接出去的网页集合起来就是网站。即在设计时,将某个主题明确后,再按所需的单元、内容经过安排,化为各个不同的网页,在同一个结构及诉求下出现的集合体,就是网站(Web Site)。有主题性的网站是要经过规划和构架过的网站。在互联网上,Web站点由一组相互关联的页面组成,如果把整个WWW信息世界看作一个村子,那么一个Web站点可以理解成一个
10、家庭。,1.1 与网页制作相关的术语,1.1.2 服务器(Server)与浏览器(Browser)服务器是局域网的核心设备,它管理着局域网中的各种资源,它的基本功能是网络通信服务、管理和提供网络共享资源,以及进行网络管理。服务器实质是一台配置较高的计算机。不同的电脑操作系统,有不同的适用服务器软件,如:微软视窗windows XP Professional操作系统适用的服务器软件IIS5.1网站上动态的数据,必须要通过网站服务器的服务才能运作。用于查看Web站点的软件被称作浏览器。它是WWW的窗口,用户可以利用浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释HTML文档中
11、所描述的动画、声音、文本、图形、图像,并能实现电子邮件查看、下载文件、FTD等功能。它有多种版本,如微软英特尔版本、苹果电脑版本等,大多数浏览者(目前已经超过90)使用Microsoft Internet Explorer(简称IE)浏览器.还有一些其他的浏览器,不同版本的浏览器功能大体一样,主要区别在于各功能区在版面上的排列不同。,1.1.3 远程站点(Remote Site)和本地站点(Local Site)远程站点是指服务器上组成的Web站点。本地站点是指与远程站点上的文件对应的本地磁盘上的文件。在制作网页时,首先要定义一个本地站点。作为一个网站,里面有很多网页文件、图片、Flash动画
12、等,如果不进行管理归档,分散在硬盘的各个地方,就无法方便地进行网页发布。定义本地站点,就是在硬盘上建立一个目录,将所有的网页和相关的文件都放在里面,以便进行网页的制作和管理。一般在设计网页之前,先要以设计的网页的名称新建一个文件夹,把它放在电脑中常用来存储文件的磁盘中,如“我的网页”、“个人网页”等的文件夹里,也可以根据自己的习惯放置文件。,1.1 与网页制作相关的术语,1.1.4 统一资源定位器URL URL即Uniform Resource Locator(统一资源定位器)的缩写。用来指明主机或文件在Internet上的位置,一个URL就是一个资源在Internet上的具体位置,URL由I
13、nternet资源类型、服务器地址、端口及路径组成,如:http:/就是一个典型的URL。它的作用在于提供一个标准方法,以便能够在Internet上找到任何东西。无论是单一的页面,还是庞大复杂的网站,甚至是一个小小的图片,所有的网络资源都能通过URL系统访问到。,1.1 与网页制作相关的术语,1.文字 文字是网页最基本的构成要素,一个网页上大部分是由文字构成的,由于文字所表达内容比较清楚、直接,而且相对占用网页版面面积较小,使网页所表达的信息量加大,所以网上用来表达内容或链接的大部分是文字。文字也称文本,网页有90左右是由文本组成。首页上的文本基本上都是用来链接用的。,1.3 网页界面的构成要
14、素,2.图像 图形和图像也是网页主要的构成要素,它有动态和静态之分,和文字的功能一样,也是基本上用来链接用的,它比文字看上去更加直观,更让人容易理解内容。图形可提高站点的访问率,但不能因此而在网页上加入过多的图片,这样会适得其反,一方面由于图形占网页空间较大,使网页信息量相对减少;另一方面由于图片较多,使网页显示的速度降低,用户浏览网页花费的时间较长。Web图形的文件标准格式是JPG、GIF和PNG,对颜色具有平滑渐变的图像使用JPG格式,如大多数照片;对于以单一颜色为主的图像,使用GIF格式。,1.3 网页界面的构成要素,1.3 网页界面的构成要素,3.超链接 超链接由两个端点及一个方向构成
15、。通常开始的位置称为源端点,目标位置称作目标端点。链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页面、一幅图像、一段声音、或者是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。根据源端点的不同,可以将超链接分为两种:超文本(Hypertext)和超链接(Hyperlink)。超文本就是源端点的文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链接,如图像、表单等。,1.3 网页界面的构成要素,4.交互功能 交互功能,即网上提供的聊天、论坛、留言本、邮件发送及接收的互动功能。这也是互连网的一大优势所在,它给人提供了一个快捷交流的平台,给人的生活带来了许多便利。,1.
16、3 网页界面的构成要素,5.多媒体(Multimedia)多媒体就是指各种各样的信息载体在计算机中的应用,是一种文字、声音、图像、动画和视频影像成分的交互组合。网页中的多媒体主要指采用音频和视频功能的软硬件技术,包括数字音响、全动态图像、超媒体连接等,主要是对声音、图像具有编辑处理的功能,即网页上提供的音频和视频下载及播放功能,包括Flash动画、声音与影片文件的播放。它必须通过网络媒体播放器来实现,有多种网络媒体播放器。如常用的有Windows Media Player和 Realone Player等播放器。,1.4 网站开发的流程,设计开发一个网站要考虑很多因素,如站点的定位、确定网站的
17、目录和链接结构、首页的设计制作及网站的测试、发布和维护等,这些因素的考虑,是一个环环相扣的过程,要想设计制作一个成功的网站,对每一个环节的把握都十分重要。,1.4.1 确定网站的目的和主题 1.确定网站主题 2.为网站命名,1.4 网站开发的流程,1.4.2 定位网站CI形象 CI形象是借用的广告术语。(CI是英文corporate identity的缩写),意思是通过视觉来统一企业的形象。企业一般都要通过CI形象的策划来提高知名度,它是一种营销战略。如较早地成功导入CI战略的世界知名公司有可口可乐、SONY、三菱、麦当劳等。一个网站,和实体公司一样,也需要整体的形象包装和定位准确的、有创意的
18、CI 设计,这样对网站的宣传推广有事半功倍的效果。网站主题和名称定下来之后,需要思考的就是网站的CI形象设计。网站的CI形象设计和企业的CI形象设计的内容相似,主要包括:,1.4 网站开发的流程,1.4 网站开发的流程,1.4.2 定位网站CI形象 1.设计网站的标志(logo)即网标。和商品的商标、企业的标志一样,网标是站点特色和内涵的集中体现,看见它就让人联想到它所代表的站点。如新浪网的 网标就体现出新浪网的快捷、准确、精华的特色。标志图形可以只由中文、英文字母构成,也可以只由符号、图案(动物、植物、人物、几何)构成,还可以由文字和图形构成。如:soim是用soim的英文做为标志,新浪用字
19、母sina和眼睛作为标志。标志的设计创意来自网站的名称和内容。1)以用与网站名称相关的人物,动物,花草等作为设计的主体对象,通过抽象、概括、变形等手法,使之艺术化、标志化,如迪斯尼的米老鼠、搜狐的卡通狐狸等。2)专业性较强的网站,可以以本专业有代表的物品作为设计的主体对象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。3)最常用和最简单的方式,是用网站的英文名称的字体作为设计的主体对象,用不同的字体、字母的变形及字母的组合,使之艺术化、标志化。,LOGO的国际标准规范:88*31 这是互联网上最普遍的LOGO规格,本站所收集的均是这种大小120*60 这种规格用于一般大小的LOGO120*90
20、 这种规格用于大型LOGO。,1.4.2 定位网站CI形象 2.设计网站的标准色彩 网站给人的第一印象来自视觉的冲击感,确定网站的标准色彩是相当重要的一步。不同的色彩搭配会产生不同的效果,并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。如:IBM的深蓝色、肯德基的红色条型、Windows视窗标志上的红、蓝、黄、绿色块等,都会给我们不同的视觉感受。,1.4 网站开发的流程,一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。标准色彩要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,只是作为点缀和衬托,绝不能喧宾夺主。一般来说,
21、适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。,1.4 网站开发的流程,1.4.2 定位网站CI形象 3.设计网站的宣传标语 网站的宣传标语,就是把网站的精神、目标用一句话或一个词来高度概括。类似生活中的广告语。如雀巢的“味道好极了”、麦斯威尔的“好东西和好朋友一起分享”、Intel的“给你一个奔腾的心”等。网站的标志、色彩、字体和标语,是一个网站树立CI形象的关键,也是一个网站档次高低的直接体现,所以,定位网站的CI形象,最好要有艺术设计人员参与。,1.4 网站开发的流程,1.4.3 资料收集、制作与整理 网站资料主要包括文本、图像两大类,大部分在放入网页前都需要做适当的
22、修改和处理。另外,依据网站的主题亮点,还可能准备如声音、Flash影片、图像等需要在网页中展示的内容。搜集资料时范围要广泛,在进行网页设计时再整理与筛选。,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 站点确定后,接下来就要规划网站的结构,网站的结构分目录结构和链接结构。确定网站的结构目的是便于网站的使用和维护。网站的目录是指在建立网站定义站点时创建的目录,如有类似“我的网页”的根目录和“我的家”的子目录。目录的结构是一个很容易忽略的问题,目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。如建立E:/我的网页我
23、的家文字、图片、链接等较清晰的目录,就便于网站的管理和维护。网站的链接结构是指页面之间相互链接的拓扑结构,它建立在目录结构基础之上,但可以跨越目录。形象地说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。确立网站的链接结构的目的是用最少的链接,使得浏览最有效率。,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 一般来说,确定网站的目录结构有两种基本方式:,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 一般来说,确定网站的链接结构有两种
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 教程
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-4993880.html