赛车网投平台
  • 法语
  • 英语

网页设计基础知识

  • 2019-09-15 01:11
  • admin
  • Views

  安徽财经大学 《网页造造根基》 《网页造造根基教程》 主讲: 魏苏林 Email:1 第1章 网页打算根基学问 第1章 网页打算根基学问 ? ? ? ? ? ? 1.1 网页造造根基学问 1.2 DreamWeaver界面先容 1.3 创筑站点 1.3 网页文献的根本操作 1.4 设备页面属性 1.5 闇练造造轻易的网页站点 3 1.1网页造造根基学问 ? 网页造造根基学问: ? ? ? ? 网页和网站 HTML根基学问 Web图像的根基学问 网站打算根本流程 4 网页的观点 网页是由HTML(超等文本标识措辞)或者其他措辞编 写的,通过IE浏览器编译后供用户获取新闻的页面, 它又称为Web页,此中可包罗文字、▲●…△图像、表格、动 画和超等链接等各式网页元素。 ? 网页是显现各式新闻的载体。 ? 5 网站的观点 网站便是一个或多个网页的聚集。从广义上讲,△▪️▲□△网站 便是当网页揭晓到Internet上此后,能通过浏览器正在 Internet上访谒的页面。 ? 网站是通过超链接衔尾起来的少许网页的聚集。★▽…◇ ? ? ? ? ? 家数网站 机能网站 专业网站 局部网站 6 网页的分类 ? 按所处身分分类 ? 按网页正在网站中所处的身分可将网页分为主页和子页两类。 7 网页的分类 ? 按体现局面分类 ? 按网页的体现局面可将网页分为静态网页和动态网页。 8 网页中的常用术语 ? ? ? ? ? ? ? ? 万维网(浏览器 团结资源定位符(URL) 超文本传输条约(HTTP) IP所在 域名 超等链接 超等文本标识措辞(HTML) 9 万维网(www) ? 万维网(www)是World Wide Web的中文简称,也称 为3W网,它的性子是一种基于超等文本技巧的交互式 新闻浏览检索东西,是Internet供给的行使最普及、 性能最丰饶、运用门径最轻省的新闻任职,用户可通 过它正在Internet上浏览、编纂、传达超文本方式的文 件(即.html方式文献)。 10 浏览器 ? 浏览器是用于阅读网页中新闻的一种软件东西,就像 运用电脑必需有操作体例相通。 ? ? ? ? ? Internet Explorer(IE) Netscape Navigator(NE) 腾讯TT浏览器 遨游浏览器 Foxfire火狐浏览器 11 团结资源定位符(URL) ? URL(Uniform Resource Locator)重若是用来指定 条约(如HTTP或FTP)以及对象、文档、万维网网页 或其他方针正在Internet的身分和存取格式。 ? 通讯条约 ? 主机名 ? 所要访谒的网页旅途及名称 12 超文本传输条约(HTTP) ? 超文本传输条约(HTTP,▼▼▽●▽●HyperText Transfer Protoc ol)是互联网上行使最为平凡的一种汇集条约。一共 的WWW文献都必需屈从这个法式。打算HTTP最初的目 的是为了供给一种揭晓和摄取HTML页面的门径 13 IP所在 IP所在用来标识衔尾到Internet上电脑的指定编号, 每一个IP所在对应一台电脑,这与用电话号码标识电 话汇纠合的电话肖似。 ? 电脑识其余IP所在由32位二进造数值构成,电脑上以 十进造数值来显示,一组数值分为4一面,每逐一面 均不行大于255,中央用“.”分开,如61.139.2.69。 ? 14 域名 ? 域名便是常说的网址,它也拥有惟一性,如百度的网 址、网易的网址等便是一 个域名,域名由汉语拼音或英文字符加上数字吐露, 正在访谒汇集时,域名将通过域名任职器转换成IP所在, 这种转换是正在后台完结的。 15 超等链接 超等链接是网页中最常用的元素之一,网页便是通过 多数的超等链接才调构成一个网站。 ? 超等链接能够链接到网站内部页面、对象,也能够链 接到其他网站,大大便当了用户正在各个页面临象之间 达成跳转。 ? 16 超等文本标识措辞(HTML) ? HTML(Hyper Text Markup Language)是一种用户与 电脑之间实行互换的文本技巧,各式网页均是用HTML 措辞来形容的,用HTML措辞编写的网页文献的扩展名 寻常为“*.htm”或“*.html”。 17 1.5 网页打算的相干学问 打算网页的准则 ? 网页打算的寻常步伐 ? 网页造造的常用东西 ? 18 打算网页的准则 ? ? ? ? ? ? ? 完全谋划 昭着的中心 善用图像 夺方针导航 实时更新 易记的网站名称 动画适量 19 网页打算的寻常步伐 ? ? ? ? ? ? ? 谋划网站 搜集整饬资源 设备站点 创筑页面 测试站点 揭晓站点 保护、更新站点 20 网页造造的常用东西 ? ? 网页打算软件 ? Dreamweaver是目前运用最多的网页打算软件。 图像措置软件 ? 造造网页图像的软件品种繁多,大大都网页打算职员采取的是F ireworks或Photoshop。 ? ? 动画造造软件 ? 网页动画造造中最常用的软件非Flash莫属。 大凡将Dreamweaver、 Fireworks、 Flash俗称网页 三剑客 21 1.2 Dreamweaver 8简介 ? Macromedia Dreamweaver 8是一款专业的HTML编纂器, 用于对 Web 站点、▲★-●Web页和 Web 行使次第实行打算、 编码和开荒。无论您是笃爱直接编写HTML代码的控造 感如故偏幸正在可视化编纂情况中劳动,Dreamweaver 8都市为您供给帮帮良多的东西,丰饶您的 Web 创作 体验。 ? Dreamweaver8的安置与启动 ? Dreamweaver 的劳动界面 ? 运用Dreamweaver8的帮帮 22 Dreamweaver8的安置 23 Dreamweaver 8.0的启动和退出 1.启动Dreamweaver8.0 正在Windows操作体例下,单击左下角的【发端】按钮,从 【次第】菜单膺采取Macromedia菜单,然后从子菜单 中单击【Macromedia Dreamweaver 8】即可启动,如 图所示。 24 2.退出Dreamweaver 8.0 退出Dreamweaver 8.0的门径很轻易,咱们能够有以下几 种格式退出编纂界面: (1)单击Dreamweaver 8窗口右上方的紧闭按钮; (2)按下“Alt+F4”组合键; (3)采取“文献”菜单中的“退出”号令,或按敏捷键 Ctrl+Q退出体例。 25 Dreamweaver 8.0 的劳动界面 ? Dreamweaver 8的劳动界面重要征求有题目栏、菜单 栏、文档东西栏、文档窗口、状况栏、插入面版、属 性面版和CSS样式面版。本节将重要先容Dreamweaver 8的劳动界面。 26 题目栏 ? Dreamweaver 8的题目栏正在行使次第的最上面,它的 左侧用来显示现时正正在运转的行使次第名称,它的右 侧为最幼化、◆●△▼●最大化(还原)和紧闭按钮,如所示。 必要注脚的是,题目栏是默认的文档题目Untitled D ocument,显示的文献名为Untitled-1。每当用户创 筑一个新的文档时,Dreamweaver 8就会主动以Untit led给出一个默认的名字。当用户保全文献时,体例 会提示用户别的定名一个名字,当然用户也能够以默 认的名字来保全。 ? 27 菜单栏 ? 菜单栏,征求有“文献”、“编纂”、“查看”、“插 入”、“修正”、“文本”、“号令”、“站点”、 “窗口”、“帮帮”10个菜单项。 Dreamweaver 8菜单选项有以下3种局面: ? (1)子菜单号令:该类号令的名称后面带有一个向右的幼三角 箭头,当鼠标搬动到该类号令上时,◇▲=○▼=△▲就会掀开一个子菜单。例 如正在“插入”菜单下的“媒体”菜单号令。 ? (2)开闭号令:该号令正在号令实行后,号令的左边会加上“?” 的采取标识。比高洁在“查看”菜单下的“打算”菜单号令。 ? (3)对话框号令:该类号令的名称后面带有一个省略号,单击 该类号令则会掀开一个对线 ? 文档东西栏 ? “文档”东西栏中包罗按钮,这些按钮使您能够正在文 档的区别视图间敏捷切换:“代码”视图、“打算” 视图、同时显示“代码”和“打算”视图的拆分视图。 东西栏中还包罗少许与查看文档、正在当地和长途站点 间传输文档相闭的常用号令和选项。 29 文档窗口 ? 文档窗口显示现时文档。能够采取下列任一视图: ? (1)打算视图:是一个用于可视化页面组织、可视化编纂和速 速行使次第开荒的打算情况。正在该视图中,Dreamweaver 显示 文档的所有可编纂的可视化吐露局面,仿佛于正在浏览器中查看 页面时看到的实质。 ? (2)代码视图:是一个用于编写和编纂 HTML、JavaScript、 任职器措辞代码(如PHP或ColdFusion标识措辞)以及任何其它 类型代码的手工编码情况。 ? (3)代码和打算视图:能够正在单个窗口中同时看到统一文档的 代码视图和打算视图。 ? 当文档窗口有一个题目栏时,题目栏显示页面题目,并 正在括号中显示文献的旅途和文献名。倘使您做了更改但 尚未保全,Dreamweaver 将正在文献名后显示一个星号。 30 插入面版 ? 插入面版包罗用于创筑和插入对象(如表格、层和图 像)的按钮,如图1-15所示。当鼠标指针滚动到一个 按钮上时,会展现一个东西提示,此中含有该按钮的 名称。这些按钮被构造到几个种别中,您能够正在“插 入”栏的左侧切换它们。现时文档包罗任职器代码时, 还会显示其它种别。当您启动Dreamweaver时,体例 会掀开您前次运用的种别。 31 属性面版 ? 属性面版能够搜检和编纂现时选定页面元素(如文本 和插入的对象)的最常用属性。属性面版中的实质根 据选定的元素会有所区别。比方,倘使您采取页面上 的一个图像,则属性面版将改为显示该图像的属性如 图像的文献旅途、图像的宽度和高度、图像周遭的边 框等。 32 运用Dreamweaver8的帮帮 ? 当咱们正在研习的经过展现题目难以处理时,一个最好 的门径便是运用Dreamweaver 8的正在线帮帮,下面我 们先容运用的正在线 掀开帮帮体例 ? 采取“帮帮”菜单下的“Dreamweaver帮帮”,就可 以掀开Dreamweaver 8帮帮体例。也能够直接按下F1 键掀开帮帮体例。 34 运用帮帮 ? 运用帮帮体例查找所必要的新闻能够按以下门径实行: ? 1、若要探求产物中的帮帮(Windows) ,请实行以下操作: 正在 Dreamweaver 帮帮中,单击“探求”选项卡。 正在文本框中键入一个单词或短语,然后单击“列出中心”。 双击结果列表中的一个中心,可显示该中心。 35 运用帮帮 ? 运用帮帮体例查找所必要的新闻能够按以下门径实行: ? 2、若要运用索引 (Windows),请实行以下操作: (1)正在 Dreamweaver 帮帮中,单击“索引”选项卡。 (2)滚动到字母列表中的一个索引项,然后双击该项可显示索引信 息。 36 查看操作相干帮帮 ? 正在编纂的经过中,有时必要查看现时操作的帮帮新闻, 这时能够遵照如下门径操作: ? (1)倘使是正在对话框中,要查看现时对话框的新闻,能够单击 对话框的“帮帮”按纽,启动帮帮体例后将直接跳转到现时操 作相闭的帮帮新闻页面上。比高洁在表格对话框中单击“帮帮” 按纽,则会显示表格的帮帮新闻。 ? (2)倘使是正在运用浮动面版实行编纂的经过中,要查看帮帮系 统,能够单击浮动面版上的 按纽,也能够启动帮帮体例,并直 接跳转到与现时操作相干的帮帮页面上。比高洁在属性面版上单 击按纽,将会显示属性的相干帮帮新闻。 37 1.3创筑站点 创筑当地站点 ? 打点站点 ? 打点网站中的文献和文献夹 ? 38 创筑当地站点 步伐1:正在当地硬盘上创设一个用来存放站点的文献 夹,定名为“site”,该文献夹便是当地站点的根目 录,是为网站异常创设的一个文献夹。 ? 步伐2:掀开Dreamweaver 8.0,采取“站点”菜单下 的“打点站点”号令,或者采取文献面板中的“打点 站点”号令,掀开 “打点站点”对线:单击“打点站点”对话框中的“新筑”按钮, 正在弹出菜单膺采取“站点”号令。 40 ? 步伐4:单击“站点”号令后,体例会弹出窗口,这 是一个界说站点的导游,采取“根本”选项卡,给网 站界说一个名称,比方“数学与估量机系”。 41 ? 步伐5:单击“下一步”按钮,正在窗口中设备网站是 否运用任职器技巧,比方:ASP、PHP等。因为咱们要 造造的是根本的静态网站,于是采取“否,我不思使 用任职器技巧”单选按钮。 42 ? 步伐6:单击“下一步”按钮,发端设备网页的存储 门径和存储旅途。正在上半一面的单选项膺采取第一项 “编纂我的估量机上确当地副本,完结后再上传到服 务器(推举)”。倘使申请的网站空间扶帮正在线编纂 性能,那么能够采取“运用当地汇集直接正在职职器上 编纂”单选项。 43 ? 步伐7:完结以上的设备后单击“下一步”按钮,正在 这里采取衔尾任职器的格式,以及网页正在职职器上的 存储身分。 44 ? 步伐8:单击“下一步”按钮。正在这里采取是否运用 “存回”和“取出”。选中“是,启用存回和取出” 选项,能够多人协同完结网站的保护劳动。倘使只需 一个就可以完结网站的保护劳动,能够采取“否”。 45 ? 步伐9:至此完结了对网站的根本界说。单击“下一 步”按钮,Dreamweaver 8.0会弹出对话框询查设备 的新闻是否确切,单击“完结”按钮,当地站点就创 筑得胜了。 46 打点站点 1.切换站点 Dreamweaver 8.0中能够同时存正在多个站点,正在文献面板 左边的下拉列表框膺选中某个已创筑的站点,就可切 换到对这个站点实行操作的状况。 47 2.编纂站点 倘使要对站点实行编纂,能够正在“打点站点”对话框中, 采取要编纂的站点,然后用鼠标单击“打点站点”对 话框中的“编纂”按钮,从头掀开“站点界说”导游, 依据必要一步一步修正站点的属性即可。 48 3.删除站点 倘使不必要某个站点时,能够将其从站点列表中删除。 采取“站点”菜单下的“打点站点”号令,掀开“管 理站点”对话框,正在该对话框膺采取一个站点,单击 “删除”按钮,即可删除一个站点,对某一个站点进 行删除操作后,网站的文献仍保全正在硬盘向来的身分 上,并没有从硬盘上删除。 49 打点网站中的文献和文献夹 1.创筑文献夹和文献 文献面板大凡显示站点中的一共文献和文献夹,•☆■▲但新筑 的站点中不包罗任何文献或文献夹。一共的文献和文 件夹都必要新筑,正在文献面板中站点根目次上单击鼠 标右键,然后从弹出的敏捷菜单中单击菜单项“新筑 文献夹”或“新筑文献”,接着给新的文献夹或文献 定名。 50 2.重定名文献夹或文献 先选中必要重定名的文献夹或文献,然后单击右键,正在弹出的敏捷菜单中 单击“编纂”选项的下级菜单中的“重定名”号令或者按【F2】敏捷 键,◆▼文献夹或文献的名称变为可编纂状况,从头输入新的名称,按Ent er键确认即可。 3.搬动和复造文献 从“文献”面板确当地站点文献列表中,选中要搬动或复造的文献夹或文 件,倘使要实行搬动操作,正在弹出的敏捷菜单中单击“编纂”选项的 下级菜单中的“剪切”号令;倘使要实行复造操作,则实行“编纂” 选项的“拷贝”号令,然后实行“编纂”选项下的“粘贴”号令,将 文献夹或文献搬动或复造到相应的文献夹中。 4.删除文献夹或文献 要从当地站点文献列表中删除文献夹或文献,先选中要删除的文献夹或文 件,然后实行“编纂”选项同上的“删除”号令或按Delete键,这时 体例会弹出一个提示对话框,询查是否要真正删除文献夹或文献,单 击“是”按钮确认后即可将文献夹或文献从当地站点中删除。 51 1.3 网页文献的根本操作 创筑网页和掀开网页 ? 保全网页 ? 正在浏览器中预览网页 ? 52 创筑网页和掀开网页 1.新筑网页 单击“文献”菜单下“新筑”号令,即可弹出“新筑文 档”对话框。从“种别”列表框膺采取“根本页”选 项,然后采取“根本页”列表框中的“HTML”选项。 单击“创筑”按钮,即可新筑一个空缺的HTML网页文 档。 53 2.掀开网页 单击“文献”菜单采取“掀开”号令,弹出“掀开”对 话框。正在该对话框内选中要掀开的HTML文档,单击 “掀开”按钮,●即可将选定的HTML文档掀开。也能够 正在“文献”面板上,双击“站点目次”中的网页文献 也能够掀开网页文献。▪️•★ 54 保全网页 正在完结创筑、编纂的网页之后,要害的一步便是保全网 页,不然通盘都是徒劳的,保全网页有如下几种门径: ? 单击“文献”菜单采取“保全”号令,能够原名字原 旅途保全现时的文档。 ? 单击“文献”菜单采取“另保全”号令,可弹出“另 存为”对话框。操纵该对话框能够将现时的文档以其 他名字保全。 ? 单击“文献”菜单采取“保全完全”号令,可将现时 正正在编纂的一共文档以原名保全。 55 正在浏览器中预览网页 ? 单击法式东西栏上的预览按钮或按“F12”可正在浏览 器中预览所编纂的网页。 56 1.4 设备页面属性 ? 步伐1:掀开Dreamweaver8.0,新筑一个网页,或者 掀开一个现有的网页,采取“修正”菜单下的“页面 属性”号令,或者单击属性面板中的“页面属性”按 钮,掀开“页面属性”对线:正在“页面属性”对话框中设备“表观”参数, 采取“页面属性”中的“表观”选项同,正在右侧或者 设备整个的参数。 58 ? 步伐3:页面属性设备完结后,★◇▽▼•单击“确定”保全设 置,然后中再掀开“页面属性”对话框,并采取左侧 的“分类”列表中的“链接”选项同,正在右侧能够对 链接的样式实行周详的设备。 59 1.5 闇练造造轻易的网页站点 ? 1.创筑一个名为“估量机根基精品课程”的站点,将 此中确当地站点保全正在“D:﹨computer”文献夹下, 长途站点保全正在“D:﹨computer”文献夹下。依据如 图所示的网站的逻辑图,为“估量机根基精品课程” 网站创设一个存放图片的文献夹“images”,并新筑 名为“index.html”、“teacher.html”、“jiaoxu e.html”、“shiyan.html”、“rili.html”、“ke jian.html”和“luxiang.html”的网页文献,最终 设备index.html的页面属性。 60 ? 2. 创筑一个“局部求职主页”的站点,将此中的本 地站点保全正在“D:﹨self”文献夹下,长途站点保全 正在“D:﹨self”文献夹下。依据网站的主页,为“个 人求职主页”网站创设一个存放图片的文献夹“imag es”,并按照如图所示的网页创设网站目次,创设所 必要的网页文献,最终设备index.html的页面属性。 61 ? 3. 创筑一个“公司产物发卖”的站点,依据网站的 主页,为“公司产物发卖”网站创设一个站点,并依 据如图所示的网页创设网站目次,创设所必要的网页 文献,最终设备index.html的页面属性。 62 1.7 轻易网页案例造造 ? 本课上机实战将闇练正在Dreamweaver 8中新筑一个只 包罗文本的轻易网页,并运用IE浏览器预览其成就。 此中重要闇练Dreamweaver 8的启动、新筑文档、保 存网页、预览网页和退出Dreamweaver 8的操作。 63口▲=○▼

赛车网投平台