网页设计培训-厦门理工学院.PPT

厦门理工学院教师发展中心网页设计培训 HTML：是Hypertext Markup Language的英文缩写，即超文本标记语言，由很多标记组成的一种文本文件，它是构成Web页面（Page）的主要工具，HTML标记可以说明文字、图形、动画、声音、表格、链接等 。 使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个WWW浏览器，我们所看到的网页，是浏览器对HTML文件进行解释的结果。 HTTP： Hyper text Transfer Protocol，超文本传输协议 URL：统一资源定位器(Uniform Resource Locator，URL)用于描述Internet上资源的位置和访问方式。 如：/special/00012Q9L/baogaojiedu100306.html /Photo/2011/3/226257400.jpg 导航设计 网页风格设计 同样的版式设计，标志不同，配色不同，文字样式不同，也可以呈现出多种不同的网页风格。 风格设计涉及到：标志内容，网页配色、文字艺术等方面 实例分析 1．网站描述 这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉，这与公司的风格相一致。导航设计简洁利落，很值得学习借鉴。 2．布局 网页布局采用的是比较常见的分栏式结构，A为网站的Logo所在的区域；B为网站主菜单所在的区域；C为搜索与其他公共功能所在的区域；D为网站的内容区域，主要由文字和图片组成；E为版权信息所在的区域。 3．配色 网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD” 。除此之外，网页文字的配色主要以白色和蓝色为主。 工具地址 FTP://4/ Username:webuser Password:webuser123 Dreamweaver8工作界面 1)、Dreamweaver的窗口构成 a.初始界面 b.工作界面 2)菜单栏和工具栏 a.插入工具栏 有“菜单”形式和“制表符”形式的两种 b.文档工具栏 3)、视图方式 HTML代码视图、拆分视图、设计视图 4)、属性面板 5)、面板组 注意：面板组的打开和隐藏 窗口界面组成（设计界面） 窗口组成（代码界面） 插入工具栏 文档工具栏 属性面板 面板组和相应的下拉菜单 3. Dreamweaver 8的基本操作 1)新建网页 2)网页浏览 3)网页的保存 4)网页文档的打开 5)设置页面属性 1) 新建网页 a.创建新文档 方法1：在初始界面中单击“创建新项目”下边的“HTML” 方法2：“文件”→“新建”命令 方法3：双击文件面板中的文档名 b.根据模板创建文档 模板是已经布局设计好的网页结构，你只需在适当的位置上填入实际页面元素 2)网页的浏览 方法1：单击“浏览”按钮 方法2：按F12功能键 方法3：文件→在浏览器预览→ IExplore6.0 方法4：在相应的文档上双击网页文档 3)网页的保存 方法1：文件→保存 方法2：文件→另存为 4)、网页文档的打开 方法1：文件→打开 方法2：在文件面板中，双击指定的文档 5)设置页面属性 步骤如下 新建或打开一网页 单击修改→页面属性（单击属性面板中“页面属性按钮） 在“页面属性”对话框中设置 分为以下几类： 外观 链接 标题 标题/编码 跟踪图像 常用的几个HTML标签 tabletrtd/td/tr/table Border: width: height: font-size: Font-family: Margin: Line-height: p/pbr/span/span b/bstrong/strong p align=“center”/p DreamWare常用技巧 一、如何插入图文混排 二、如何插入表格 三、如何插入超链接、热点、锚 四、如果从WORD拷文章发布 五、如何插入音频、FLASH动画 六、如何快速的生成自己的精品课程网 七、一些好的素材网 常见编辑器 FCKEditor EwebEditor 一、图文混排 二、插入表格 有时候需要改动，直接在编辑器里使用往往不是很方便。 三、插入超链接 四、插入热点 五、插入锚 六、如何插入音频、动画 不过，一个优秀的网站应该不仅仅是由文字和图片组成的，而是动态的、多媒体。为了增强网页的表现力，丰富文档的显示效果，我们可以向其Flash动画、Java小程序、音频播放插件等多媒体内容。　将光标放置在表格任意单元格中，单击常用快捷栏中的媒体按钮，然后在弹出的列表中选择Flash，如图1。 　 弹出“选择文件”对话框，选择swf文件夹中的