网页设计基础知识.ppt

1、1，安徽省财经大学网页制作基础，网页制作基础教程讲座：卫理林电子邮件：Wei _，第一章网页设计基础，3，第一章网页设计基础，1.1网页制作基础1.2 DreamWeaver介面简介创建1.3站点创建1.3网页文件的基本任务1.4设置页面属性1.5练习创建简单的网页站点网页制作基础知识：网页和网站HTML基础知识web图像的基础知识网站设计基础流程，第5部分，网页的概念，网页是用超文本识别语(HTML)或其他语言编写的，通过IE浏览器编译后，用户可以从中获取信息的页面。 也称为网页，可以包括多种网页元素，如文本、图像、西餐、动画和超连结。网页是显示各种信息的载体。6，网站概念，网站一个或多个网

2、页的集合。从广义上说，网站是在网页牙齿网络上发布的，可以通过浏览器在网络上访问的页面。网站是通过超链接连接的一些网页的集合。门户网站功能网站专业网站个人网站，7，网页分类，按位置分类，网页网站期间按位置将网页分为主页和子页。8，按网页分类，表达分类按网页表达分类的网页静态网页和动态网页。9、网页中的公用术语、全球资讯网(www)浏览器统一资源定位器(URL)超文本传输协议(HTTP) IP地址域名超链接超文本置标语言(HTML)、10、全球资讯网(www)html格式的档案)。11，浏览器和浏览器是用于读取网页中信息的软件工具。就像使用电脑必须有操作系统一样。Internet explorer

3、(ie)Netscape navigator(ne)Tencent TT浏览器漫游浏览器Foxfire火狐浏览器，12，统一资源定位器(URL)，URL所有WWW文件必须符合此标准。HTTP最初旨在提供发布和接收HTML页面的方法。14、IP地址、IP地址用于标识连接到internet的电脑分配号。每个IP地址与电话号码识别电话网络中的电话相同。电脑识别的IP地址由32位二进制值组成，在电脑上以十进制值表示。数字集分为4个部分，每个部分不能大于255。例如9以分隔。15，域名，域名是经常说的网址，它也是唯一的。例如百度的网址、网络的网址等是域名，域名是汉语拼音或英语文字加数

4、字，访问网络时域名会通过域名服务器切换到IP地址。这种转换是在后台进行的。16，超连结，超链接是网页中最常用的元素之一，网页可以通过无数超链接组成一个网站。超链接可以链接到网站内部页面、对象或其他网站链接，使用户可以轻松地在页面对象之间跳转。17、超文本置标语言(html)和超文本标记语言(html)是用户和电脑之间通信的文本技术，各种网页均以HTML语言描述，以HTML语言编写的网页文件的扩展名通常为“*.，18，1.5网页设计相关知识，设计网页原则网页设计一般阶段用于创建网页的一般工具，19，设计网页原则，整体计划清晰专题图像引人注目的导航易于记忆的网站名称动画适量，20，web设计一般阶

5、段，计划网站收集和配置网站创建页面测试网站发布网站维护，更新网站，21图像处理软件网页图像的软件种类很多动画制作软件网页动画制作中最常用的软件郑智薰Flash。一般而言，Dreamweaver、Fireworks和Flash是网页三剑客、22，1.2 Dreamweaver 8简介、Macromedia Dreamweaver 8是网站、网页的专业HTML编辑器，无论您是喜欢编写自己的HTML代码还是喜欢在可视剪辑环境中工作Dreamweaver8安装和Dreamweaver启动任务介面使用Dreamweaver8帮助文档，23，安装Dreamweaver8，24，启动和关闭Dreamweav

6、er 8.0，1。您可以通过从Dreamweaver的“开始”节目菜单中选择Macromedia菜单，然后单击从子菜单中运行Macromedia Dreamweaver 8来启动它，如图所示。25，2。退出Dreamweaver 8.0以退出Dreamweaver 8.0的方法很简单。(1)您可以使用单击Dreamweaver 8窗口右上角的关闭按钮退出剪辑界面。(2)按“Alt F4”组合键。(3)从“档案”菜单中选择“退出”命令，或按快捷键Ctrl Q关闭系统。26、Dreamweaver 8.0中的任务介面、Dreamweaver 8中的任务界面主要包括标题栏、菜单栏、文档工具栏、“文档

7、”窗口、状态栏、插入面板、属性面板和CSS样式面板。牙齿部分主要介绍Dreamweaver 8的操作界面。27、标题栏、Dreamweaver 8的标题栏位于应用程序节目的顶部，左侧显示当前运行的应用程序节目的名称，右侧包含最小化、最大化(还原)和关闭按钮，如中所示。标题栏是默认文档标题Untitled Document，显示的档案名称是Untitled-1。每当用户创建新文档时，Dreamweaver 8都会自动将默认名称指定为Untitled。用户保存文件时，系统会提示用户指定其他名称。当然，也可以使用默认名称保存。28、菜单栏和菜单栏(包括档案、剪辑、视图、插入、修改、文本、命令、网站和

8、窗口)Dreamweaver 8菜单选项有三种茄子格式：(1)子菜单命令。这些命令的名称后面是右小三角形箭头。鼠标在这些命令上移动可打开子菜单。例如，“插入”菜单下的“媒体”菜单命令。(2)开关命令：执行命令时，命令左侧将添加“”复选标记。例如，“视图”菜单下的“设计”菜单命令。(3)对话框命令：这些命令名后面带有省略号，单击执行这些命令将打开一个对话框。29、文档工具栏、“文档”工具栏包含用于在文档的各种视图(“代码”视图、“设计”视图、同时显示“代码”视图和“设计”视图的拆分视图)之间快速切换的按钮。工具栏中还包含一些与查看文档、在本地站点和远程网站之间传输文档相关的茄子常用命令和选项。3

9、0，文档窗口，文档窗口显示当前文档。您可以选择以下视图之一：(1)查看设计：用于可视化版面设计、可视化剪辑和快速应用节目开发的设计环境。在牙齿视图中，Dreamweaver显示文档的完全可剪辑的可视表示形式，类似于在浏览器中查看页面时所显示的内容。(2)代码视图：用于编写和编辑HTML、JavaScript、服务器语言代码(如PHP或ColdFusion置标语言)以及任何其它类型的代码的手动编码环境。(3)代码视图和设计视图：可以在单个窗口中查看同一文档的所有代码视图和设计视图。如果文档窗口包含标题栏，标题栏将显示页面标题，档案路径和档案名称将显示在括号中。如果更改后未保存，则档案名称后面会显

10、示星号。31、“插入”面板和“插入”面板包含用于创建和插入对象(如表格、图层和图像)的按钮，如图1-15所示。将鼠标指针滚动到按钮上时，会出现包含按钮名称的工具提示。这些按钮分为多个类别，可以在“插入”栏的左侧切换。如果当前文档包含服务器代码，则还会显示其他类别。启动Dreamweaver时，将打开上次使用的类别。32、“属性”面板、“属性”面板检查和编辑当前选定页面元素(例如文本和插入的对象)的最常用属性。属性面板的内容取决于选定的元素类型。例如，如果在页面上选择了一个图像，则属性面板将改为显示图像的图像属性，如图像的档案路径、图像的宽度和高度、图像周围的边框等。33，使用Dreamweav

11、er8中的帮助解决学习过程中的问题时，最好的方法是使用Dreamweaver 8中的联机帮助。以下说明使用的线上帮助文档方法。34，打开帮助文档系统，然后从“帮助文档”菜单中选择“Dreamweaver帮助文档”，打开Dreamweaver 8帮助文档系统。也可以直接按F1键打开帮助文档系统。35，使用帮助可以使用帮助文档系统查找所需信息。1、要在产品中搜索帮助(Windows)，请单击执行Dreamweaver帮助中的“搜索”选项卡。在文本框中输入单词或短语，然后单击“主题列表”。双击结果列表中的项目，可以显示。36，使用帮助查找使用帮助文档系统所需信息的方法为2，使用索引的方法为(Wind

12、ows)，然后执行以下操作：(1)单击Dreamweaver帮助中的“索引”选项卡。(2)滚动到字符列表中的索引主题，然后双击该主题以显示索引信息。37、查看作业相关帮助文档，在剪辑期间，有时需要查看有关当前作业的帮助文档信息。对于牙齿，您可以：(1)如果正在对话框，要查看当前对话框信息，请按单击对话框帮助文档按钮，这将从启动帮助文档系统后直接转至当前任务的帮助文档信息页面。例如，在表格对话框内单击按帮助文档按钮将显示表格的帮助文档信息。(2)要在使用浮动面板编辑时查看帮助文档系统，您可以单击使用浮动面板上的按钮，或启动帮助文档系统直接转至当前任务和相关的帮助文档页面。例如，单击属性面板中的单

13、击按钮可显示属性的相关帮助文档信息。创建38，1.3网站，管理本地网站管理网站网站创建我的档案和文件夹，39，创建本地网站，步骤1:在本地硬盘上创建用于存放站点的文件夹。名字是“网站”。牙齿文件夹是本地站点的根目录、网站专用文件夹。在步骤23360中打开Dreamweaver 8.0，从“网站”菜单中选择“网站管理”命令，或从“档案”面板中选择“网站管理”命令以打开“网站管理”对话框。40，步骤3:单击“管理网站”对话框的“新建”按钮，从弹出菜单中选择“网站”命令。步骤41，4:单击“网站”命令后出现弹出窗口。牙齿向导是定义站点的向导。选择“基本”选项卡，然后定义网站名称(例如“数学和电脑系统

14、”)。步骤、42、5:在单击的“下一步”按钮、窗口中，设置网站(如ASP、PHP等)是否使用服务器技术。因为我们想做的是基本的静态网站，请选择“不，我不想使用服务器技术”单选按钮。步骤43，6:单击执行“下一步”按钮，开始设置网页保存方法和保存路径。在上半部分的单个选项中，选择第一个“剪辑我的计算机的本地副本后上载服务器(推荐)”。如果请求的网站空间支持联机剪辑功能，则可以选择单个选项“使用本地网络服务器直接剪辑”。步骤44、7:完成上述设置后，您可以使用单击的“下一步”按钮选择连接服务器的方式以及服务器上网页的存储位置。步骤45，8:单击“下一步”按钮。在此处选择是否使用“存回”和“取出”。

15、如果选择“是，启用存回和取出”选项，则多个用户可以一起执行网站维护任务。如果只有一件事可以完成网站维护，则可以选择“否”。46，9步：网站基本定义完成。单击单击“下一步”按钮后，Dreamweaver 8.0将显示对话框弹出窗口，询问设置信息是否正确。单击“完成”按钮将成功创建本地站点。47，网站管理，1 .切换网站Dreamweaver 8.0中可以同时存在多个站点，您可以从档案面板左侧的下拉列表框中选择创建的网站之一，以将切换作为该站点的工作状态继续。要编辑、48、2网站剪辑站点，请从“网站管理”对话框中选择要编辑的站点，然后使用鼠标单击“网站管理”对话框中的“编辑”按钮重新打开站点定义向导，如有必要，可以一次修改站点的属性，如果不需要49，3站点删除站点，可以从站点列表中将其删除。您可以通过从“网站”菜单中选择“网站管理”命令打开“网站管理”对话框，选择其中一个对话框，然后按“删除”单击按钮来删除站点。删除站点后，网站文件仍保留在硬盘原始位置。50、“管理网站内的档案和文件夹”、“创建文件夹和档案”面板通常显示站点的所有档案和文件夹，但是新创建的站点没有档案或文件夹。所有文件和文件夹都必须新建，在“档案”面板中右键单击网站根目录单击鼠标，然后从弹出快捷菜单中选择