第六课_设计网站和制作首页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<meta http-equiv=Content-Typecontent=text/html;charset=gb2312>它表示强制浏览器编 码设为简体中文(GB2312)。这一句的作用是相当关键的，在制作网页的过程中千万不可省略。它可 以加在网页中的任意部分，最好加在<head>与</head>之间。(FrontPage和Dreamweaver在 创建的新网页当中已包含这句) 在过去，省略<meta http-equiv=Content-Type content=text/html;charset=gb2312>这句网页也往往可正常显示。但是现在WindowsXP的 IE6.0又支持简体中文(GB18030)，是采用1/2/4 Bytes混合编码，但它并不会完全兼容GB2312。 若网页中省略了<meta http-equiv=Content-Type content=text/html;charset=gb2312>这句，WinXP浏览器会默认为GB18030，网页中会出 现部分乱码. 要注意的就是，<meta http-equiv=Content-Type content=text/html;charset=gb2312>这句不能写在js文件中，否则仍不起作用，浏览器编码 会默认为GB18030。 但是样式表语句可写在js文件中，唯独<meta>语句不可以。
附加：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=“http://www.w3.org/1999/xhtml”>表示创建该网页的文档符合w3c标准。
在站点规划中合理地为文件和文件夹进行命名也非常重要，好的名称容易理解， 能够表 达出网页的内容。可以采用与文件或文件夹内容相对应的英文或拼音 英文或拼音来命名，且避 英文或拼音 免使用长 文件名和中文，比如图片文件夹可以命名为images或tupian。 制作网页所需的图片或动画等文件存放的位置也是规划站点结构时应考虑的。如果 是大型 站点，可在站点根目录下创建一个名称为images的文件夹，用以存放主页中用到的 图片和 动画。 3. 制作导航流程 做好站点的规划后，就可以根据规划制作一个导航流程图，以便理清思路，制作时 可直接 在纸上粗略地绘出导航流程图。如图p49上的 4. 绘制页面草图 制作好导航流程图后，接下来应确定整个站点的页面风格，也就是设计站点的样式 和版面 草图。它可以用Photoshop、CorelDRAW和Fireworks等图形软件制作。
（6）单击“下一步”按钮，在弹出的对话框中选择“否，不启用存回和取出”，如 图所示。 如果您在协作环境 中工作，则可以在本地 和 中存回和取出文件。 取出文件等同于声 明“我正在处理这个文 件，请不要动它！”文 件被取出后， Dreamweaver 会在 “文件”面板中显示取 出这个文件的人的姓名， 并在文件图标的旁边显 示一个红色选中标记 （如果取出文件的是小 组成员）或一个绿色选 中标记（如果取出文件 的是您）。 存回文件使文件可供其 他小组成员取出和编辑。
（7）单击“下一步”按钮，显示创建的站点信息，如果需要修改设置可以单击“上一步 按钮，如果没有问题，单击“完成”按钮关闭对话框。至此，操作完毕。如图所示。
上机作业
1、【实战训练一】第1－3步骤 2、【拓展实战二】HTML文档的基本结构的操作
本讲小结
1.1.1网页制作的基本概念 网页制作的基本概念 1.1.2 Dreamweaver 8 的工作界面 1.1.3 HTML命令 命令 1.1.4 创建本地站点
（3）在对话框中输入wenku.baidu.com点名称如“root“后单击按钮，如图所示。
（4）在弹出的对话框中选是否使用服务器技术，由于我们在本 地硬盘上进行测试，所以这里选择“否，我不想使用服务器技术” 单选按钮，如图所示，单击“下一步”按钮。
（5）由于我们将在本地硬盘上进行站点的制作和测试，因此在弹出的对话框中选择“编辑 我的计算机上的本地副本，完成后再上传到服务器”单选按钮（如下图所示），在该对话框 中还要选择站点文件的存放位置，可在文本框中直接输入，也可以单击文本框旁边的浏览 按钮，在打开的“选择站点root的本地根文件夹：”对话框中选择存放站点文件的文件夹， 然后选择需存放的位置即可。
【操作步骤】 （1）启动Dreamweaver, 选择【创建新项目】→【HTML】菜单命令。 （2）选择“代码”项。 （3）输入如下代码：
<html VERSION="http://www.w3.org/1999/xhtml"> <head> <title>简单HTML文件的编写教程</title> <style type="text/css"> <!-.STYLE1 { font-family: "华文行楷"; font-size: 18px; font-weight: bold; } .STYLE2 { font-size: 16px; font-weight: bold; } .STYLE3 {font-size: 14px} --> </style> </head> <body> <p class="STYLE1">初中二年级信息技术2</p> <p class="STYLE2">第6课 设计网页与制作首页</p> <p>本章主要介绍网页的基本概念及HTML语言等。</p> <p class="STYLE3"><strong>6.1 网页的基本概念</strong></p> <p class="STYLE3"><strong>6.2 HTML命令</strong></p> <p>6.2.1 HTML语言的基本语法</p> <p>6.2.2 HTM语言的基本结构 </p> </body> </html>
（5） 按F12，运行后结果将如教材所示。至此，操作完毕。
1.4 站点的创建
1.4.1站点的规划 站点的规划 在制作网页之前，应先对要制作的网站的站点进行规划和创建，这样就可利用站点的管理 功能对站点中的文件进行管理或测试。 1. 认识站点 在Dreamweaver 8中提供了本地站点、远程站点和测试站点3种类型的站点。通过本地站 点和远程站点可以在本地磁盘和Web服务器之间传输文件，通过测试站点可以对动态站点 进行测试。 （1） 本地站点 本地站点是用户工作的目录，是存放用户网页、素材等的本地文件夹。在制作一般网页时 只需建立本地站点即可。 （2） 远程站点 若需要不连接Internet就能对所建的站点进行测试，可以在本地电脑上创建远程站点模拟真 实的Web服务器环境进行测试。 （3） 测试站点 测试站点主要是对动态页面进行测试时使用，是Dreamweaver处理动态页面的文件夹。 Dreamweaver使用此文件夹生成动态内容并在工作时连接到数据库。 2. 规划站点结构 规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站 点结构，可提高工作效率。 在规划站点结构时应先在本地磁盘上创建一个文件夹作为站点的根目录，所有在制作过 程中创建和编辑的网页都应当保存在该文件夹中。在发布站点时，只需将此文件夹中的 所有内容上传到Web服务器上即可。如果站点结构复杂，内容较多，则还需建立子文件 夹，以存放不同内容的网页。
【任务6-1-2】创建本地站点
【操作要求】 在“D:\”盘 新建文件夹personal web ，然后创建 一个新的本地站点my web。
【操作步骤】 （1）选择【站点】 【管理站点】菜单命令，弹出“管理 站点”对话框。 （2）选择“新建”按钮,在弹出的下拉菜单中选择“站点”命 令，具体操作如图所示。
第六课 设计网站与制造首页
6.3.2 HTML文档的基本结构 文档的基本结构 一个HTML文档是由标记和文本内容组成，其结构如下： <HTML> <HEAD> <TITLE> …… </TITLE> </HEAD> <BODY> …… </BODY> </HTML>
【任务6-1-1】创建简单的HTML文件