网页制作教程-项目1_第1页
网页制作教程-项目1_第2页
网页制作教程-项目1_第3页
网页制作教程-项目1_第4页
网页制作教程-项目1_第5页
已阅读5页,还剩45页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、项目1 学习网页制作基础知识项目1 学习网页制作基础知识 【项目目标】 熟悉网页制作常用术语; 了解网页的基本元素; 了解网页制作工具; 了解网页布局类型; 掌握网站建设流程。任务1 常用术语学习【任务说明】 小蕾带着学习笔记和网页制作教程回到家,立即开始阅读网页制作基础知识,希望全面了解书上的专业术语。阅读资料时,她发现有的专业名词以前也曾听到过,但是不知道它们的具体含义更不知道和网页制作的关系。 【任务分析】 帮助在学习任务中,需要熟悉一些网页制作的常用术语,记住这些术语的全称和中文意思会对后续工作有较大的帮助作用。具体学习过程中会涉及以下三类内容: 网络基础知识术语 网页结构术语 网页制

2、作术语 第一步:学习网络基础术语1.WWW WWW 是World Wide Web(全球信息网)的缩写,中文名字为“万维网”。WWW是Internet上那些支持W3C协议和超文本传输协议HTTP(Hypertext Transfer Protocol)的客户机与服务器的集合。2. Internet Internet,中文正式译名为因特网,又叫做国际互联网,是指全球范围内的计算机系统互联网。它是世界上最大的计算机网络,是一个将全球成千上万的计算机网络连接起来而形成的全球性计算机网络系统。它使各网络之间可以交换信息和共享资源。3. Intranet Intranet又称为企业内部网,是Intern

3、et技术在企业内部的应用。它实际上是采用Internet技术建立的企业内部网络,它的核心技术基于Web。通常Intranet是利用防火墙把内部网和Internet分开,当然Intranet并非一定要和Internet连接在一起,它完全可以自成一体作为一个独立的网络。 4.网站 网站是多个相关网页的集合,也称为站点,英文名称为Web Site。网站中的网页之间有一定的链接关系,可以通过点击被设置为超链接的文字或对象来跳转到相关的网页。第二步:学习网页结构术语 1. HTML 带.htm、.html后缀的网页简称为HTML文件,是最常见的网页类型。HTML的中文名称为超文本标记语言,是Hypert

4、ext Markup Language的缩写,该语言主要利用标记来描述网页字体、大小、颜色及页面布局。在DreamWeaver中,可以通过代码编辑视图来编辑HTML代码以生成对应的网页。 2.超文本 WWW上的每个网页都对应一个文件。我们浏览一个页面,要先把页面所对应的文件从提供这个文件的计算机里,通过Internet传送到我们自己的计算机中,再由WWW浏览器翻译成为我们见到的有文字、有图形甚至有声音的页面。3. FTP FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文件传协议”。用于Internet上控制文件的双向传输。同时,它也是一个应用程

5、序。用户可以通过它把自己的PC机与世界各地所有运行FTP协议的服务器相连,访问服务器上的大量程序和信息。4. ISP ISP(Internet Service Provider),互联网服务提供商,即向广大用户综合提供互联网接入业务、信息业务和增值业务的电信运营商。ISP是经国家主管部门批准的正式运营企业,享受国家法律保护。 5. URL URL(Uniform Resource Locator)译为“统一资源定位符”是网页的地址。 URL由三部分组成:协议类型,主机名和路径及文件名。6. IP 为了区别各个站点,必须为每个站点分配一个唯一的地址,这个地址即称为IP地址,IP地址由4个从0到2

6、55之间的数字组成,格式为xxx.xxx.xxx.xxx,由网络解析这个地址,以确立每个用户的身份。7.域名 IP 地址是数字化的,比较难记,所以有人发明了一种新方法来代替这种数字,即“域名”地址,域名由几个英文单词组成,如,其中cn代表中国(China),com代表商业网,sina代表新浪,www代表互联网(或称万维网World Wide Web),整个域名合起来就是新浪网站的地址。 第三步:学习学习网页制作术语 1. VBScript和JavaScript VBScript和 JavaScript都是一种编程语言,通常将他们嵌入html网页文件中使用,所以称为脚本语言,所编写的程序称为脚本

7、程序。通过在html网页文件中嵌入VBScript和JavaScript脚本程序,可以扩展网页文件的功能,使网页文件能够对用户的操作做出相应,使静态的html网页成为动态网页。 2.动态网页和静态网页 这里说的动态网页,与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系,动态网页也可以是纯文字内容的,也可以是包含各种动画的内容,这些只是网页具体内容的表现形式,无论网页是否具有动态效果,采用动态网站技术生成的网页都称为动态网页。任务2 网页元素学习 【任务说明】 小蕾知道构成网页最基本的元素是文字和图片,有的网页中还可能包含动画、影片、声音以及其他多媒体内容。但是,网页究竟可以包含哪

8、些元素呢,可能许多人都不太清楚,因此了解相关内容是制作网页前需要解决的基本问题。 【任务分析】 在本任务的学习中,小蕾详细了解了网页中可能出现的每个对象的名称、用法和使用效果,具体学习内容被分解成以下过程: 认识网页基本元素 认识网页多媒体元素 认识网页链接和导航 认识表单 第一步:认识网页基本元素 1.文本 网页中的信息以文本为主,因为文本可以准确地表达信息的内容和含义,一直以来就是人类最重要的信息载体与交流工具。在网页中使用文本时,可以设置文本的字体类型、大小、颜色和对齐等属性,以达到美化页面的要求。 2.图像 使用图像不但可以提供信息和装饰网页,还可以直观地展示作品的外观。通常用于网页的

9、图像有三种格式:即GIF、JPG和PNG。目前,GIF和JPG文件格式的图像支持情况最好,大多数浏览器支持这两种图像格式。 第二步:认识网页多媒体元素 1.动画 在网页中使用动画元素可以使网页更生动。常见的网页动画有两种:一种是GIF动画,另一种是Flash动画。GIF动画在早期的网页中应用相当普遍,虽然它只能表现出256种颜色,但制作动画却非常容易,常见的制作软件有Fireworks等。Flash动画具有极好的显示连贯性,可以加入声音,而且体积较小,比较适合应用于网页,常见的制作软件有Flash等。 2.音频和视频 网页中的视频和音频都是通过在网页中插入音频、视频插件来实现的。最流行的音频、

10、视频格式有两种:一种是AVI,另一种是RM,两种格式都使用了压缩算法和流媒体技术进行传送。 第三步:认识网页链接和导航 1.超链接 超链接是在Internet上各网页之间进行跳转的媒介。可以将一个网页中的文本、图像或按钮等对象设置为超链接,并指向另一个网页或某个文档、图像、多媒体文件、可下载软件以及文档内任意位置的任何对象(包括标题、列表、表、层或框架中的文本或图像)、互联网上的其他站点。当把鼠标指针放在超链接上时,指针形状会变成小手状,通过单击超链接即可跳转到目标对象。 2.导航栏 导航栏的作用是引导访问者浏览站点。导航栏实际上就是一组超链接,其链接目标是本站点中的各个网页。导航栏既可以是文

11、本链接,也可以是一些图形按钮。 第四步:认识表单 表单是访问者与网站交互的桥梁。网页中的表单通常用来接收用户在浏览器端的输入,然后将这些信息发送到用户设置的目标端,以实现收集浏览者信息并与其进行交互的目的。任务3 了解网页制作工具 【任务说明】 经过前期学习,小蕾对网页术语和组成元素有了初步了解,但还是不明白怎样制作网页,所以,小蕾开始了网页制作工具的学习。 【任务分析】 在本学习任务中,小蕾需要认识常用的几种网页制作和页面美化工具,具体内容被分解成以下两项: 了解网页编辑工具 了解页面设计及美化工具 第一步:了解网页编辑工具 1. FrontPage FrontPage是由Microsoft

12、公司推出的Web网页制作工具。FrontPage使网页制作者能够方便、快捷地创建和发布网页,具有直观的网页制作和管理方法,简化了网页制作工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似,为使用者带来了极大的方便,Microsoft公司将FrontPage封装入Office之中,成为Office家族的一员,使之功能更为强大。 2. DreamWeaver DreamWeaver是由Macromedia公司推出的一款在网页制作方面大众化的软件,它具有可视化编辑界面,用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页,不仅适合于专业网页编辑人员的需要,同

13、时也容易被业余网友们所掌握。 第二步:了解网页设计及美化工具 1. PhotoShop PhotoShop是由Adobe公司开发的图形处理软件,它是目前公认的PC机上最好的通用平面美术设计软件,它功能完善、性能稳定、使用方便,所以在几乎所有的广告、出版、软件公司,PhotoShop都是首选的平面制作工具。 2. Fireworks Fireworks是由Macromedia公司开发的图形处理工具,它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件,同时也是专业的网页图形设计及制作的解决方案。作为一个图像处理软件,Fireworks能够自由地导入

14、多种格式的图像进行处理。Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等。 3. Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件,它是一种交互式动画设计工具,用它可以将音乐、声音、动画以及富有新意的界面融合在一起,以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域,功能十分强大和独特,已成为交互式矢量动画的标准,在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、在线游戏等的制作中。 任务4 了解网页布局类型 【任务说明】 小蕾通过观察发现,许多网页的页面结构是不一样的,于是询问小莹怎么

15、对网页的结构进行设计,小莹向小蕾介绍了常见的“国”字型布局、“匡”字型布局、“三”字型布局、“川”字型布局等。 【任务分析】 本次任务中,小蕾将学习常见的国字型、匡字型、三字型、川字型等几种网页布局类型。 第一步:国字型图1-4 “国”字型抽象图 图1-5 “国”字型结构布局的网站 第二步:匡字型 图1-6 “匡”字型抽象图 图1-7 “匡”字型结构布局的网站 第三步:三字型图1-8 “三”字型抽象图 图1-9“三”字型结构布局的网站 第三步:川字型图1-10“川”字型抽象图 图1-11“川”字型结构布局的网站 第五步:其他类型 1. Flash布局 这种布局是指整个网页就是一个Flash动画

16、,它本身就是动态的,画面一般比较绚丽、有趣,是一种比较新潮的布局方式。2.标题文本型布局 标题文本型布局是指页面内容以文本为主3.框架型布局 采用框架布局结构,常见的有左右框架型、上下框架型和综合框架型。4.综合型布局 即上述几种类型的结合与变化。 任务5 了解网站建设流程 【任务说明】 小莹告诉小蕾,创建一个网站并不复杂,但要创建一个优秀的网站并非易事。创建网站前了解一下网站建设的基本流程十分必要,因为网站建设流程中既涉及网站目标和方向的规划,也涉及网站结构的设想,弄清相关问题再开始工作,会事半功倍。 【任务分析】 本次任务中,小蕾要学习网站建设的整个流程,并为自己的网站做好整体规划,具体学习过程被分解成以下内容: 前期策划网站 网页制作和美化 网发布和推广 后期维护网站第一步:前期策划网站 1.网页内容策划 2.网站结构的设计规划 3.设计网站的版面布局 第二步:网页制作和美化 1.网页制作 (1)静态网页的设计与制作 (2)为网页添加动态效果 2.网页美化 (1)色彩的运用 (2)确定网站的主题色第三步:网站发布

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论