吉大南屏拱北香洲_前山网页网站设计培训

以下是我们的网页网站设计培训课程大纲,课程包括了PS, DW, FLASH等软件,还有JS,其中DIV+CSS是重点课程。
珠海它山培训距离吉大南屏拱北香洲前山都很近,专注于设计培训,IT培训,详细课程类别请查看首页导航栏。

Dreamweaver内容
一、基础知识介绍
1、网页、网站、html的基本概念;
2、编写和开发html的工具—Dreamweaver,软件界面介绍;
3、html语法基础;
4、元素(标记)和属性的写法;
元素分类:1、可包含内容的元素;2、自封闭元素;
5、html的语法规则;
a、区分大小写,规定用小写字母;b、正确嵌套所有元素;c、元素必须要封闭;d、属性值必须加上双引号;e、明确所有属性的值;f、特殊字符要用编码表示;g、css控制外观样式;
二、软件基本操作
1、设置网页外观属性;
属性——页面设置——设置背景颜色、背景图片、字体格式、边距………
2、创建站点、站点的管理
创建一个站点,将所有的图片放在一个指定的文件夹里面;新建文件、拖动文件、站点切换、复制、编辑、删除。
三、制作页面的基本操作
1、添加文本,直接输入文本或者导入文本文件;
2、插入时间、日期,设置存储时自动更新;插入——日期;
3、插入特殊字符,插入——html——特殊字符;
4、水平线:插入——html——水平线,设置其宽度、高度、id、对齐属性;
5、编辑文本,与Word类似;设置样式的两种方式:html样式、css样式;注意选字体时尽量选常用字体,否则可能会无法显示,如果实在想选某种字体,可以改用图片显示;
6、段落设置:Enter为分段,Ctrl+Shift+空格可输入多个空格,Shift+Enter换行。设置连续空格:编辑——首先参数——常规——允许多个连续空格。新建css样式设置对齐方式、字体大小等,在html属性中国设置列表编号、缩进样式等;标题样式设置:页面设置——标题(css);
7、图片的插入:插入——图像——选择图片,或者直接拖入图片,拖动可调整图片大小。“替代文本”用于当图片显示出错时起提示作用;
8、编辑图片
更改图片尺寸,在属性窗口输入宽度、高度值;更改图片数据量,在属性窗口点击“重新取样”;裁切图片,调整亮度对比度、清晰度;优化图片:用PS编辑图片,编辑——首选参数——文件类型/编辑器里面可以设置编辑器。
9、鼠标经过图片特效
插入——图像对象——鼠标经过图像
10、图文混排
通过css样式设置图片居中,图像元素的对齐属性指的是图像与同行文本的对齐方式,包括绝对对齐与相对对齐,图片与文本间的距离通过设置边距控制(有些效果与属性描述值不符是由于浏览器的原因导致);
11、网页中使用的图片格式
使用图片原则:在保证画质的情况下使图片尽可能小,GIF(用于做LOGO)、GPEG(用于做图片展示)、PNG。
四、建立网页链接(修改链接属性设置:修改—页面属性—CSS链接属性)
1、 添加超级链接
2、 内部链接与外部链接
3、 设置链接样式
4、 锚点链接
a、 创建命名锚点,就是在网页中设置位置标记,并给该位置一个名称,以便引用;
b、 链接地址输入“#+锚记”;
5、 创建下载链接
当被链接的文件时exe文件或zip、rar类型的文件时,浏览器无法直接打开,便会提示文件会被下载,这就是网上下载的办法。
6、 图像热区链接
7、 创建跳转菜单
插入——表单——跳转菜单——输入项目值,可以在属性的“列表值”中更改菜单;
8、 脚本链接(需要编写脚本语言)
例:javascript:alert(‘你好!’) 弹出你好对话框
9、 链接路径
10、链接的更新与检查
默认情况下调整文件夹路径会自动弹出是否更新链接提示,可以更改设置,编辑——首选参数——常规——移动文件时更新链接;链接检查器:文件——检查页——浏览器兼容性检查。

五、HTML介绍
1、文件头信息
刷新:插入——html——文件头标签——刷新
关键字:插入——html——文件头标签——关键字(关键字之间要用逗号隔开,一般设置在五个以内。)
说明:插入——html——文件头标签——说明
2、常见html标记
a、页面基本元素:<html>、<head>、<title>、<meta>、创建样式元素<style>、链接元素<link>、脚本元素<script>、<body>;
b、文本段落元素:层元素<div>、段落元素<p>、换行元素<br>、水平分割线元素<hr>、下标元素<sub>、上标元素<sup>;
c、列表元素:无序列表<ul>、有序列表<ol>、列表条目元素<li>、定义列表<dl>、定义列表术语元素<dt>、定义列表条目说明元素<dd>;
d、图像元素:<img>;
e、表格元素:表格<table>、行<tr>、单元格<td>、表格标题元素<caption>;
f、链接元素:<a>;
g、表单元素:<form>、表单控件<input>、选择列表条目元素<option>、按钮元素<button>、选择列表元素<select>、文本区域元素<textarea>、表单标记元素<lable>;
h、框架元素:框架集元素<frameset>、框架内容元素<frame>、内联框架元素<iframe>;
3、CSS控制DIV显示介绍
六、表格(表格的作用:1、存放数据;2、布局页面。)
1、插入——表格——设置表格参数
单元格边距:边到内容的距离,或叫填充,不填则默认为1;
单元格间距:表格边框到单元格边的距离,不填默认为2;
2、网页布局
常见类型:国字型、拐角型、左右框架型、上下框架型、综合框架型、封面型、flash型、变化型;
3、页面的构成
网页尺寸:根据屏幕分辨率的大小设计网页的宽度,一般如果屏幕分辨率为800*600,则设计网页的尺寸为780*428。如果屏幕分辨率为1024*768,那么设计网页尺寸为980*600。网页页头(页眉)通常放置LOGO(网站标志)和banner(广告条)。页脚放置版权信息,联系电话,网站介绍,备案信息等;
4、统一设置页面字体为宋体,大小为12,这样即使用户浏览器调整为其他字体时页面也能正常显示;
七、框架
1、一个框架就是一个区域,可以单独打开一个html文档,多个框架就可以把浏览器窗口分成不同的区域,每个区域显示不同的html文档。查看——可视化助理——框架边框(控制框架的显示与否)
2、框架的作用
a、做网页的布局,将网页分成不同的部分;b、简化网页的编写,网页之间相同的内容只需编写一次;c、加快网页的浏览速度,每次网页只更新变化的框架内容;
注意:框架的页面要分开保存;
八、插入多媒体元素、插入音频
1、插入音频:方法1、直接插入html标记<bgsound src=””>;2、插肩嵌入到网页中:插入——媒体——插件——选中声音文件(在参数面板中设置Autostart为false);
2、插入——媒体——flv
九、AP DIV元素(绝对定位元素)
1、特点:a、作为容器可以放置其他网页元素;b、灵活定位,DIV不带定位信息,AP DIV带定位信息;
2、编辑AP DIV元素:a调整层的大小、层的关系;b、层的对齐,按住shift选中多个层——修改——排列顺序——调整高度、宽度,Z轴属性表示层的信息,“1”表示最里层,数值最大的为最外层;创建默认情况下的AP DIV属性:编辑——首选参数——AP元素;
3、层的可见性设置
窗口——AP元素 ——控制可见与否;
4、层的嵌套
嵌套:嵌套并不表示一个在另一个里面显示,而是指一个AP元素的代码在另一个AP元素代码的内部。嵌套的AP元素会随着AP元素的移动而移动,继承父AP元素的可见性。嵌套的作用是做一些特殊的效果;
标出显示:查看——标尺——显示(打开标尺),按住ctrl可以显示距离;
5、AP DIV与表格的转换
查看——网格设置——显示网格、网格设置;AP元素——防止重叠;修改——转换——将表格转换为AP DIV或者将AP DIV转换为表格;
10、行为
1、 晃动的图片;2、弹出窗口;3、设置文本行为;4、交换图像实例(用于做互动广告或产品展示);
5、修改属性特效,一种比较灵活的行为,可以通过事件来触发某个对象属性值的变化(注意:每个被修改属性的对象必须设置唯一的ID)。
6、动态菜单;7、效果行为应用(遮帘、高亮显示、图片缩放、跑马灯状态文字、图片局部放大);
7、可在网上搜索“网页特效代码”、“脚本代码”、JS等等;
11、DIV布局与Spry构件
1、认识Spry构件:Spry构件就是一段事先设计好的代码来实现特定的功能;三种构件:a、Spry构件;b、Spry验证表单;c、Spry XML数据显示;(后两者用于做动态网页)
2、Spry构件类型:a、Spry菜单栏;b、Spry选项卡式面板;c、Spry折叠式面板;d、Spry可折叠面板。

12、CSS
级联样式表(Cascading Style Sheet),通常又称为“风格样式表(StyleSheet),用于控制整个网页的显示效果。
1、 创建css样式的三种方式:a、通过属性面板快捷操作;b、使用css样式面板;c、手工输入代码。
2、 Css选择器:a、标签,系统自定义的,不能更改;b、类,可以多次使用,前面要加“.”;c、ID,仅应用于一个html元素,前面要加“#”,只能用一次;d、复合内容,用于精确定义,定义#zt em:<p id=”zt”>欢迎光临<em>它山培训!</em>他山之石,可以攻玉!</p>;<p>欢迎光临<em>它山培训!</em>他山之石,可以攻玉!</p>;
3、 样式的复合声明,一次声明多个,用逗号隔开;
4、 嵌套与继承
嵌套:#fq{text-decoration:underline},#ez{color:#00c;background-color:#fcq}
<Div ID=fq>这是父层<Div ID=ez>这是子层</Div></Div>;
5、 应用CSS到网页中的方式
a、 内嵌式,写在head头部信息中;b、行内样式,写在html标记里面,<p style=”color=#f00”>;
b、 链接式,适合多个页面使用。
6、 css优先级:行内式>内嵌式>链接式;
7、 css大全:http://www.w3school.com.cn/css/css_reference.asp
<span> 在CSS定义中属于一个行内元素,在行内定义一个区域,也就是一行内可以被 <span> 划分成好几个区域,从而实现某种特定效果。 <span> 本身没有任何属性。 <div> 在CSS定义中属于一个块级元素 <div> 可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类,如章节、摘要或备注。在页面效果上,使用 <div> 会自动换行,使用 <span> 就会保持同行。
8、 Flashfxp

本文来自吉大南屏拱北香洲_前山网页网站设计培训学校李老师