前端网页设计与制作_第1页
前端网页设计与制作_第2页
前端网页设计与制作_第3页
前端网页设计与制作_第4页
前端网页设计与制作_第5页
已阅读5页，还剩51页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计制作

——软件职业技术学院09-10学年第1学期学时：64（理论32实验32）主讲：李冠峰一、万维网WWW计算机网络、Internet与WWW的概念计算机网络InternetWWW计算机网络与Internet的概念区别Internet与WWW的概念区别协议的概念网站基本概念网页、网站、首页、默认页、主页抬头、版权、Logo、导航栏一、万维网WWW三个问题：1、如何标志所有网页（文档）？2、什么传输协议？3、网页标准问题1、如何标志所有文档？URL（UniformResourceLocator）格式：访问方式://主机:端口/路径常见的URL：网页，网页，FTP，发送电子邮件，本地文件，file:///D:/Downloads/rfc.rar远程登录，telnet://3:1102、什么传输协议？8.5.3HTTP（HyperTextTransferP.）IISIEDNS

服务器

的IP是？9

组织网页：HTML文件+图片文件+Flash文件其它图片和Flash等HTML源代码中需要播放的文件029…………返回3、网页标准问题超文本标记语言HTML(HyperTextMarkupLanguage)超文本标记语言HTML中的Markup的意思就是“设置标记”。HTML定义了许多用于排版的命令（标签）。HTML把各种标签嵌入到万维网的页面中。这样就构成了所谓的HTML文档。HTML文档是一种可以用任何文本编辑器创建的ASCII码文件。二、超文本标记语言HTML

(HyperTextMarkupLanguage)1.HTML概述超文本标记语言HTML中的Markup的意思就是“设置标记”。HTML定义了许多用于排版的命令（标签）。HTML把各种标签嵌入到万维网的页面中。这样就构成了所谓的HTML文档。HTML文档是一种可以用任何文本编辑器创建的ASCII码文件。2.HTML文档仅当HTML文档是以.html或.htm为后缀时，浏览器才对此文档的各种标签进行解释。如HTML文档改换以.txt为其后缀，则HTML解释程序就不对标签进行解释，而浏览器只能看见原来的文本文件。当浏览器从服务器读取HTML文档后，就按照HTML文档中的各种标签，根据浏览器所使用的显示器的尺寸和分辨率大小，重新进行排版并恢复出所读取的页面。HTML的格式与标签元素(element)是HTML文档结构的基本组成部分。一个HTML文档本身就是一个元素。每个HTML文档由两个主要元素组成：首部(head)和主体(body)。首部包含文档的标题(title)，以及系统用来标识文档的一些其他信息。标题相当于文件名。文档的主体是HTML文档的最主要的部分。主体部分往往又由若干个更小的元素组成，如段落(paragraph)、表格(table)、和列表(list)等。HTML的标签HTML用一对标签（即一个开始标签和一个结束标签）或几对标签来标识一个元素。开始标签由一个小于字符“<”、一个标签名、和一个大于字符“>”组成。结束标签和开始标签的区别只是在小于字符的后面要加上一个斜杠字符“/”。虽然标签名并不区分大写和小写。有一些标签可以将结束标签省略。HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>HTML文档开始HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>首部开始HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>标题HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>首部结束HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>主体开始HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>1

级标题<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>HTML文档中标签的用法第一个段落<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>HTML文档中标签的用法第二个段落HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>主体结束HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>HTML文档结束插入图像<IMGSRC=portrait.gifHEIGHT=100WIDTH=65>结束标签开始标签插入图像插入的图像文件名是portrait.gif高度是

100

像素宽度是

65

像素万维网页面中的超链接

1.链接到其他网点上的页面定义一个超链的标签是<A>。字符A表示锚(Anchor)。在HTML文档中定义一个超链的语法是：

<AHREF="...">X</A>超链的起点这个地方填写超链终点的URL链接举例<AHREF="">清华大学</A>超链的起点是某个文档中的这四个字超链的终点是清华大学的主页2.链接到一个本地文件远程链接：超链的终点是其他网点上的页面。本地链接：超链指向本计算机中的某个文件。本地链接本地链接可进行许多的简化：协议(http://)被省略——表明与当前页面的协议相同。主机域名被省略——表明是当前的主机域名。目录路径被省略——表明是当前目录（对于远程链接，表明是主机的默认根目录）。文件名被省略——表明是当前文件（对于远程链接，表明是对方服务器上默认的文件名，通常是一个名为index.html的文件）。相对路径与绝对路径

...//default.htm<ahref=“./default.htm”>网站首页</a><ahref=“menu2/default.htm”>栏目2</a><ahref=“menu2/2-1.htm”>栏目2-1</a><ahref=“menu3/3-1.htm”>栏目3-1</a><ahref=“menu3/file/file123.htm”>123号文件</a><ahref=“download/music/song1.mp3”>歌曲1下载</a><imgsrc=“images/logo.gif”>/menu3/file/file123.htm<ahref=“../../default.htm”>网站首页</a><ahref=“../../menu2/default.htm”>栏目2</a><ahref=“../../menu2/2-1.htm”>栏目2-1</a><ahref=“../3-1.htm”>栏目3-1</a><ahref=“file123.htm”>123号文件</a><ahref=“../../download/music/song1.mp3”>歌曲1下载</a><imgsrc=“../../images/logo.gif”>/menu2/2-1.htm<ahref=“../default.htm”>网站首页</a><ahref=“./default.htm”>栏目2</a><ahref=“2-1.htm”>栏目2-1</a><ahref=“../menu3/3-1.htm”>栏目3-1</a><ahref=“../menu3/file/file123.htm”>123号文件</a><ahref=“../download/music/song1.mp3”>歌曲1下载</a><imgsrc=“../images/logo.gif”>相对路径名与绝对路径名使用简化的URL，在HREF=的后面使用的是相对路径名。使用完整的URL则是使用绝对路径名。使用相对路径名的好处绝不是为了少键入一些字符而是便于目录的变更。<ANAME=“Destination”>abc</A>本文件链接（页内锚）举例X

abc文件F本文件链接的HTML语句格式：<AHREF=“#Destination”>X</A>本文件链接在此处定义命名锚起点终点命名锚的定义语句：命名锚的名字命名锚的终点在字符abc的前面

远程链接举例远程链接：<AHREF=“”>清华大学</A>清华大学清华大学主页文件F远程链接

因特网起点终点色彩的RGB表示<fontcolor=#??????>文字</font>三原色RGB每个原色色彩取值从0～255（即0x00-0xFF）整体的色彩空间000000到FFFFFF共有28×28×28＝224个取值图中共有几种颜色？下列值代表何种颜色？#00FF00 #FFFF00 #FFFFFF #000000#C0C0C0 #666666超链接的四个状态A:link{Color:#CC00CC;Text-Decoration:none}A:hover{Color:#666666;Text-Decoration:underline}A:active{Color:#FF0000;Text-Decoration:none}A:visited{Color:#CC00CC;Text-Decoration:none}如何实现“看不出哪些链接被点击过”？访问过的颜色＝未访问过的颜色实现方法：IE设置（只能改一台机器的默认样式）样式表三、可视化网页设计工具MacromediaDreamweaverMX2004MicrosoftFrontpage2003记事本/Editplus1、DreamweaverMX2004简介设计者视图界面介绍快捷键Ctrl-ZCtrl-YCtrl-SCtrl-F：查找、替换F8：站点文件菜单属性面板关闭后如何打开？2、站点操作建立站点为什么要建立站点？管理方便，打开方便更新链接Dreamweaver中的站点就是发布的站点吗？不是，这里仅仅是设计时的站点实验室的计算机重新启动后会自动恢复实验中每次都要重建文件建立在Student盘3、网页制作表格嵌套导航条、当前位置在每个网页中的位置都要一致3、网页制作样式表控制元素的外观使用方式一个网页定义一个样式表多个网页共用一个样式表文件（见下页图）自己定义（见右图）下载（网页“文件－另存为”，找“.files”文件夹中的css文件）方式（选择器）定义类样式，元素手工套用（class=类样式名称）定义元素(标签)的默认样式，元素(标签)将自动套用3、网页制作服务器端包含包含文件<!--#includefile="被包含文件.htm"-->文件扩展名：.shtm或.asp被包含文件.htm只有<body>到</body>之间的内容如果含有<html><head><body>及其闭合标记，被包含之后的结果网页中就会有双份，将出错！必须发布出来才能显示即必须以http://的方式访问具体见“六、网站设计与发布”4、常见问题常见操作问题：光标选中元素后，才能设置该元素的属性Table中TR和TD如何选中？状态栏：标签检查器四、网站规划-网站基本知识概念区分网页、网站首页、默认页、主页统一内容抬头版权Logo导航栏四、网站规划-网站基本知识网站规划设计步骤确定类型、主题、风格内容与界面设计栏目与板块编排目录结构与链接结构版面布局策划书申请域名服务器接入方式（存放方式）的选择四、网站规划-选择服务器接入方式Internet主机方式（自管）专线：大中型公司采用拨号：个人网站，成本低；但要解决随机分配IP问题花生壳、DNS2Go：可提供每次动态IP自动对应域名的服务主机托管（通过FTP或远程桌面管理）电信、网通等ISP机房提供高带宽、合适的温湿度、稳定的电源、防火等安全虚拟主机（通过FTP上传文件）虚拟：申请空间，共享服务器付费空间个人免费空间四、网站规划-网页制作基本知识网页布局问题表格布局网页设计独有特点层坐标布局与平面设计无区别四、网站规划-DHTML（动态网页效果）总结CSS（样式表）外接样式表：通过一个css文件控制多个网页的显示效果。Javascript（Java脚本程序，与Java不同）在客户端实现与用户的交互SSI（服务器端包含）通过在多个网页中包含同一个ssi文件实现公共部分（抬头、导航、版权等）的统一方法：<!--#includefile=“被包含文件.htm"-->注意包含文件的扩展名：包含文件.shtm或包含文件.asp四、网站规划-WEB数据库程序执行的原理<%=Sname%><%=Sdept%>将查询结果组成网页“Select*fromstudent”五、图形编辑与动画制作图形文件格式BMP位图色彩空间、分辨率JPG压缩格式GIF多帧动画、透明、256色PS源文件的概念PNG五、图形编辑与动画制作位图的概念逐点（像素）描绘矢量图的概念在数学上定义为一系列由线连接的点。放大后不失真，和分辨率无关，文件小AdobeIllustrator、CorelDrawFlash矢量动画的概念flaswf五、图形编辑与动画制作编辑制作工具AdobePhotoshopMacromediaFireworksMacromediaFlash编辑制作示例去除背景、添加文字、添加效果、导出补间动画、元件、引导线、导出六、网站设计与发布原理（Browser/Server模式）HTTP负责请求、回应和网页的传输服务器的任务1、等待服务3、接收请求4、解释ASP，将执行后得到的HTML结果嵌入HTML5、回应浏览器的任务2、发送请求（地址栏或点击超链接等）6、接收文档7、分析文档，做进一步请求8、解释HTML，将网页展现在IE的主体部分9、执行Javascript六、网站设计与发布操作系统的选择WindowsServer2003同时连接限制多站点CPU、内存优化服务而不是应用程序实验中用WindowsXP代替WEB服务器软件的选择InternetInformationServer（Internet信息服务）概念区分客户端执行的动感效果（仍

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论