网页设计技术教学课件.pptx

第5章 网页设计技术 2 本章主要内容 5.1 网页制作基础 5.2 HTML语言 5.3 Dreamweaver网页设计 5.4 CSS+DIV 5.5 网站发布 3 5.1 网页制作基础 网页是构成网站的基本元素，主要由文字、图片、动画、音频、视频等信息组成。 静态网页与动态网页 静态网页：即HTML网页，其扩展名为htm或html。其优点在于内容相对稳定，易被检索，但不具备交互性功能因此只允许于客户端。 动态网页：采用动态网站技术开发形成的网页，在设计时除了使用HTML语言外，还包括使用ASP、JSP、PHP等网络编程语言和数据库技术，具有交互性功能，一般扩展名为asp、jsp、php、cgi等。 4 构成网页的基本要素包括：Logo、Banner、导航栏、文本、图像、多媒体等。 Logo商标：代表企业形象或者网站内容的标志性图片，一般位于网页的左上角。 Banner：用于宣传网站某个栏目或者活动的广告，一般位于网页的顶部。通常采用动画形式播放。 网页的基本要素 5 导航栏：就是一组超链接，用于方便浏览网站内部的站点。导航栏形式多样，可能是文字链接、图片链接、按钮或者下拉菜单。 文本：文本是网页最基本的元素，所有信息都可以用文字来描述传达。 图像：图像可以提供信息、展示形象、装饰网页、表达情趣，增加网页的吸引力。 多媒体：多媒体信息包括FLASH动画、音频、视频等内容。 6 一、网站策划。网站策划是网站设计的前奏，主要包括确定网站的主题和目标用户群，还有形象策划、制作规划和后期推广宣传等方面的内容。 二、规划站点基本结构。规划网站栏目、网站风格、网站导航、颜色搭配、版面布局和文字图片的运用等。 三、设计网站页面。在网页布局规划结束后，将确定需要的功能模块、图片、文字、视频等放置到页面上。 四、制作网页。利用HTML编辑工具软件或者可视化设计软件如Dreamweaver等制作网页。 五、测试上传网站。网页设计完成后，就可以在本机测试，测试无误后就可以准备发布了。 六、申请域名和服务器空间。将测试无误的网页文件上传到申请的空间里，就可以通过internet浏览访问了。 网页设计基本步骤 7 5.2 HTML语言 HTML（HyperText Markup Language）语言即超文本标记语言，通过标记符号来标记要显示的网页中的各个部分。其中超文本是指页面内可以包含图片、链接、音频、视频、程序等非文本元素。在HTML文件中对文本和非文本元素进行标记，由浏览器解释和显示出来。 可以使用文本编辑器来创建HTML文件，或者使用专门的网页设计工具，如Adobe Dreamweaver、Notepad++等。 8 用HTML语言编写网页 1. HTML标记 标记格式为： 标记指定内容/标记 (1) “标记”和“/标记”分别是一个标记元素的开始和结束 (2) 标记本身不区分大小写。 9 常用HTML标记 10 HTML文档结构 （1）开头与结尾标记： html、/html （2）头部标记: head、/head （3）主体标记： body、/body 11 HTML文档实例 记事本（Notepad.exe）编辑HTML文档，文件的扩展名是 .htm或 .html html head title文档的标题/title /head body H2第一个网页/H2 hr pfont face=楷体_GB2312 size=6 color=red第一个例子/font/p p第二句话/p p第二句话/p /body /html 12 图片、超级链接与表格标记 html head title我的第二个网页/title /head body h2第二个网页/h2 hr table border=1 width=400px tr td文字/td tda href=eg_5_1.html超级链接/a/td /tr tr td图片/td tdimg border=0 src=cache.gif width=80px height=120px/td /tr /table /body /html HTML文档实例 13 表单标记实例：表单提供交互操作界面。 html head title我的第三个网页/title /head body