admin管理员组文章数量:1530518
2024年2月15日发(作者:)
Chapter 1
网页设计基础概述
通
过本章的学习,读者可以了解网站和网页的有关概念、网页设计流程和网页制作软件的基本知识等,并可以认识网页设计的步骤与原则,为设计制作网页打下良好的基础。
重点提示:
网站制作的常用软件
网站设计的流程
网页的基本组成元素
申请免费空间与发布网站
Chapter 1
网页设计基础概述
互联网的诞生和快速发展,给网页设计师提供了广阔的设计空间。相对传统的平面设计来说,网页设计具有更多的新特性和更多的表现手段,借助网络这一平台,将传统设计与电脑、互联网技术相结合,实现网页设计的创新应用与技术交流。网页设计是传统设计与信息、科技和互联网结合而产生的,是交互设计的延伸和发展,是在新媒介和新技术支持下的一个全新的设计创作领域。
如今的网页设计往往要结合动画、图像特效与后台的数据交互等,而Dreamweaver CS3、Photoshop CS3和Flash CS3作为Adobe公司经典的常用网页设计软件,是目前网页制作的首选工具。它们具有强大的网页设计、动画制作和图像处理功能,在静态页面设计、图片设计和网站动画设计等方面,都可以使网站设计人员的思想体现得淋漓尽致。
1.1 全面认识网页
在进行网页设计之前,需要对网页的一些基础知识进行了解,对网站的运行原理与制作过程有一个宏观把握。并从零开始,一步一步体验综合应用Dreamweaver CS3、Photoshop CS3、Flash CS3等软件进行网页设计,感受网站设计的无穷乐趣,从而踏上网页制作之路。
1.1.1 网站、网页和主页
网站(Website)是指在因特网上根据一定的规则使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说,网站是一种通讯工具,就像布告栏一样,人们可以通过网站来发布(或浏览)想要公开的资讯,或者利用网站来提供相关的网络服务。
现在的许多公司都拥有自己的网站,他们利用网站来进行宣传、产品资讯发布和招聘等。如图1-1所示即为中央电视台的门户网站。
网页(Web Page)是构成网站的基本元素,是承载各种网站应用的平台。
网页实际上是一个文件,存放在世界某个角落的某一台计算机中,而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当用户在浏览器地址栏中输入网址之后,经过一段复杂而又快速的程序运作,网页文件就会被传送到用户的计算机中,再通过浏览器解释网页的内容,最终展示到用户的眼前。
网页有多种分类,笼统意义上的分类是动态页面和静态页面。
静态页面多通过网站设计软件来进行重新设计和更改,技术实现上相对比较滞后。当然,现在的某些网站管理系统也可以直接生成静态页面,这种静态页面通常可称为伪静态。静态页面内容是固定的,其后缀名通常为.htm、.html、.shtml等,如图1-2所示。
动态页面是通过执行ASP、PHP、JSP等程序生成客户端网页代码的网页,通常可通过网站后台管理系统对网站的内容进行更新和管理,如发布新闻、发布公司产品、交流互动、博客和网上调查等,都是动态网站功能的一些具体表现。
3
Dreamweaver+Photoshop+Flash网页设计全方位学习
Part 1网络知识基础篇
图1-1 中央电视台主页 图1-2 静态页面
动态页面的常见扩展名通常有.asp、.aspx、.php、.jsp、.cgi等,如图1-3所示。
网站主页(Home Page)也可以理解为网站的封皮,因此也被称为首页,它是整个网站的主索引页。网站首页名称是特定的,一般为、、、、或等。如图1-4所示即为新起点工作室的网站主页。
图1-3 动态页面 图1-4 新起点工作室网站首页
网站、网页和主页是3个功能不同但又紧密联系的概念,一个网站由多个网页元素构成,若干个网页又通过主页链接成一个完整的网站系统。
1.1.2 HTML的组成及语法
HTML(Hyper Text Markup Language,超文本标记语言)是用来描述WWW上超文本文件的语言,HTML文件可对多平台兼容,通过网页浏览器能够在任何平台上阅读。
HTML能够将Internet中的文字、声音、图像、动画和视频等媒体文件有机地组织起来,最终向用户展现出五彩缤纷的页面。此外,它还可以接收用户信息,与数据库相连,实现用户的查询请求等交互功能。
1.HTML语言的组成
HTML文档由HTML、HEAD和BODY三大元素构成。
4
Chapter 1
网页设计基础概述
是最外层的元素,表示文档的开始,即浏览器从开始解释。
是HTML文件头标记符,即文档头,包含对文档基本信息(包含文档标题、文档搜索关键字、文档生成器等属性)描述的标记。位于首部下面,用于定义一个HTML文档的主体部分,包含对网页元素(文本、表格、图片、动画和链接等)描述的标记。下面通过记事本程序来创建一个名为的HTML文件,具体的操作步骤如下。
Step1 打开记事本程序之后,将自动创建一个名为“文本文档.txt”的文本文件,在其中输入代码,如图1-5所示。
Step2 在程序代码输入完毕之后,选择【文件】→【另存为】命令,打开【另存为】对话框,将其保存为扩展名为.html格式的文件,如图1-6所示。
Step3 双击打开新创建的文件,在IE浏览器中预览所创建的网页,如
图1-7所示。
2.HTML的语法
图1-5 输入代码 图1-6 保存为网页格式 图1-7 页面预览
HTML语法由标签(Tags)和属性(Attributes)组成。标签又称标记符,HTML是影响网页内容显示格式的标签集合,浏览器主要根据标签来决定网页的实际显示效果。在HTML中,所有的标签都用尖括号括起来。
标签可分为单标签和双标签两种类型。
(1)单标签
单标签的形式为<标签 属性=参数>,最常见的如强制换行标签
、分隔线标签
、插入文本框标签。
(2)双标签
双标签的形式为<标签 属性=参数>对象标签>,如定义“奥运”两字大小为5号,颜色为红色的标签为:奥运。
需要说明的是:在HTML语言中大多数是双标签的形式。
HTML中常用的标签如下:
和
标签
在HTML文档中无法用多个回车、空格和Tab键来调整文档段落的格式,要用HTML标签来强制换行和分段。
(即Break)是换行标签,它是单独出现的。
的作用相当于回车符。
即Paragraph(段落)。
标签用于划分段落,作用是插入一个空行,可以单5
Dreamweaver+Photoshop+Flash网页设计全方位学习
Part 1网络知识基础篇
独使用,也可以成对使用。
显示图片标签
标签常用的属性有src(图片资源链接)、alt(鼠标悬停说明文字)和border(边
框)等。
创建链接标签
标签常用的属性有href(创建超文本链接)、name(创建位于文档内部的书签)、target(决定链接源在什么地方显示,参数有_blank、_parent、_selft和_top)等。
和 | (表格中行内一个单元格的开始和结束)。