第1章 网页制作基础知识和Dreamweaver软件基础
本章学习目标 了解制作网页的预备知识 认识dreamweaver的用户界面 学习申请空间 创建站点 管理站点文件和文件夹 网页文件头设置 HTML基础知识 制作一个简单的网页并进行简单的设置
互联网原理:包括至少两台计算机之间信息交换,需要信息的计算机称为客户端,提供信息的计算机称为服务器端。 网页浏览基本原理:客户机-服务器体系 互联网原理:包括至少两台计算机之间信息交换,需要信息的计算机称为客户端,提供信息的计算机称为服务器端。 网页的分类 根据不同的分类标准,可以对网页进行如下的分类。 按网页在网站中所处位置不同,网页可分为主页和内页。打开一个网站时看到的第一个页面就是主页,也称为首页,主页文件的名称一般为index.htm或index.html;与主页相链接的其他各个页面就称之为内页。
按网页的表现形式,可将网页分为静态网页和动态网页。一般用户制作的都是静态网页,它是一切网页制作的基础,如果想制作动态网页,那么仍然需要先做好静态页面,然后在此静态页面中加入动态技术,从而制作出十分精彩的动态页面。 网页中的常见概念 万维网(World Wide Web) 浏览器 统一资源定位器(Universal Resource Locator)
文件传输协议(File Transfer Protocol) 超文本标记语言(Hyper Text Markup Language) IP地址 域名 表单 超级链接 导航条 发布
Netscape Navigator(NE):NE浏览器是由Netscape(网景)公司研发的一款浏览器。 目前使用最广泛的是基于微软视窗平台的浏 览器,主要有以下两类。 Microsoft Internet Explorer(IE):IE浏览器是由Microsoft(微软)公司开发出品的一种浏览器,也是目前全球范围内拥有用户量最多的一种浏览器。 Netscape Navigator(NE):NE浏览器是由Netscape(网景)公司研发的一款浏览器。
另外国内也有一些用户喜欢使用腾讯公司的TT浏览器(TT浏览器的下载地址是http://im. qq 统一资源定位器 统一资源定位器简称URL,是用来指出某项信息的位置及存取方式,以取得各种服务信息的一种标准方法。
超文本标记语言 简称HTML,它是WWW创建超媒体文本的语言,它也是网页创建中最基本的语言,制作的任何一个网页都是基于HTML文本标识的。 HTML语言最基本的特征就是超文本和标记,用HTML语言编写的网页文件的扩展名一般为*.htm或*.html。
网站概述 网站的定义 在网上看到的一个个网页页面的集合就是网站。网站可以包含多个页面,也可以只有一个页面,比如一些简单的个人主页就可能只有一个简单的页面,而一些大型网站则可能有很多页面。 网站的分类 根据网站内容来分,可以将网站分为4类,即门户网站、职能网站、专业网站和个人网站。
门户网站 这是一种涉及领域最广的网站,它包括了很多的功能及页面,涉及到人们生活的方方面面,比如具有搜索、论坛、聊天室、电子邮箱、虚拟社区、短信等功能;新闻、娱乐、体育、音乐、影视、文学等页面。一般这类网站的外观都比较简洁,但功能齐全,用户想要的资源在它上面基本都能找到。 目前在国内比较有影响力的大型门户网站有雅虎中国(cn.yahoo.com)、新浪(www.sina.com.cn)、搜狐(www.sohu.com)及网易(www.163.com)等。
职能网站 这是一类具有专门功能的网站,如政府部门的网站、商务网站等。其中电子商务网站主要是用于在网上进行产品交易的网站,现在很多企业都在网上建立了自己的商务网站,用于自己公司产品的宣传及在网上进行商品的交易。 电子商务网站在国内很多,其中比较出名的有阿里巴巴(china.alibaba.com)、卓越网(www.joyo.com)、易趣网(www.eachnet.com)及当当网上书店(www.dangdang.com)等。
专业网站 专业网站的专业性非常强,它一般只涉及生活中的某一领域,但内容却十分专业广博,一般为一些专业人士提供服务。 这类网站也较多,比较有代表性的有网页制作大宝库(www.dabaoku.com)、黄金书屋(cn.goldnets.lycosasia.com)等,中央电视台CCTV(www.cctv.com)的网站也是这类性质的。
个人网站 个人网站一般是个人为了兴趣爱好或为了展示自己等目的而建设的站点。由于该类站点都为个人建立,因此具有很明显的个人色彩,无论从内容、风格、样式上,都形色各异、包罗万象。 这类网站在网上随处可见,优秀的也不少,比较不错的有南天俱乐部(nantian.nease.net)和情感天空(zqjyfh.nease.net)等。
网页制作常用软件 图像处理软件 动画制作软件 网页布局软件 网页源代码编辑工具
Dreamweaver 简介 Dreamweaver 是一款专业的可视化网页编辑软件,可用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论是直接编写HTML代码还是在可视化编辑环境中工作,Dreamweaver都会为用户提供最有效的工具,让用户的创作轻松惬意。 利用Dreamweaver中的可视化编辑功能,可以快速地创建页面而无需编写任何代码。用户还可以查看所有站点元素或资源并将它们从易于使用的面板中直接拖到当前文档中。也可以在Fireworks或其他图像应用程序中创建和编辑图像,然后将它们直接导入Dreamweaver编辑窗口中,或直接添加Flash对象,从而优化用户的开发工作流程。
安装和卸载 关于Dreamweaver起始页 工作区选择:“设计者”和“代码编写者” “设计者”布局是一个使用MDI(多文档界面)的集成工作区,其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中,并将面板组停靠在右侧。这种布局有利于静态网页的设计。 “代码编写者”布局将面板组停靠在左侧,“文档”窗口在默认情况下显示“代码”视图。这种布局适宜于编写网络应用程序者使用。
常见Dreamweaver界面操作 界面元素包括:标题栏、菜单栏、“插入”工具栏、文档工具栏、“标准”工具栏、文档编辑窗口、状态栏、属性面板和面板组等。
建立站点 站点的概念 在dreamweaver中,“站点”这个术语可以指网站,也可以指属于网站的文档的本地存储位置。
1 确定目标 选择目标用户 创建具有浏览器兼容性的站点 组织站点结构
Applet: 存放JavaApplet小程序的字节码文件 Common: 存放CSS样式表的文件 HTML: 存放HTML页面,必要时使用子文件夹 Images: 存放页面中使用的图片文件 JavaScript: 存放JavaScript实例程序 Media: 存放页面中使用的多媒体文件,如FLASH,AVI Software: 存放提供下载的软件 Sound: 存放声音文件 Templates: 存放网页模板文件
5 创建设计外观 6 设计导航方案 7 规划和收集资源
准备建站素材 文字资料:需要进行搜集、整理、编辑、审阅和校对等工作。 图片资料:包括徽标、按钮、修饰图形和图像等。 动画素材:包括GIF动画和Flash影片等。 其他多媒体元素:包括音频和视频等。 站点资源:可以提供给用户下载的文件。
组织站点结构需要注意的地方: 将站点内容分门别类。 确定放置图象、声音或其他多媒体文件的位置。 对本地站点和远程站点使用相同的结构。 建立站点(本地站点) 管理站点(编辑、添加和删除站点)
网页文件头设置 文件头在网页中是看不到的,包含在<head>…</head>标签之间,主要包括META,关键字,说明,刷新,基础和链接等。 插入搜索关键字 插入作者和版权信息 设置刷新时间
HTML基础知识 HTML的语法非常简单,它采用简捷明白的语法命令,通过各种标签、元素、属性、对象等关键字建立与图形、声音、视频等多媒体数据以及其他超文本链接。 语法规则 超文本标记语言主要由各种标签构成,包含“<”、“>”符号以及其中所包容的标签元素组成。 一般来说,HTML的三种表达方式: ⑴<标签>对象</标签>
⑵<标签 属性1=参数1 属性2=参数2…… > 对象 </标签> ⑶<标签> 注:标签不区分大小写