实训1 实现简单学院网站

实现简单学院网站

第一步：创建站点

打开DW，选择快速打开>站点设置

更改站点名称和本地站点文件夹，在D:\网页设计\源码\chapter2目录下创建文件夹“schoolSite”,作为网站根目录，选择好后点击右下角保存。

保存后软件右栏出现文件面板，其中显示了我们刚创建的站点

在站点中创建images文件夹，存放网站中用到的素材。将图像文件素材复制到该文件夹中

实训1 实现简单学院网站

创建首页

学习目标：掌握列表标记、图像标记、超链接标记、特殊字符

第一步：设置好站点的前提下，快速打开>HTML文档>文件>保存>保存文件名为index.html

注：如果创建的html文件没有出现实时预览图，点击上方的“拆分”，如果没有拆分这一选项，将软件右上角的“开发人员”重新选为“标准”。

第二步：确定布局（头部，主体，脚部）

用选择器为wrap的盒子包住网页的所有内容，给他设置外边距（margin）的值为8个像素（8px）

第二步：往框架里添加内容，设置头部内容（header），添加网站标题和导航栏

（这里标题直接插入图片代替，图片来源为江西环境工程职业学院官网）

第三步：往主体部分添加图片

第四步：往尾部添加友情链接

实训1 实现简单学院网站

创建学院简介页面

学习目标：掌握“返回”超链接、锚点链接、强调文字标记

第一步：创建学院简介页面

在DW文件面板中右键单击站点名称，选择新建文件，将文件名改为intr.html

第二步，页面布局，设置<header><div class="content">和<footer>标签

第三步：往头部添加标题和指向锚点的链接

第四步：往主体添加文字并定义锚点

第五步：添加尾部友情链接，步骤同创建首页相同