当前位置：文档之家 › WEB_网页制作教程_

WEB_网页制作教程_

  • 格式：ppt
  • 大小：404.50 KB
  • 文档页数：2

下载文档原格式

  / 2

合集下载

怎么使用dreamweaver制作网页教程 dw建站设计网页

怎么使用dreamweaver制作网页教程 dw建站设计网页

怎么使用dreamweaver制作网页教程 dw建站设计网页Dreamweaver是一款专业的网页制作软件，被广泛应用于网页设计师的日常工作中。

它是一款视觉化网页开发工具，可以轻松制作出跨越平台和浏览器限制的充满动感的网页。

在本文中，我们将为您介绍如何使用Dreamweaver制作网页。

一、定义站点1.在任意一个根目录下创建一个文件夹（例如E盘），并为其命名（例如MyWeb）。

2.打开Dreamweaver，选择“站点-新建站点”，在对话框中输入网站名称和本地根文件夹路径（E:web），然后确定。

此时再次打开Dreamweaver，会自动找到刚才设立的站点。

二、创建页面1.在本地文件夹E:\MyWeb下，右键点击空白处，选择“新建文件”，建立一个页面。

默认的文件名为untitled.htm，将其改名为index.htm。

2.双击index.htm进入该页面的编辑状态。

在标题空格里输入网页名称，按右键选页面属性，打开“页面属性”窗口。

在这里可以设置网站的标题、背景颜色或背影图像，超级链接的颜色（一般默认即可），其他都保持默认即可。

3.在页面中添加文字，可用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。

4.如果需要选取字体，则选择字体中的最后一项“编辑字体列表”，在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。

三、为页面添加图片在页面中添加图片，可用菜单“插入/图片”，选择本地图片路径，然后将其拖拽到页面中即可。

Dreamweaver是一款非常强大的网页制作软件，通过本文的教程，相信您可以轻松上手制作出精美的网页。

1、在本地文件夹E:\MyWeb下新建文件夹，用于存放图片，可更名为tu、pic或images。

2、打开对象面板，选择“插入图像”，在对话框中选择要插入的图片。

若出现对话框“是否将该文件复制到根文件夹中？”，需选择“是”，并保存到刚建立的文件夹中。

网页设计与制作案例教程-电子教案第21单元

网页设计与制作案例教程-电子教案第21单元

HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的，浏览网页时，会自动忽略文档中的换行符、回车符、空格，所以在文档中输入的回车符，并不意味着在浏览器中将看到不同的段落。
网页中所有的显示内容都应该受限于一个或多个标记，不能存在游离于标记之外的文字或图像等，以免产生错误。
对于浏览器不能分辨的标记可以忽略，不显示其中的对象。
HTML文档以纯文本形式存放，扩展名为“.html”或“.htm”。
HTML文档中标记采用“<”与“>”作为分割字符。
HTML标记及属性不区分大小写，例如<HTML>和<html>是相同的标记。
大多数HTML标记可以嵌套，但不能交叉，各层标记是全包容关系。
HTML文档一行可以书写多个标记，一个标记也可以分多行书写，不用任何续行符号，显示效果相同。
在查看HTML源代码或编写网页时，经常会遇到三种格式的HTML标记。 不带属性的双标记：<标记名称>内容</标记名称> 带有属性的双标记：<标记名称 属性名称=对应的属性值 ……>网页对象</标记名称> 单标记：<标记名称 />
HTML标记的类型
2 Dreamweaver 8的HTML源代码编辑功能
在代码窗口中<body>与</body>之间输入文字“长沙世界之窗实现总经理领导下的部门经理负责制，管理上采用垂直领导、分层管理、逐级负责。”，接着输入“<br />”
回车换行，然后输入“<img src="image/bumen1.jpg" width="690" height="303" />”。

小学五年级信息技术学习制作简单的网页

小学五年级信息技术学习制作简单的网页

小学五年级信息技术学习制作简单的网页在小学五年级的信息技术学习中，学生们将学习如何制作简单的网页。

通过掌握基本的HTML标记语言和网页设计原则，他们可以创造出具有一定交互性和美观性的网页。

下面将介绍制作简单网页的步骤和技巧。

一、准备工作1. 打开文本编辑器：在开始制作网页之前，学生需要打开一个文本编辑器，例如Windows平台上的记事本或者Mac平台上的文本编辑器等。

2. 保存文件：学生应该将文件保存在一个容易访问的地方，例如桌面或一个新建的文件夹中。

文件的后缀应为.html。

二、编写基本结构1. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body></body></html>以上是一个基本的HTML结构。

其中，<!DOCTYPE html> 表示这是一个HTML5文件，<html>标签是HTML文档的根元素，<head>标签用于放置与网页相关的元数据，<meta charset="UTF-8">定义了网页的字符编码，<title>标签用于定义网页的标题，<body>标签包裹了网页的主要内容。

三、添加网页内容在<body>标签中，可以添加各种网页内容，例如文字、图片、链接等。

1. 文字<h1>欢迎来到我的网页</h1><p>这是我第一个制作的网页，非常兴奋！</p>使用<h1>标签可以定义一级标题，<p>标签可以定义段落。

学生可以根据需要添加更多的标题和段落内容。

2. 图片<img src="图片的URL或路径" alt="图片描述">使用<img>标签可以插入图片。

网页设计教程文字和图片

网页设计教程文字和图片

网页设计教程第一章网页制作基础知识1.1 认识网页与网站1.1.1 网页和网站1．网页网页（Web page）是一个文件，它存放在某一部与互联网相连的计算机中，如图1-1所示。

2．网站网站（Website）是用于展示特定内容的相关网页的集合。

3．首页首页是进入某个网站的入口网页，即打开网站后看到的第一个页面，大多数作为首页的文件名是index和default加上扩展名。

1.1.2 网页构成元素虽然网页的外在表现形式多种多样，但构成网页的基本元素却是大体相同，一般包括文本、图像、超链接、表单、动画、音频和视频等，如图1-2所示。

1．文本和图像文本和图像是网页中最基本的构成元素。

2．超链接超链接是指超文本内由一文件连接至另一文件的连结。

当用户单击超链接时，其指向的目标内容将显示在用户的浏览器中。

3．表单表单通常用来收集信息或实现一定的互交效果，其主要功能是收集用户在浏览器中输入的信息，然后将这些信息发送到目的端。

4．动画为了吸引浏览者的眼球，通常网页中的都包含一定的动画效果，常见的有GIF图像动画和Flash动画。

5．音频和视频根据实际需要，网页中还会添加音频和视频来丰富页面效果，常见的音频格式为MP3，视频格式为FLV。

1.1.3 网页制作的工作环境1．Adobe Dreamweaver2．Adobe Photoshop3．Adobe Flash1.2 如何设计网页1.2.1 网页设计基本原则网站设计制作的优劣直接关系到门户网站的外在形象和访问者的使用效率，以下是一些在网站设计中应注意的基本原则。

（1）明确网站目标和用户需求。

（2）主题鲜明。

（3）注重布局设计。

（4）避免滥用技术。

（5）及时更新维护。

1.2.2 设计风格与颜色搭配1．风格定位风格即网站的特点，指的是浏览者对网站内容和形式的直观感受，所透露出来的是设计者的文化品位，图1-3所示的是卡通风格的网站。

网站的风格定位可从以下几方面考虑：第一，确保网页界面有较强的一致性，使网站形成统一的风格界面，这里的一致性包括字体、标题、图像、背景颜色和注脚等第二，确保网页界面美观、简洁，易于访问。

WEB_网页制作教程_

WEB_网页制作教程_

普通静态网页的特点和工作原理
1、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 3、 、 、 、 、 、 、 、 H TM L 、、、、、、、、
2、 、 、 、 、 、 、 、 、 、 、 、 、 、 、
相关网络术语
• 主机IP地址：
IP地址是Internet上主机的数字式标识符。给某个用户分 配一个固定的IP地址,他每次连入Internet都从这个地址进 入，这种静态IP地址的优点是能使别的用户访问他,所以可 以在自己的计算机上建立服务器。
• 导航栏的制作：表格+文字+图形
七
页面布局 —表格的运用
表格作用
• 最强大的主页布局工具，既完美解决所有静态主页图文布 局，同时也符合低端设计的原则（对比layer） • 表格中可导入的元素多种多样： 任何一种主页元素，也包含表格本身，即可以实现表格的 嵌套 • 表格的主要功能： 表格化数据、设计页面分栏、定位文本和图像等 • 重新理解表格： 不仅仅是表格化数据的载体，表现方式多样化 • 对比word里面的表格—— 不具有统计计算功能；支持嵌套；插入元素更多样
打开文件及特殊文本处理
• 通过文件 > 打开命令
在文件面板站点文件夹中里找到相应文件，双击 打开
• 复制word文件的内容到网页：
要注意祛除word本身所带的各种控制符项，一般 情况下，可直接复制、粘帖。特殊情况下，可通 过二次粘贴——先经过记事本，再粘贴至网页文 件或者通过DW的选择性粘帖功能进行
2.
3.
二
Dreamweaver初探
DW MX安装和界面介绍
• 软件校内下载
现代教育技术部主页>网络资源>软件下载>网络工具>网页编辑 /test/upload/show.asp?no=15

网页设计与制作教程——Web前端开发(第6版)课件第9章 JavaScript事件处理9.3

网页设计与制作教程——Web前端开发(第6版)课件第9章 JavaScript事件处理9.3

9.3 mouse事件
常用的鼠标事件见表9-5。
9.3 mouse事件
mouse事件的语法格式有下面三种： HTML中： <element on事件="myScript"> JavaScript中： object.on事件=function(){ myScript }; JavaScript中使用addEventListener()方法： object.addEventListener("事件", myScript, false);
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第9章 JavaScript事件处理
9.3 mouse事件
本章介绍JavaScrip的BOM对象和操作，DOM对象和操作。
目录
第9章 JavaScript事件处理 9.1 事件概述 9.2 window事件 9.3 mouse事件 9.4 keyboard事件 9.5 form事件 9.6 事件捕捉与事件冒泡 习题9
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一节
9.3 mouse事件
9.3.1 click事件 【例9-11】本例鼠标单击页面区域，显示鼠标在浏览器中的坐标位置；单击图片 弹出一个消息框。本例文件9-11.html在浏览器中显示如图9-8所示。
9.3 mouse事件
9.3.2 dblclick事件 【例9-12】本例代码是段落的双击事件，鼠标双击段落文字，将触发事件函数，在段 落下面显示“Hello World”。本例文件9-12.html在浏览器中显示如图9-9所示。
9.3 mouse事件
9.3.3 mouseover和mouseout事件 1. mouseover事件

怎样制作自己的网页

怎样制作自己的网页要制作自己的网页，可以按照以下步骤进行：1. 选择一个网页编辑工具：网页编辑工具可以帮助你创建和编辑网页，其中一些流行的工具包括Adobe Dreamweaver、Sublime T ext、Visual Studio Code 或者简化版的网页生成器如Wix、WordPress等。

选择一个适合自己需求和技能水平的工具。

2. 设计你的网页：在开始编写代码之前，先要确定网页的整体设计和布局。

考虑颜色、字体、图片、导航栏等元素，确保网页美观且易于导航。

3. 编写HTML代码：使用HTML(HyperText Markup Language)来创建网页的结构和内容。

HTML是一种标记语言，通过使用不同的标签和元素来定义页面的各个部分。

编写HTML代码来描述网页的结构，包括标题、段落、列表、图像、链接等。

4. 样式化网页：使用CSS（Cascading Style Sheets）来对网页进行样式化，如字体、颜色、边距和布局等。

CSS让你能通过样式表统一管理网页的外观，将CSS代码应用到你的HTML结构中。

5. 添加交互功能：使用JavaScript来为你的网页添加动态和交互功能，如响应用户的点击或提交表单。

通过编写JavaScript代码，你可以实现各种操作和功能，如验证表单、创建动画效果等。

6. 调试和测试：在网页制作完成后，进行调试和测试以确保网页在不同设备和浏览器上正确显示。

检查和修复任何错误或问题，并进行适当的优化和调整。

7. 上线发布：当你满意你的网页后，你可以选择将其上传到一个Web服务器上，以便通过互联网访问。

你可以使用FTP（文件传输协议）工具将文件上传到指定的服务器上，或者使用网页生成器提供的托管服务。

需要指出的是，学习和掌握HTML、CSS和JavaScript需要时间和实践。

你可以通过在线教程、网上课程或书籍等资源来提高你的技能，并通过不断实践和尝试来完善你的网页制作能力。

网页制作教程第3章



3.2.2 插入图像
(2) 在【选择图像源文 对话框中点选【 件】对话框中点选【文 件系统】单选钮， 件系统】单选钮，在 ch3】 【ch3】文件夹的列表 框中选择要插入的图像 文件，单击【确定】 文件，单击【确定】按 如图3 所示。 钮，如图3-6所示。弹 出【图像标签辅助功能 属性】对话框。 属性】对话框。

3.1.1 添加文本
2. 插入空格 若要在文本中插入空格，可执行下列操作之一。 在菜单栏中选择【插入记录】→【HTML】→ 【特殊字符】→【不换行空格】命令。 按<Ctrl>+<Shift>+<空格>组合键。 在【插入】工具栏的【文本】选项卡中，选 择【字符】下拉列表框中的【不换行空格】命令。
3.1 添 加 文 本
3.1.1 添加文本 3.1.2 设置文本格式

3.1.1 添加文本
1. 插入文字 若要将文字添加到网页文档中，可执行下列操 作之一。 ◆直接在【文档】窗口中输入文字。 ◆从其他应用程序中复制文本，切换到 Dreamweaver，将插入点定位在【文档】窗口的【设 计】视图中，然后在菜单栏中选择【编辑】→【粘 贴】命令。 ◆在菜单栏中选择【编辑】→【选择性粘贴】命 令，弹出【选择性粘贴】对话框，然后选择需要的 选项。

3.3 添 加 声 音
3.3.1 适合网页使用的声音格式 3.3.2 链接到声音文件 3.3.3 嵌入声音文件

3.3.1 适合网页使用的声音格式
MIDI格式 1. MIDI格式 MIDI是 乐器数字接口” MIDI是“乐器数字接口”(Musical Instrument Digital Interface)的简称 其扩展名为MID MIDI记录的不是声音本 的简称， MID。 Interface)的简称，其扩展名为MID。MIDI记录的不是声音本 而是将每个音符记录为一个数字， 身，而是将每个音符记录为一个数字，从而形成声音文件的格 MIDI格式文件声音效果的好与差 格式文件声音效果的好与差， 式。MIDI格式文件声音效果的好与差，与用户计算机声卡质量 有直接关系。很小的MIDI MIDI格式文件就可以提供较长时间的声音 有直接关系。很小的MIDI格式文件就可以提供较长时间的声音 剪辑。 剪辑。 MP3格式 2. MP3格式 MP3格式 是运动图像专家组音频第3 格式， MP3格式，是运动图像专家组音频第3层(Motion Picture Layer-3)，或称为MPEG音频第3 MPEG音频第 Experts Group Audio Layer-3)，或称为MPEG音频第3层的一 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD mp3文件 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD 音乐相媲美。MP3技术用户可以对文件进行 流式处理” 技术用户可以对文件进行“ 音乐相媲美。MP3技术用户可以对文件进行“流式处理”，以 便用户不必等待整个文件下载完成即可收听该文件。 便用户不必等待整个文件下载完成即可收听该文件。

网页设计与制作教程

网页设计与制作教程目录第1章网页设计与制作概述1.1网络的基础知识1.1.1 TCP/IP协议1.1.2 IP地址1.1.3域名地址1.1.4统一资源定位器1.2图形图像的基础知识1.2.1位图与矢量图1.2.2常用的图像格式1.2.3常用的图形格式1.3网页的布局知识1.3.1网页的基本结构1.3.2页面的布局原则和模式1.4网页的色彩应用1.4.1色彩属性与象征意义1.4.2网页色彩的规划1.5 HTML基础1.5.1 HTML语言的基本结构1.5.2 HTML语言的基本单位1.5.3 HTML标记符基础1.5.4文本格式标记符1.5.5超标记符1.5.6图像标记符1.5.7表格标记符1.5.7框架标记符1.5.8表单标记符1.5.9滚动条1.6 CSS技术1.6.1 什么是CSS1.6.2 在网页中使用CSS1.6.3 CSS 样式定义1.6.4 CSS 属性1.6.5 CSS 过滤器简介1.7 JavaScript技术1.7.1 JavaScript脚本嵌入HTML文档的方法1.7.2使用客户端脚本习题一第2章DreamweaverCS6网页设计基础2.1 Dreamweaver的工作环境2.2构建Dreamweaver站点2.2.1创建本地站点2.2.2管理本地站点2.2.3创建和管理本地站点中文件2.3网页文本编辑2.3.1正文文本的添加2.3.2文本格式的设置2.3.3页面属性的设置2.3.4插入特殊字符2.3.5插入空格2.4 CSS样式设置2.4.1创建CSS规则2.4.2样式表2.5制作一个简单网页2.6 Dreamweaver工作环境的设置习题二第3章图像与多媒体3.1图像的应用3.1.1在网页中插入图像3.1.2设置图像属性3.2创建鼠标经过图像3.3图像占位符与属性的设置3.4插入flash动画3.5音频的应用3.5.1音频文件格式3.5.2网页中添加音频3.6视频的应用习题三第4章超级与其应用4.1超概述4.2创建文本超4.3创建图像超4.4创建电子4.5空习题四第5章网页的布局5.1表格的应用5.1.1插入表格5.1.2表格的嵌套5.2表格编辑与属性设置5.2.1文档中的设置表格格式优先顺序5.2.2选择表格与其它元素5.2.3设置表格属性5.2.4设置单元格、行或列属性5.2.5编辑单元格、行或列5.3应用APDiv布局页面5.4APDiv与表格的相互转换.5.4.1将APDiv转换为表格5.4.2表格转换为APDiv5.5框架的应用5.5.1创建框架集5.5.2查看和设置框架集属性5.5.3查看和设置框架属性5.5.4设置框架中显示的网页5.5.5嵌套的框架集5.5.6框架的编辑习题五第6章表单的应用6.1创建表单6.2添加表单对象6.2.1插入文本域6.2.2插入单选按钮/单选按钮组6.2.3插入复选框/复选框组6.2.4插入选择框〔列表/菜单〕6.2.5插入文件域6.2.6插入按钮6.3表单的提交6.4应用表格布局表单实例习题六第7章行为与脚本语言与模板和库的应用7.1行为在网页中的应用7.1.1行为、事件、动作7.1.2添加行为7.1.3Dreamweaver内置事件7.2 JavaScript脚本7.2.1 JavaScript脚本概述7.2.2 JavaScript脚本语言特效7.3创建与应用模板7.3.1创建模板7.3.2使用模板创建新网页7.3.3修改模板7.3.4文档从模板中分离7.3.5设置模板的首选参数7.4创建与应用库项目7.4.1创建库7.4.2在网页中应用库项目7.4.3编辑并更新库页面7.4.4将库项目从源文件中分离习题七第8章站点的测试8.1站点的测试8.1.1检查浏览器兼容性8.1.2.的检查与修正8.1.3不同分辨率下的测试8.1.4运行站点报告8.1.5内容的编辑8.2创建远程站点8.2.1设置远程服务器8.2.2连接远程站点8.3文件的上传和下载8.3.1文件的上传8.3.2下载文件8.3.3文件的取出与存回习题八第9章FireworksCS6基础与其在网页制作中的应用9.1 FireworksCS6基础9.1.1认识FireworksCS6工作区9.1.2文档管理9.1.3使用布局工具9.1.4各种面板9.1.5常用工具9.2绘制并编辑矢量图形9.2.1绘制与编辑基本形状9.2.2绘制与编辑自动形状9.2.3自由变形形状9.2.4复合形状9.3创建并修饰位图图像9.3.1创建位图图像9.3.2编辑位图图像9.3.3修饰位图9.4创建并编辑文本9.4.1创建文本9.4.2选择文本9.4.3编辑文本9.5应用笔触和填充9.5.1应用颜色工具9.5.2应用和更改笔触9.5.3应用和更改填充9.5.4在笔触和填充中添加纹理9.5.5应用样式9.6应用动态滤镜9.6.1应用动态滤镜9.6.2调整动态滤镜9.7使用切片和热点9.7.1使用切片9.7.2使用热点习题九第10章FlashCS6基本操作与在网页制作中的应用10.1 FlashCS6的基本操作10.1.1 FlashCS6的工作界面10.1.2 Flash文档的创建、打开、保存10.1.3面板组的使用10.2时间轴的使用10.2.1图层10.2.2帧10.2.3播放头10.2.4场景10.3元件、实例和库资源10.3.1元件的创建10.3.2实例10.3.3库面板以与元件与实例的关系10.4创建各种动画10.4.1遮罩层动画10.4.2引导层动画10.4.3形状补间动画10.4.4逐帧动画10.5在动画中添加声音10.6文本的使用10.6.1传统文本字段10.6.2使用文本布局框架(TLF)文本10.7动作面板的使用10.7.1动作面板的介绍10.7.2动作脚本的基本元素10.8 ActionScript基本语句10.8.1时间轴控制命令10.8.2浏览器/网络命令10.9动作的应用10.10测试发布Flash动画10.10.1制作过程中的测试10.10.2测试方法10.10.3下载模拟测试10.10.4发布影片10.10.5优化Flash文档习题十第11章PhotoshopCS6基本操作与在网页设计中的应用11.1 PhotoshopCS6基本操作11.1.1 PhotoshopCS6的工作界面11.1.2文件操作11.1.3环境设置11.1.4基本概念11.1.5选区的创建与编辑11.1.6利用画笔类工具绘制图像11.1.7利用形状绘制工具绘制图像11.1.8图像修饰工具的应用11.1.9调色命令的高级应用11.1.10图层样式11.1.11文字图层11.1.12滤镜11.2页面设计与制作11.2.1整体页面的制作11.2.2制作导航栏11.2.3制作网页内容板块11.2.4制作网页页脚习题十一第12章网页制作工具集成与网页制作综合实训12.1 Fireworks与Dreamweaver的集成12.2使用Photoshop和Dreamweaver12.2.1 Dreamweaver中处理Photoshop文件的工作流程12.2.2创建智能对象12.2.3更新智能对象12.3 Dreamweaver与Flash的集成12.4网页制作综合实训习题十二。

网页设计与制作教程——Web前端开发(第6版)课件第1章 HTML 5概述1.4

《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第1章 HTML 5概述
1.4 实训——制作社区网版权信息
HTM是制作网页的基 础语言，是初学者必学的内容。
目录
第1章 HTML5概述
1.1 Web的基本概念 1.2 HTML5的基本结构和语法规则 1.3 编辑HTML文件 1.4 实训——制作社区网版权信息 习题1
1.4 实训——制作社区网版权信息
习题1
1．简述HTML5文档的基本结构及语法规范。 2．使用记事本创建一个JD页脚的版权信息，如图1-12所示（可到 复制需要的文字）。
《网页设计与制作教程：Web前端开发（第6版）》 刘瑞新主编 配套资源
祝贺你有了良好的开端.
1.4 实训——制作社区网版权信息
【实训1-1】制作社区网的页脚版权信息，页面中包括版权符号、空格，本例文件pt1-1.html在浏览 器中显示的效果，如图1-11所示。代码如下：
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>社区网首页</title>
</head> <body>
<p style="font-size:12px;text-align:center">主办单位名称: 社区研究会 &nbsp;&nbsp;网站备案号: 京ICP备10006066号&nbsp;&nbsp;营业执照经营许可证编号:
京ICP证160666号&nbsp;&nbsp;京公网安备: 11011402010666号</p> <p style="font-size:12px;text-align:center">Copyright &copy; 2020 All Rights Reserved. 社区网版权所有</p> </body> </html>
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

• 实用的网络技术和个人技能
为将来可能的另条个人出路进行技术积累。
• 一些人对网页设计的错误认识
MS office master VS. homepage master Homepage worker VS. web designer
对Web Designer的简单要求
• 熟练运用相关软件，掌握编写主页的主流软件用法。 • 了解HTML语言，学习使用CSS，JavaScript乃至XML动态主页语言; • 了解CGI技术和网络数据库技术，学习使用PHP，ASP等主流动态网 页制作工具和语言; • 掌握图文编排技术，熟练运用一种以上的图象处理软件； • 具有相当的文字功底和文稿编辑能力； • 具有超凡的想象力和创造力； • 最后要付出大量的努力。 • 涉及软件：DreamWeaver MX, Photoshop, Macromedia Flash MX, CuteFtp
其他
• • • • • 特殊字符插入 特殊格式：项目编号 水平线 文字对齐方式及段落格式的设定 回车和空格问题 – 段内换行，段落换行 – &nbsp; 全角空格
五
操作与应用 —插入图片和Flash
预备知识：图片种类和特点
• 图像分类 – 像素点阵类图像，如BMP，TIFF等 特点：图像包含色彩越多，尺寸越大，则文件大小也越大；图像 增大，则图像精度降低 – 矢量图像，如WMF等 特点：文件大小与图形复杂程度有关，与具体图形大小无关，图 像外观增大也不影响精度； • 压缩格式: JPEG, GIF, PNG – jpeg保留图像色彩，损失图像精度；gif保留图像精度，损失颜色 – 人物、风景等高色彩图片宜保存为jpeg，卡通等图片宜保存为gif – 特殊介绍：gif 87a, 89a--> 透明图、交错图、动画 – PNG功能全面，但尺寸很大 • Swf文件特点： 动画更灵活，有交互功能，支持网络流式传输，优势明显
简单设定
• ―编辑”菜单的“首选参数”选项的设定： – “常规” 编辑选项：使用CSS而不是Html代码不选中 （因为会整体运用CSS设定） – 其他会偶尔改动默认设定的选项： “字体” 编辑选项、在浏览器中预览、不可见元素、 验证程序等 • 隐藏表格宽度显示 方便操作
三
操作与应用 —基础操作篇
问题： 您将如何安排时间和计划？ 重要原则： 尽量体现内容形式的完美整合
网站构划步骤
1. 明确建站目的，确定原则，确定规模，确定形式和风 格。原则：内容和形式统一。 高校主页提倡风格：宜静雅，忌花哨。 内容第一，功能第二，形式第三。 分析网站的浏览者群体 重要原则：从技术上兼顾最多可能的受众。 确定站点结构 • 建立目录 • 确定文件 • 安排素材 • 风格一致性
• 了解动态网页维护的基本知识
• 了解中、高级网页技术： Flash, Css, JavaScript 特效等
网页设计技术的意义
• 网络时代的技术需要
网站是广告的拓展领域，是知识信息的储蓄平台，任何单位都将网络 平台做为业务信息的重要窗口加以利用
• 与他人交流的窗口
个人主页对比公网上的个人blog: 能进行更充分的个人定制，个性化
相关网络知识
• 域名
大医域名： 学校内主页服务器有:www,home,inner
• 主页浏览与主页服务器之间的关系
经过服务器发布的网站才能是真正意义上的供人浏览的网站。
• 主页发布原理
服务器安装了默认的主页发布程序，网站用户事先将制作 完成的网站上传到服务器指定目录下。服务器正常工作时， 当接收到某客户端主页浏览请求时，按目录关系和相关设 定，将某目录下的相关文件数据返回给客户端浏览器，被 浏览器解读后加以显示，即完成了主页浏览。
链接路径
• URL（Uniform Ralative Location)统一资源定位符 每个网页都有的唯一的地址 • 绝对路径：完整的URL e.g. /index.htm 做外部链接时使用 • 相对路径：省略两个文档相同的URL部分 注意同文件夹、子（父）文件夹文件链接时的写法 e.g. ../index.htm; image/logo.jpg 根相对路径：e.g. /image/newpic.htm • 同一网站内部链接注意使用相对路径和根相对路径，不要 使用绝对路径
打开文件及特殊文本处理
• 通过文件 > 打开命令
在文件面板站点文件夹中里找到相应文件，双击 打开
• 复制word文件的内容到网页：
要注意祛除word本身所带的各种控制符项，一般 情况下，可直接复制、粘帖。特殊情况下，可通 过二次粘贴——先经过记事本，再粘贴至网页文 件或者通过DW的选择性粘帖功能进行
插入图片实际应用问题
• 插入图像占位符 为将来插入图像做准备 • 影像地图链接 详见链接章节
六
操作与应用 —超链接的运用
链接类型
• 普通链接 – 外部链接：不同网站内指向链接 – 内部链接：同一网站内不同网页间链接 – 锚点链接：链接到同一网页内某位置 • 电子邮件超链接 • 创建影像地图 • 翻屏原则 纵向翻屏不应该超过3-5页；尽量避免水平向滚动翻屏 当网页文本容量超过2个滚屏时，应该考虑运用超链接或 者进行重新的网页拆分和规划
2.
3.
二
Dreamweaver初探
DW MX安装和界面介绍
• 软件校内下载
现代教育技术部主页>网络资源>软件下载>网络工具>网页编辑 /test/upload/show.asp?no=15
• 软件安装 • 操作界面窗口组成： – Welcome窗口（首次弹出） – 插入栏 – 文件窗口 – 属性检查器 – 面板组
普通静态网页的特点和工作原理
1、用户向服务器提交网页浏览的请求
3、浏览器将收到的HTML 文件显示到屏幕上
2、服务器将网页文件传送给浏览器
相关网络术语
• 主机IP地址：
IP地址是Internet上主机的数字式标识符。给某个用户分 配一个固定的IP地址,他每次连入Internet都从这个地址进 入，这种静态IP地址的优点是能使别的用户访问他,所以可 以在自己的计算机上建立服务器。
新建文件
• 新建文件 – 第一种方法：通过 文件> 新建命令，然后再保存，这 种方法可新建出各种类型文件 常用：基本页(html),框架,模版,CSS文件,动态页 (ASP,PHP,JSP) – 第二种方法：通过文件面板新建.htm文件 • 更常用的静态网页的编辑方式，即静态主页更新维护增加 新页面的方式：对已有文件进行复制、粘贴，然后对新文 件更名，再修改其内容。特点：保留原有文件的图片，整 体框架格局等，只改变文字和链接
前 言
课程说明
• 课程目的：
–使参加学习的人员掌握基本的网页制作维护技能，自 主运用相关软件进行网页维护。
• 学习建议：
–学习前提：熟练进行基本的文件操作，熟练使用 Office和简单常用的工具软件 –参阅：网上有相关教程、任何一本Dreamweaver学习书 籍
学习内容
• 网页制作初步： 运用DreamweaverMX，学习文字录入编辑，段落编排，表格运用， 图片插入编辑，超级链接，多媒体素材插入编辑，框架构成；简单了 解Html • 图形处理初步： 学会运用Photoshop对图片做简单的处理 • 学习使用相关工具软件： CuteFtp, Acdsee, et al
认识表格
• 行，列，单元格 HTML标识符 table, tr, td （没有列的概念） • 行（ Row ） 列（Columns） 单元格填充（Cell padding）单元格内容与边线的距离 单元格间距（Cell spacing）单元格之间的距离 表格宽度（width) 可用像素数和百分比两种方法表示 表格边框（border）表格线的像素宽度，为三维显示效果
预备知识：图片种类和特点
• 介绍色彩学简单知识 – 颜色深度：位；加强色16位； – 网络安全色：216色（兼顾PC和Mac机，体现兼顾受众 的原则） • 使用图象重要原则： 减少尺寸，限制颜色，保持低分辨率，使用重复图象 ——在保持图像满意精度内，尽可能保持图象小
插入图片实际应用问题
• 属性设定问题 – 单纯改变图片外观大小，不影响图片文件实际大小尺 寸 – 设定外框宽度 – 对齐方式 – 替代图替代文字（考虑受众的人性化属性） – 缩略图（可用相关工具软件自己制作，如PS, ACDsee; 缩略图大小可以自定一个统一的规格，如125*94） – 图文间距； – 图片注意保存到网页目录下
文件的命名原则和层次管理
• 主页文件（夹）名称约定 – 不能用中文和不合文件名规范的名称； – 首页必须为index.htm或者default.htm等默认首页文件 名 • 文件层次管理 – 文件命名经验：对不同内容的文件名称的起名方法: 多 利用下划线，原则是便于记忆维护。 book_admin.htm, update_030612.htm – 文件层次管理：不同栏目设立不同文件夹；利用文件 名区分；图片和文件一般要分开，单独设立图片目录 images
站点建立
• 新建站点 – 通过资源管理器先在硬盘建立站点根目录 – 利用文件面板的管理站点窗口建立一个站点 可采用基本模式，利用向导完成设定；也可以用高级 模式。具体：需要设定站点名称、本地根文件夹。其 他项可暂时采用默认设定。 – Ftp设定（也可以使用专门的ftp工具进行将来的ftp文件 上传管理，推荐软件如cuteftp等） • 编辑站点 • 删除编辑站点列表
链接原则
• 重要原则 – 好的网站要有完善、发达的导航系统，且要明确； – 所有链接必须测试可用，准确； – “能进能出，能上能下……‖ • 管理超级链接：更新主要工作之一 检查可能出错的地方如：不存在的文件，特别是外部站点 不存在的文件链接
导航栏：特殊的链接体
• 导航对网站意义： 明示网站结构、方便访客浏览 • 导航栏相对于普通链接的特别之处： 同一位置，外观效果一致