第1章 网页设计与制作基础

第1章网页设计与制作基础2020/2/102知识技能要点•互联网、Web浏览器、URL•网页的类型•网页设计的基本流程•网页的规划•建站流程•网站建设、管理与维护理解•互联网的发展2020/2/1031.1互联网技术•随着Internet／Intranet的不断普及和发展，越来越多的公司、企业和个人正在开始建设自己的Web站点、编写Web网页，以一种新的方式向外界发布信息，供人们去浏览、阅读和应用。因此，网页制作已经受到越来越多的专业人员的重视。2020/2/104•网页是指通过Internet向全球提供信息的一些文档文件，包括个人信息、商业、娱乐等内容。网页是利用超文本标志语言HTML(HyperTextMarkupLanguge)编写的，存放在Internet／Intranet上的Web服务器中，供访问者使用浏览器(Browser)来阅读。利用HTML语言编写出来的网页又称为超文本，即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。2020/2/1051.1.1互联网的发展•互联网的发展经历了两个阶段，在互联网１．０时代，主要通过网站来获取信息；到了互联网２．０时代，网民与网民之间可以平等交流，信息在网民之间自由发布、流通。如果说过去的互联网，就像大家共读一本书，网民们只能围着少数的网站转，从它们那里得到信息；现在的互联网，就像每人都自己写书，然后互相换着看，每个网民都可以轻松拥有一个自己的“网站”，自主地发布信息。2020/2/1061.1.2互联网的应用技术•现在的网络资源及各种业务、应用日趋丰富。电子政务、远程教育、远程医疗、移动短信、在线数字内容等网上各类业务日新月异，电子商务交易额快速增长，信息交流更加便捷高效。此外，各种技术、业务和网络之间的相互渗透与融合，推动了产业价值链的不断延伸和逐步完善，为信息产业发展带来了新的机遇。互联网在促进经济发展、推动社会进步和提高人民生活质量等方面，正在发挥着越来越重要的作用。2020/2/1071.万维网（）•（环球信息网）的缩写，也可以简称为Web，中文名字为“万维网”。通过万维网，人们可以使用很简单的方法，就可以很迅速方便地取得丰富的信息资料。是当前Internet上最受欢迎、最为流行、最新的信息检索服务系统。2020/2/108•并不是实际存在于世界的哪一个地方，事实上，的使用者每天都赋予它新的含义。Internet社会的公民们（包括机构和个人），把他们需要公之于众的各类信息以主页（Homepage）的形式嵌入，主页中除了文本外还包括图形、声音和其它媒体形式，网站题材有很多，比如娱乐休闲、体育、综合门户、就业、音乐、社区等无奇不有包罗万象。2020/2/1092.电子邮件服务（E-mail）电子邮件(E-mail)服务是Internet所有信息服务中用户最多和接触面最广泛的一类服务。电子邮件不仅可以传送文字、订单、图形，还可以传送动画或程序等等。2020/2/10103.远程登录服务（Telnet）远程登录是指允许一个地点的用户与另一个地点的计算机上运行的应用程序进行交互对话。远程登录使用支持Telnet协议的Telnet软件。Telnet协议是TCP/IP通信协议中的终端机协议。Telnet使你能够从与Internet连接的一台主机进入Internet上的任何计算机系统，2020/2/10114.文件传输服务（FTP）用FTP可以访问Internet的各种FTP服务器。Internet网上有许多公用的免费软件，允许用户无偿转让、复制、使用和修改。这些公用的免费软件种类繁多，从多媒体文件到普通的文本文件，从大型的Internet软件包到小型的应用软件和游戏软件，应有尽有。充分利用这些软件资源，能大大节省我们的软件编制时间，提高效率。使用FTP可以传送任何类型的文件，如文本文件、二进制可执行文件、图形文件、图像文件、声音文件、数据压缩文件等。2020/2/10125.电子公告板（BBS）•BBS是英文BulletinBoardSystem的缩写，即电子公告牌，是Internet上的一种电子信息服务系统。是一种发布并交换信息的在线服务系统，提供网上交谈、发布消息、讨论问题、传送文件、学习交流等等。2020/2/10136.网络会议（NetMeeting）•Microsoft提供的NetMeeting是个功能齐全的网上实时会议程序，它不仅包含标准的会议功能，还提供了让用户通过音频、视频进行交流的功能，并且交流双方可以共享应用程序和共享白板，在共享白板上，可以双向绘画交流，这几乎与我们在日常工作中在同一个画板上讨论问题一样。会议期间，无须在每台计算机上安装软件，即可共同创建文档、电子表格或其它文件。2020/2/10147.博克（Blog）•Blog是Weblog的简称，是个人或群体以时间顺序所作的一种记录，且不断更新。Blog之间的交流主要是通过反向引用(TrackBack)和留言/评论(Comment)的方式来进行的。Blog的作者(Blogger)，既是这个Blog的创作人，也是其档案管理人。2020/2/10158.维客（Wiki）•Wiki一词来源于夏威夷语的“weekee”，原本是“快点”的意思。在这里Wiki指的是一种网上共同协作的超文本系统,可由多人共同对网站内容进行维护和更新。可以通过网页浏览器对Wiki文本进行浏览、创建、更改，而且创建、更改、发布的代价远比HTML文本为小,不需要懂得HTLM代码，只要简单了解少量的Wiki的语法的约定，就可以在系统中发布页面。2020/2/10169.Web浏览器•Web浏览器：是指一个运行在用户计算机上的程序，主要作用在于在客户端与服务器端之间进行交互、通信，负责下载、显示网页，因此也称为客户程序。•在Web2.0模式上，已由单纯的“读”向“写”、“共同建设”发展，由被动地接收互联网信息向主动创造互联网信息迈进。从基本构成单元上，是由“网页”向“发表/记录的信息”发展，从工具上，是由互联网浏览器向各类浏览器、RSS阅读器等内容发展，运行机制上，由“ClientServer”向“WebServices”转变。”2020/2/101710.Web服务器•Web服务器是一个软件，用于管理Web页面，并使这些页面通过本地网络或Internet供客户浏览器使用。在Internet中，Web服务器和浏览器通常位于两台不同的机器上。2020/2/101811.TCP/IP协议簇•TCP/IP是TransmissionControlProtocol/InternetProtocol（传输控制协议/网际互联协议）的缩写。协议包含了远程登录（Telnet）、文件传送（FTP）、电子邮件（SMTP）等，适用于各种不同的计算机系统的互联。TCP/IP是目前十分流行的一种网络协议，它可提供任意互连的网络间的通信，几乎所用的网络操作系统都支持TCP/IP协议。它是目前广泛使用的Internet的基础，虽然它不是国际标准，但事实上已成为计算机网络的工业标准。2020/2/101912.IP地址•为了使连入Internet的众多电脑主机在通信时能够相互识别，Internet中的每一台主机都分配有一个唯一的32位地址，该地址称为IP地址，也称作网际地址。2020/2/102013.域名、域名系统•IP地址的另一种表示方法用域名DN（DomainName）来表示，即代表该主机的一个文字名称，摆脱了数字的单调和难记的缺点。DNS（DomainNameSystem）域名服务器系统将形象的文字型域名翻译成对应的数字型IP地址。通过上述IP，域名DN，域名系统DNS，就把每一台主机在Internet上给予了唯一的定位。2020/2/102114.统一资源定位器（URL）•URL：统一资源定位器的英文缩写，是一个提供在全球广域网上的站点或资源的Internet位置字符串，与此被访问的站点或资源所协议在一起。主要由四部分组成，分别是：访问类型、访问的主机、端口号以及访问的文件的路径。2020/2/10221.2网页相关的技术2020/2/10231.2.1网页技术性元素1．浏览器2．传输速度3．屏幕分辨率4．颜色显示2020/2/10241．浏览器•服务器的计算机组成，它将不同的信息资源有机的组织在一起，通过一种叫做浏览器的软件进行浏览。如果要上网浏览，则应使用浏览器作为客户端程序。•浏览器是获取服务的基础，它的基本功能就是对网页进行显示，目前使用最广泛的浏览器是微软公司推出的InternetExplorer浏览器，还有火狐浏览器Firefox等等。•根据国家和兴趣的不同，使用浏览器和操作系统的的习惯也不尽相同，使用多种不同的浏览器来测试网页，是一种比较保险的做法，还应当在首页上标明浏览器名称及其版本号。2020/2/10252．传输速度•在进行网页界面设计时，最好不要置入过于庞大的文件，也不要加入过多的多媒体文件而给浏览者造成观看页面时的麻烦。图形文件是网页中最常见的易造成传输速度缓慢的因素。2020/2/1026在网页中使用图形的常用方法：●在保证所需清晰度的情况下，尽量压缩图形文件的大小；●采用分割图形的方法，将大的图形分割成若干小图，同时下载；●尽量使用较少的颜色；●除彩色照片和高色彩图外，尽量使用GIF格式；●指定图形的外轮廓，浏览器将读取此页信息并给图形预留空间；●如果因为要在网络上展示摄影绘画艺术或设计艺术作品，而不得不采用上百万种颜色的JPG格式图形时，应将其分别置于不同的页面，并使用缩略图作为预览和链接。2020/2/1027使用缩略图作为预览和链接2020/2/10283．屏幕分辨率•作为专业的网页设计人员，通常使用的显示器都不会小于17寸，并工作在1280X1024像素的分辨率以上，以求获得较大的工作空间和更好的显示效果。但作为游览者，有使用1024X768、800X600像素的分辨率。因此，做网页时要考虑适应不同的分辨率。2020/2/10294．颜色显示•颜色显示的设定应视所用图片的色彩而定。一般情况下使用256色就可以将图片的色彩基本还原出来。如果需要使用一些24位甚至32位真彩色的图片，最好在所需精确度和文件所占空间大小之间选择一个平衡点，并用图像处理工具进行调整。2020/2/10301.2.2网页的类型•通常我们看到的网页，都是以htm或html后缀结尾的文件，俗称HTML文件。不同的后缀，分别代表不同类型的网页文件，例如以CGI、ASP、PHP、JSP等。2020/2/10311、HTML•全称HyperTextMarkupLanguage，正式名称是超文本标记语言，利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C++等编程语言有着本质上的区别。2020/2/1032•对于网页制作的初学者来说，理解HTML的工作原理是必要的，但也无须仔细地了解到每一个标记的作用，因为现在已经有了很好的所见即所得的网页编辑软件为我们快速地生成HTML代码，例如Dreamweaver和Frontpage，再也无须象早期的网页制作人员一样，一行一行地编写代码了。2020/2/10332、ASP•ASP全称为ActiveServerPages（动态服务器主页），ASP是微软公司实现动态网页的一种技术。可以利用VBscript或JavaScript语言来设计，主要用于网络数据库的查询与管理。其工作原理是当浏览者发出浏览请求的时候，服务器会自动将ASP的程序码，解释为标准HTML格式的网页内容，再送到浏览者浏览器上显示出来。2020/2/10343、PHP•PHP是HypertextPreprocessor（超文本预处理器）的缩写，是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的WEB站点