网页设计之第1讲基础知识

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1.2 HTML 基础
1.2.1 HTML语言初识 HTML语言是一种用来制作超文本文档的简单标记语言。严格地说，它不是一种真正的编程语言，只是一种标记符。用HTML编写的超文本文档称为HTML文档，它能够独立于各种操作系统的平台上(如UNIX、Windows等)。自1990年以来，HTML就一直被用做WWW上的信息描述语言，用于描述网页的格式设计及它与WWW上其他网页的链接信息。由于HTML语言简单易学，所以到目前为止，在WWW上面大多数代码都是用HTML来设计的。
1.2.4 HTML常用标签
1. HTML标记符 HTML文件标记符仅由一个html元素组成，即文件的开始<html>和文件的结尾</html>。文件的其他部分都是 html的元素体。<html></html>这一组标记符是告知浏览器，它是一份HTML文件，即是一个网页的格式。通常， <html></html>这一组标记符都出现在网页开始和结束的地方，将所有的源代码都包起来。它是HTML文档里最基本的一个标记。下面来看一个比较完整的例子： <html> <head> <title>网页制作教学</title> <meta> </head> <body> 正文部分 </body> </html>
（4）超链接超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。按照链接路径的不同，网页中超链接一般分为以下3种类型：内部链接、锚点链接和外部链接。如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。
（2）网页网页是由HTML或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。网页一般可分为“静态页面”和“动态页面”。静态页面是指网页文件中没有程序，而只有HTML代码，一般以.html或者.htm为后缀名。动态网页就是指网页文件中不仅具有HTML标记，而且还含有程序代码，并通过数据库建立连接，通常以.asp、 .aspx、.jsp、.php等为后缀名。
（4）整理文本和图片等素材设计好网页版式后，就应该准备并整理网页中的文本和图片等元素。可以将网页中要用到的内容保存为文本文件，利用Photoshop图像编辑软件来处理前面收集到的图片素材或制作新的图片，如菜单图标、标题图片、背景图片等网页元素。如果在网页中应用了动画效果，那么可以利用Flash软件制作所需的文件。（5）利用网页编辑软件制作HTML文档如果在第四阶段已经准备了所有需要的元素，下一步就可以利用Dreamweaver 8等网页编辑软件制作HTML文档。
1.2.2 HTML语法规则 HTML的语法规则表达方式有以下3种：（1） <标记>对象</标记> 该标记为封闭标记形式，在多数情况下标记是封闭型的，并且成对出现，即在对象内容的前面是一个标记，在对象内容的后面是另一标记，第二个标记元素前带有反斜线，表明对对象控制的结束标记。（2）<标记属性1=参数1 属性2=参数2 …>对象</标记> 该标记为封闭类型标记的扩展形式，利用属性可以设置对象某方面的内容，而参数则是设置的结果。（3）<标记> 该标记为非封闭类型标记，在HTML语言中，非封闭类型很少，常用的是换行标记 。此外，标记之间可以相互嵌套，形成更为复杂的语法。
（3）HTML HTML是Hypertext Markup Language的缩写，中文的意思是“超文本标记语言”，用它编写的文件的扩展名是 .html 或 .htm，它们是可供浏览器解释浏览的文件格式。
1.1.2 网页的基本要素
（1）文字文字也称为文本，是网页最基本的构成要素。由于文字所表达的内容比较清楚、直接，而且占用网页版面较小、所表达的信息量较大，所以网页大多采用文字来表达内容或实现链接。网页的设计和制作者可以通过设置字体、字号、颜色、底纹等属性来改变文本的视觉效果。
2. 文件头标记符文件头标记符Meta，也就是通常见到的Meta标记符， Meta标记符在网页中是看不到的，因为它包含在HTML语言的“<head>…</head>”标记符之间，而人们通常所见到的网页内容是在“<body>…</body>”之间。 Meta是文件头标记符中常用的一个标记符，说明与网页有关的信息，如创作工具、文件作者等。这些标记符可以为服务器提供参考信息，如发布日期，刷新设置等。

显示如图1-3所示。
图1-3
4. 文件体标记符文件体标记符body由<body>开始，以</body>结束，它的中间是网页文档的正文部分。用户在网页中进行背景颜色或者字体、图片等设定，都要放在<body>这个标记符里。 5. 标题标记符标题标记符hn用于显示HTML文件的各级标题，格式如：<hn>标题内容</hn>。其中n为1～6的数字，数字越大，字越小。也就是说 (h1)最大，(h6)最小。标题内容一般用黑体字显示，各行之间自动换行。在制作网页时，(h4)一般用做文本正文，而 (h6)字体由于太小，一般用得很少。
6. 字体和段落标记符
（2）文字的字形设定标记符字形设定主要是指文字的字形，比如说宋体、楷体等，它们在网上使用十分广泛，惟一的一个限制是：浏览者的计算机里也要有该字形！否则看到的仍然是宋体。另外要说明的是，这个标记符无法保证在每个浏览器上都能正常地显现，如果看不到特殊的字形时，浏览器将会以宋体来显示。
第1讲基础知识
【本讲导读】本讲主要介绍了网页制作的基本知识：第一节介绍网页的基本概念和要素；第二节介绍了关于HTML的基本知识；第三节介绍在网页制作过程中涉及到的一些软件；最后一节简单讲解了Dreamweaver软件的安装过程。
【本讲要点】网页的基本概念和要素网页制作流程 HTML的基本知识
1.1 基本概念
1.1.1网页的基本概念
（1）互联网互联网(Internet)是一个由各种不同类型、规模的独立运行和管理的计算机网络所组成的全球范围的计算机网络，组成Internet的计算机网络包括局域网(LAN)、城域网 (MAN)以及大规模的广域网(WAN)等。由此，互联网也称为全球信息资源网。互联网的基础建立于20世纪70年代发展起来的计算机网络群之上，它的飞速发展，已经成为人们日常生活中非常重要的一部分，通常也把它叫做信息高速公路。
1.1.3 网页制作一般过程
（1）确定站点的主题首先要确定在网页中提供的信息内容，即站点的主题，应选择自己较擅长的内容或关心的领域。确定了站点内容以后，为了制作别具一格的网页，可以利用搜索引擎寻求相关的网站进行参考，并最终确定网页中的菜单样式和服务项目。（2）收集相关内容和信息确定好网页内容以后，就要开始收集相关的网页素材。（3）设计网页版面收集好所需的相关素材以后，就要开始设计网页的结构。在进入实际的操作之前，有必要先勾画出要制作的网页版式和结构草图，把构成网页的主页面、子页面等制成顺序表，并记录颜色、菜单样式、使用方法等。
（6）检查测试网站后上传到服务器制作完网页后，应利用预览功能检查网页效果和链接等是否正确。最后将网页上传到服务器中去。（7）推广宣传网页做好之后，还要不断地进行宣传，这样才能让更多的浏览者认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链接等。（8）维护更新网站要注意经常维护更新内容，保持内容的新鲜，只有不断地给网站补充新的内容，才能够吸引住浏览者。
6. 字体和段落标记符
（1）网页中字号大小设定标记符网页中字号大小设置的语法是： 文字内容 字号大小一共有7种，对应字号最小， 对应字号最大。另外，还有一种写法： <fontsize=+1>文字内容，其意思就是说：比预设字大一级。当然也可以font size=+2(比预设字大二级)，或是font size=-1(比预设字小一级)，以一般而言，预设字体多为3。
（5）交互功能交互功能，即网上提供的聊天、论坛、留言本、邮件发送及接收的互动功能。这也是互联网的一大优势所在，它给人们提供了一个快捷交流的平台，为人们的生活带来了许多便利。（6）导航栏导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览者游历站点。导航栏实质上就是一组超级链接，这组链接的目标就是本站点的主页和其他重要的网页。在制作站点中的诸网页时，可以在站点的每一个页面上都显示导航栏，这样就便于浏览者可以快速地转向其他网页。（7）其他常见元素网页中除了以上几种常见的元素以外，还有其他一些常用的元素，例如：悬停按钮、Java特效、ActiveX等各种特效。它们不仅可以点缀网页，使网页更加生动有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。
（2）图像图像也是网页主要的构成要理解。图像可提高站点的访问率，但不能因此而在网页上加入过多的图像，这样会适得其反。目前Web图像的文件标准格式是JPG、GIF和PNG，对颜色具有平滑渐变的图像使用JPG格式，如大多数照片；对于以单一颜色为主的图像，使用GIF格式。
图1-1
图1-2
3. 文件标题标记符文件标题(title)元素是文件头里惟一一个必须出现的元素，它也只能出现在文件头里。它的格式：<title>标题</title> 下面是一个最简单的HTML文件。 <html> <head> <title>简单的文档测试页</title> </head> <body> 大家好！ </body> </html>
2. 文件头标记符 Meta主要是针对网络中的搜索引擎建立的，它的信息被搜索引擎猎取并被提取所需要的内容。在Meta中常用的属性有：name、Http-equiv和content。 name：给出特性名； content：给出特性值，告知网页使用的是HTML语言，应用GB 2312字符集； Http-equiv属性：指定HTTP响应名称，通常用于替换 name，HTTP服务器使用该属性值为HTTP响应消息头收集信息。在网页文档里单击“显示代码视图”，可以看到Meta 标记符，并可以在属性对话框里对Meta标记符进行查看和修改，如图1-1和图1-2所示。
（3）多媒体多媒体(Multimedia)就是指各种各样的信息载体在计算机中的应用，是一种文字、声音、图像、动画和视频影像成分的交互组合。网页中的多媒体主要指采用音频和视频功能的软、硬件技术，包括数字音响、全动态图像、超媒体链接等，主要是实现对声音、图像具有编辑处理的功能，即网页上提供的音频和视频下载及播放功能，包括Flash动画、声音与影片文件的播放。这些必须通过网络媒体播放器来实现，如常用的Windows Media Player和Realone Player等播放器。
1.2.3 HTML文件的基本结构
一个HTML文件可由下列3部分组成：
（1）标记： ①单一标记：只要一个标记就能完成所要表示的功能，如<hr>可以显示一条水平的分隔线； ②成对标记：需要两个标记组合才能完成所需功能，如<title>及</title>、<html>及</html>。（2）文字与图形资料：
（3）统一的资源定位器URL： URL是WWW上文件的参照格式，浏览者在浏览器的地址处输入URL格式的内容，就可取得所指的主机的主页。 HTML文件一般以<html>开头，以</html>结尾；它包括头部<head>和主体<body>，其基本结构形式为： <html> <head> <title>网页标题</title> </head> <body>网页内容</body> </html>

网页设计之第1讲 基础知识

网页设计之第1讲基础知识