null第1章 网页制作基础第1章 网页制作基础网页
与制作 南海学院计算机系制作第1章 网页制作基础第1章 网页制作基础Web和浏览器
Web
Web的特点和结构
Web最大的特点是使用了超文本(Hypertext)
WWW采用C/S(客户机/服务器)工作模式
在浏览器和服务器之间应用HTTP(Hyper Text Transfer Protocol,超文本传输
)作为网络应用层通信协议
URL URLInternet上所有的资源都有一个唯一的URL地址,一般将URL地址称为网址。URL的完整格式如下:
协议://主机名(或IP地址):端口号/路径名/文件名
null【例】几个URL的例子. (1)http://www.microsoft.com,用http协议和缺省端口号(80)访问微软公司服务器www.microsoft.com。这里没有指定路径和文件名,所以访问的结果是把一个缺省主页送给浏览器。 (2)ftp://ftp.pku.edu.cn/pub/ms-windows/winvn926.zip,用FTP协议访问北京大学FTP服务器上路径名为pub/ms-windows、文件名为winvn926.zip的文件。null (3)http://gnacademy.org: 8001///uu-gna/index.html,从运行在端口号8001的gnacademy.org服务器上访问index.html主页。 (4)http://www.w3.org/Addressing/URL/5-BNF.html#httpaddress,访问www.w3.org 服务器上Addressing/URL目录下的5-BNF.html 网页文件中锚点标识为httpaddress的地方。浏览器浏览器概述
分类
Internet Explorer
Netscape Navigator
Mosaic等专业浏览器以及一些以上述浏览器为内核的专用浏览器。
其中使用最广泛的是Microsoft出品的Internet Explorer 6.0(简称IE6)。IE6的界面IE6的界面 IE6.0的使用 IE6.0的使用浏览网页“停止”按钮
前进和后退
刷新页面
改变文字大小
选择编码
全屏幕显示
查看源文件
打开多个窗口打开多个窗口 用菜单栏上的“文件”→“新建”→“窗口”,会打开一个新的浏览器窗口。 一般情况下,打开四、五个窗口可以充分利用系统资源,而且通过调整窗口的大小和位置还可以同时浏览。 主页、临时文件和历史
主页、临时文件和历史记录 浏览器在打开时自动调入的网页称为“主页”,主页可以通过“工具”→“Internet选项”打开Internet选项对话框,在“常规”选项卡的“主页”栏设置. 收藏夹的使用收藏夹的使用 使用菜单“收藏”→“添加到收藏夹”打开添加到收藏夹对话框。 null 使用菜单“收藏”→“整理收藏夹”打开收藏夹整理对话框,进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。关闭图片显示关闭图片显示 在网络速度较慢时,不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过“工具”→“Internet选项”打开Internet选项对话框,在“高级”选项卡中可以对浏览器的工作方式进行设置 关闭自动完成功能关闭自动完成功能 通过工具→Internet选项,打开Internet选项对话框,在“内容”选项卡的“个人信息”部分单击“自动完成”按钮打开自动完成设置对话框 。搜索引擎的使用搜索引擎的使用1、使用浏览器的“搜索”按钮
2、使用专门的搜索引擎
http://www.google.cn (Google)
http://www.baidu.com (摆渡)
http://www.yahoo.com (雅虎)
http://www.sohu.com (搜狐)
认识网站认识网站1.门户网站
2.个人网站
3.专业网站
4.职能网站1.门户网站1.门户网站 这类网站是一种综合性网站,涉及领域非常广泛,包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容,具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐(www.sohu.com)、网易(www.163.com)等。2.个人网站2.个人网站个人网站具有较强个性化,是以个人名义开发创建的网站,其内容、样式、风格等都是非常有个性的。3.专业网站3.专业网站这类网站具有很强的专业性,通常只涉及某一个领域,内容专业。如榕树下网站(www.rongshuxia.com)即是一个专业文学网站。4.职能网站4.职能网站职能网站具有专门的功能,如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站,较有名的电子商务网站有阿里巴巴(china.alibaba.com)、卓越网(www.joyo.com)和当当网上书店(www.dangdang.com)等。认识网页认识网页网页中的元素网页中的元素1.文字
2.图像
3.表单
4.Flash动画
5.
6. 超级链接
7. 视频、音频
8. POP窗口
9. 标题栏和状态栏文字
1.2 网页制作的相关知识1.2 网页制作的相关知识HTML语言概述
是一种超文本标记语言,作为一种网页编辑语言,易学易懂。
1、HTML网页1、HTML网页 HTML网页通常是由三部分内容组成的:版本信息、网页标题(HEAD)和文档主体(BODY)。 下面就是网页结构的总体框架:
null(1)版本信息
版本信息位于HTML网页文件的第一行 (2)HTML文件标记
大部分网页文件都是以标记开始的,在文件的结尾处又以结束 (3)头部信息
HEAD标记之间是HTML文档的头部,用来标明当前文档的有关信息 在HEAD标记之间,使用频率最高的标记就是TITLE,它用于定义显示在浏览器标题栏的文档标题。null【例】给网页设置 “励志学社”的文档标题,可在头部输入以下代码:
励志学社null(4)主体标记
网页的主体是“……”标记对作用的范围 标记用于定义HTML文档主体的开始,它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性,其基本用法如下所示:
Bgcolor为背景颜色。关于颜色的值后面会详细介绍。Text为不包含超级链接的文字颜色。
Link为超级链接文字的颜色。
Alink为正被点击的超级链接文字的颜色。null Leftmargin、Topmargin用于设置网页的左边距和上边框,它们是以像素为单位 【例1】将网页的上边距和左边距分别设置为40和30个像素的宽度,使用黑色文本、白色背景,未访问的链接源采用蓝色,已访问的链接源标记为暗红色。
Vlink为已经点击过的超级链接文字的颜色。
Background设置,如果设置了背景图片,图片会覆盖已经设置的颜色。 2、XML语言2、XML语言 XML(eXtensible Markup Language)被称作是下一代的网页标记语言,也是采用各种标记来形成网页的源代码。 XML中包括可扩展格式语言XSL(Extensible Style Language) 和可扩展链接语言XLL(Extensible Linking Language)。1.22 静态网页和动态网页1.22 静态网页和动态网页 静态网页指基本上全部使用HTML语言制作的网页,页面的内容是固定不变的。 动态网页(DynamicHTML,DHTML)利用JavaScript,CSS (层叠样式表) 及其它类似的语言如VBScript等与HTML进行有机的结合来使静态的HTML网页变成动态。 1.23 Web服务器端程序1.23 Web服务器端程序 专业的网站都是建立在使用数据库的基础上的,要将这些数据库变成可以通过浏览器显示和操作的Web页面,就需要编写服务器端的程序。用户向服务器传送提交的表单(个人信息、选择结果等)需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。
目前常用的服务器端编程技术主要有CGI、ASP、PHP、JSP等,不同的技术需要不同的系统环境支持。1.3 网页制作的基本方法1.3 网页制作的基本方法制作网页的基本步骤
1、确定网页的内容 2、设计网页的组织结构 3、资料的收集与整理 4、选择网页的设计方法 常用的网页制作工具有Frontpage、Dreamweaver等。服务器端的ASP程序可以使用Visual Interdev、UltraDEV等编辑。 开始网页制作开始网页制作构建页面框架
创建导航条
填充内容
创建返回主页连接网页制作的原则网页制作的原则站点要有创意
整体规划
动画不能过多
导航要明朗
制作通用网页
主题鲜明
优化图象
定时更新制作网页时要注意的问题制作网页时要注意的问题 1、网页的标题要简洁,明确。
2、在文本中要使用水平线,以分割不同部分。
3、对重点段落要强调显示。
4、网页中插入的图片要尽量的小。
5、图形要附加文字说明,以便关闭图像时查看。
6、网页中引用的资料及商标(或图标),不能侵犯版权。1.4 Macromedia Studio MX20041.4 Macromedia Studio MX2004 Macromedia Studio MX2004是目前应用最广泛的网页制作工具组件,使用方便、功能齐全,Dreamweaver、Flash、Fireworks被称作“网页三剑客”。 在Dreamweaver 里用丰富的层叠样式表制作耐看,专业的网站。 Macromedia Flash 工具可较快的制作 SWF 文件。 Fireworks通过自动变形,用动的效果,图片编辑工具和拖拽工具能传送较精彩的 Fireworks 图片。 思考题思考题1.1 什么是WWW?什么是网页?
1.2 一个完整的URL由哪几部分组成?举出几个URL的例子。
1.3 如何设置IE的主页?如何用IE收藏一个网页?
1.4 网页中一般都使用了哪些技术?
1.5 Macromedia Studio MX2004有哪几部分组成?