1站点建立及网页文档的设计
Dreamweaver1网页制作
Dreamweaver1⽹页制作1.站点1.1 创建站点点击菜单栏中站点进⾏站点创建，输⼊站点名称，路径1.2 设置图像⽂件夹1.3 站点管理站点的编辑、复制、删除2.页⾯属性栏2.1 外观1.设置页⾯整体的字体、⼤⼩、颜⾊2.背景颜⾊，背景图像，图像是否重复，怎么重复3.页⾯边距2.2 链接1.链接的字体、⼤⼩、颜⾊2.链接颜⾊：链接颜⾊：本⾝颜⾊变换图像链接：⿏标经过链接时的颜⾊ 已访问链接：已访问之后的颜⾊ 活动链接：⿏标点击时的颜⾊2.3标题1.能分为六层标题2.设置标题字体、颜⾊2.4 标题/编码1.⽹页名称2.5 跟踪图像跟踪图像”是Dreamweaver⼀个⾮常有效的功能，它允许⽤户在⽹页中将原来的平⾯设计稿作为辅助的背景。
这么⼀来，⽤户就可以⾮常⽅便地定位⽂字、图像、表格、层等⽹页元素在该页⾯中的位置了。
跟踪图像的具体使⽤是这样的：⾸先使⽤各种绘图软件作出⼀个想象中的⽹页排版格局图，然后将此图保存为⽹络图像格式（包括gif、jpg、jpeg和png）。
⽤Dreamweaver打开你所编辑的⽹页，在菜单中选择“修改>页⾯属性”，然后在弹出的对话框中的“跟踪图像”项中输⼊刚才创建的⽹页排版格局图所在位置。
再在图像透明度中设定跟踪图像的透明度，OK。
这样你就可以在当前⽹页中⽅便地定位各个⽹页元素的位置了。
使⽤了跟踪图像的⽹页在⽤Dreamweaver编辑时不会再显⽰背景图案，但当使⽤浏览器浏览时正好相反，跟踪图像不见了，所见的就是经过编辑的⽹页（当然能够显⽰背景图案）。
3.制作⽹页基本操作3.1 ⽂本3.11 添加⽂本直接编辑、复制粘贴、其他⽂件导⼊3.12 添加空格1.默认只能添加⼀个空格2.通过插⼊菜单 —— HTML —— 特殊字符 —— 插⼊空格3.Ctrl+shift+空格3.13 添加⽇期插⼊菜单进⾏操作3.14 插⼊⽔平线.通过插⼊菜单 —— HTML —— ⽔平线3.15 添加特殊字符.通过插⼊菜单 —— HTML —— 特殊字符3.16设置⽂本格式字体、⼤⼩、颜⾊3.17 分段与换⾏分段：enter换⾏：shift+enter3.18 设置段落格式1.对齐⽅式：2.列表变编号3.缩进3.2 图像3.21 常⽤图⽚格式1.GIF：特点：图⽚数据量⼩、可带动画信息、可透明背景显⽰，最⾼只⽀持265种颜⾊ ⽤途：⽹站logo、⼴告条、⽹页背景图像2.JPEG：特点：可⾼效的压缩图⽚的数据量、图⽚变⼩却不会丢失颜⾊画质 ⽤途：显⽰照⽚等颜⾊丰富的图像3. PNG：特点：融合了GIF能做透明背景的特点，⼜具有JPEG处理精美图像的特点 ⽤途：绘制⽹页效果图3.22 插⼊图像3.23 设置图像基本属性图像名称、宽、⾼、源⽂件、替代、边框3.24 图⽂混排1.边距2.对齐3.25 编辑图像1.裁剪2.锐化3.对⽐度、亮度4.重新采样5.优化（为图⽚瘦⾝）3.26 ⿏标经过更换图⽚特效插⼊菜单栏完成4.超链接4.1 内部链接——同个⽹站中的其他⽹页4.2 外部链接——不同站点或本站点以外的⽹页1.链接中输⼊链接地址2.⽬标中选择打开位置 _blank ：每点击⼀次链接创建⼀个新的窗⼝ _self ：会在当前窗⼝、框架页⾯中打开 _new ：会在同⼀个刚创建好的窗⼝中打开 _parent ：如果是嵌套框架，会在⽗框架中打开 _top ：会在完整的浏览器窗⼝中打开4.3 链接样式参考2.24.4 锚点链接——到⽹页中某⼀特定位置1.选中要命名的锚点点击锚点，对该锚点命名2.选择链接点，当前页⾯：在链接中输⼊ #锚点名其他⽹页：⽹页地址#锚点名4.5 E-mail电⼦邮件链接选中需要连接部分，点击电⼦邮件链接，输⼊链接地址4.6 下载链接1.当⽂件是exe⽂件、zip、rar类型问件时浏览器⽆法直接打开，便会提⽰下载4.7 空链接1.在链接中输⼊#2.⼀般导航栏中⾸页位置就是⼀个空链接4.8 图像热区链接在图像中绘制⼀块区域，创建链接4.9 图像导航条图像超链接4.10 跳转菜单选中表单中的跳转菜单，进⾏编辑4.11 脚本链接——通过触发脚本命令在链接中输⼊脚本代码1. 添加到收藏夹：javascript:window.external.addFavorite('⽹址','名称')2. 表⽰关闭窗⼝：javascript:window.close()3. 表⽰弹出⼀个提⽰对话框：javascript:alert('hello!')4. 设置为默认主页：（需通过空链接#,触发onClick事件）在链接中输⼊#选中链接点，在代码中#后输⼊onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('⽹址')"4.12 超链接的管理1.连接路径： 绝对路径：链接中使⽤完整URL地址 相对于⽂档的路径：../ 表⽰上⼀层⽂件夹 相对于站点根⽬录的路径：/ 表⽰根⽬录2. ⾃动更新链接：⽂件位置变动，⾃动更新⽹页中链接路径3. 检查连接5.表格5.1插⼊表格，进⾏设置5.2 选定表格、单元格进⾏设置5.3 表格嵌套在单元格中插⼊表格5.4 应⽤表格布局页⾯5.41 类型：1.国⼦型2.拐⾓型3.标题正⽂型4.左右框架型5.上下框架型6.综合框架型7.封⾯型8.flash型9.变化型5.42 页眉通常放置logo，⼴告条5.43 页脚放置版权信息、联系电话、⽹站介绍、备案信息等5.44 导航栏双倍单元格，空⼀格放⼀个信息，设置⾼度，内容位置5.45 信息栏6.框架6.1 框架⼀个框架就是⼀个区域，可以单独打开⼀个HTML⽂档，多个框架就组成了框架集6.2 创建框架选择框架结构，创建框架6.3保存框架有多少个框架就要保存多少次，再加最外层6.4 作⽤1.做⽹页的布局，将⽹页分成不同的部分2.简化⽹页的编写：⽹页之间相同的内容，只需要编写⼀次3.加快⽹页的浏览：每次⽹页只需要更新变化的那个框架的内容6.5设置框架集和框架属性⿏标单击框架边框，对框架进⾏设置6.6⾃定义框架1.拖动编辑窗⼝的边框：⿏标位于编辑窗⼝的边框，对边框进⾏拖动，创建新的框架2.按住 alt 键时拖动7.多媒体元素7.1多媒体元素flash多媒体元素⾳频多媒体元素视频多媒体元素7.2 插⼊flash多媒体元素7.21 flash动画插⼊flash动画⽂件，扩展名为 .swf7.22 插⼊flash按钮Dreamweaver⾃⾝带有⼀些flash按钮，也可⾃⼰做，⽂件扩展名为 .swf7.23插⼊flash⽂本7.24插⼊图像查看器7.25插⼊flash paper7.26插⼊flash视频7.3 插⼊⾳频多媒体元素8.AP DIV元素8.1. APAP：绝对定位元素，称为层，定位灵活8.2 创建AP DIV1.点击布局中的绘制层，直接在页⾯中绘制2.按住绘制层，拖动⾄页⾯中，这样的层⼤⼩⼀定，颜⾊⼀定，可设置8.3 编辑AP DIV点击层左上⾓，在属性栏中设置8.4 层的可见性设置在窗⼝菜单中打开层，即可对层可见性进⾏设置8.5 层的嵌套将光标置于层中，进⾏绘制8.6 与表格的转换下修改菜单中，选择转换，将层转换为表格，或表格转换为层9.⾏为特效9.1.添加在窗⼝菜单中（或 shift+F4）打开⾏为，选择所要添加⾏为的部分，进⾏添加，添加后选择事件启动⾏为步骤：选择对象、添加动作、调整事件9.2 事件1.常见事件OnMouseOver ：⿏标经过OnMouseOut ：⿏标移开OnLoad ：页⾯打开OnUnLoad ：页⾯关闭其他：onClick ：单击onDbclick ：双击onKeyDown ：当按下任意键的同时产⽣。
网页设计实验报告建立站点
网页设计实验报告建立站点一、实验目的本实验旨在通过建立一个网站来实践网页设计的基本原理和技巧，加深对网页设计的理解，并掌握网页设计的常用工具和技术。
二、实验内容1. 确定网站的主题和目标受众；2. 设计网站的结构和布局；3. 选择合适的颜色和字体搭配；4. 制作网站的标志图标；5. 编写网站的HTML和CSS代码；6. 验证和测试网站的功能和布局效果。
三、实验步骤1. 确定网站的主题和目标受众在设计网站之前，我们需要明确网站的主题和目标受众。
这有助于我们选择合适的设计元素和内容，以吸引目标受众的注意力并提供有价值的信息。
例如，我们可以选择建立一个旅游指南网站，面向喜欢旅行的年轻人群体。
这样，我们就可以设计一些活泼、有趣的页面元素，并提供各种旅行目的地的介绍和建议。
2. 设计网站的结构和布局在网站设计中，结构和布局是非常重要的。
我们应该考虑页面的导航方式、页面元素的排列和组织，以及不同页面之间的连接关系。
我们可以使用流程图或草图的形式，将网站的各个页面、导航菜单和元素之间的关系进行规划和设计。
这有助于我们更好地组织网站的内容和导航路径。
3. 选择合适的颜色和字体搭配在网页设计中，颜色和字体的选择对页面的整体效果和用户体验有很大的影响。
我们应该选择适合网站主题的颜色和字体，并保持风格的一致性。
可以通过使用调色板和字体库等工具，来选择合适的颜色和字体。
在选择颜色时，要考虑到网站的整体风格和目标受众的喜好；在选择字体时，要注意字体的可读性和与设计风格的协调性。
4. 制作网站的标志图标网站的标志图标是网站的品牌形象的重要组成部分，也是用户识别和记忆网站的重要标志。
我们可以使用设计软件或在线图标制作工具，来制作符合网站风格和主题的标志图标。
标志图标应该简洁、易于识别，并能够体现出网站的主题和特点。
同时，还可以考虑在标志图标中加入对网站名字的呈现。
5. 编写网站的HTML和CSS代码在网站设计的过程中，我们需要编写HTML和CSS代码来实现页面的结构和样式。
网页设计与制作实践 第5版 模块1 创建站点与制作商品简介网页
【任务1-1-1】启动Dreamweaver与初识其工作界面
7
面 板 组 ： Dreamweaver 包 “文件”面板：网站是多个网页文件、图像文件、程序文件等有机联 括多个面板，这些面板都有 系的整体，要有效地管理这些文件及其联系，需要一个有效的工具， 不同的功能，将它们叠加在 “文件”面板便是这样的工具。 一起便形成了面板组。
5
Dreamweaver工作界面的布局与组成如图所示。
标题栏：显示网页的标题和网页文档 的存储位置。
菜 单 栏 ： Dreamweaver 的 菜 单 栏 包 含10类菜单：“文件”“编辑”“查 看”“插入”“修改”“格式”“命 令”“站点”“窗口”和“帮助”。
“插入”面板：显示“插入”面板的 方法是：选择“窗口”→“插入”， 在 Dreamweaver 主 界 面 的 右 侧 将 显 示“插入”面板。
HTML5+CSS3网页设计与制作实践（项目式）（第5版）
模块1 创建站点与制作商品简介网页
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、样式 表文件、网页素材进行统一管理。
1 学会新建网页文档和设置网页的页面属性
学习目标
2 学会在网页中插入空格、文本换行符和特殊字符
熟悉浏览器窗口的基本组成元素和网页的基本组成 3
浏览器是用户浏览网页的软件，支持多种具有交互性的网络服 务，是人们通过网络进行交流的主要工具。目前流行的浏览器为 Chrome、Firefox等。
【任务1-1-2】认识浏览器窗口的基本组成和网页的基本组成元素 9
浏览器窗口主要由网页标题、菜单栏、命令栏、地址栏和网页窗口等部分组成。Internet Explorer（简称IE）浏览器窗口如图1所示，Chrome浏览器窗口如图2所示。
网页设计与制作_站点的规划与创建ppt课件
第四课 站点的规划与创建
➢课前导读 ➢课堂讲解 ➢上机实战 ➢课后练习
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
通常，在制作站点时首先应在本地硬盘上创 建一个文件夹，然后在制作站点过程中，将 所有创建和编辑的文档都保存在该文件夹中。 当准备发布站点时，将这些文件上传到Web 服务器上即可。如果在本地对站点作了修改， 还要将其上传到Web站点上更新自己的站点。
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
➢ 选 择 [ 窗 口 ][ 文 件 ] 菜 单 命 令 ， 或 按 【F8】 键 在 Dreamweaver MX 2004右侧的浮动面板组中打开“文 件”面板。
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
课前导读
➢基础知识 ➢重点知识
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
站点的创建与网页制作
站点的创建与网页制作第一篇：站点的创建与网页制作第4周站点的创建与网页制作【计划课时】：3课时【授课班级】：10班【教学目的与要求】υ熟悉Dreamweaver8工作界面中各个工具的作用υ熟悉Dreamweaver8工作界面中各个面板的调用υ掌握构建本地站点的方法υ掌握网页中超链接的创建、图像的插入、导航条的制作【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。
激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：学会构建本地站点重点知识：学会规划与构建站点结构网页中超链接的创建、图像的插入、导航条的制作【教学组织过程】 1．上讲回顾 2．教授新知【授课内容】一、利用dreamweaver8进行网页设计的基本步骤：1.打开dreamweaver82.创建站点3.在站点根目录下新建网页（HTML文件），并按要求命名4.打开所创建的网页（HTML文件），对网页进行布局、创建超链接等二、新建站点的操作（站点：以自己的名字命名的文件夹）1．在桌面上找到位dreamweaver8点”并运行它。
在“站点”菜单中点“新建站2．在弹出的窗口中，给你的站点以你的名字命名，并点“下一步”，如下图：3．在选择服务技术页面选“否，我不想使用服务技术”并直接点“下一步”。
4．在您把文件存储在计算机的什么位置上选择你前面建立的你自己的文件夹，并点“下一步”，如下图：5．在您如何连接到远程服务器窗体选择您打算将你的文件存储在服务器上的什么文件夹中选中你前面创建的自己的文件夹，然后“下一步”6.然后点“完成”，你的站点就建立完毕。
注意dreamweamver 的右边显示你的站点。
三、在站点中新建一个网页（HTML文件）1.在如图所示的地方（站点根目录）右键点击2.给新建的HTML文件命名四、布局网页的一些操作1.设置标题：在网页上方的“标题”处写上你的网页标题：如下图2.设置背景图片：在最下面找到“页面属性”按钮下图：点击它，然后选择“背景图像”，如3.设置页面文字和字体：选中文字，在下面的属性中设置它的字体大小和颜色，加粗, 居中等4.插入图片：在“插入”菜单中选择“图像”如图，并选中sc文件夹中的img1_2.jpg文件：5.图片的对齐方式：选中图像，在下面设置它的对齐为“右对齐”，如下图：6.设置文字列表形式：在“文本”-“列表”-“项目列表”将所选文字设为列表,如下图：五、上机练习(共3个)在考试文件夹中将“站点的创建与网页制作”文件夹改为(学号姓名)如(2009××××张三)命名的文件夹，在已改为你的学号姓名的文件夹中，建立网页站点，所需素材均在“SC”文件夹中。
实验1 网站的的建立及运行
实验 1 4.5 网站的的建立及运行专业班级学号姓名报告日期实验类型：○验证性实验○综合性实验●设计性实验实验目的：（1）熟悉 4.5 的开发环境Visual Studio Express 2012 for Web (VSEW 2012)。
（2）掌握利用解决方案管理网站和创建网站的过程。
（3）掌握利用VSEW 2012 复制网站的过程。
（4）掌握IIS 7.5 中网站创建和默认文档设置的过程。
实验内容：（1）创建一个Experiment解决方案，其中包含两个文件系统网站Expt1Site 和Expt2Site。
（2）在Expt1Site网站中创建一个Web窗体Default.aspx，其中包含一个Label 控件。
当浏览器Default.aspx时在Label控件中显示“我开始学习了！”。
（3）在IIS 7.5中创建Experiment网站，复制VSEW2012中Expt1Site网站到IIS 7.5中Experiment网站下的Web应用程序Expt1，再从另一台联网计算机访问复制后的Default.aspx。
（4）设置IIS 7.5中的Web应用程序Expt1的默认文档，使得在另一台联网计算机上仅输入IP地址和Web应用程序名即可访问Default.aspx。
（5）在IIS 7.5中创建端口号为8001的Port网站，复制VSEW2012中的Expt1Site网站到IIs 7.5中Port网站下的Web应用程序Expt1,再从另一台联网计算机访问复制后的Default.aspx。
（6）复制VSEW 2012中的Expt1Site网站到IIS7.5中Experiment网站下VirDir 虚拟目录，再从另一台网站联网计算机访问复制后的Default.aspx。
（7）迁移Experiment解决方案，使得在另一台以安装 4.5网站开发环境的计算机实验原理网站创建实验思考创建网站中的连接过程。
实验报告书写要求：根据实验情况和结果撰写并递交实验报告。
新建站点的步骤
新建站点的步骤
新建一个站点的步骤如下：
1. 确定站点的目标：明确站点建设的目标和定位，确定站点所要表达的信息和功能。
2. 策划站点的架构：确定站点的整体结构和页面布局，设计站点的导航栏和页面之间的链接关系。
3. 设计站点的界面：根据站点的目标和定位，设计符合品牌形象和用户体验的界面风格，包括颜色、字体、图标等。
4. 开发网站的功能：根据站点的需求，选择合适的技术和开发工具，开发各种功能模块，例如注册登录、搜索功能、购物车等。
5. 编写站点的内容：根据站点的目标和定位，编写各个页面的内容，包括文字、图片、视频等。
6. 进行页面优化：通过优化页面的代码、文件大小和加载速度，提高网站的性能和用户体验。
7. 进行浏览器兼容性测试：测试站点在不同浏览器和设备上的兼容性，修复出现的问题。
8. 购买域名和托管空间：选择并购买适合的域名，选择并购买适合的托管空间，将网站部署到服务器上。
9. 上线站点：将站点部署到服务器上，经过一些必要的测试和调试后正式上线。
10. 提供后续维护和更新：定期检查站点的运行情况，及时更新内容和功能，解决出现的问题。
第三章 创建站点和文档
（二）插入栏 插入栏按以下的类别进行组织。
•常用：可以创建和插入最常用的对象，如图像和Flash等。 •布局：主要用于网页布局，可以插入表格、div标签、层和框架。 •表单：包含用于创建表单和插入表单元素的按钮。 •数据：可以插入Spry数据对象和其他动态元素，如记录集、重复区 域、显示区域以及插入记录和更新记录等。 •Spry：包含一些用于构建Spry页面的按钮，如Spry文本域、Spry菜 单栏等。 •文本：可以插入各种文本格式设置标签和列表格式设置标签。 •收藏夹：可以将插入栏中最常用的按钮分组和组织到某一常用位置。
第六节
站点的发布
一、使用Dreamweaver CS4上传网页
一、使用Dreamweaver CS4上传网页
Dreamweaver CS4的FTP功能非常强大，不仅支持断点续传，还可以进行批量 的上传和下载。
二站都支持FTP上传方式，因此只需要安装一款FTP文件上传工具。下面 以常用的CuteFTP为例进行介绍。这款软件能够快速上传或下载整个站点文件， 并支持断点续传功能。
二、构建网站结构
•构建网站结构，实际上是构建网站的文件夹与文件结构。 •创建文件夹或创建文件，只需要在“文件”面板中右击，在弹出 的快捷菜单中选择“新建文件夹”或“新建文件”命令即可。
第三节 创建和保存文档
一、创建文档
一、创建文档
Dreamweaver中新建文档同Flash一样，一般有以下两种操作： •一是通过执行菜单“文档”→“新建”命令，打开“新建 文档”对话框。 •第二种方法是在启动Dreamweaver后，在出现的提示画面 中选择“新建”→“HTML” 。
三、检查目标浏览器
三、检查目标浏览器
网页中有一些元素必须在新版本的浏览器中才能显示（如框架），所以在上传站 点之前，有必要检查浏览器的兼容性。在Dreamweaver CS4中可以通过检查目 标浏览器功能来实现。 执行“文件”→“检查页”→“浏览器兼容性”命令，打开 “浏览器兼容性” 面板，如图。
网页设计与制作 第2章 站点的创建与管理
2-11 返回““高级”选项卡定义本地站点的步骤： Step1：进入“站点定义”对话框后，选择“高级”选项卡。设置站点名称为 “webtest2”，在站点名称中输入站点的名称，在本地根文件夹中输入本地的 绝对地址，单击“确定”，如图2-12所示。
图2-12 高级创建本地站点
第2.1章 规划站点
2.1.1站点规划 站点规划事先需要做许多准备工作，不仅要准备建设站点需要的素材文字资料、 图像以及媒体文件，还要设计好资料整合的方式，并根据资料确定站点的风 格特点；同时在内部还要整齐、有序地排列归类站点中的文件，否则杂而乱 的资料堆积到一起，不仅不利于将来的站点的管理和维护，同时还会因为页 面间极为混乱的关系而导致站点容易出现错误。 一般来说，在规划站点结构时，应该遵循以下一些规则： 1、文档合理分类 一般来说，一个站点包含的文件很多，大型站点更是如此。如果将所有的文件 混杂在一起，则整个站点显得杂乱无章且不易管理，因此需要对站点的内部 结构进行规划。将各个文件分门别类地放到不同的文件夹下，这样可以使整 个站点结构看起来条理清晰，井然有序，使人们通过浏览站点的结构，就可 以知道该站点大概内容。这样做主要是为网页设计人员在修改管理页面文件 时提供方便。
第2.2章
创建站点
2.4.2创建远程站点 创建了本地 Web 站点后，下一步就是通过将文件上传到远程文件夹来发布该 站点。远程文件夹是internet上存储站点的位置，这些文件用于测试、生产、 协作和发布。远程站点可通过在“基本”选项卡中向导提示的方式创建也可 以通过“高级”选项卡直接输入信息的方式来创建。下面以“高级”选项卡 中FTP的方式为例介绍远程站点的创建方法： Step1：选择“站点”>“管理站点”。 Step2：单击“新建”并选择“站点”以设置新站点，或选择现有的 Dreamweaver 站点并单击“编辑”。 Step3：单击“高级”选项卡，从“访问”弹出式菜单中，选择“FTP”。如 图2-14所示。 Step4：在“FTP主机”文本框中，输入要上传的 FTP服务器的主机名。 Step5：在“主机目录”文本框中，输入远程站点上用于存储公开显示的文档 的主机目录（文件夹）。 Step6：在“登录名”和“密码”文本框中，输入用于连接到 FTP 服务器的 登录名和密码。
网站制作实例_门户站点的制作.ppt
三、 构建网页框架
反复在菜单栏中选择“插入”|“表格”命令，打开 “表格”对话框，指定插入的行数和列数，在建好的表格 中再插入所需图片，如下图所示。
然后继续分割表格并插入所需图片，效果如上图所示。
三、 构建网页框架
使用同样的方法，最后完成网页的整体布局，如下图 所示。在实现连接的时候用户可以有较大的自主性，用户 可以选中想要实现连接效果的图片或者文本，然后在“属 性”栏的“链接” 文本框中输入想要链接的地址。
四、 思考
•思考成功创建一个门户网站有那些关键因素。 •思考如何能够实现网站的个性化。
五、 动手练习
创建一个门户站点主页。包括：1.网页的布局设计和实 现。2.网站所需元素的制作。3.构建网页框架。
本章小结：
•掌握门户站点主页的制作方法。 •掌握Web页面的制作流程。 •掌握三大软件协同工作的方法与技巧。
二、 制作网页素材
3、制作其它页面图像 实例所制作的主页，除了Logo和Banner之外，还包括一
些用于修饰或突出某些内容的图像，如栏目的标题，如下 图所示。
创建方法以“公司简介”为例。启动Fireworks 8 后，创 建一个“宽”为400，“高”为60，“分辨率”为120的文 件，并且设置画布颜作其它页面图像 接下来在工具箱中点击“矩形工具”按钮，在“属性”
面板中设置“笔触颜色”为“橙色”，绘制一个矩形框。 然后在工具栏中点击“文字工具”按钮，输入文本。最后 在“属性”面板中调整字号和字体。调整完成后的效果如 下图所示。
二、 制作网页素材
4、制作广告动画 首先准备三张素材图片，如下图所示。
图像文件“底图”，如下图所示。将时间指示器移动到第 40帧的位置，按F5键插入一帧。
然后导入“图1”，并为它制作位移动画，如上图所示。
2.2-创建站点及页面设置-《网页设计制作》
1.1
规划站点
1.1.1 站点的概念 1.1.2 规划站点结构 1.1.3 创建导航草图
1.1.1 站点的概念
多个网页文档通过各种链接关联起来就构成了 站点，站点可以小到一个网页，也可以大到整 个网站。
1.1.2 规划站点结构
设计站点的必要前提是规划站点结构。规划 站点结构是指利用不同的文件夹将不同的网 页内容分门别类地保存，合理地组织站点结 构，可提高工作效率，加快对站点的设计。 在制作站点时通常先在本地磁盘上创建一个 文件夹，将所有在制作过程中创建和编辑的 网页内容都保存在该文件夹中。在发布站点 时，直接将这些文件夹上传到Web服务器上 即可。如果站点内容较多或站点较大，则还 需建立子文件夹以存放不同类型的网页内容。
跟踪图像 透明度
1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 创建新页面 打开已有网页 预览网页效果 网页的保存 页面设置
1.3.1 创建新页面
在Dreamweaver 8中可以直接创建空白 网页文档，也可以通过模板创建有格式 的网页文档。通过模板创建网页的方法 将在后面的学习中详细介绍。这里将介 绍直接创建网页文档的方法。
标题字体 标题1
4．标题/编码
在“页面属性”对话框的“分类”列表 框中选择“标题/编码”选项，右侧将 显示“标题/编码”的参数设置项。 其中各参数的含义如下。
标题 编码
5．跟踪图像
在“页面属性”对话框的“分类”列表 框中选择“跟踪图像”选项，右侧将显 示“跟踪图像”的参数设置项。 其中各参数的含义如下。 查看”>“跟踪图像”>“显示”
1.3.2 打开已有网页
若要对已有的网页进行编辑，需在 Dreamweaver中打开该网页文档。
规划站点并制作网页(完)
规划站点并制作网页
一般，一个站点包含的文件很多，大型站点更是需要对点站的内部结构进行规划。
应该将各个文件分门类地放到不同烦人文件夹中，如果将所有的文件混杂在一起，则整个站点显得杂乱无章，且不易管理。
因此，站点结构要条理清晰，井然有序，使人们通过浏览器站点的结构，就可以知道该站点的大概内容。
一般情况下，将站点中所用的图片和按钮等图形元素放在lmages文件夹中，HTML文件放在根目录下，而动画和视频等放在Flash文件夹中。
对站点中的素材进行详细的规划，是为网页设计人员在修改管理页面文件时提供方便。
在计算机中除c盘外要新建一个站点的文件夹，命名如Myweb，也可以叫“我的站点”。
制作网页是一个复杂而细致的过程，一定要按照先先大后小、先简单后复杂的顺序来制作。
所谓先大后小，就是在制作网页时，先把大的结构设计好，然后在逐步完善小的结构设计。
所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题能及时修改。
在网页排版时，要尽量保持网页风格的一致性，不至于在网页跳转时产生不协调的感觉。
在制作网页时灵活地运用模板，可以大大地提高制作效率。
将相同版面的网页生成模板，基于此模板创建网页，以后想改变网页时，只需修改模板就可以了。
文库站点搭建方案
文库站点搭建方案搭建一个文库站点的方案需要考虑以下几个方面：1. 网站平台选择：选择一个适合搭建文库站点的网站平台，如WordPress、Joomla、Drupal等。
这些平台提供了许多可用的主题和插件，可以帮助快速搭建一个功能强大的文库站点。
2. 网站设计：选择一个简洁清晰的网站设计，确保用户可以方便地浏览和搜索文库中的文献。
避免使用相同的标题文字，可以采用不同的排版方式和样式来呈现文献信息。
3. 文献分类和标签：将文库中的文献进行分类和标签，方便用户快速找到需要的文献。
可以根据不同的主题、领域或类型来进行分类，同时为每篇文献添加合适的标签。
4. 搜索功能：搭建一个强大的搜索功能，使用户能够通过关键词快速搜索到相关的文献。
可以使用插件或自行开发搜索功能，确保搜索结果的准确性和相关性。
5. 用户上传和下载：为用户提供上传和下载文献的功能，方便用户共享和获取文献资源。
可以设置上传权限和验证机制，确保文献的质量和安全性。
6. 用户评论和评分：为用户提供评论和评分文献的功能，促进用户之间的交流和讨论。
可以设计一个用户评分系统，将高质量的文献展示在首页或热门推荐中。
7. 文献推荐和相关文献：根据用户的搜索和浏览记录，为用户推荐相关的文献。
可以使用推荐算法或根据标签和分类来进行相关性匹配，提高用户的浏览体验。
8. 文献格式转换：提供文献格式转换的功能，使用户能够方便地将文献转换为不同的格式，如PDF、EPUB等。
9. 文献版权保护：确保文献版权的合法性，遵守相关的版权法律法规。
可以设置合适的文献下载权限和分享方式，保护文献作者的权益。
通过以上方案，可以搭建一个功能完善、用户友好的文库站点。
请确保文中没有相同的标题文字。
站点建立及网页文档操作
静态网页文档的基本操作
新建文档的两种常用方法及文档的保存
文件/打开，可以将保存好的文件打开，如图 静态网页文档的基本操作
认识Dreamweaver 认识Dreamweaver 静态网页文档的基本操作
文件/打开，可以将保存好的文件打开，如图
<html>
<head> 头部信息
</head>
<body> 文档主题信息，即显示在浏览器主窗体中的信息
四、HTML文档的语法结构分析 网页文档的基本语法结构<html>
<head>
2.打开文档 头部信息 </head>
<body>
文档主题信息，即显示在浏览器主窗体中的信息
– </body>
</html>
文件/打开，可以将保存好的文件打开，如图
文件/打开，可以将保存好的文件打开，如图
第一讲 站点的建立及网页文档操作
窗体中的信息 </body>
</html>
课后小结
本讲主要讲述了Dreamweaver工作界面 管理站点的管理 静态网页文档的基本操作 网页文档的基本语法格式
• 模仿练习
– 模仿本讲课内容，创建自己的个人站点，并制 作简单的一句话网页，切换网页试图模式为“ 拆分试图”，观察起文档基本语法格式。
第一讲 站点的建立及网页文档操作
教学重、难点
认识Dreamweaver 静态站点的创建 网页文档的基本操作
网页文档的基本语法结构
难点
一、Dreamweaver的工作环境
注： ①标题栏 ②菜单栏 ③插入栏 ④文档工具栏 ⑤状态栏 ⑥浮动面板
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一讲站点建立及网页文档操作【教学内容】∙Dreamweaver界面∙个人站点创建为例讲述静态站点的创建∙个人网页为例讲述静态网页文档的基本操作∙分析网页文档的HTML结构【教学目的】∙了解Dreamweaver工作界面∙掌握静态站点的创建∙掌握静态网页文档的基本操作∙掌握HTML基本语法结构【教学重、难点】∙重点：掌握静态站点的创建、静态网页文档的基本操作、HTML基本语法结构∙难点：HTML基本语法结构【教学方式】采取讲授、讨论和案例分析相结合的方式。
【教学课时】5节一、Dreamweaver的工作环境图2-1-1 Dreamweaver工作环境注：①标题栏、②菜单栏、③插入栏④文档工具栏、⑤状态栏、⑥浮动面板1.标题栏位于窗口顶端，它的最左边是Dreamweaver标记。
2.菜单栏主窗口中的菜单栏对整个环境下的所有窗口提供菜单控制。
这些菜单允许用户方便地管理整个主窗口的布局，配置Dreamweaver环境，获得在线帮助。
“文件”菜单包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。
“编辑”菜单包含选择和搜索命令，例如“选择父标签”和“查找和替换”。
“编辑”菜单还提供对DW菜单中“首选参数”的访问。
“查看”菜单使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。
“插入”菜单提供“插入”栏的替代项，用于将对象插入文档。
“修改”菜单使您可以更改选定页面元素或项的属性。
使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。
“文本”菜单使您可以轻松地设置文本的格式。
“命令”菜单提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。
“站点”菜单提供用于管理站点以及上传和下载文件的菜单项。
“窗口”菜单提供对DW中的所有面板、检查器和窗口的访问。
“帮助”菜单提供对Dreamweaver文档的访问，包括关于使用Dreamweaver以及创建Dreamweaver扩展功能的帮助系统，还包括各种语言的参考材料。
3.插入栏“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。
当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。
某些类别具有带弹出菜单的按钮。
从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。
例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。
每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。
“插入”栏按以下的类别进行组织：“常用”类别使您可以创建和插入最常用的对象，例如图像和表格。
“布局”类别使您可以插入表格、div 标签、层和框架。
您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。
当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。
“表单”类别包含用于创建表单和插入表单元素的按钮。
“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。
“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。
“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。
“应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。
“Flash 元素”类别使您可以插入 Flash 元素。
“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
4.文档工具栏文档工具栏中包含按钮，这些按钮可以快速切换文档的不同视图：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。
工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
显示代码视图：仅在“文档”窗口中显示“代码”视图。
显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。
当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。
请使用该选项指定在“文档”窗口的顶部显示哪种视图。
显示设计视图：仅在“文档”窗口中显示“设计”视图。
标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏中。
如果文档已经有了一个标题，则该标题将显示在该区域中。
没有浏览器/检查错误：使您可以检查跨浏览器兼容性。
文件管理：显示“文件管理”弹出菜单。
在浏览器中预览/调试：在浏览器中预览或调试文档。
从弹出菜单中选择一个浏览器。
刷新设计视图：当您在“代码”视图中进行更改后刷新文档的“设计”视图。
视图选项：允许您为“代码”视图和“设计”视图设置选项。
5.状态栏标签选择器：显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签以选择该标签及其全部内容。
比如：单击 <body> 可以选择文档的整个正文。
窗口大小：弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
6.浮动面板组Dreamweaver面板组中选定的面板显示为一个选项卡。
每个面板组都可以展开或折叠，并且可以和其它面板组停靠在一起（或取消停靠）。
面板组还可以停靠到集成的应用程序窗口中，这使得能够很容易地访问所需的面板，而不会使工作区变得混乱。
用户可以通过“编辑/首选参数”设置面板首选参数。
二、设置站点Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。
Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。
创建Web 站点的第一步是规划。
为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。
决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。
1．创建一个个人站点选择站点-->管理站点，出现“管理站点”对话框。
单击“新建”，从弹出式菜单中选择“站点”，出现“站点定义”对话框，如图2-1-2，在该对话框中输入站点名字。
图2-1-2单击“下一步”。
出现向导的下一个界面，询问用户是否要使用服务器技术。
选择“否”选项，指示目前该站点是一个静态站点，没有动态页，如图2-1-3。
图2-1-3继续“下一步”。
出现向导的下一个界面，询问用户要如何使用文件，如图2-1-4。
选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。
并设置好站点文件夹存放的位置。
图2-1-4单击“下一步”，出现向导的下一个界面，询问用户如何连接到远程服务器。
从弹出式菜单中选择“无”,如图2-1-5。
图2-1-5单击“下一步”，该向导的下一个屏幕将出现，其中显示用户站点设置概要，如图2-1-6。
图2-1-6单击“完成”完成设置，此时，站点建立完成，完成后站点管理窗口如图2-1-7，创建好后的站点在文件面板中的表现如图2-1-8。
图2-1-7 站点管理窗口图2-1-8 文件面板2.管理站点站点/管理站点，将出现管理站点对话框，如图2-1-7，选择“编辑命令”可以对站点设置进行修改，选择“删除”，站点将被删除掉。
3.站点内文档操作站点建立好后，用户可以在文件面板里看到相应的站点信息，如图2-1-7 。
右键点击站点名，可以在站点内新建文件和文件夹。
同时也可以选择编辑命令对建好的文件或文件夹进行删除等基本操作。
三、文档基本操作1.新建个人网页文档通过引导页也可以通过文件菜单来创建个人网页的HTML文档，如图如图2-1-9所示。
图2-1-9通过文件菜单--->新建命令创建文档，弹出如图如图2-1-10所示对话框，选择【基本页】-->【HTML】即可创建HTML文档。
图2-1-103.保存个人网页文档为“index.htm”。
效果如图如图2-1-11所示图2-1-11选择文件/另存为，在“另存为”对话框中，浏览到站点本地根文件夹下，填入文件名，保存退出。
（注意：网页文档的保存格式为“*.htm或/&.html”）2.个人网页文档为“index.htm”的HTML框架结构分析点击文档工具栏的“拆分”视图模式，把index.htm切换到混合模式视图，查看空白页面的HTML 代码。
如图2-1-12所示。
图2-1-12HTML文档分为文件头（HEAD）和文件体（BODY）两部分。
文件头对这个文件进行了一些必要的定义，而文件体的部分才是要显示在网页中的各种信息。
HTML文档的框架结构如下：<html>标记是告诉浏览器这是HTML文件的开始，最后一个</html>用来告诉浏览器HTML文档的终止位置。
<Head>与</Head>标记之间是文件的头部信息，在浏览器中，头部信息是不被显示的，他能显示在浏览器的标题栏里。
<Body>与</Body>标记之间的程序是正文部分。
他们显示在浏览器窗口内。
因此，凡是要在网页中显示的信息，相应的程序要写在该对标记之间。
【课后小结】本讲主要讲述了Dreamweaver工作界面、管理站点的管理和静态网页文档的基本操作，以及网页文档的基本语法格式。
【练习题】填空：1.HTML(超文本标志语言)是英文____________________的缩写。
2.__________标志用于HTML文档的最前边，用来标识HTML文档的开始。
3.HTML文档的扩展名为____________________或者____________________选择题：1. HTML是一种页面()型的语言。
A. 程序设计 B. 执行 C. 编译 D. 描述2. 为了标识一个HTML文档应该使用的HTML标记是()。
A. <P>与</P>B. <BODY>与</BODY>C. <HTML>与</HTML>D. <TABLE>与</TABLE>3.HTML中，用来表示主题标签的是（）。
A．〈head〉〈/head〉B．〈body〉〈/body〉C．〈title〉〈/title〉D．〈html〉〈/html〉问答题：1.熟悉Dreamweaver界面，掌握站点管理及站内HTML文档的创建。
2.什么是HTML？一个简单的HTML文档至少应该包括哪些标记？模仿练习模仿本讲课内容，创建自己的个人站点，并制作简单的一句话网页，切换网页试图模式为“拆分试图”，观察起文档基本语法格式。