网页设计和制作_第1页
网页设计和制作_第2页
网页设计和制作_第3页
网页设计和制作_第4页
网页设计和制作_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作第1章网站开发基础网站开发流程网站整体策划：（1）目标用户定位和网站的主题定位（2）网站整体风格创意设计（3）网页的色彩搭配（4）网站的层次结构和链式结构（5）版面布局设计设计和制作素材：搜集的素材一样包括跟主题有关的文字图片资料；一些优秀的页面风格；开放的源代码。设计和制作的素材包括网站的Log。、Banner、背景图片、列表图表、横幅广告等。成立站点：安装和配置IIS；在Dreamweaver中创建站点。4•制作网页：创建CSS样式；制作网站首页；制作网站的其他页面；制作超链接5.测试和发布网站：发布网站前必需要测试网站，测试网页内容、链接的正确性和在不同阅读器中的兼容性等。发布网站先申请站点域名和租用效劳器空间，然后通过FTP工具把网站上传到效劳器上。1.4HTML的概念：HTML是一种用来制作超文本文档的简单标记性语言。.3HTML标签标签表示：＜标签名称属性＞＜标签〉元素＜/标签〉，标签的作用范围:〈标签〉f〈标签〉.例：〈h2〉demo〈h2〉，即将demo这段文本以2号题目来显示，这对标签之外的文本不受这组标签阻碍。〈标签属性名=”属性值”〉元素〈/标签〉一个标签能够包括多个属性属性之间无前后顺序，用空格分开。例：〈bodybackground二””text二”red”＞hello＜/body＞,其中background属性用来表示HTML文档的背景图片，tect属性用来表示文本的颜色。〈标签〉空标签：标签单独显现，只有开始标签而没有终止标签。（1） 〈html〉和〈/html〉在最外层，表示这对标签里的代码是HTML语言。（2） 〈head〉和〈/head〉标签里是网页中的头部信息，如网页总题目，网页关键字等。无头部信息可不要这对标签（3） ＜title〉和〈/title〉.在〈head〉和〈/head〉这对双标签的中间还包括着〈title〉和〈/title〉这对标签，网页题目的内容，题目出此刻IE阅读器窗口。考点：n八、、・<p>和</卩>.文本段落的标签。<br>:换行符。<br>标签是空标签（它没有终止标签，因此这是错误的:〈br〉〈/br〉）。快捷键：F12预览网页； Shift+Enter分段（行间距小）；前景色、背景色的调整：前景色是alt+del背景色是ctrl+del前后互换是XHTML文档的大体结构p18-p19<html><head>〈title>—个简单的网页〈/title〉（头部信息）</head>〈/body〉（网页内容：文本、链接、图像、动画等）<h1>欢迎光临〈/h1>〈br>〈frontsize二”5”face=”华文行楷”color二”red”>这是我的第一个主页，欢迎大伙儿的访问！〈/front>〈/body>〈/html>Ps:去掉第6、7、8、10行是HTML的大体结构。第2章DreamweaverCS5基础2.1.2Dreamweaver软件界面P23图2-3视图模式种类及其适应情形1） 代码视图（写代码，要紧用于那个，利用Dreamweaver工具编辑网页代码），2） 拆分视图（编写代码边看视图，直观地编辑网页中的元素，又能够观看到相关的代码）3） 设计视图（可视化设计，以所见所得的方式编辑网页）第3章制作网页内容1.创建超链接的方式：给文字创建超链接；给图片创建超链接；添加email链接,mailto:（冒号后不能空格）电子邮件地址；添加空连接。2.创建超链接的途径：1） 绝对途径:是被链接文档的完整URL，包括所利用的传输协议（网页一般是：。在创建外部链接时必需利用绝对途径。2） 文档相对途径：确实是以以前文档所在位置为起点到被连接文档经由的途径。要紧用于创建内部链接。如：3） 站点根目录相对途径：是指所有途径都开始于当前站点的根目录。站点根目录相对途径以一个正斜杠开始，该正斜杠表示站点根文件夹，如/images/google.gif.移动含有根目录相对连接的文档时，不需要更改链接。新建CSS规那么选择器的类型及其特点。1类：概念的时候前面必需加点（•），格式是.XXX，能够在一个页面中挪用多次；（用于任何HTML元素）名称以“#”开头，一样中只用在网页中的一个元素上标签（从头概念HTML元素）能够实现用CSS从头概念HTML标签外观的功能。4•复合内容（基于选择的内容）：a:link 超链接的正常状态，无任何动作a:visited访问过的超链接状态a：hover鼠标指针指向超链接的状态a：active选中超链接状态第4章CSS样式表CSS样式表：内部用于当前网页内部；外部连接到多个网页上1-创建内部CSS样式表：（1） 用DW打开网页文档4.3.1.html（2） 单击“样式表”面板中的“新建CSS规那么”按钮，弹出“新建CSS规那么”对话框（3） 在“选择器类型”下拉列表当选择“类（可用于任何HTML元素）”在“选择器名称”文本框里输入要概念的CSS样式的名称.ziti,在“规那么概念”下拉列表当选择“仅限该文档”（4） 单击“确信”按钮，在“ziti的CSS规那么概念”对话框中，设置完成后，单击“确信”按钮，现在，能够在“CSS样式”面板里看到增加了一个.ziti的CSS样式或（1）执行“窗口“l〃CSS样式”命令.打开“CSS样式”面板。⑵在“CSS样式”面板中单击“新建CSS样式”按钮。在“CSS样式，面板的底部的按钮功能如下。“附加样式表”按钮:在HTML文档中链接一个外部的CSS文件。二“新建CSS样式，按钮:编辑新的CSS样式文件。“编辑样式表'按钮:编辑原有的CSS规那么。“删除CSS样式”按钮:删除选中的CSS规那么。(3)弹出“新建Css规那么”对话框。(4〕在对话框中若是设置“选择器类型'为“标签“，那么在“选择器名称”下拉列表当选择一个HTML标签，也能够直接插入那个标签。在“新建CSS规那么'对话框中能够进行如下设置。.选择器名称:用来设里新建的样式表的名称。.选择器类型:用来概念样式类型，并将其运用到特定的部份。若是选择“类”选项，要在“选择器名称”文本框中翰人自概念样式的名称，其名称能够是字母和数字的组合，若是没有输入符号“•”Dweaver会自动输入;若是选择“标签”选项，需要在“选择器名称”下拉列表当选择一个HTML标签，也能够直接摘人那个标签;若是选择“复合认”选项，需要在“选择器名称.下拉列表当选择一个选择器的类型.上海网站建设也能够直接输入一个选择器类型。.规那么概念:用来设置新建的CSS语句的位置。CSS样式依照利用方式能够分为内部样式和外部样式。若是想把CSS语句新建在网页内部•能够选择“仅限该文档”选项若是选择“复合内容”，那么在对话框中的“选择器类型”下拉列表当选择“复合内容”选项.在“选择器名称'下拉列表当选择一个选择器的类型.也能够直接输人一个选择器类型。在此选择“选择器类型'下拉列表中的“类”选项•然后在“选择器名称'文本框中输入body。由于创建的是css样式内部样式表，因此在“规那么概念”当选择“仅限该文档”。单击“确信”按钮.弹出“body的css规那么概念”对话框•在对话框中将“Font-family",设置为宋体，“font-size"设置为12像素，"Line-height"设置为200%,"Color"设置为#000000。单击“确信”按钮.在"Css样式〃面板中能够看到上海网站建设新建的样式表和属性。2.外部样式表（1） 在开始页的“新建”列表当选择CSS选项新建一个外部CSS文件，将其保留为（2） 单击“样式表”面板中的“新建CSS规那么”按钮，弹出“新建CSS规那么”对话框在“选择器类型”下拉列表当选择“类（可用于任何HTML元素）”在“选择器名称”文本框里输入要概念的CSS样式的名称.text,在“规那么概念”下拉列表当选择“仅限该文档”（3） 单击“确信”按钮，在“.text的CSS规那么概念”对话框中，设置完成后，单击“确信”按钮，现在，能够在'CSS样式”面板里看到增加了一个.text的CSS样式（4） 将上面创建的外部CSS样式表文件，连接到某个网页上，在DW中打开网页文件（5） 在“CSS样式表”面板中单击“附加样式表”弹出的“连接外部样式”对话框中的“添加选项区域中”选中“链接”按钮，然后单击阅读按钮，选择创建的外部链式表文件（6） 单击“确信”按钮，返回“链接外部链式表”对话框（7） 单击“确信”按钮，外部链式表文件就会自动连接到网页中内部样式表与外部样式表的区别第一它们都是CSS，美化修饰网页的，其中：内部样式表是写在HTML的〈head〉〈/head〉里面的，内部样式表只对当前所在的网页有效；若是很多网页需要用到一样的样式（Styles）,用外部样式表，将样式（Styles）写在一个以.css为后缀的CSS文件里，然后在每一个需要用到这些样式的网页里引用那个CSS文件即可,较方便。利用外部样式表,相关于内部样式的，有以下优势：1、样式代码能够复用。一个外部CSS文件，能够被很多网页共用。2、便于修改。若是要修改样式，只需要修改CSS文件，而不需要修改每一个网页。3、提高网页显示的速度。若是样式写在网页里，会降低网页显示的速度，若是网页引用一个CSS文件，那个CSS文件多半已经在缓存区（其它网页早已经引用过它），网页显示的速度就比较快。第5章网页布局1.利用表格进行网页布局P104-105

<tablewidth=”500”height=”200”border=”2”cellpadding=”1”<tablewidth=”500”height=”200”border=”2”cellpadding=”1”cellspacing=”1”bordercolor=”#000FF”bgcolor=”#999999”><tr>〈tdbgcolor=”#999999”〉设置单元格背景〈/td><td>灰色背景〈/td〉<td>黄色背景〈/td〉〈/tr〉〈tr〉〈td〉 〈/td〉<tdalign二”center”〉居中对齐</td><tdalign二”left”〉左对齐〈/td〉〈/tr〉〈/table〉2.〈body〉〈tablewidth=”760”boder=”0”cellspacing=”0”ceiipadding=”0”〉〈tr〉〈td〉. 〈/td〉〈td〉 〈/td〉〈td〉rowspan=”2”〉 〈/td〉〈/tr〉〈tr〉〈td〉rowspan=”2”〉 〈/td〉〈/tr〉〈tr〉〈td〉 〈/td〉〈td〉 〈/td〉〈/tr〉〈/table〉〈/body〉用表格布局网页图5-17pl05框架框架集概念了解P110框架集frameset〉〈/frameset〉框架集〈frame/〉框架能够进行拆分和删除框架集成立后是不是能够添加移动删除？5.4.2DIV+CSS布局原理、特点p123利用DIV+CSS布局网页是一种盒子模式的开发技术，通过由CSS概念的大小不易的盒子和盒子嵌套来编排网页。因为用这种方式编排的网页代码简练、更新方便，能兼容更多的阅读臾器。DIV+CSS布局原理及特点：利用div划分网页逻辑区域;利用css操纵每一个div的外观位置以实现网页布局特点。特点：本身没有样式；是块元素；通常充当容器；要区分各个div,因此常要利用id属性P123用法（2个）第8章ps调整图像色彩利用“色相/饱和度”、“替换颜色”、“匹配颜色”、“转变”调整调整图像色调p222（1） 色阶：调整图像色调的明暗度（2） 曲线：调整图像色调的明暗度比色阶更为准确、灵活（3） 色彩平稳：能够调整图像暗调区域，高光区域和中间色调区域的色彩成份，并混合各类色彩以达到色彩平稳剪切蒙版的类型和特点（1） 剪贴蒙版事实上是两个或多个有特殊关系的图层关系的总称，必需有上下了两个图层，利用下方图层中图像的形状对上层图像进行剪切，最终以下方图层中的图像的形状规定上方图层中图像的范围，从而取得丰硕的成效。（2） 图层蒙版是为图层添加的遮罩，起到隐藏或显示图像的作用，只能用介于黑白两个色间的256级灰度色画图。用黑色画图能够隐藏图像，白色画图能够显示图像，灰度色画图能够使本层图像呈现假设隐假设现的朦胧成效（3） 矢量蒙版能够操纵或隐藏图层区域，能创建具有锐利边缘的蒙版，是由铅笔或形状工具利用途径方式创建的，而途径能够利用多种工具进行编辑，因此矢量蒙版常常用来布局对象抠图：规那么的：矩形选框，椭圆选框，单行选框，单列选框；不规那么的:套索，多边形套索，磁性套索，快速选择，魔棒工具Flash快捷键：保留Ctrl+S 测试影片Ctrl+Enter 修改“丨”组合”Ctrl+G修改“丨”分离文本Ctrl+B复制Ctrl+C 粘贴Ctrl+V 插入一般帧F5插入关键帧F6 插入空白帧F7修改丨转换为元件F8 打开颜色面板Shift+F9是对象按原先的长度比以中心点为基准缩小和放大Alt+Shift 文件保留Ctrl+sShift开始帧+选取持续帧的最后一帧 Ctrl能够选取多个不持续的帧Ctrl同时选中要导入的多个图像文件Shift同时选择两个

人人文库> 全部分类> 行业资料 > 各类标准

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论