网页制作培训

网页制作培训主讲:尹呈良电话:[phone]第一章网页制作基础网页中的常见元素常用网页制作工具美化网页的基本工具建立网站的基本流程网页艺术设计网站创意的行为设置相对应的事件对所使用的事件进行修改本章内容概览1.1网页中的常见元素1.1.1文本1.1.2图形1.1.3超链接1.1.4表格1.1.5表单1.1.6声音和视频1.2常用网页制作工具1.2.1超文本标识语言1.2.2Dreamweaver1.2.3FrontPage1.2.4Dreamweaver与FrontPage的比较1.3常用的网页美化工具1.3.1Fireworks1.3.2Flash1.3.3Photoshop1.4建立网站的基本流程1.4.1确定主题1.4.2搜集资料1.4.3网站的整体规划1.4.4网页设计与制作1.4.5测试与发布网页1.4.6网站的宣传与推广1.4.7网站的反馈与评价1.4.8网站的更新与维护1.5网页艺术设计1.5.1网页版式设计1.5.2网页色彩设计1.6网站创意1.6.1网站点评之一1.6.2网站点评之二1.1网页中的常见元素文本图形超链接表格表单声音和视频1.2常用网页制作工具1.2.1超文本标识语言HTML1.2.2Dreamweaver1.2.3FrontPage1.2.4Dreamweaver与FrontPage的比较1.3常用的网页美化工具1.3.1Fireworks1.3.2Flash1.3.3Photoshop1.4建立网站的基本流程规划网站准备素材定义站点设置页面属性制作页面域名空间的申请测试网站上传网站创建网站完成第1阶段第2阶段第3阶段1.5网页艺术设计1.5.1网页版式设计1.5.2网页色彩设计1.6网站创意创意思考的途径最常用的是联想。这里提供了网站创意的25种联想线索：把它颠倒、把它缩小、把颜色换一下、使它更长、使它闪动、把它放进音乐里、结合文字音乐图画、使它成为年轻的、使它重复、使它变成立体、参加竞赛、参加打赌、变更一部分、分裂它、使它罗曼蒂克、使它速度加快、增加香味、使它看起来流行、使它对称、将它向儿童诉求、价格更低、给它起个绰号、把它打包、免费提供。从这些线索中，展开你联想的翅膀，飞吧！点评网站第二章Dreamweaver基础我们的目标:熟悉Dreamweaver主工作区熟悉各菜单项的基本功能熟练掌握创建、保存文档的方法2.1Dreamweaver简介Dreamweaver是一款专业的网站开发工具，它具有强大的功能和简便的操作以及友好的工作界面，已经被越来越多的网页设计者和网站开发人员所接受。随着该软件应用范围的扩大，其版本也在快速更新，功能也不断增强。它集网页设计、网站开发和站点管理功能于一身，具有可视化、跨浏览器和支持多平台的特性，同时利用该软件还可以开发功能强大，高效的动态交互式网站。2.2Dreamweaver工作界面介绍【面板】组【文件】面板【插入】面板【属性】面板【菜单】栏【文档】窗口【文档工具栏】栏2.3课堂小实例2.3.1新建一个文档2.3.3插入图像第三章文本的处理利用Dreamweaver编辑网页文本处理段落编辑网页文本格式创建CSS样式编辑CSS样式应用CSS样式本章内容概览3.1文本标题3.2处理段落3.3编辑文本格式3.3.1设置字体3.3.2设置字号3.3.3添加字体颜色3.3.4设定字体样式3.4创建项目列表3.4.1项目列表的类型3.4.2使用现有的项目列表3.4.3创建嵌套项目列表3.4.4设置项目列表属性3.5使用CSS3.1文本标题文本标题来强调段落要表现的内容。在HTML中，定义了6级标题，从1到6级，每级标题的字体大小依次递减。在HTML中，采用如下的标记来定义标题：h1和/h1定义标题1h2和/h2定义标题2h3和/h3定义标题3每级标题的字符大小并没有一个实际上的固定的值，它是由浏览器所决定的，为标题定义的级别只决定了标题之间的相互大小。3.2处理段落3.2.1设置段落格式使用【属性】面板的【格式】弹出式菜单或选择【文本】|【段落格式】菜单可以应用标准段落和标题标签。3.2.2对齐段落段落的对齐方式，指的是段落相对文档窗口（或浏览器窗口）在水平位置的对齐方式。有三种对齐方式：左对齐、居中对齐、右对齐、两端对齐。3.2.3缩进段落许多时候需要缩进段落，例如希望强调一段文字，或引用其他来源的文字，都需要将文字缩进，以示同普通段落的区别。所谓缩进，主要是相对于文档窗口（或浏览器窗口）左端而言的3.3编辑文本格式3.2.1设置段落格式使用【属性】面板的【格式】弹出式菜单或选择【文本】|【段落格式】菜单可以应用标准段落和标题标签。3.2.2对齐段落段落的对齐方式，指的是段落相对文档窗口（或浏览器窗口）在水平位置的对齐方式。有三种对齐方式：左对齐、居中对齐、右对齐、两端对齐。3.2.3缩进段落许多时候需要缩进段落，例如希望强调一段文字，或引用其他来源的文字，都需要将文字缩进，以示同普通段落的区别。所谓缩进，主要是相对于文档窗口（或浏览器窗口）左端而言的。3.3编辑文本格式3.3.1设置字体利用属性面板，也可以实现对字符字体的设置。打开属性面板上的字体列表，选择相应字体项即可。3.3.2设置字号字号指的是字体的大小，它没有一个绝对的大小标准，其大小只是相对于默认字体而言。例如，1号字和2号字，比默认字体要小一些，而4号字和5号字，比默认字体要大一些。3.3.3添加字体颜色3.3.4设定字体样式3.4创建项目列表要使用现有的项目列表，请执行如下步骤：1．选中要转换为项目列表的所有段落。2．单击“属性”面板上的“项目列表”按钮或“编号列表”按钮；也可以单击“文本”→“列表”菜单项，选择相应的“无序列表”、“有序列表”菜单项。3．这时被选中的段落文字就被转换为项目列表的形式。3.5使用CSS3.5.1CSS基础知识CSS是CascadingStyleSheet的缩写，可以译为层叠样式表或级联样式表。CSS是一个辅助HTML设计的新特性，能够保持整个HTML的统一外观。使用CSS可以在设置文本之前，指定整个文本的属性，比如颜色、字体、大小等，即可获得统一的外观。如读者想让链接文字在未单击时是蓝色的，当鼠标移上去后字变成红色且有下划线，这就是一种风格。通过设置CSS，可以统一地控制HTML中各标志的显示属性。它将对布局、字体、颜色、背景和其他图文效果实现更加精确的控制。通过只修改一个文件就可以改变所有网页的外观和格式，保证在所有浏览器和平台之间的兼容性，拥有更少的编码、更少的页数和更快的下载速度。3.5.2编辑已有CSS编辑已有CSS的具体操作如下。1．打开【CSS样式】面板，选择要【编辑】的样式。2．单击CSS样式面板右下角的【编辑样式】按钮，打开【编辑样式】列表3.5.3删除样式删除某个样式的操作如下。1．在【CSS样式】面板中，选中要删除的样式。2．单击【CSS样式】面板右下角的【删除样式】按钮，或是从面板菜单中选择【删除命令】。3．这时样式即被删除，同时从样式列表中消失。第四章表格技术了解表格的组成及各项参数的含义熟练掌握表格的创建、编辑过程掌握表格的基本操作熟练掌握表格的宽度、边框、背景色和背景图像的设置本章内容概览4.1创建表格及表格对象4.1.1创建表格4.1.2添加表格对象4.2设置表格4.2.1选取表格元素4.2.2自动套用表格格式4.2.3排序表格4.3设置单元格4.3.1对齐单元格内容4.3.2设置单元格背景4.4表格的基本操作4.4.1添加行与列4.4.2调整表格4.4.3分割单元格4.4.4合并单元格4.4.5删除单元格内容4.5课堂小实例4.1创建表格及表格对象虽然我们上网浏览网页时没有看到什么表格，但是许多网页设计的排版实际上都是采用隐藏边框的表格来实现的。表格化的页面在不同系统、不同分辨率的浏览器里都能显示出原有的布局和对齐。如图所示网页就是利用表格进行布局的页面效果。4.1创建表格及表格对象4.1.1创建表格4.1.2添加表格对象1.添加文本2.插入其他对象在表格里不仅可以输入文本，还可以插入表格（嵌套表格）、图像等对象。4.2设置表格4.2.1选取表格元素选取表格元素包括选取整个表格、行、列、连续范围内的单元格。4.2.2自动套用表格格式命令-格式化表格4.3设置单元格4.3.1对齐单元格内容4.3.2设置单元格背景4.4表格的基本操作4.4.1添加行与列4.4.2调整表格4.4.3分割单元格4.4.4合并单元格4.4.5删除单元格内容4.5课堂小实例第5章网页中的图像处理了解GIF、PNG和JPEG三种图像格式的异同点和使用环境。掌握在Dreamweaver中使用图像的一些基本方法和技巧掌握编辑和设置图像的方法掌握创建图像映射和电子相册的方法5.1图像的类型图像在网页中通常起到画龙点睛的作用，它能装饰网页，表达个人的情趣和风格。但在网页上加入的图片过多，就会影响浏览的速度，导致用户失去耐心而离开页面。网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式，网页中通常使用的图像只有3种格式，即GIF、JPEG和PNG。5.1.1GIF格式网页中最常用的图像格式是GIF（GraphicalInterchangeFormat，可交换的图像格式）。经过多次修改和扩充，其功能有了很大改进。使用GIF格式的图像最多可以显示256种颜色。此格式的特点是图像文件占用磁盘空间小、支持透明背景、支持动画。5.1.2JPEG格式另一种经常使用的图像格式是JPEG（JointPhotographicExpertsGroup，直译为联合图像专家组）格式。JPEG文件的扩展名为.jpg或.jpeg。其压缩技术十分先进，使用有损压缩的方式去除冗余的图像和彩色数据，在获取极高压缩率的同时能展现十分丰富生动的图像。特别适合在网上发布照片。5.1.3PNG格式PNG（PortableNetworkGraphic，可移植网络图形）开发于1995年。它是一种新的无显示质量损耗的文件格式，同时还避免了GIF自身的一些缺点。5.2插入图像5.2.1插入普通图像要确保这种引用正确，该图像文件必须位于当前站点之内。如果不在，Dreamweaver会询问是否要把该文件复制到当前站点内的文件夹中。5.2.2插入鼠标经过图像5.3编辑图像5.3.1在Dreamweaver中编辑图像5.3.2使用外部图像编辑器编辑图像5.4设置图像属性5.4.1调整图像大小在Dreamweaver文档窗口中，可以可视化地重新调整图像大小，使布局更加合理、美观。但调整位图（如GIF、JPEG和PNG图像）的大小可能会使其变得粗糙或失真。5.4.2图像的对齐方式使用图像【属性】面板的【对齐】下拉列表中的选项，可以设置图像与页面其他元素的对齐方式。5.6课堂小实例假如通过网页介绍一个景点或用一个地图来指引一条路线。想在不同的地点链接一个页面来讲述该地点的风景或趣事奇文，那么就可以用【图像映射】来引导。浏览者可根据不同的需要，选择不同的【热区】的链接，查看自己所要了解的内容。本练习就是利用图像的【热点区域】工具，来制作图像的图像映射，讲述古代丝绸之路。