网页设计教案2006.ppt

网页设计电子教案 网站、网页分类: 功能分：个人网站；电子商务网站；政府网站；企业网站；门户网站；教育网站等。 表现形式分：普通型（以文字为主）；Flash型；封面型。 设计技术分：静态网页 动态网页 目录 网页制作——DREAMWEAVER 图形图像处理——FIREWORKS 动画制作——FLASH Dreamweaver篇 第一讲 网页设计知识基础 一、网站、网页和主页 二、网站设计的工作流程 三、站点空间的申请与管理 一、网站、网页和主页 1.网页：是用HTML语言编写的，通过WWW网传输，并被Web浏览器翻译成可显示出来的集合文本、图片、声音和数字电影等信息形式的页面文件。由站标、导航栏、广告栏和信息区等组成。 2 .网页分类主页：是站点所有网页的链接中心，一般在访问一个网站时首先看到的网页。专题网页：是对网站内容的进一步细化和归类，是主页和内容网页的中转站。内容网页：是对网站所传达信息的具体体现，位于网站链接结构的终端。 功能网页：是一些专门用于访问者信息反馈、网站用户注册等方面的网站用户服务性质的网页。 3.网页关系图 4.网站 由各种类型的网页通过超级链接的形式组成。 第二讲 一、HTML语言（1－3） 二、Dreamweaver概况（2－2） 三、站内站点管理（2－3） 主要内容 HTML语言 HTML（Hyper Text Markup Language），是网页构成的基本元素。 语法包括：?标记：是一组字符串符号，主要用于再HTML文件中标示供浏览器显示的文件内容的显示格式描述。?属性：每一种标记都具有属性。通过属性的使用，原来定义标记对象的具体显示格式的编排方式。 编写环境：记事本 说明： html …/html文件标签，表示文档的开始和结束。 head …/head文件头标签，放置的是关于这个文件的信息，包含文件的标题、编码方式和URL等。 title…/title标题标签，设定文件的标题名称。 body …/body文件主体标签，网页中所要显示的所有内容，都放置在这一对标签中。body〉有一些常见的属性格式为： body bgcolor=# text=# link=# alink=# vlink=# background=“image-URL” bgcolor——背景颜色text——非链接文字的颜色link——可链接文字的颜色alink——击活链接文字的颜色vlink——访问过的链接的颜色background——在网页中添加背景图 编写注意事项 HTML文件的标记都是放在“”和“”之间，而且大都数都是成对出现的。 标记没有大小写之分。 标记的属性值可以利用“”，也可以不用。 在HTML文件中使用连续空白时，会自动简化为一个空白。 注释以“!--”开始，“--”结束。 常用的标记 超链接标记：A语法：A href=“被链接文件URL”文本/A说明：href用来指出要链接的文件的名称或URL。 图片标记：img语法：img src=“图像URL” [属性＝属性值]常用属性：Height－高度； Width－宽度； Alt－加入图片的文字说明 段落标记：p语法：p [align=对齐方式] 文本内容/p对齐方式有：left、center、right 表格标记：table语法：table [属性=属性值] … /table常用属性：border－表格边框宽度； Cellspacing－单元格间距； Cellpadding－单元格内间距； Bgcolor－背景色； Align－表格在网页中的对齐方式 行标记：tr语法：tr …/tr 单元格标记:td语法：td…/td常用属性：Align－对象在单元格中的水平位置； Valign－对象在单元格中的纵向位置（Top、bottom 、middle，默认值为middle ） 二、Dreamweaver概况 一、功能和特点可视化的网页编辑工具，特点：所见即所得；功能：网站管理、 网页编辑 二、界面组成1、插入面板网页绝大多数内容的添加都是通过插入面板来实现的。2、文档工具栏视图转换按钮、在浏览器中调试按钮。3、使用状态栏标签选择器：可以准确、快速地选定文档中的内容4、属性面板每一个页面中的元素，属性面板的参数也不同。 三、站点的创