一章网页制作基础ppt课件.ppt
《一章网页制作基础ppt课件.ppt》由会员分享,可在线阅读,更多相关《一章网页制作基础ppt课件.ppt(26页珍藏版)》请在三一办公上搜索。
1、基于工作过程的网页设计与网站开发教程,机械工业出版社,主编:张洪斌 刘万辉,网页的简单制作方法 网络的基本术语 网站的分类与网站赏析 网页设计师的素质(自学)网页设计的基本原则(自学),本章要点,基于工作过程的网页设计与制作教程,第一章网页制作基础,情境1:俞晨视觉传奇个人主页,基于工作过程的网页设计与制作教程,俞晨视觉传奇个人主页制作步骤,1)启动Dreamweaver CS3,出现如图1-2所示的界面,选择“创建新项目”栏目中的HTML,系统便会新建一个HTML文档。,图 1-2 Dreamweaver CS3启动界面,2)单击“文件”菜单,选择“另存为”对话框中选择文件保存的位置并给文件
2、命名,如命名为index.html,然后单击“保存”按钮保存文件。注意:在网页编辑之前先将网页保存,这是一个良好的习惯,并且应该为文件取一个英文名称或汉语拼音名称(不要命名为汉字名称),如果网页为主页可以命名为index.html或者为default.html。3)在工具栏中如图1-3所示的位置输入网页标题“欢迎访问俞晨视觉传奇网站!”,图 1-3 工具栏中的文档标题文本框,俞晨视觉传奇个人主页制作步骤,4)执行“插入”“表格”命令,参数如图1-4所示,然后设置表格属性如图1-5所示:高为100%,背景颜色为黑色#000000。,俞晨视觉传奇个人主页制作步骤,图 1-4 设置表格大小,图 1-
3、5 设置表格属性,5)执行“插入”“图像”命令,在“选择图像源文件”对话框中选择“index.jpg”图片,点击“确定”按钮即可完成图像的插入,选择图像设置“居中对齐”。6)插入图像后,按键,输入“2007-2009 版权所有:俞晨 建议1024*768以上分辨率浏览”版权信息。选择输入的文字,在属性栏中修改文字的颜色为白色(#ffffff)。7)按键,在IE浏览器中预览该网页,效果如图1-1所示。,俞晨视觉传奇个人主页制作步骤,注意:这个项目还可以进行优化,在今后的学习中可以进一步提高,在保存的文件夹中的default.html文件为优化过的网页。该页面采用了表格布局,插入了flash动画,
4、设置了样式表,是大家进一步学习的目标,通过浏览default.html网页下面我们来大家学习网页的基本元素。,1.1.2 网页的基本要素,图 1-6 俞晨视觉传奇网站default.html网页基本构成要素,网页标题,LOGO,网页文本,网页图像,网页页脚,网页导航,超级链接,1页面标题,网站中的每一个页面都有标题,用来提示该页面的主要内容,标题出现在浏览器的标题栏中,而不是出现在页面布局中。它还有一个比较重要的作用就是让浏览者清楚地知道所要浏览的内容,不至于迷失方向。设置页面标题很简单,一般的网页编辑软件都提供这项设置。在HTML文档中的和之间输入网页的标题即可。有些网页编辑软件有一个默认的
5、页面标题,如在Dreamwaver中默认为Untitled-1。,1.1.2 网页的基本要素,2网站标志,1.1.2 网页的基本要素,3页面尺寸,由于页面尺寸和显示器大小及分辨率有关,网页的显示无法突破显示器的显示范围,而且浏览器本身也会占去不少空间,因此留给页面的范围受到了限制。一般分辨率为800像素600像素的情况下,页面的显示尺寸为778像素430像素,分辨率为1024像素768像素的情况下,页面的显示尺寸为1000像素600像素。从以上数据可以看出,分辨率越高,页面尺寸越大。,4页眉和页脚、导航栏、图片、文本,1.1.2 网页的基本要素,页眉的风格一般要求和页面的整体风格保持一致。一个
6、富有个性特色的页眉将和网站标志一样起到标示的作用。在页眉中常放置含有站点名字的图片、标志、网站宗旨、宣传口号和广告语等,LOGO,页眉,导航栏,5多媒体,1.1.2 网页的基本要素,在网页中可以使用的媒体对象主要包括flash动画、flash按钮、flash文本、java小程序、音频和视频等。,图 1-10 网页中的Flash动画 图 1-11 网页中的视频,1互联网,1.2 网页的基本概念,互联网是由多个计算机网络相互连接而成的一个网络,它是在功能和逻辑上组成的一个大型网络。如图所示。,图 1-11 Internet示意图,2万维网,1.2 网页的基本概念,万维网是Internet的一部分,
7、它基于三个机制向用户提供资源,这三个机制是:,1.协议 协议是一组标准的规则,用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错误检测,访问Web上的资源都需要遵循这些规则。万维网使用的是HTTP协议(Hyper Text Transfer Protocol,超文本传输协议)。,2万维网,1.2 网页的基本概念,万维网是Internet的一部分,它基于三个机制向用户提供资源,这三个机制是:,2.地址地址:万维网采用统一的命名方案来访问Web上的资源。URL(Uniform Resource Locations,统一资源定位符,网页的网址)用于标识Web上的页面和资源。每个URL
8、均由3部分组成,如下所示。用于通讯的协议与之通信的主机(服务器)服务器上资源的路径(例如文件名)http:/main.htm,2万维网,1.2 网页的基本概念,万维网是Internet的一部分,它基于三个机制向用户提供资源,这三个机制是:,3.HTML(Hyper Text Markup Language,超文本标记语言)HTML用于创建网页文档。HTML文档是使用HTML标记和元素创建的,此文件以扩展名.htm或.html保存在Web服务器上。,客户浏览器/服务器工作的过程,3Web浏览器,1.2 网页的基本概念,Web浏览器的中文名称:网络浏览器或网页浏览器,简称浏览器;英文名称:Web
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 基础 ppt 课件
链接地址:https://www.31ppt.com/p-5493314.html